/// <reference types="google.fonts" />
/// <reference types="react" />
import { HTMLMotionProps } from 'framer-motion';
import { List } from 'immutable';
import { ListenerFn } from 'eventemitter3';
import { MotionStyle } from 'framer-motion';
import { MotionTransform } from 'framer-motion';
import { MotionValue } from 'framer-motion';
import { PanInfo } from 'framer-motion';
import * as React from 'react';
import { ReactNode } from 'react';
import { Record } from 'immutable';
import { RefObject } from 'react';
import { Spring } from 'framer-motion';
import { Transition } from 'framer-motion';
import { Tween } from 'framer-motion';
import { useDeprecatedInvertedScale as useInvertedScale } from 'framer-motion';
import { Variants } from 'framer-motion';

/* Excluded from this release type: Action */

/* Excluded from this release type: ActionControlDescription */

/* Excluded from this release type: ActionControls */

/* Excluded from this release type: ActionHandler */

/* Excluded from this release type: ActionInfo */

declare interface ActionMap<State> {
    [key: string]: (state: State, data?: any) => State;
}

/* Excluded from this release type: addActionControls */

/**
 * Extends component with property controls
 *
 * ```typescript
 * export const MyComponent = props => <h1>{props.header}</h1>
 *
 * addPropertyControls(MyComponent, {
 *   header:  { type: ControlType.String, title: "Header" },
 * })
 *
 * ```
 * @public
 */
export declare function addPropertyControls<Props = any>(component: React.ComponentType<Props>, propertyControls: PropertyControls<Props>): void;

/**
 * Creates a Animatable object that can be animated. These objects can be passed into a {@link DeprecatedFrame} instead of a primitive like number
 * and afterwards animated with {@link (animate:function)}.
 * @remarks
 * ```jsx
 * const value = Animatable(0)
 * animate(value, 100)
 * ```
 * @param value - Value to animate
 * @returns Animatable value
 * @public
 * @deprecated Use {@link useMotionValue} instead
 */
export declare function Animatable<Value>(value: Value | Animatable<Value>): Animatable<Value>;

/**
 * @public
 * @deprecated Use {@link useMotionValue} instead
 */
export declare interface Animatable<Value> extends UpdateObserver<Value> {
    /**
     * Get the current value out of this Animatable object
     * @remarks
     * ```jsx
     * const a = Animatable(0)
     * a.get() // returns 0
     * await animate(a, 42)
     * a.get() // returns 42
     * ```
     * @returns Current value
     * @public
     */
    get(): Value;
    /**
     * Set a new value to a animatable object
     * @remarks
     * The passed value can be an Animatable value too
     * ```jsx
     * const a = Animatable(0)
     * const b = Animatable(100)
     * a.set(42)
     * a.get() // returns 42
     * a.set(b)
     * a.get() // returns 100
     * ```
     * @param value - New value to set to the animatable
     * @public
     */
    set(value: Value | Animatable<Value>): void;
    /**
     * @public
     */
    set(value: Value | Animatable<Value>, transaction?: TransactionId): void;
    /* Excluded from this release type: finishTransaction */
}

/**
 * @public
 */
export declare namespace Animatable {
    /* Excluded from this release type: transaction */
    /**
     * @public
     */
    export function getNumber(value: number | Animatable<number> | null | undefined, defaultValue?: number): number;
    /* Excluded from this release type: get */
    /* Excluded from this release type: objectToValues */
}

/** @public */
export declare type AnimatableObject<T> = {
    [K in keyof T]: ToAnimatableOrValue<T[K]>;
};

/**
 * Animate a single value or a `MotionValue`.
 *
 * The first argument is either a `MotionValue` to animate, or an initial animation value.
 *
 * The second is either a value to animate to, or an array of keyframes to animate through.
 *
 * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
 *
 * Returns `PlaybackControls`, currently just a `stop` method.
 *
 * ```javascript
 * const x = useMotionValue(0)
 *
 * useEffect(() => {
 *   const controls = animate(x, 100, {
 *     type: "spring",
 *     stiffness: 2000,
 *     onComplete: v => {}
 *   })
 *
 *   return controls.stop
 * })
 * ```
 *
 * @public
 *
 * @deprecated
 */
export declare function animate<Value, Options>(from: DeprecatedAnimationTarget<Value>, to: Value, animator?: AnimatorClass<Value, Options>, options?: Partial<Options & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, Options>;

/** @public */
export declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions<V>): PlaybackControls;

/**
 * @public
 * @deprecated Use the {@link MotionProps.animate} prop on {@link Frame} instead.
 */
export declare namespace animate {
    /**
     * Animate value with a spring curve
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.spring(value, 100, {tension: 100, friction: 100})
     *
     * animate.spring(value, 100, {dampingRatio: 0.5, duration: 1})
     * ```
     * @param from - Value to animate
     * @param to - Value to animate to
     * @param options - Options for the spring
     * These can be either `tension`, `friction`, `velocity` and `tolerance` _or_ `dampingRatio`, `duration`, `velocity` and `mass`
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function spring<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<SpringOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, SpringOptions>;
    /**
     * Animate value with a bezier curve
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.bezier(value, 100, {duration: 1, curve: Bezier.EaseIn})
     *
     * animate.bezier(value, 100, {duration: 1, curve: [0.3, 0.1, 0.4, 1]})
     * ```
     * @param from - Value to animate
     * @param to - Value to animate to
     * @param options - Options for the bezier curve
     *
     * - `duration` Duration of the animation
     * - `curve` One of the `Bezier` enum values or an array with 4 control points
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function bezier<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<BezierOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
    /**
     * Animate value with a linear animation
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.linear(value, 100)
     *
     * animate.linear(value, 100, {duration: 1})
     * ```
     * @param from  - Value to animate
     * @param to - Value to animate to
     * @param options - The options for the animation
     *
     * - `duration` - Duration of the animation
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function linear<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
    /**
     * Animate value with a ease animation
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.ease(value, 100)
     *
     * animate.ease(value, 100, {duration: 1})
     * ```
     * @param from  - Value to animate
     * @param to - Value to animate to
     * @param options - The options for the animation
     *
     * - `duration` - Duration of the animation
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function ease<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
    /**
     * Animate value with a ease in animation
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.easeIn(value, 100)
     *
     * animate.easeIn(value, 100, {duration: 1})
     * ```
     * @param from  - Value to animate
     * @param to - Value to animate to
     * @param options - The options for the animation
     *
     * - `duration` - Duration of the animation
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function easeIn<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
    /**
     * Animate value with a ease out animation
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.easeOut(value, 100)
     *
     * animate.easeOUt(value, 100, {duration: 1})
     * ```
     * @param from  - Value to animate
     * @param to - Value to animate to
     * @param options - The options for the animation
     *
     * - `duration` - Duration of the animation
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function easeOut<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
    /**
     * Animate value with a ease in out animation
     * @remarks
     * ```jsx
     * const value = Animatable(0)
     * animate.easeInOut(value, 100)
     *
     * animate.easeInOut(value, 100, {duration: 1})
     * ```
     * @param from  - Value to animate
     * @param to - Value to animate to
     * @param options - The options for the animation
     *
     * - `duration` - Duration of the animation
     *
     * @returns Instance of {@link FramerAnimation} that can be used to control the animation
     * @deprecated Use {@link MotionProps.animate} on {@link Frame} instead.
     */
    export function easeInOut<Value>(from: DeprecatedAnimationTarget<Value>, to: Value, options?: Partial<EaseOptions & DeprecatedAnimationOptions<Value>>): FramerAnimation<Value, BezierOptions>;
}

/* Excluded from this release type: AnimationDriver */

/**
 * @public
 */
declare interface AnimationInterface {
    /* Excluded from this release type: play */
    cancel(): void;
    /* Excluded from this release type: finish */
    isFinished(): boolean;
}

declare type AnimationOptions<V> = (Tween | Spring) & PlaybackLifecycles<V> & {
    delay?: number;
    type?: "tween" | "spring";
};

declare type AnimationOptions_2 = (Tween | Spring) & {
    delay?: number;
    type?: "tween" | "spring";
};

/* Excluded from this release type: Animator */

/**
 * @public
 * @deprecated  Use the `transition` prop instead
 */
declare interface AnimatorClass<Value, Options = any> {
    /* Excluded from this release type: __new */
}

/* Excluded from this release type: annotateTypeOnStringify */

/* Excluded from this release type: AnyInterpolation */

/** @public */
export declare interface ArrayControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Array;
    control: ArrayItemControlDescription<P>;
    /** @deprecated: This property has been renamed to control. */
    propertyControl?: ArrayItemControlDescription<P>;
    maxCount?: number;
    defaultValue?: any[];
}

/**
 * Array sub type
 * @public
 */
export declare type ArrayItemControlDescription<P = any> = Omit<NumberControlDescription<P>, "hidden"> | Omit<EnumControlDescription<P>, "hidden"> | Omit<BooleanControlDescription<P>, "hidden"> | Omit<StringControlDescription<P>, "hidden"> | Omit<ColorControlDescription<P>, "hidden"> | Omit<FusedNumberControlDescription<P>, "hidden"> | Omit<SegmentedEnumControlDescription<P>, "hidden"> | Omit<ImageControlDescription<P>, "hidden"> | Omit<FileControlDescription<P>, "hidden"> | Omit<ComponentInstanceDescription<P>, "hidden"> | Omit<TransitionControlDescription<P>, "hidden"> | Omit<ObjectControlDescription<P>, "hidden">;

/* Excluded from this release type: Asset */

/* Excluded from this release type: AssetContext */

/* Excluded from this release type: AssetProperties */

/* Excluded from this release type: AssetResolver */

/**
 * Enable or disable the automatic generation of layout ids for canvas layers.
 * By default layout ids are generated for all layers created on the Framer
 * canvas. However, layout ids are not generated for any layer that is a
 * descendant of a code component. Sometimes you will want to enable layout id
 * generation for descendants of your code components when they use children,
 * slots, or import design components, and you want those layers to animate with
 * magic motion transitions.
 *
 * You can enable that behavior by wrapping your code component like this
 * ```typescript
 * <AutomaticLayoutIds enabled>
 *  <YourComponent/>
 * </AutomaticLayoutIds>
 * ```
 * @public
 */
export declare function AutomaticLayoutIds({ enabled, ...props }: React.PropsWithChildren<{
    enabled?: boolean;
}>): JSX.Element;

/* Excluded from this release type: Axis */

/** @public */
export declare type Background = Color | Gradient | BackgroundImage | MotionValue<string> | string;

/** @public */
export declare interface BackgroundFilterProperties {
    backgroundBlur: number;
}

/** @public */
export declare interface BackgroundImage {
    src: string;
    pixelWidth?: number;
    pixelHeight?: number;
    intrinsicWidth?: number;
    intrinsicHeight?: number;
    fit?: ImageFit;
}

/** @public */
export declare namespace BackgroundImage {
    const isImageObject: (image: any) => image is object & BackgroundImage;
}

/* Excluded from this release type: backgroundImageFromProps */

/* Excluded from this release type: BackgroundImageProps */

/** @public */
export declare interface BackgroundProperties {
    /**
     * Set the background of a `Frame`. Supports color strings, color objects and images by using `src`. Set to a semi-transparent blue color by default.
     * This will override the values set by the `image` property. To use a color and a image, use `backgroundColor` instead
     * ```jsx
     * <Frame background="#09F"/>
     * <Frame background={Color({r: 255, g: 0, b: 102})} />
     * <Frame background={{ alpha: 1, angle: 75, start: "#09F", end: "#F09"}} />
     * <Frame background={{ src: "https://example.com/logo.png"}} />
     * ```
     * @public
     */
    background: Background | null;
    /**
     * Set the background color of a `Frame`. Supports color strings and objects. Use this property to set a background color alongside the `image` property.
     * ```jsx
     * <Frame backgroundColor="#09F"/>
     * <Frame backgroundColor={Color({r: 255, g: 0, b: 102})} />
     * ```
     * @public
     */
    backgroundColor: string | Color;
    /**
     * Sets a background image of a `Frame`. Will wrap the passed value in a `url('')` if needed.
     * @remarks
     * ```jsx
     * <Frame image="https://source.unsplash.com/random" />
     * ```
     * @public
     */
    image: string;
}

/** @public */
export declare interface BaseControlDescription<P = any> {
    title?: string;
    hidden?(props: P): boolean;
}

/**
 * @remarks do no use separately from FrameProps
 * @public
 * */
export declare interface BaseFrameProps {
    /**
     * Add a name to the Frame. This property does not change the behaviour of a Frame, but makes it easier to identify it in your code.
     * @remarks
     * The name will be rendered in the `data-framer-name` attribute of the outputted div, so the Frame is recognizable in the HTML DOM too.
     * ```jsx
     * <Frame name={"Button"} />
     * ```
     * @public
     */
    name: string;
    /* Excluded from this release type: _border */
    /* Excluded from this release type: _initialStyle */
    /* Excluded from this release type: _overrideForwardingDescription */
}

/**
 * @public
 */
declare enum Bezier {
    Linear = "linear",
    Ease = "ease",
    EaseIn = "ease-in",
    EaseOut = "ease-out",
    EaseInOut = "ease-in-out"
}

/* Excluded from this release type: BezierAnimator */

declare interface BezierOptions {
    curve: Curve;
    duration: number;
}

/** @public */
export declare type BlendingMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity";

/** @public */
export declare interface BlendingProperties {
    blendingMode: BlendingMode;
}

/** @public */
export declare interface BooleanControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Boolean;
    defaultValue?: boolean;
    disabledTitle?: string;
    enabledTitle?: string;
}

/* Excluded from this release type: BorderProperties */

/** @public */
export declare type BorderStyle = "solid" | "dashed" | "dotted" | "double";

declare type BoundActionMap<State, Actions extends ActionMap<State>> = {
    [K in keyof Actions]: (data?: Parameters<Actions[K]>[1]) => void;
};

/** @public */
export declare interface BoxShadow {
    inset: boolean;
    color: string;
    x: number;
    y: number;
    blur: number;
    spread: number;
}

/** @public */
export declare namespace BoxShadow {
    export function is(shadow: any): shadow is BoxShadow;
    export function toCSS(shadow: BoxShadow): string;
}

/** @public */
export declare interface BoxShadowProperties {
    shadows: Readonly<BoxShadow[]>;
}

declare interface BoxShadowProperties_2 {
    shadows: Readonly<BoxShadow[]>;
}

/* Excluded from this release type: calculateRect */

/* Excluded from this release type: callEach */

/** @public */
export declare type Cancel = () => void;

/* Excluded from this release type: CanvasStore */

declare interface Change<Value> {
    value: Value;
    oldValue?: Value;
}

declare type ClassName = string | false | void | null | 0;

/* Excluded from this release type: CodeComponentPresentation */

/* Excluded from this release type: collectVisualStyleFromProps */

/**
 * The Color function can be used to define colors, either as a string value or as an object. All colors
 * are converted to a Color object with `r, g, b`, `h, s, l` and an `a` value.
 * There are also various helpers on the Color function for working with,
 * modifying and detecting colors.
 *
 * ```jsx
 * // HEX
 * const blue = Color("#0099FF")
 *
 * // RGB
 * const blue = Color("rgb(0, 153, 255)")
 * const blue = Color(0, 153, 255)
 * const blue = Color({r: 0, g: 153, b: 255})
 * const blue = Color({r: 0, g: 153, b: 255, a: 1})
 *
 * // HSL
 * const blue = Color("hsl(204, 100%, 50%)")
 * const blue = Color({h: 204, s: 1, l: 0.5})
 * const blue = Color({h: 204, s: 1, l: 0.5, a: 1})
 * ```
 * @public
 */
export declare function Color(color: IncomingColor | Color | number, r?: number, g?: number, b?: number): Color;

/**
 * @public
 */
export declare interface Color {
    r: number;
    g: number;
    b: number;
    h: number;
    s: number;
    l: number;
    a: number;
    roundA: number;
    format: ColorFormat;
    initialValue?: string;
    isValid?: boolean;
    mix: Mixer | MixerStateful;
    toValue: () => string;
}

/**
 * @public
 */
export declare namespace Color {
    /**
     * Formats a Color object into a readable string for debugging.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.inspect(blue)
     * ```
     *
     * @param color - The Color object to format
     * @param initialValue - A canonical hex string to be used instead of an rgba() value.
     */
    export function inspect(color: Color, initialValue?: string): string;
    /**
     * Checks if the value is a valid color object or color string. Returns true or false.
     *
     * @remarks
     * ```jsx
     * Color.isColor("#0099FF") // true
     * Color.isColor(Color("#0099FF")) // true
     * ```
     *
     * @param color - The potential color value to validate
     */
    export function isColor(color: string | Color): boolean;
    /**
     * Checks if the value is a valid color string. Returns true or false.
     *
     * @remarks
     * ```jsx
     * Color.isColorString("#0099FF") // true
     * ```
     *
     * @param color - A string representing a color
     */
    export function isColorString(colorString: string | object): boolean;
    /**
     * Checks if the value is a valid Color object. Returns true or false.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.isColorObject(blue) // true
     * Color.isColorObject("#0099FF") // false
     * ```
     *
     * @param color - An object representing a color.
     */
    export function isColorObject(color: any): color is object & Color;
    /**
     * Formats a Color instance into an RGB string.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toString(blue) // "rgb(0, 153, 255)"
     * ```
     *
     * @param color - The color to format
     */
    export function toString(color: Color): string;
    /**
     * Formats a Color instance into an hexidecimal value.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHex(blue) // "0099FF"
     * Color.toHex(Color("#FFAAFF"), true) // "FAF"
     * ```
     *
     * @param color - The color to format
     * @param allow3Char - If true will return short hand colors if possible (defaults to false).
     */
    export function toHex(color: Color, allow3Char?: boolean): string;
    /**
     * Formats a Color instance into an hexidecimal string.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHexString(blue) // "#0099FF"
     * Color.toHexString(Color("#FFAAFF"), true) // "#FAF"
     * ```
     *
     * @param color - The color to format
     * @param allow3Char - If true will return short hand colors if possible (defaults to false).
     */
    export function toHexString(color: Color, allow3Char?: boolean): string;
    /**
     * Formats a Color instance into an RGB string.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toRgbString(blue) // "rgb(0, 153, 255)"
     * ```
     *
     * @param color - The color to format
     */
    export function toRgbString(color: Color): string;
    /**
     * Formats a Color instance into an HUSL object.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHusl(blue) // {h: 250, s: 100, l: 50, a: 1}
     * ```
     *
     * @param color - The color to format
     */
    export function toHusl(color: Color): ColorHSLA;
    /**
     * Formats a Color instance into an HSL string.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHslString(blue) // "hsl(204, 100%, 50%)"
     * ```
     *
     * @param color - The color to format
     */
    export function toHslString(color: Color): string;
    /**
     * Formats a Color instance into an HSV object.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHsv(blue) // {h: 204, s: 1, v: 1, a: 1}"
     * ```
     *
     * @param color - The color to format
     */
    export function toHsv(color: Color): ColorHSVA;
    /**
     * Formats a Color instance into an HSV string.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHslString(blue) // "hsv(204, 100%, 50%)"
     * ```
     *
     * @param color - The color to format
     */
    export function toHsvString(color: Color): string;
    /**
     * Formats a Color instance into {@link https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ | CSS name}
     * or returns false if unspecified.
     *
     * @remarks
     * ```jsx
     * const green = Color("#8FBC8F")
     *
     * Color.toName(green) // "darkseagreen"
     * ```
     *
     * @param color - The color to format
     */
    export function toName(color: Color): string | false;
    /**
     * Formats a color into an HSL object.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toHsl(blue) // {h: 204, s: 1, l: 0.5, a: 1}
     * ```
     *
     * @param color - The color to format
     */
    export function toHsl(color: Color): ColorHSLA;
    /**
     * Formats a color into an RGB object.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * Color.toRgb(blue) // {r: 40, g: 175, b: 250, a: 1}
     * ```
     *
     * @param color - The color to format
     */
    export function toRgb(color: Color): ColorRGBA;
    /**
     * Returns a brightened color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const brightblue = Color.lighten(blue, 20)
     * ```
     *
     * @param color - The color to brighten
     * @param amount - A number, from 0 to 100. Set to 10 by default.
     */
    export function brighten(color: Color, amount?: number): Color;
    /**
     * Add white and return a lightened color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const lightblue = Color.lighten(blue, 20)
     * ```
     *
     * @param color - The color to lighten
     * @param amount - A number, from 0 to 100. Set to 10 by default.
     */
    export function lighten(color: Color, amount?: number): Color;
    /**
     * Add black and return a darkened color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const darkblue = Color.darken(blue, 20)
     * ```
     * @param color - The color to darken.
     * @param amount - A number, from 0 to 100. Set to 10 by default.
     */
    export function darken(color: Color, amount?: number): Color;
    /**
     * Increase the saturation of a color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const saturated = Color.saturate(blue, 100)
     * ```
     * @param color - The color to modify
     * @param amount - A number from 0 to 100. Set to 10 by default.
     */
    export function saturate(color: Color, amount?: number): Color;
    /**
     * Decrease the saturation of a color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const desaturated = Color.desaturate(blue, 100)
     * ```
     * @param color - The color to modify
     * @param amount - A number from 0 to 100. Set to 10 by default.
     */
    export function desaturate(color: Color, amount?: number): Color;
    /**
     * Return a fully desaturated color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const gray = Color.grayscale(blue)
     * ```
     * @param color - The color to convert.
     */
    export function grayscale(color: Color): Color;
    /**
     * Returns a new color for the rotated hue.
     * @param color - The color to manipulate
     * @param angle - The angle in degrees in which to rotate the hue.
     */
    export function hueRotate(color: Color, angle: number): Color;
    /**
     * Set the alpha value, also known as opacity, of the color.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * const transparent = Color.alpha(blue, 0.1)
     * ```
     * @param color - The original color to modify.
     * @param alpha - A number from 1 to 0. Set to 1 by default.
     */
    export function alpha(color: Color, a?: number): Color;
    /**
     * Set the alpha value, also known as opacity, of the color to zero.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     *
     * const transparent = Color.alpha(blue)
     * ```
     * @param color - The original color to modify.
     */
    export function transparent(color: Color): Color;
    /**
     * Change the alpha value, also know as opacity, by a multiplier.
     *
     * @remarks
     * ```jsx
     * const blue = Color("#0099FF")
     * const transparent = Color.multiplyAlpha(blue, 0.5)
     * ```
     * @param color - The original color to modify.
     * @param alphaValue - A number between 1 and 0, defaults to 1,
     */
    export function multiplyAlpha(color: Color, alphaValue?: number): Color;
    /**
     * Returns a function that can be used to transition a color from one value
     * to another. By default this will use the RGB `mix` model. Useful for providing to animation tools.
     *
     * ```jsx
     * const blend = Color.interpolate(Color("red"), Color("blue"))
     *
     * blend(0)   // Initial state (red)
     * blend(0.5) // Mid state (purple)
     * blend(1)   // Final state (blue)
     * ```
     * @param colorA - The starting color
     * @param colorB - The final color
     * @param model  - The model to use for the mix. One of {@link ColorMixModelType}
     */
    export function interpolate(colorA: Color, colorB: Color, model?: ColorMixModelType): (progress: number) => Color;
    /**
     * Create a function that will mix two colors together and output the result as an rgb string.
     *
     * @param colorA - The starting color
     * @param colorB - The final color
     * @param options - Options for the color mixer
     *
     * - `model`: The model to use for the mix. One of {@link ColorMixModelType}
     *
     * @public
     */
    export function mix(from: Color, toColor: Color, { model }?: {
        model?: ColorMixModelType | undefined;
    }): (p: number) => string;
    /**
     * Blend two colors together, optionally based on user input. The fraction defines the
     * distribution between the two colors, and is set to 0.5 by default.
     * The `limit` defines if the color can transition beyond its range.
     * @remarks
     * ```jsx
     * // Mix red with yellow
     * const orange = Color.mix("red", "yellow", 0.5)
     * ```
     *
     * ```jsx
     * Color.mix("red", "yellow", 0.5, true, "husl")
     * ```
     *
     * @param colorA   - A color, the first one.
     * @param colorB   - A color, the second one.
     * @param fraction - An optional number, from 0 to 1, set to 0.5 by default.
     * @param limit    - An optional boolean, set to false by default.
     * @param model    - The model to use for the mix. One of {@link ColorMixModelType}
     */
    export function mixAsColor(colorA: Color, colorB: Color, fraction?: number, limit?: boolean, model?: ColorMixModelType): Color | null;
    /**
     * Returns a Color instance with a random color value set.
     *
     * @remarks
     * ```jsx
     * const random = Color.random()
     * ```
     *
     * @param alphaValue - An optional alpha value, set to 1 by default.
     */
    export function random(alphaValue?: number): Color;
    /**
     * Creates a greyscale color.
     *
     * @remarks
     * ```jsx
     * const gray = Color.gray(0.5)
     * ```
     *
     * @param amount - A number from 0 to 1 representing the amount of white.
     * @param alphaValue  - A number from 0 to 1 representing the alpha. Set to 1 by default.
     */
    export function grey(amount?: number, alphaValue?: number): Color;
    /* Excluded from this release type: gray */
    /* Excluded from this release type: rgbToHsl */
    /* Excluded from this release type: isValidColorProperty */
    /**
     * Calculates the color difference using {@link https://en.wikipedia.org/wiki/Color_difference#Euclidean |
     * Euclidean distance fitting human perception}. Returns a value between 0 and 765
     * @param colorA - A first color.
     * @param colorB - A second color.
     */
    export function difference(colorA: Color, colorB: Color): number;
    /**
     * Checks whether two Color objects are equal.
     *
     * @remarks
     * ```jsx
     * Color.equal(Color("red"), Color("red"))  // true
     * Color.equal(Color("red"), Color("blue")) // false
     *
     * Color.equal(Color("#0099FF"), Color("009AFF"))    // false
     * Color.equal(Color("#0099FF"), Color("009AFF"), 2) // true
     * ```
     *
     * @param colorA    - The first color
     * @param colorB    - The second color
     * @param tolerance - A tolerance for the difference between rgba values. Set to 0.1 by default.
     */
    export function equal(colorA: Color, colorB: Color, tolerance?: number): boolean;
}

/** @public */
export declare interface ColorControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Color;
    defaultValue?: string;
}

/** @public */
export declare enum ColorFormat {
    RGB = "rgb",
    HSL = "hsl",
    HSV = "hsv",
    HEX = "hex",
    NAME = "name"
}

/** @public */
export declare interface ColorHSL {
    h: number;
    s: number;
    l: number;
}

/** @public */
export declare type ColorHSLA = ColorHSL & {
    a: number;
};

/** @public */
declare interface ColorHSV {
    h: number;
    s: number;
    v: number;
}

/** @public */
export declare type ColorHSVA = ColorHSV & {
    a: number;
};

/**
 * Various Color functions, such as {@link (Color:namespace).mix} and {@link
 * (Color:namespace).interpolate}, take an optional color model that
 * determines how two colors are mixed together.
 *
 * @remarks
 *
 * ```javascript
 * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})
 * ```
 *
 * @public
 */
export declare enum ColorMixModelType {
    /**
     * Use the {@link https://en.wikipedia.org/wiki/RGB_color_model | RGB color space} without an alpha value
     *
     * @remarks
     *
     * ```javascript
     * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGB})
     * ```
     *
     * @public
     */
    RGB = "rgb",
    /**
     * Use the {@link https://en.wikipedia.org/wiki/RGB_color_model | RGB color space} color space with an alpha value
     *
     * @remarks
     *
     * ```javascript
     * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGBA})
     * ```
     *
     * @public
     */
    RGBA = "rgba",
    /**
     * Use the {@link https://en.wikipedia.org/wiki/HSL_and_HSV | HSL} color space with an alpha value
     *
     * @remarks
     *
     * ```javascript
     * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})
     * ```
     *
     * @public
     */
    HSL = "hsl",
    /**
     * Use the {@link https://en.wikipedia.org/wiki/HSL_and_HSV | HSL} color space with an alpha value
     *
     * @remarks
     *
     * ```javascript
     * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSLA})
     * ```
     *
     * @public
     */
    HSLA = "hsla",
    /**
     * Use the {@link http://www.hsluv.org | HSLuv } human friendly color model
     *
     * @remarks
     *
     * ```javascript
     * const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HUSL})
     * ```
     *
     * @public
     */
    HUSL = "husl"
}

/** @public */
export declare interface ColorMixOptions {
    model?: ColorMixModelType;
}

declare interface ColorRGB {
    r: number;
    g: number;
    b: number;
}

/** @public */
export declare type ColorRGBA = ColorRGB & {
    a: number;
};

/* Excluded from this release type: ColorStop */

/* Excluded from this release type: CompactControlsDescription */

/* Excluded from this release type: ComponentContainer */

/* Excluded from this release type: ComponentContainerContext */

/* Excluded from this release type: ComponentContainerProperties */

/* Excluded from this release type: ComponentContainerProps */

/* Excluded from this release type: ComponentDefinition */

/* Excluded from this release type: ComponentIdentifier */

/** @public */
export declare interface ComponentInstanceDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.ComponentInstance;
}

/* Excluded from this release type: ComponentLoader */

/* Excluded from this release type: ComponentMap */

/* Excluded from this release type: ComponentType */

declare type ConstraintAuto = "auto";

declare interface ConstraintConfiguration {
    /* Excluded from this release type: _constraints */
}

/**
 * Dimensions can be numbers or strings: percentages, fractions of free space (fr), or auto
 * @public
 */
declare type ConstraintDimension = Animatable<number> | number | ConstraintPercentage | ConstraintAuto | ConstraintFreespaceFraction;

declare type ConstraintFreespaceFraction = string;

/* Excluded from this release type: ConstraintMask */

/** @public */
export declare type ConstraintPercentage = string;

/**
 * These properties are used to layout elements within Framer’s constraint system.
 * @internalRemarks Represents model property values for layout constraints. These may be internally inconsistent. Mask and Values are generated from these.
 * @public
 * */
export declare interface ConstraintProperties extends Partial<WithFractionOfFreeSpace> {
    /* Excluded from this release type: parentSize */
    /**
     * Pinned position from left
     * @public
     */
    left: Animatable<number> | number | null;
    /**
     * Pinned position from right
     * @public
     */
    right: Animatable<number> | number | null;
    /**
     * Pinned position from top
     * @public
     */
    top: Animatable<number> | number | null;
    /**
     * Pinned position from bottom
     * @public
     */
    bottom: Animatable<number> | number | null;
    /**
     * Center of horizontal position (X axis)
     * @public
     */
    centerX: ConstraintPercentage;
    /**
     * Center of vertical position (Y axis)
     * @public
     */
    centerY: ConstraintPercentage;
    /**
     * Element width
     * @public
     */
    width: ConstraintDimension;
    /**
     * Element height
     * @public
     */
    height: ConstraintDimension;
    /**
     * Aspect Ratio to keep when resizing
     * @public
     */
    aspectRatio: number | null;
    /**
     * //TODO What is autoSize for? Internal?
     * @public
     */
    autoSize?: boolean;
}

/* Excluded from this release type: constraintsEnabled */

/* Excluded from this release type: ConstraintValues */

/* Excluded from this release type: ConstraintValuesBase */

/* Excluded from this release type: ContainerKey */

/** @public */
export declare type ControlDescription<P = any> = NumberControlDescription<P> | EnumControlDescription<P> | BooleanControlDescription<P> | StringControlDescription<P> | ColorControlDescription<P> | FusedNumberControlDescription<P> | SegmentedEnumControlDescription<P> | ImageControlDescription<P> | FileControlDescription<P> | ComponentInstanceDescription<P> | ArrayControlDescription<P> | EventHandlerControlDescription<P> | TransitionControlDescription<P> | ObjectControlDescription<P>;

/* Excluded from this release type: ControlIcon */

declare type ControlPoints = [number, number, number, number];

/**
 * Used by the {@link PropertyControls} and specifies the type of user interface for receiving
 * input. Each field has a distinct set of properties though they all accept `title` and `hidden`
 * properties.
 *
 * @remarks
 * ```javascript
 * export function MyComponent({ title }) {
 *   return <Frame size={"100%"}>{title}</Frame>
 * }
 *
 * addPropertyControls(MyComponent, {
 *   title: {
 *     type: ControlType.String,
 *     title: "Title",
 *     hidden: (props) => true
 *   },
 * }
 * ```
 * @public
 */
export declare const enum ControlType {
    /**
     * A control that displays an on / off checkbox. The associated property will be `true` or `false`,
     * depending on the state of the checkbox. Includes an optional `defaultValue`, which is set to `true` by default. You can also customize the labels displayed in the property panel with the `enabledTitle` and `disabledTitle` properties.
     *
     * @remarks
     * ```javascript
     * export function MyComponent(props) {
     *   return <Frame size={"100%"}>{props.showText ? "Hello World" : null}</Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   showText: {
     *     type: ControlType.Boolean,
     *     title: "Show Text",
     *     defaultValue: true,
     *     enabledTitle: "On",
     *     disabledTitle: "Off",
     *   },
     * })
     * ```
     */
    Boolean = "boolean",
    /**
     * A control that accepts any numeric value. This will be provided directly as a property.
     * Will display an input field with a range slider by default. The
     * `displayStepper` option can be enabled to include a stepper control instead.
     *
     * @remarks
     * ```javascript
     * export function MyComponent(props) {
     *   return <Frame rotateZ={props.rotation} size={"100%"}>{rotation}</Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   rotation: {
     *     type: ControlType.Number,
     *     defaultValue: 0,
     *     min: 0,
     *     max: 360,
     *     unit: "deg",
     *     step: 0.1,
     *     displayStepper: true,
     *   },
     * })
     * ```
     */
    Number = "number",
    /**
     * A control that accepts plain text values. This will be provided directly as a property.
     * Will display an input field with an optional placeholder value.
     * If `obscured` attribute is set to true a password input field will be used instead of a regular text input
     * so that the value in the input will be visually obscured, yet still be available as plain text inside the component.
     * `displayTextArea` can be enabled to display a multi-line input area instead.
     *
     * @remarks
     * ```javascript
     * export function MyComponent(props) {
     *   return <Frame>{props.title} — {props.body}</Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   title: {
     *     type: ControlType.String,
     *     defaultValue: "Framer",
     *     placeholder: "Type something…",
     *   },
     *   body: {
     *     type: ControlType.String,
     *     defaultValue: "Lorem ipsum dolor sit amet.",
     *     placeholder: "Type something…",
     *     displayTextArea: true,
     *   },
     * })
     * ```
     */
    String = "string",
    /**
     * A control that can be used to take a single number or four distinct
     * numeric input fields. The typical use case for this control is for visual
     * properties like border, padding or margin. It will display an input field
     * to accept a single value, alongside a segmented control allowing four
     * distinct values to be provided.
     *
     * You can also set the default value for each valueKey as well as the
     * toggleKey by setting their values on `defaultProps`.
     *
     *
     * ```javascript
     * export function MyComponent({
     *   radius = 50,
     *   topLeft,
     *   topRight,
     *   bottomRight,
     *   bottomLeft,
     *   isMixed = false,
     * }) {
     *   const borderRadius = isMixed
     *     ? `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`
     *     : `${radius}px`
     *   return <Frame background={"red"} borderRadius={borderRadius} size={"100%"}></Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   radius: {
     *     type: ControlType.FusedNumber,
     *     title: "Radius",
     *     defaultValue: 50,
     *     toggleKey: "isMixed",
     *     toggleTitles: ["All", "Individual"],
     *     valueKeys: ["topLeft", "topRight", "bottomRight", "bottomLeft"],
     *     valueLabels: ["NW", "NE", "SE", "SW"],
     *     min: 0,
     *   },
     * })
     *
     * // Set the default value for each valueKey as well as the toggleKey by setting their values on `defaultProps`:
     * MyComponent.defaultProps = {
     *     radius: 10,
     *     isMixed: true,
     *     topLeft: 5,
     *     topRight: 15,
     *     bottomRight: 5,
     *     bottomLeft: 15,
     * }
     * ```
     */
    FusedNumber = "fusednumber",
    /**
     * A property control that represents a list of options. The list contains primitive values and each
     * value has to be unique. The selected option will be provided as a property. This control is displayed
     * as a dropdown menu in which a user can select one of the items.
     * `displaySegmentedControl` can be enabled to display a segmented control instead.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   const value = props.value || "a"
     *   const colors = { a: "red", b: "green", c: "blue" }
     *   return <Frame background={colors[value]} size={"100%"}>{value}</Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   value: {
     *     type: ControlType.Enum,
     *     defaultValue: "a",
     *     options: ["a", "b", "c"],
     *     optionTitles: ["Option A", "Option B", "Option C"],
     *   },
     * })
     * ```
     */
    Enum = "enum",
    /**
     * Deprecated, please use {@link ControlType.Enum} and enable displaySegmentedControl.
     *
     * @deprecated - Please use {@link ControlType.Enum} and enable displaySegmentedControl.
     * @remarks
     * ```javascript
     * export function MyComponent(props) {
     *   const value = props.value || "a"
     *   const colors = { a: "red", b: "green", c: "blue" }
     *   return <Frame background={colors[value]} size={"100%"}>{value}</Frame>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   value: {
     *     type: ControlType.SegmentedEnum,
     *     defaultValue: "a",
     *     options: ["a", "b", "c"],
     *     optionTitles: ["A", "B", "C"],
     *   },
     * })
     * ```
     */
    SegmentedEnum = "segmentedenum",
    /**
     * A control that represents a color value. It will be included in the component props as a string.
     * This control is displayed as a color field and will provide the selected color in either
     * HEX (`"#fff"`) or HSL (`hsla(203, 87%, 50%, 0.5)`) notation, depending on
     * whether there is an alpha channel.
     *
     * @remarks
     * ```javascript
     * function MyComponent(props) {
     *   return <Frame background={props.background} size={"100%"} />
     * }
     *
     * addPropertyControls(MyComponent, {
     *   background: {
     *     type: ControlType.Color,
     *     defaultValue: "#fff",
     *   },
     * })
     * ```
     */
    Color = "color",
    /**
     * A control that allows the user to pick an image resource. It will
     * be included in the component props as an URL string.
     * Displayed as an image picker with associated file picker. The chosen asset
     * will be provided as a fully qualified URL.
     *
     * @remarks
     * ```jsx
     * function MyComponent(props) {
     *   return <Frame image={props.image} size={"100%"} />
     * }
     *
     * addPropertyControls(MyComponent, {
     *   image: {
     *     type: ControlType.Image,
     *   }
     * })
     * ```
     */
    Image = "image",
    /**
     * A control that allows the user to pick a file resource. It will be
     * included in the component props as an URL string.
     * Displayed as an file picker that will open a native file browser. The
     * selected file will be provided as a fully qualified URL. The
     * `allowedFileTypes` property must be provided to specify acceptable file
     * types.
     *
     * @remarks
     * ```javascript
     * export function MyComponent(props) {
     *   return (
     *     <Frame size={"100%"}>
     *       <video
     *         style={{ objectFit: "contain", props.width, props.height }}
     *         src={props.filepath}
     *         controls
     *       />
     *     </Frame>
     *   )
     * }
     *
     * addPropertyControls(MyComponent, {
     *   filepath: {
     *     type: ControlType.File,
     *     allowedFileTypes: ["mov"],
     *   },
     * })
     * ```
     */
    File = "file",
    /**
     * A control that references to another component on the canvas,
     * included in the component props as a React node.
     * The component will have an outlet to allow linking to other Frames.
     * Available Frames will also be displayed in a dropdown menu in the
     * properties panel. The component reference will be provided as a property.
     * As a convention, the name for the property is usually just `children`.
     *
     * Multiple components can be linked by combining the `ComponentInstance`
     * type with the {@link ControlType.Array}.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   return <Stack size={"100%"}>{props.children}</Stack>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   children: {
     *     type: ControlType.ComponentInstance,
     *   },
     * })
     * ```
     */
    ComponentInstance = "componentinstance",
    /**
     * A control that allows multiple values per `ControlType`, provided as an
     * array via properties. For most control types this will be displayed as an
     * additional section in the properties panel allowing as many fields to be
     * provided as required.
     *
     * For a {@link ControlType.ComponentInstance} the Frame will also gain an
     * additional outlet control on the Canvas that allows links to be created
     * between frames.
     *
     * For multiple {@link ControlType.FusedNumber} values, you can pass in an
     * array of single values as the React default prop.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   const frames = props.images.map(image => <Frame image={image} width={"1fr"} height={"1fr"} />)
     *   return <Stack size={"100%"}>{frames}</Stack>
     * }
     *
     * addPropertyControls(MyComponent, {
     *   images: {
     *     type: ControlType.Array,
     *     control: {
     *       type: ControlType.Image
     *     }
     *   },
     *   // Allow up to five items
     *   maxCount: 5,
     * })
     *
     * addPropertyControls(MyComponent, {
     *   children: {
     *     type: ControlType.Array,
     *     control: {
     *       type: ControlType.ComponentInstance
     *     },
     *     maxCount: 5,
     *   },
     * })
     *
     * // For multiple values, you can pass in an array of single values as the React default prop.
     * MyComponent.defaultProps = {
     *    paddings: [5, 10, 15],
     * }
     * ```
     *
     */
    Array = "array",
    /**
     * A control that exposes events in the prototyping panel within the Framer UI. When choosing an event from the prototyping panel, you can select from a list of actions to trigger.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   return <Frame onTap={props.onTap} size={"100%"} />
     * }
     *
     * addPropertyControls(MyComponent, {
     *   onTap: {
     *     type: ControlType.EventHandler,
     *   },
     * })
     * ```
     */
    EventHandler = "eventhandler",
    /**
     * A control that allows for editing Framer Motion transition options within the Framer UI.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   return (
     *       <Frame
     *          animate={{ scale: 2 }}
     *          transition={props.transition}
     *       />
     *   )
     * }
     *
     * addPropertyControls(MyComponent, {
     *   transition: {
     *       type: ControlType.Transition,
     *   },
     * })
     * ```
     */
    Transition = "transition",
    /**
     * A control that allows for grouping multiple properties as an object.
     *
     * ```javascript
     * export function MyComponent(props) {
     *   return <Frame opacity={props.myObject.opacity} background={props.myObject.tint} />
     * }
     *
     * addPropertyControls(MyComponent, {
     *   myObject: {
     *     type: ControlType.Object,
     *     controls: {
     *       opacity: { type: ControlType.Number },
     *       tint: { type: ControlType.Color },
     *     }
     *   }
     * })
     * ```
     */
    Object = "object"
}

/* Excluded from this release type: ConvertColor */

/* Excluded from this release type: convertPresentationTree */

/* Excluded from this release type: createData */

/* Excluded from this release type: createDesignComponent */

/* Excluded from this release type: cssBackgroundSize */

/**
 * @internalremarks do no use separately from FrameProps
 * @public
 * */
export declare interface CSSTransformProperties extends MotionTransform {
    /**
     * Set the CSS transform `translateX` property.
     * @remarks
     * ```jsx
     * <Frame x={100} />
     * ```
     * @public
     */
    x: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `translateY` property.
     * @remarks
     * ```jsx
     * <Frame y={100} />
     * ```
     * @public
     */
    y: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `translateZ` property.
     * @remarks
     * ```jsx
     * <Frame z={100} />
     * ```
     * @public
     */
    z: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `rotate` property in degrees.
     * @remarks
     * ```jsx
     * <Frame rotate={45}/>
     * ```
     * @public
     */
    rotate: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `rotateX` property in degrees.
     * @remarks
     * ```jsx
     * <Frame rotateX={45}/>
     * ```
     * @public
     */
    rotateX: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `rotateY` property in degrees.
     * @remarks
     * ```jsx
     * <Frame rotateY={45}/>
     * ```
     * @public
     */
    rotateY: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `rotateZ` property in degrees.
     * @remarks
     * ```jsx
     * <Frame rotateZ={45}/>
     * ```
     * @public
     */
    rotateZ: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `scale` property.
     * @remarks
     * ```jsx
     * <Frame scale={1.5} />
     * ```
     * @public
     */
    scale: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `scaleX` property.
     * @remarks
     * ```jsx
     * <Frame scaleX={1.5} />
     * ```
     * @public
     */
    scaleX: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `scaleY` property.
     * @remarks
     * ```jsx
     * <Frame scaleY={2} />
     * ```
     * @public
     */
    scaleY: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `skew` property in degrees.
     * @remarks
     * ```jsx
     * <Frame skew={15} />
     * ```
     * @public
     */
    skew: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `skewX` property in degrees.
     * @remarks
     * ```jsx
     * <Frame skewX={15} />
     * ```
     * @public
     */
    skewX: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `skewY` property in degrees.
     * @remarks
     * ```jsx
     * <Frame skewY={15} />
     * ```
     * @public
     */
    skewY: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `originX` property.
     * @remarks
     * ```jsx
     * <Frame originX={0.5} />
     * ```
     * @public
     */
    originX: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `originY` property.
     * @remarks
     * ```jsx
     * <Frame originY={0.5} />
     * ```
     * @public
     */
    originY: number | string | MotionValue<number | string>;
    /**
     * Set the CSS transform `originZ` property. Defaults to `px` units.
     * @remarks
     * ```jsx
     * <Frame originZ={100} />
     * ```
     * @public
     */
    originZ: number | string | MotionValue<number | string>;
    /**
     * Set the CSS perspective property.
     * @remarks
     * ```jsx
     * <Frame perspective={500} />
     * ```
     * @public
     */
    perspective: number | string | MotionValue<number | string>;
}

declare type Curve = ControlPoints | Bezier;

declare interface CustomConstraintProperties {
    /**
     * Aspect Ratio to keep when resizing
     * @public
     */
    aspectRatio?: number | null;
    /**
     * Used for Text and Graphics containers
     * @public
     */
    autoSize?: boolean;
    /**
     * Use Vekter constraint layout system, disable DOM layout
     * @public
     */
    enabled: boolean;
    intrinsicWidth?: number;
    intrinsicHeight?: number;
}

/* Excluded from this release type: CustomFontSource */

declare interface CustomMotionProps {
    /**
     * When a `Frame` is the child of a `Stack`, the `Stack` is responsible for its layout. This makes it harder
     * for us to know when a `Frame`'s position changes within the `Stack` and make it animate to its new position.
     *
     * By adding `positionTransition` to a `Frame`, it'll automatically animate to its new position in the `Stack`,
     * whether the `Stack` layout has changed or the `Frame` has changed its order within it.
     *
     * It can either be set as a `Transition`, or just `true` to use the default layout transition.
     *
     * ```jsx
     * function MyComponent({ distribution = "space-around" }) {
     *   const spring = {
     *     type: "spring",
     *     damping: 10,
     *     stiffness: 100
     *   }
     *
     *   return (
     *     <Stack distribution={distribution}>
     *       <Frame layoutTransition={spring} />
     *     </Stack>
     *   )
     * }
     * ```
     *
     * @deprecated
     */
    positionTransition?: Transition | boolean | ResolveLayoutTransition;
    /**
     * When a `Frame` is the child of a `Stack`, the `Stack` is responsible for its layout. This makes it
     * difficult for to know when the layout changes and smoothly animate components to their new positions.
     *
     * By adding `layoutTransition` to a child `Frame`, it'll automatically animate to its new position
     * when it moves in the `Stack`, whether the `Stack` layout has changed, or the `Frame` has changed order within it.
     *
     * It can either be set as a `Transition`, or just `true` to use the default layout transition.
     *
     * Animating size with `scale` can introduce visual distortion to the component's children. If unwanted,
     * the `useInvertedScale` function can be used to undo this distortion.
     *
     * ```jsx
     * function MyComponent({ distribution = "space-around" }) {
     *   const spring = {
     *     type: "spring",
     *     damping: 10,
     *     stiffness: 100
     *   }
     *
     *   return (
     *     <Stack distribution={distribution}>
     *       <Frame layoutTransition={spring} />
     *     </Stack>
     *   )
     * }
     * ```
     *
     * @deprecated
     */
    layoutTransition?: Transition | boolean | ResolveLayoutTransition;
}

/* Excluded from this release type: CustomProperties */

/* Excluded from this release type: CustomPropertiesContext */

/**
 * Takes a CSS variable and attempts to lookup the value. Useful for retrieving
 * the original value when provided with a variable for animations or manipulation.
 * @returns the value string or null if not found.
 */
declare type CustomPropertiesLookup = (variable: string) => string | null;

/* Excluded from this release type: cx */

/**
 * Flag setVariantState as cycling variants.
 * @public
 */
export declare const CycleVariantState: unique symbol;

declare interface DampingDurationSpringOptions {
    dampingRatio: number;
    duration: number;
    velocity: number;
    mass: number;
}

/**
 * Allows data to be shared between Frames using Code Overrides.
 * Any changes to the `Data` instance will cause the preview to update and code
 * overrides will re-render. In this example, we’re updating the `scale` property on `press`, setting it to `0.5`.
 * ```jsx
 * import { Data, Override } from "framer"
 *
 * const data = Data({
 *    scale: 0.5,
 * })
 *
 * export function WhileTap(): Override {
 *    return {
 *        whileTap: {
 *            scale: data.scale,
 *        },
 *    }
 * }
 *
 * ```
 * @param initial - The initial value of the data to be set.
 * @returns the data object for use across components.
 * @public
 */
export declare function Data<T extends object = object>(initial?: Partial<T> | object): T;

/**
 * @public
 * @internalremarks The release tag on this should be internal, but API extractor does not support that yet: https://github.com/Microsoft/web-build-tools/issues/972
 */
export declare namespace Data {
    /* Excluded from this release type: _stores */
    /* Excluded from this release type: addData */
    /* Excluded from this release type: reset */
    /* Excluded from this release type: addObserver */
}

/* Excluded from this release type: DataContext */

declare type DataHook<State, Actions> = (id?: string | symbol, initialState?: State) => [State, Actions];

/* Excluded from this release type: DataObserver */

/* Excluded from this release type: DataObserverContext */

/* Excluded from this release type: debounce */

declare interface DebouncedFunction<T extends any[]> {
    (...args: T): void;
    cancel: () => void;
}

/**
 * A mapped type that deeply changes all properties into readonly
 * all arrays into ReadonlyArray<T>
 * all maps into ReadonlyMap<T>
 */
declare type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends Map<infer K, infer V> ? ReadonlyMap<K, V> : T[P] extends (infer X)[] ? readonly X[] : DeepReadonly<T[P]>;
};

declare const defaultId: unique symbol;

/* Excluded from this release type: DefaultProps */

/**
 * @deprecated Use {@link FrameProps.transition} instead
 */
declare interface DeprecatedAnimationOptions<Value> extends InterpolationOptions {
    /* Excluded from this release type: customInterpolation */
    /* Excluded from this release type: precalculate */
}

/**
 * @public
 * @deprecated
 */
export declare type DeprecatedAnimationTarget<Value> = Animatable<Value> | AnimatableObject<Value> | MotionValue<Value>;

declare interface DeprecatedBackgroundProperties {
    background: Animatable<Background> | Background | null;
    /* Excluded from this release type: backgroundColor */
}

/** @public */
export declare interface DeprecatedCoreFrameProps extends DeprecatedFrameProperties, LayerProps {
}

/**
 * @public
 */
export declare class DeprecatedFrame extends Layer<DeprecatedCoreFrameProps, DeprecatedFrameState> {
    static supportsConstraints: boolean;
    static defaultFrameSpecificProps: DeprecatedFrameProperties;
    static readonly defaultProps: DeprecatedCoreFrameProps;
    static rect(props: Partial<ConstraintProperties>): Rect;
    get rect(): Rect;
    element: HTMLDivElement | null;
    imageDidChange: boolean;
    state: DeprecatedFrameState;
    static getDerivedStateFromProps(nextProps: Partial<DeprecatedCoreFrameProps>, prevState: DeprecatedFrameState): DeprecatedFrameState | null;
    static updatedSize(props: Partial<DeprecatedCoreFrameProps>, state: DeprecatedFrameState): AnimatableObject<Size> | Size;
    getStyle(): React.CSSProperties;
    private updateStyle;
    setElement: (element: HTMLDivElement | null) => void;
    propsObserver: AnimatableObject<DeprecatedCoreFrameProps>;
    propsObserverCancel?: Cancel;
    sizeObserver: AnimatableObject<Size>;
    sizeObserverCancel?: Cancel;
    componentDidMount(): void;
    componentDidUpdate(): void;
    protected onPropsChange: (props: Change<AnimatableObject<DeprecatedCoreFrameProps>>) => void;
    protected onSizeChange: () => void;
    componentWillUnmount(): void;
    render(): JSX.Element | null;
    layoutChildren(): (React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.FunctionComponentElement<{
        _forwardedOverrides: {
            [key: string]: any;
        };
    }>)[] | null | undefined;
}

/** @public */
export declare interface DeprecatedFrameProperties extends ConstraintProperties, DeprecatedTransformProperties, DeprecatedVisualProperties {
    /**
     * Determines whether the Frame is current visible. Set to `true` by default.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame visible={false} />
     * }
     * ```
     */
    visible: boolean;
    /**
     * An optional name for the Frame.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame name="MyFrame" />
     * }
     * ```
     */
    name?: string;
    /**
     * Set to `true` to enable backface-visibility.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame backfaceVisibility={true} />
     * }
     * ```
     */
    backfaceVisible?: boolean | Animatable<boolean>;
    /**
     * Set the perspective on the z-plane.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame perspective={100px} />
     * }
     * ```
     */
    perspective?: number | Animatable<number>;
    /**
     * Set to `true` to preserve 3D.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame preserve3d={true} />
     * }
     * ```
     */
    preserve3d?: boolean | Animatable<boolean>;
    /**
     * A border width for the frame. Can be either a single number for all sides or
     * an object describing each side. Set to `0` by default.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame borderWidth={{top: 10, bottom: 10}} />
     * }
     * ```
     */
    borderWidth: number | Partial<{
        top: number;
        bottom: number;
        left: number;
        right: number;
    }>;
    /**
     * A border color for the Frame. Set to `"#222"` by default.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame borderColor="red" />
     * }
     * ```
     */
    borderColor: string;
    /**
     * A border style for the Frame. One of `"solid", "dashed", "dotted"` or `"double"`. Set to `"solid"` by default.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame borderStyle="dotted" />
     * }
     * ```
     */
    borderStyle: BorderStyle;
    /**
     * Additional CSSProperties to apply to the frame. Usage is exactly the same as with the
     * standard React style prop.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame style={{color: "red", backgroundColor: "blue"}} />
     * }
     * ```
     */
    style?: React.CSSProperties;
    /**
     * An optional className for the Frame.
     * @remarks
     * ```jsx
     * function App() {
     *   return <Frame className="my-frame" />
     * }
     * ```
     */
    className?: string;
    /* Excluded from this release type: _overrideForwardingDescription */
    /* Excluded from this release type: _initialStyle */
}

declare interface DeprecatedFrameState {
    size: AnimatableObject<Size> | Size | null;
}

/** @public */
export declare const DeprecatedFrameWithEvents: React.ComponentClass<Partial<DeprecatedFrameWithEventsProps>>;

/** @public */
export declare type DeprecatedFrameWithEventsProps = DeprecatedCoreFrameProps & WithEventsProperties;

declare interface DeprecatedTransformProperties {
    z: Animatable<number> | number;
    rotation: Animatable<number> | number;
    rotationX: Animatable<number> | number;
    rotationY: Animatable<number> | number;
    rotationZ: Animatable<number> | number;
    scale: Animatable<number> | number;
    scaleX: Animatable<number> | number;
    scaleY: Animatable<number> | number;
    scaleZ: Animatable<number> | number;
    skew: Animatable<number> | number;
    skewX: Animatable<number> | number;
    skewY: Animatable<number> | number;
    originX: Animatable<number> | number;
    originY: Animatable<number> | number;
    originZ: Animatable<number> | number;
}

/** @public */
export declare type DeprecatedVisualProperties = Partial<BackgroundProperties & RadiusProperties & FilterProperties & BackgroundFilterProperties & BlendingProperties & OverflowProperties & BoxShadowProperties_2 & WithOpacity & TextColorProperties>;

/* Excluded from this release type: DesignComponentDefinition */

declare type DeviceOS = "macos" | "ios" | "android" | "windows";

/* Excluded from this release type: DimensionType */

/* Excluded from this release type: dispatchKeyDownEvent */

/* Excluded from this release type: DOM */

/** @public */
export declare interface DOMLayoutProps {
    /* Excluded from this release type: _needsMeasure */
    /* Excluded from this release type: _usesDOMRect */
    /* Excluded from this release type: _domRect */
}

/* Excluded from this release type: DraftFontProperties */

declare type DragEventHandler<Draggable> = (event: FramerEvent, draggable: Draggable) => void;

declare interface DragEvents<Draggable> {
    onMove: (point: Point, draggable: Draggable) => void;
    /* Excluded from this release type: onDragDirectionLockStart */
    onDragAnimationStart: (animation: {
        x: AnimationInterface;
        y: AnimationInterface;
    }, draggable: Draggable) => void;
    onDragAnimationEnd: (animation: {
        x: AnimationInterface;
        y: AnimationInterface;
    }, draggable: Draggable) => void;
    onDragSessionStart: DragEventHandler<Draggable>;
    onDragSessionMove: DragEventHandler<Draggable>;
    onDragSessionEnd: DragEventHandler<Draggable>;
    onDragStart: DragEventHandler<Draggable>;
    onDragWillMove: DragEventHandler<Draggable>;
    onDragDidMove: DragEventHandler<Draggable>;
    onDragEnd: DragEventHandler<Draggable>;
}

/** @public */
export declare const Draggable: React.ComponentClass<Partial<DeprecatedFrameWithEventsProps> & Partial<DraggableProps<typeof DeprecatedFrameWithEvents>>>;

declare interface DraggableProps<Draggable> extends DraggableSpecificProps<Draggable> {
    enabled: boolean;
}

declare interface DraggableSpecificProps<Draggable> extends Partial<DragEvents<Draggable>> {
    momentum: boolean;
    momentumOptions: {
        friction: number;
        tolerance: number;
    };
    momentumVelocityMultiplier: number;
    speedX: number;
    speedY: number;
    bounce: boolean;
    bounceOptions: {
        friction: number;
        tension: number;
        tolerance: number;
    };
    directionLock: boolean;
    directionLockThreshold: {
        x: number;
        y: number;
    };
    overdrag: boolean;
    overdragScale: number;
    pixelAlign: boolean;
    velocityTimeout: number;
    velocityScale: number;
    horizontal: boolean;
    vertical: boolean;
    constraints: Partial<Rect>;
    mouseWheel: boolean;
}

/* Excluded from this release type: DriverClass */

declare type EaseOptions = Omit<BezierOptions, "curve">;

/* Excluded from this release type: EmptyState */

declare interface EnabledGestures {
    hover: boolean;
    pressed: boolean;
}

declare type EnabledVariantGestures = Record<string, EnabledGestures>;

/** @public */
export declare interface EnumControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Enum;
    defaultValue?: string | boolean | number | undefined | null;
    options: (string | boolean | number | undefined | null)[];
    optionTitles?: string[];
    displaySegmentedControl?: boolean;
    /* Excluded from this release type: segmentedControlDirection */
    /* Excluded from this release type: optionIcons */
    /* Excluded from this release type: showIconWithTitle */
}

/* Excluded from this release type: environment */

/* Excluded from this release type: ErrorDefinition */

declare type EventDispatcher = (type: string, event: FramerEvent, target: EventTarget) => void;

declare class EventEmitter<EventName> {
    private _emitter;
    eventNames(): string[];
    eventListeners(): {
        [index: string]: ListenerFn[];
    };
    on(eventName: EventName, fn: Function): void;
    off(eventName: EventName, fn: Function): void;
    once(eventName: EventName, fn: Function): void;
    unique(eventName: EventName, fn: Function): void;
    addEventListener(eventName: EventName, fn: Function, once: boolean, unique: boolean, context: Record<string, any>): void;
    removeEventListeners(eventName?: EventName, fn?: Function): void;
    removeAllEventListeners(): void;
    countEventListeners(eventName?: EventName, handler?: Function): number;
    emit(eventName: EventName, ...args: any[]): void;
}

declare type EventHandler = (event: FramerEvent) => void;

/** @public */
export declare interface EventHandlerControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.EventHandler;
}

/* Excluded from this release type: executeInRenderEnvironment */

/**
 * @public
 */
export declare type FadeTransitionOptions = NavigationTransitionAnimation;

/** @public */
export declare interface FileControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.File;
    allowedFileTypes: string[];
}

/* Excluded from this release type: FillProperties */

/** @public */
export declare interface FilterNumberProperties {
    brightness: number;
    contrast: number;
    grayscale: number;
    hueRotate: number;
    invert: number;
    saturate: number;
    sepia: number;
    blur: number;
}

/** @public */
export declare interface FilterProperties extends FilterNumberProperties {
    dropShadows: Readonly<Shadow[]>;
}

/**
 * @public
 */
declare type FinishFunction = (transaction: TransactionId) => void;

/* Excluded from this release type: finiteNumber */

declare type FlexDirection = "column" | "row" | "column-reverse" | "row-reverse";

/**
 * @public
 */
export declare interface FlipTransitionOptions extends NavigationTransitionAnimation, NavigationTransitionAppearsFrom {
}

/* Excluded from this release type: Font */

declare interface FontFaceData {
    family: string;
    url: string;
    weight?: number;
    style?: string;
}

/* Excluded from this release type: FontMetaData */

/* Excluded from this release type: FontSource */

/* Excluded from this release type: FontStore */

/* Excluded from this release type: fontStore */

/**
 * Information about a font variant
 * For example: `parseVariant("600italic")` will return `{style: 'italic', weight: 600}`
 * */
declare interface FontVariant {
    /** "normal" | "italic" | "oblique" */
    style: string;
    /** 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 */
    weight: number;
}

/* Excluded from this release type: forceLayerBackingWithCSSProperties */

/* Excluded from this release type: fraction */

/** @public */
export declare const Frame: React.ForwardRefExoticComponent<Partial<FrameProps> & React.RefAttributes<HTMLDivElement>>;

/* Excluded from this release type: frameFromElement */

/* Excluded from this release type: frameFromElements */

/**
 * @internalremarks do no use separately from FrameProps
 * @public
 * */
export declare interface FrameLayoutProperties {
    /**
     * Distance from the top in pixels. Set to `0` by default.
     * @remarks
     * ```jsx
     * <Frame top={100} />
     * ```
     * @public
     */
    top: number | string | MotionValue<number | string>;
    /**
     * Distance from the right in pixels. Set to `0` by default.
     * @remarks
     * ```jsx
     * <Frame right={100} />
     * ```
     * @public
     */
    right: number | string | MotionValue<number | string>;
    /**
     * Distance from the bottom in pixels. Set to `0` by default.
     * @remarks
     * ```jsx
     * <Frame bottom={100} />
     * ```
     * @public
     */
    bottom: number | string | MotionValue<number | string>;
    /**
     * Distance from the left in pixels. Set to `0` by default.
     * @remarks
     * ```jsx
     * <Frame left={100} />
     * ```
     * @public
     */
    left: number | string | MotionValue<number | string>;
    /**
     * Set the CSS `width` property. Set to `200` by default. Accepts all CSS value types (including pixels, percentages, keywords and more).
     * @remarks
     * ```jsx
     * // Pixels
     * <Frame width={100} />
     *
     * // Percentages
     * <Frame width={"100%"} />
     * ```
     * @public
     */
    width: number | string | MotionValue<number | string>;
    /**
     * Set the CSS `height` property. Set to `200` by default. Accepts all CSS value types (including pixels, percentages, keywords and more).
     * @remarks
     * ```jsx
     * // Pixels
     * <Frame height={100} />
     *
     * // Percentages
     * <Frame height={"100%"} />
     *
     * ```
     * @public
     */
    height: number | string | MotionValue<number | string>;
    /**
     * Set the CSS `position` property. Set to `"absolute"` by default.
     * @remarks
     * ```jsx
     * <Frame position={"relative"} />
     * ```
     * @public
     */
    position: React.CSSProperties["position"];
    /**
     * Shortcut for centering Frames.
     * @remarks
     * ```jsx
     * // Center
     * <Frame center />
     *
     * // Center horizontally
     * <Frame center="x" />
     *
     * // Center vertically
     * <Frame center="y" />
     * ```
     * @public
     */
    center: boolean | "x" | "y";
    /**
     * Shortcut for setting the width and height simultaneously.
     * @remarks
     * ```jsx
     * <Frame size={100} />
     * ```
     * @public
     */
    size: number | string;
    /**
     * Set the CSS `min-width` property. Unset by default.
     * @remarks
     * ```jsx
     * <Frame minWidth={200} />
     * ```
     * @public
     */
    minWidth: number | string | MotionValue<number | string>;
    /**
     * Set the CSS `min-height` property. Unset by default.
     * @remarks
     * ```jsx
     * <Frame minHeight={200} />
     * ```
     * @public
     */
    minHeight: number | string | MotionValue<number | string>;
    /* Excluded from this release type: widthType */
    /* Excluded from this release type: heightType */
}

/** @public */
export declare interface FrameProps extends BackgroundProperties, VisualProperties, Omit<MotionDivProps, "color">, CSSTransformProperties, LayerProps, FrameLayoutProperties, ConstraintConfiguration, BaseFrameProps, CustomMotionProps {
    /* Excluded from this release type: __layoutId */
    /* Excluded from this release type: __fromCanvasComponent */
}

/**
 * The animation object returned by the {@link (animate:function)} functions
 * @remarks
 * Can be used to control a animation or wait for it to finish. You never create a FramerAnimation yourself, but store the return type from the animate function.
 * ```jsx
 * const animation = animate.ease(value, 100)
 * await animation.finished()
 * const animation = animate.spring(value, 200)
 * animation.cancel()
 * ```
 * @privateRemarks
 * This could be called just Animation, but it's type would clash with
 * javascript's native Animation: https://developer.mozilla.org/en-US/docs/Web/API/Animation
 * So if you forget the import, you would get weird errors.
 *
 * Also, this class follows the native Animation as much as possible.
 * @public
 * @deprecated Use the {@link useAnimation} hook instead
 */
export declare class FramerAnimation<Value, AnimatorOptions> {
    /* Excluded from this release type: driver */
    /* Excluded from this release type: __constructor */
    /* Excluded from this release type: driverCallbackHandler */
    /* Excluded from this release type: playStateSource */
    /* Excluded from this release type: playStateValue */
    /* Excluded from this release type: playStateValue */
    /* Excluded from this release type: playState */
    /* Excluded from this release type: onfinish */
    /* Excluded from this release type: oncancel */
    /* Excluded from this release type: readyPromise */
    /* Excluded from this release type: readyResolve */
    /* Excluded from this release type: resetReadyPromise */
    /**
     * Wait for the animation to be ready to play.
     * @remarks
     * ```jsx
     * const animation = animate.ease(value, 100)
     * animation.ready().then(() => {
     *    // Animation is ready
     * })

     * // async/await syntax
     * const animation = animate.ease(value, 100)
     * await animation.ready()
     * // Animation is ready
     * ```
     * @returns Promise that is resolved when the animation is ready to play
     * @public
     */
    get ready(): Promise<void>;
    /* Excluded from this release type: finishedPromise */
    /* Excluded from this release type: finishedResolve */
    /* Excluded from this release type: finishedReject */
    /* Excluded from this release type: resetFinishedPromise */
    /**
     * Wait for the animation to be finished.
     * @remarks
     * ```jsx
     * // async/await syntax
     * const animation = animate.ease(value, 100)
     * await animation.finished()
     * // Animation is finished
     *
     *
     * const animation = animate.ease(value, 100)
     * animation.ready().then(() => {
     *    // Animation is finished
     * })
     * ```
     * @returns Promise that is resolved when the animation is ready to play
     * @public
     */
    get finished(): Promise<void>;
    /* Excluded from this release type: play */
    /**
     * Cancels the animation if it is still running.
     * @remarks
     * ```jsx
     * const animation = animate.ease(value, 100, {duration: 3})
     * setTimeout(() => animation.cancel(), 500)
     * ```
     * @public
     */
    cancel(): void;
    /* Excluded from this release type: finish */
    /* Excluded from this release type: isFinished */
}

declare type FramerAnimationState = "idle" | "running" | "finished";

/**
 * @public
 */
export declare class FramerEvent {
    /* Excluded from this release type: originalEvent */
    /* Excluded from this release type: session */
    /* Excluded from this release type: time */
    /* Excluded from this release type: loopTime */
    /* Excluded from this release type: point */
    /* Excluded from this release type: devicePoint */
    /* Excluded from this release type: target */
    /* Excluded from this release type: delta */
    /* Excluded from this release type: __constructor */
    private static eventLikeFromOriginalEvent;
    /* Excluded from this release type: velocity */
    /* Excluded from this release type: offset */
    /* Excluded from this release type: isLeftMouseClick */
}

/* Excluded from this release type: FramerEventListener */

/* Excluded from this release type: FramerEventSession */

/* Excluded from this release type: FrameWithMotion */

/** @public */
export declare interface FusedNumberControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.FusedNumber;
    defaultValue?: number;
    toggleKey: keyof P;
    toggleTitles: [string, string];
    valueKeys: [keyof P, keyof P, keyof P, keyof P];
    valueLabels: [string, string, string, string];
    min?: number;
}

/* Excluded from this release type: GestureHandler */

declare type GestureState = Partial<{
    isHovered: boolean;
    isPressed: boolean;
}>;

declare type GetChildrenFn = (element: Element) => Element[];

/* Excluded from this release type: getConfigFromPreviewURL */

/* Excluded from this release type: getConfigFromVekterURL */

/* Excluded from this release type: _getCSSTextColorFromStyle */

/* Excluded from this release type: GetLayoutId */

/* Excluded from this release type: getMergedConstraintsProps */

/* Excluded from this release type: getPropertyControls */

/* Excluded from this release type: GoogleFontSource */

/**
 * @public
 */
export declare type Gradient = LinearGradient | RadialGradient;

/**
 * @public
 */
declare interface GradientColorStop {
    value: string;
    position: number;
}

/* Excluded from this release type: gradientForShape */

/* Excluded from this release type: HistoryItem */

/** @public */
export declare interface IdentityProps {
    id?: string;
    duplicatedFrom?: string[];
}

/* Excluded from this release type: Image */

/** @public */
export declare interface ImageControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Image;
}

/** @public */
export declare type ImageFit = "fill" | "fit" | "stretch";

declare interface ImagePatternElementProperties {
    id: string;
    path: string;
    transform?: string;
}

/* Excluded from this release type: imagePatternPropsForFill */

/* Excluded from this release type: ImageProps */

/* Excluded from this release type: imageUrlForAsset */

/** @public */
export declare type IncomingColor = ColorRGB | ColorHSL | ColorRGBA | ColorHSLA | string;

/* Excluded from this release type: _injectRuntime */

/* Excluded from this release type: InternalID */

/**
 * @public
 */
declare interface Interpolation<Value = any> {
    /* Excluded from this release type: interpolate */
    /* Excluded from this release type: difference */
}

/**
 * @public
 */
declare namespace Interpolation {
    /* Excluded from this release type: handleUndefined */
}

declare interface InterpolationOptions {
    colorModel: ColorMixModelType;
}

/* Excluded from this release type: Interpolator */

/* Excluded from this release type: isAnimatable */

/* Excluded from this release type: isDesignDefinition */

/* Excluded from this release type: isEqual */

/* Excluded from this release type: isFiniteNumber */

/* Excluded from this release type: isFractionDimension */

/* Excluded from this release type: isGapEnabled */

/* Excluded from this release type: isMotionValue */

/* Excluded from this release type: isOfAnnotatedType */

/* Excluded from this release type: isOverride */

/* Excluded from this release type: isReactDefinition */

/* Excluded from this release type: isShallowEqualArray */

/* Excluded from this release type: isStraightCurve */

/* Excluded from this release type: Keyable */

/**
 * @public
 */
export declare class Layer<P extends Partial<LayerProps>, S> extends React.Component<P, S> {
    static readonly defaultProps: LayerProps;
    static applyWillChange(props: WillChangeTransformProp, style: MotionStyle, usingMotionStyle: boolean): void;
    /* Excluded from this release type: shouldComponentUpdate */
    props: Readonly<P> & Readonly<{
        children?: ReactNode;
    }>;
    /* Excluded from this release type: componentDidUpdate */
}

/** @public */
export declare interface LayerProps extends IdentityProps, WillChangeTransformProp, DOMLayoutProps {
    children?: ReactNode;
    key?: React.Key;
    /* Excluded from this release type: _forwardedOverrides */
    /* Excluded from this release type: _index */
    /* Excluded from this release type: _canMagicMotion */
}

/* Excluded from this release type: LayoutGroup */

/* Excluded from this release type: LayoutIdContext */

declare interface LayoutProperties extends PositionProperties, SizeProperties {
    /* Excluded from this release type: widthType */
    /* Excluded from this release type: heightType */
}

/* Excluded from this release type: Line */

/**
 * @public
 */
export declare type LinearGradient = LinearGradientBase & (SimpleGradient | MultiStopGradient);

/**
 * @public
 */
export declare namespace LinearGradient {
    /**
     * @param value -
     */
    export function isLinearGradient(value: any): value is LinearGradient;
    /* Excluded from this release type: hash */
    /* Excluded from this release type: toCSS */
}

/**
 * @public
 */
export declare interface LinearGradientBase {
    alpha: number;
    angle: number;
}

/* Excluded from this release type: LinearGradientElementProperties */

/* Excluded from this release type: LineCap */

/* Excluded from this release type: LineJoin */

/* Excluded from this release type: loadFont */

/* Excluded from this release type: loadJSON */

/* Excluded from this release type: LocalFontSource */

/* Excluded from this release type: localPackageFallbackIdentifier */

/* Excluded from this release type: localShadowFrame */

/**
 * @public
 */
declare class Loop extends EventEmitter<LoopEventNames> {
    private _started;
    private _frame;
    private _frameTasks;
    /* Excluded from this release type: addFrameTask */
    private _processFrameTasks;
    /* Excluded from this release type: TimeStep */
    /* Excluded from this release type: TimeStep */
    /* Excluded from this release type: __constructor */
    /* Excluded from this release type: start */
    /* Excluded from this release type: stop */
    /* Excluded from this release type: frame */
    /* Excluded from this release type: time */
    /* Excluded from this release type: tick */
}

declare type LoopEventNames = "render" | "update" | "finish";

/* Excluded from this release type: MainLoop */

/* Excluded from this release type: makePaddingString */

/* Excluded from this release type: memoize */

declare type Mixer = (from: string | Color, toColor: Color, options?: ColorMixOptions) => (p: number) => string;

declare type MixerStateful = (toColor: Color, options?: ColorMixOptions) => (p: number) => string;

/**
 * @public
 */
export declare interface ModalTransitionOptions extends NavigationTransitionAnimation, NavigationTransitionBackdropColor {
}

declare type MotionDivProps = HTMLMotionProps<"div">;

/** @public */
export declare function MotionSetup({ children }: Props_3): JSX.Element;

/**
 * @public
 */
declare interface MultiStopGradient {
    stops: GradientColorStop[];
}

/* Excluded from this release type: NavigateTo */

/* Excluded from this release type: Navigation */

declare type NavigationCallback = (key: string) => void;

declare const NavigationCallbackContext: React.Context<NavigationCallback | undefined>;

/* Excluded from this release type: NavigationCallbackProvider */

/**
 * Provides {@link NavigationInterface} that can be used to start transitions in Framer.
 * @public
 */
export declare const NavigationConsumer: React.Consumer<NavigationInterface>;

/**
 * The navigator allows control over the built-in navigation component in Framer.
 * @public
 */
export declare interface NavigationInterface {
    /**
     * Go back to the previous screen. If a stack of overlays is presented, all overlays are dismissed.
     * @public
     * */
    goBack: () => void;
    /**
     * Show new screen instantly.
     * @param component - The incoming component
     * @public
     */
    instant: (component: React.ReactNode) => void;
    /**
     * Fade in new screen.
     * @param component - The incoming component
     * @param options - {@link FadeTransitionOptions}
     * @public
     */
    fade: (component: React.ReactNode, options?: FadeTransitionOptions) => void;
    /**
     * Push new screen. Defaults from right to left, the direction can be changed using the {@link NavigationTransitionOptions}.
     * @param component - The incoming component
     * @param options - {@link PushTransitionOptions}
     * @public
     */
    push: (component: React.ReactNode, options?: PushTransitionOptions) => void;
    /**
     * Present modal overlay in the center.
     * @param component - The incoming component
     * @param options - {@link ModalTransitionOptions}
     * @public
     */
    modal: (component: React.ReactNode, options?: ModalTransitionOptions) => void;
    /**
     * Present overlay from one of four edges. The direction can be changed using the {@link NavigationTransitionOptions}.
     * @param component - The incoming component
     * @param options - {@link OverlayTransitionOptions}
     * @public
     */
    overlay: (component: React.ReactNode, options?: OverlayTransitionOptions) => void;
    /**
     * Flip incoming and outgoing screen in 3D. The flip direction can be changed using the {@link NavigationTransitionOptions}.
     * @param component - The incoming component
     * @param options - {@link FlipTransitionOptions}
     * @public
     */
    flip: (component: React.ReactNode, options?: FlipTransitionOptions) => void;
    /**
     * Present a screen using a custom {@link NavigationTransition}.
     * @param component - The incoming component
     * @param transition - {@link NavigationTransition}
     * @public
     */
    customTransition: (component: React.ReactNode, transition: NavigationTransition) => void;
    /**
     * Animate layers with matching magicIds between screens. Layers are assigned matching IDs if they share a name, or were copied from one another.
     * The transition can be changed using a custom {@link NavigationTransition}.
     * @param component - The incoming component
     * @param transition - {@link NavigationTransition}
     * @public
     */
    magicMotion: (component: React.ReactNode, transition: NavigationTransition) => void;
}

/* Excluded from this release type: NavigationLink */

/* Excluded from this release type: NavigationProps */

/* Excluded from this release type: NavigationState */

/* Excluded from this release type: NavigationTarget */

/**
 * Can be used to define a custom navigation transition.
 * @public
 */
export declare interface NavigationTransition extends NavigationTransitionAnimation, NavigationTransitionBackdropColor {
    /**
     * Defines the begin state of the incoming screen wrapper.
     */
    enter?: Partial<FrameProps>;
    /**
     * Defines the end state of the outgoing screen wrapper.
     */
    exit?: Partial<FrameProps>;
    /**
     * Defines the position and size of the incoming screen wrapper. Defaults to top, right, bottom, and left of 0.
     */
    position?: NavigationTransitionPosition;
    /**
     * Defines whether the incoming screen should render over the current context, like an overlay or modal. Defaults to false.
     */
    overCurrentContext?: boolean;
    /**
     * Defines whether a tap in the background should dismiss the screen presented over the current context. Defaults to true.
     */
    goBackOnTapOutside?: boolean;
    /**
     * Defines whether the backface of the incoming and outgoing screens should be visible, necessary for certain 3D transitions. Defaults to true.
     */
    backfaceVisible?: boolean;
    /**
     * Defines whether the incoming and outgoing screens should auto animate their children. Defaults to false.
     */
    withMagicMotion?: boolean;
}

/**
 * @public
 */
export declare interface NavigationTransitionAnimation {
    /**
     * The animation defaults.
     */
    animation?: Transition;
}

/**
 * @public
 */
export declare interface NavigationTransitionAppearsFrom extends NavigationTransitionAnimation {
    /**
     * Defines which side the target will appear from.
     * @remarks
     *
     * - `"left"`
     * - `"right"`
     * - `"top"`
     * - `"bottom"`
     */
    appearsFrom?: NavigationTransitionSide;
}

/**
 * @public
 */
export declare interface NavigationTransitionBackdropColor {
    /**
     * Defines the backdrop color when the incoming screen is rendered over the current context. Defaults to the iOS dim color.
     */
    backdropColor?: string;
}

/* Excluded from this release type: NavigationTransitionDirection */

/**
 * @public
 */
export declare type NavigationTransitionPosition = Partial<Pick<FrameLayoutProperties, "top" | "right" | "bottom" | "left" | "center">>;

/**
 * @public
 */
export declare type NavigationTransitionSide = "left" | "right" | "top" | "bottom";

/* Excluded from this release type: NavigationTransitionType */

/* Excluded from this release type: NewConstraintProperties */

/** @public */
export declare interface NumberControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Number;
    defaultValue?: number;
    max?: number;
    min?: number;
    unit?: string;
    step?: number;
    displayStepper?: boolean;
}

/**
 * @remarks This feature is still in beta
 * @public
 */
export declare interface ObjectControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Object;
    controls: {
        [key: string]: ObjectPropertyControlDescription;
    };
    defaultValue?: {
        [key: string]: any;
    };
}

/**
 * Object sub type
 * Currently not supported: fused number, component instance, event handler, array
 * @public
 */
export declare type ObjectPropertyControlDescription<P = any> = Omit<NumberControlDescription<P>, "hidden"> | Omit<EnumControlDescription<P>, "hidden"> | Omit<BooleanControlDescription<P>, "hidden"> | Omit<StringControlDescription<P>, "hidden"> | Omit<ColorControlDescription<P>, "hidden"> | Omit<SegmentedEnumControlDescription<P>, "hidden"> | Omit<ImageControlDescription<P>, "hidden"> | Omit<FileControlDescription<P>, "hidden"> | Omit<TransitionControlDescription<P>, "hidden">;

/* Excluded from this release type: ObservableObject */

/**
 * @public
 */
declare type Observer<Value> = {
    update: UpdateFunction<Value>;
    finish: FinishFunction;
} | UpdateFunction<Value>;

declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

declare type Overflow = "visible" | "hidden" | "scroll" | "auto";

declare interface OverflowProperties {
    overflow: Overflow;
}

/**
 * @public
 */
export declare interface OverlayTransitionOptions extends NavigationTransitionAnimation, NavigationTransitionAppearsFrom, NavigationTransitionBackdropColor {
}

/** @public */
export declare type Override<T extends object = FrameProps & {
    [key: string]: any;
}> = OverrideObject<T> | OverrideFunction<T>;

/** @public */
export declare type OverrideFunction<P extends object = any> = (props: P) => Partial<P>;

/** @public */
export declare type OverrideObject<T extends object = any> = Partial<T>;

/* Excluded from this release type: PackageIdentifier */

/* Excluded from this release type: paddingFromProps */

declare interface PaddingProps {
    padding?: number;
    paddingPerSide?: boolean;
    paddingTop?: number;
    paddingRight?: number;
    paddingBottom?: number;
    paddingLeft?: number;
}

/**
 * The Page component allows you to create horizontally or vertically swipeable areas. It can be
 * imported from the Framer Library and used in code components. Add children to create pages to
 * swipe between. These children will be stretched to the size of the page component by default,
 * but can also be set to auto to maintain their original size.
 *
 * @remarks
 * ```jsx
 * import * as React from "react"
 * import { Frame, Page } from "framer"
 * export class Page extends React.Component {
 *   render() {
 *     return (
 *       <Page>
 *         <Frame />
 *       </Page>
 *     )
 *   }
 * }
 * ```
 * @public
 */
export declare function Page(props: Partial<PageProps>): JSX.Element;

/**
 * @public
 */
export declare type PageAlignment = "start" | "center" | "end";

declare type PageContentDimension = "auto" | "stretch";

declare type PageDirection = "horizontal" | "vertical";

/**
 * Page effects change the behavior of the transition when swiping between pages.
 * By default there is no page effect applied.
 * @remarks
 * ```jsx
 * import * as React from "react"
 * import { Page, PageEffect } from "framer"
 *
 * export function MyComponent() {
 *  return <Page defaultEffect={"cube"} />
 * }
 * ```
 *
 * `"none"` - No custom effect is applied. This is the default.
 * `"cube"` - Each page is positioned as a 3D cube, connected to the current page.
 * `"coverflow"` - Each page is positioned in 3D, behind the current page.
 * `"wheel"` - Each page is gently titled in 3D, like a wheel.
 * `"pile"` - Each page is stacked behind the current page.
 * @public
 */
export declare type PageEffect = "none" | "cube" | "coverflow" | "wheel" | "pile";

/**
 * Information about the current effect.
 * @public
 */
export declare interface PageEffectInfo {
    /**
     * The offset of this page, in pixels, measured from the left-most part of the container.
     * @public
     */
    offset: number;
    /**
     * The offset of this page, normalised to the page size.
     *
     * For instance, if each page is `200` pixels wide, and we're on page index `1`, the `normalizedOffset` of page index `0` will be `-1`.
     * @public
     */
    normalizedOffset: number;
    /**
     * The `width` and `height` of the page.
     * @public
     */
    size: Size;
    /**
     * The index of the current page. The first page is `0`, the second is `1` and so on.
     * @public
     */
    index: number;
    /**
     * The direction of page scrolling, `"horizontal"` or `"vertical"`
     * @public
     */
    direction: PageDirection;
    /**
     * The gap between each page, in pixels.
     * @public
     */
    gap: number;
    /**
     * The total number of pages.
     *
     * @public
     */
    pageCount: number;
}

declare interface PageEffectValues {
    [key: string]: string | number | boolean;
}

/**
 * Event callbacks for the Page component, can be used to react to and co-ordinate
 * with other components.
 *
 * @public
 */
export declare interface PageEvents {
    /**
     * A callback that will be invoked when changing the page.
     * @remarks
     * This will be invoked when the drag animation begins or when the page changes
     * programatically. It can be used to co-ordinate with other behaviors.
     *
     * @param currentIndex - The current page number
     * @param previousIndex - The index of the previous page
     * @public
     * @remarks
     * ```jsx
     * <Page
     *     onChangePage={(current, previous) => {
     *         console.log(current, previous)
     *     }}
     * />
     * ```
     */
    onChangePage(currentIndex: number, previousIndex: number): void;
}

/**
 * All properties that can be used with the {@link Page} component it also extends all {@link ScrollProps} properties.
 * ```jsx
 * <Page
 *   direction={"horizontal"}
 *   contentWidth={"stretch"}
 *   contentHeight={"stretch"}
 *   alignment={"center"}
 *   currentPage={0}
 *   animateCurrentPageUpdate={true}
 *   gap={10}
 *   padding={0}
 *   paddingPerSide={true}
 *   paddingTop={0}
 *   paddingRight={0}
 *   paddingBottom={0}
 *   paddingLeft={0}
 *   momentum={false}
 *   dragEnabled={false}
 *   defaultEffect={PageEffect.Cube}>
 *   <Frame background="#19E" />
 *   <Frame background="#5CF" />
 *   <Frame background="#2CD" />
 * </Page>
 * ```
 * @public
 */
export declare interface PageProperties {
    /**
     * Current swipe direction. Either "horizontal" or "vertical". Set to `"horizontal"` by
     * default.
     *
     * @remarks
     * ```jsx
     * <Page direction="horizontal" />
     * ```
     */
    direction: PageDirection;
    /**
     * Width of the pages within the component. Either "auto" or "stretch" or a numeric value. Set
     * to `"stretch"` by default.
     *
     * @remarks
     * ```jsx
     * <Page contentWidth="auto" />
     * ```
     */
    contentWidth: PageContentDimension | number;
    /**
     * Height of the pages within the component. Either "auto" or "stretch" or a numeric value. Set
     * to `"stretch"` by default.
     *
     * @remarks
     * ```jsx
     * <Page contentHeight="auto" />
     * ```
     */
    contentHeight: PageContentDimension | number;
    /**
     * Alignment of the pages within the component. Either "start", "center", or "end". Set to
     * `"start"` by default.
     *
     * @remarks
     * ```jsx
     * <Page alignment="center" />
     * ```
     */
    alignment: PageAlignment;
    /**
     * Index of the current page. Set to `0` by default.
     *
     * @remarks
     * ```jsx
     * <Page currentPage={5} />
     * ```
     */
    currentPage: number;
    /* Excluded from this release type: animateCurrentPageUpdate */
    /**
     * If `true`, this will lock dragging to the initial direction.
     *
     * @public
     *
     * ```jsx
     * <Page direction="both" directionLock={true} />
     * ```
     */
    directionLock?: boolean;
    /**
     * Enable or disable dragging to scroll. Defaults to `true`.
     *
     * @public
     *
     * ```jsx
     * <Page dragEnabled={false} />
     * ```
     */
    dragEnabled?: boolean;
    /**
     * Enable or disable wheel scroll. Defaults to `false`.
     *
     * @public
     *
     * ```jsx
     * <Page wheelEnabled={true} />
     * ```
     */
    wheelEnabled?: boolean;
    /**
     * Horizontal offset of the scrollable content. Set to `0` by default
     *
     * @remarks
     * ```jsx
     * <Page contentOffsetX={20} />
     * ```
     */
    contentOffsetX?: MotionValue<number> | number;
    /**
     * Vertical offset of the scrollable content. Set to `0` by default.
     *
     * @remarks
     * ```jsx
     * <Page contentOffsetY={20} />
     * ```
     */
    contentOffsetY?: MotionValue<number> | number;
    /**
     * A number describing the gap between the page elements. Set to `10` by default. Can not be negative.
     *
     * @remarks
     * ```jsx
     * <Page gap={0} />
     * ```
     * */
    gap: number;
    /**
     * Padding to be applied to all sides. Set to `0` by default.
     * To specify different padding for each side, provide
     * individual `paddingTop`, `paddingLeft`, `paddingRight` and `paddingBottom` values.
     *
     * ```jsx
     * <Page padding={20} />
     * ```
     */
    padding: number;
    /**
     * Flag to tell the Page to ignore the `padding` prop and apply values per-side.
     *
     * @remarks
     *
     * ```jsx
     * <Page paddingLeft={20}  />
     * ```
     */
    paddingPerSide?: boolean;
    /**
     * Value for the top padding of the container. Set to `0` by default.
     * ```jsx
     * <Page paddingTop={20}  />
     * ```
     */
    paddingTop?: number;
    /**
     * ```jsx
     * <Page paddingRight={20}  />
     * ```
     * Value for the right padding of the container. Set to `0` by default.
     */
    paddingRight?: number;
    /**
     * ```jsx
     * <Page paddingBottom={20}  />
     * ```
     * Value for the bottom padding of the container. Set to `0` by default.
     */
    paddingBottom?: number;
    /**
     * ```jsx
     * <Page paddingLeft={20}  />
     * ```
     * Value for the left padding of the container. Set to `0` by default.
     */
    paddingLeft?: number;
    /**
     * When enabled you can flick through multiple pages at once.
     * @remarks
     *
     * ```jsx
     * <Page momentum />
     * ```
     */
    momentum: boolean;
    /**
     * Pick one of the predefined effects. Either "none", "cube", "coverflow", "wheel" or "pile". Set to `"none"` by default.
     * @remarks
     *
     * ```jsx
     * <Page defaultEffect={"coverflow"} />
     * ```
     */
    defaultEffect: PageEffect;
    /**
     * Allows you to provide a custom transition effect for individual pages.
     *
     * This function is called once for every page, every time the scroll offset changes. It returns a new set of styles for this page.
     *
     * @param info - A {@link PageEffectInfo} object with information about the current effect.
     * @returns should return a new set of Frame properties.
     *
     * @remarks
     * ```jsx
     * function scaleEffect(info) {
     *     const { normalizedOffset } = info
     *     return {
     *         scale: Math.max(0, 1 + Math.min(0, normalizedOffset * -1))
     *     }
     * }
     *
     * return <Page effect={scaleEffect} />
     * ```
     * @public
     */
    effect?: (info: PageEffectInfo) => PageEffectValues;
    /* Excluded from this release type: __fromCodeComponentNode */
}

/**
 * The following are the props accepted by the Page component, these are all in
 * addition to the standard props accepted by all Frame components.
 * @public
 */
export declare interface PageProps extends PageProperties, Partial<Omit<FrameProps, "size" | "onScroll">>, LayerProps, Partial<PageEvents>, Partial<ScrollEvents> {
}

/* Excluded from this release type: ParentSize */

/* Excluded from this release type: ParentSizeState */

/* Excluded from this release type: parseVariant */

/* Excluded from this release type: pathDefaults */

/* Excluded from this release type: PathSegment */

/* Excluded from this release type: PathSegmentRecord */

/* Excluded from this release type: PathSegments */

declare interface PlaybackControls {
    stop: () => void;
}

declare interface PlaybackLifecycles<V> {
    onUpdate?: (latest: V) => void;
    onPlay?: () => void;
    onComplete?: () => void;
    onRepeat?: () => void;
    onStop?: () => void;
}

/**
 * @public
 */
export declare function Point(x: number, y: number): Point;

/**
 * @public
 */
export declare interface Point {
    x: number;
    y: number;
}

/**
 * @public
 */
export declare namespace Point {
    /* Excluded from this release type: add */
    /* Excluded from this release type: subtract */
    /* Excluded from this release type: multiply */
    /* Excluded from this release type: divide */
    /* Excluded from this release type: absolute */
    /* Excluded from this release type: reverse */
    /* Excluded from this release type: pixelAligned */
    /* Excluded from this release type: distance */
    /* Excluded from this release type: angle */
    /** @public */
    const isEqual: (a: Point, b: Point) => boolean;
    /* Excluded from this release type: rotationNormalizer */
    /* Excluded from this release type: center */
}

declare interface PositionProperties {
    top: number | string;
    right: number | string;
    bottom: number | string;
    left: number | string;
    center: "x" | "y" | boolean;
}

/* Excluded from this release type: PresentationTree */

/* Excluded from this release type: PresentationTreeCache */

/**
 * Prints to the console.
 *
 * @param args - Arguments to print
 * @public
 */
export declare function print(...args: any[]): void;

/** @public */
export declare type PropertyControls<ComponentProps = any, ArrayTypes = any> = {
    [K in keyof ComponentProps]?: ControlDescription<Partial<ComponentProps>>;
};

/* Excluded from this release type: PropertyStore */

/* Excluded from this release type: PropertyTree */

declare interface Props {
    children: React.ReactNode;
    size: {
        width?: string | number;
        height?: string | number;
    };
    title?: string;
    description?: string;
    hide?: boolean;
    insideUserCodeComponent?: boolean;
}

/* Excluded from this release type: Props_2 */

declare interface Props_3 {
    children: React.ReactNode;
}

/* Excluded from this release type: ProvideParentSize */

/**
 * @public
 */
export declare interface PushTransitionOptions extends NavigationTransitionAnimation, NavigationTransitionAppearsFrom {
}

/**
 * @public
 */
export declare type RadialGradient = RadialGradientBase & (SimpleGradient | MultiStopGradient);

/**
 * @public
 */
export declare namespace RadialGradient {
    /**
     * @param value -
     * @public
     */
    export function isRadialGradient(value: any): value is RadialGradient;
    /* Excluded from this release type: hash */
    /* Excluded from this release type: toCSS */
}

/**
 * @public
 */
export declare interface RadialGradientBase {
    alpha: number;
    widthFactor: number;
    heightFactor: number;
    centerAnchorX: number;
    centerAnchorY: number;
}

/* Excluded from this release type: RadialGradientElementProperties */

/** @public */
export declare interface RadiusProperties {
    radius: RadiusValue | Partial<{
        topLeft: RadiusValue;
        topRight: RadiusValue;
        bottomLeft: RadiusValue;
        bottomRight: RadiusValue;
    }>;
}

declare type RadiusValue = number | Animatable<number> | string;

/* Excluded from this release type: ReactComponentDefinition */

/* Excluded from this release type: ReactComponentDefinitionProvider */

/* Excluded from this release type: ReadonlyFont */

/* Excluded from this release type: ReadonlyTypeface */

/**
 * @public
 */
export declare interface Rect extends Point, Size {
}

/**
 * @public
 */
export declare namespace Rect {
    /**
     *
     * @param rect -
     * @param other -
     * @public
     */
    export function equals(rect: Rect | null, other: Rect | null): boolean;
    /* Excluded from this release type: atOrigin */
    /* Excluded from this release type: fromTwoPoints */
    /* Excluded from this release type: fromRect */
    /* Excluded from this release type: multiply */
    /* Excluded from this release type: divide */
    /* Excluded from this release type: offset */
    /* Excluded from this release type: inflate */
    /* Excluded from this release type: pixelAligned */
    /* Excluded from this release type: halfPixelAligned */
    /* Excluded from this release type: round */
    /* Excluded from this release type: roundToOutside */
    /* Excluded from this release type: minX */
    /* Excluded from this release type: maxX */
    /* Excluded from this release type: minY */
    /* Excluded from this release type: maxY */
    /* Excluded from this release type: positions */
    /* Excluded from this release type: center */
    /* Excluded from this release type: fromPoints */
    /* Excluded from this release type: merge */
    /* Excluded from this release type: intersection */
    /* Excluded from this release type: points */
    /** Takes a rect and transforms it by a matrix, resulting in the bounding rectangle of the
     * rotated and/or translated original.
     * @param rect - rectangle to transform
     * @param matrix - matrix to transform by
     * @returns The bounding rectangle of the rotated and/or translated rect.
     */
    const transform: (rect: Rect, matrix: DOMMatrixReadOnly) => Rect;
    /* Excluded from this release type: containsPoint */
    /**
     * Returns wether a rect contains another rect entirely
     * @param rectA -
     * @param rectB -
     * @returns true if rectA contains rectB
     */
    const containsRect: (rectA: Rect, rectB: Rect) => boolean;
    /* Excluded from this release type: toCSS */
    /* Excluded from this release type: inset */
    /* Excluded from this release type: intersects */
    /* Excluded from this release type: overlapHorizontally */
    /* Excluded from this release type: overlapVertically */
    /* Excluded from this release type: doesNotIntersect */
    /**
     *
     * @param rectA -
     * @param rectB -
     * @returns if the input rectangles are equal in size and position
     * @public
     */
    const isEqual: (rectA: Rect | null, rectB: Rect | null) => boolean;
    /* Excluded from this release type: cornerPoints */
    /* Excluded from this release type: midPoints */
    /* Excluded from this release type: pointDistance */
    /* Excluded from this release type: fromAny */
}

declare interface RectProviding {
    rect(props: Partial<FrameProps>, parentSize?: Size | null): Rect | null;
}

declare interface RelayoutInfo {
    delta: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
}

/* Excluded from this release type: RenderEnvironment */

/** Given a CanvasNode id return a ReactNode */
declare type RenderNode = (nodeId: string) => React.ReactNode;

/* Excluded from this release type: RenderNodeProvider */

/**
 * The `RenderTarget` represents the current environment in which a component
 * is running. This is most commonly either the editor canvas in Framer or in
 * the generated preview window.
 *
 * @remarks
 * Code components can use the `RenderTarget.current()` method to check for
 * the environment within their components and vary rendering accordingly. The
 * most common case would be to improve performance while rendering in the
 * Framer canvas where components that take too long to render will be replaced
 * with a placeholder. The `RenderTarget.hasRestrictions()` method can be used
 * to check explicitly for this case.
 *
 * @public
 */
export declare enum RenderTarget {
    /**
     * The component is to be rendered for the Framer canvas.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   if (RenderTarget.current() === RenderTarget.canvas) {
     *     return <CanvasComponent />
     *   }
     *   return <DefaultComponent />
     * }
     * ```
     */
    canvas = "CANVAS",
    /**
     * The component is to be rendered for export.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   if (RenderTarget.current() === RenderTarget.export) {
     *     return <ExportComponent />
     *   }
     *   return <DefaultComponent />
     * }
     * ```
     */
    export = "EXPORT",
    /**
     * The component is to be rendered as a preview thumbnail, for example in the
     * component panel.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   if (RenderTarget.current() === RenderTarget.thumbnail) {
     *     return <Thumbnail />
     *   }
     *   return <DefaultComponent />
     * }
     * ```
     */
    thumbnail = "THUMBNAIL",
    /**
     * The component is being rendered in the preview window.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   React.useEffect(() => {
     *     if (RenderTarget.current() === RenderTarget.preview) {
     *       // Do something in preview.
     *     }
     *   })
     *   return <DefaultComponent />
     * }
     * ```
     */
    preview = "PREVIEW"
}

/**
 * @internalRemarks
 * This is a read-only equivalent of RenderEnvironment.target that is exposed
 * to components for context-dependent rendering
 * @public
 */
export declare namespace RenderTarget {
    /**
     * Returns the current `RenderTarget` allowing components to apply
     * different behaviors depending on the environment.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   if (RenderTarget.current() === RenderTarget.thumbnail) {
     *     return <PreviewIcon />
     *   }
     *   return <Frame>...</Frame>
     * }
     * ```
     */
    export function current(): RenderTarget;
    /**
     * Returns true if the current `RenderTarget` has performance restrictions.
     * Use this to avoid doing heavy work in these contexts because they may
     * bail on the rendering if the component takes too long.
     *
     * @remarks
     * ```jsx
     * function App() {
     *   if (RenderTarget.hasRestrictions()) {
     *     return <SomePlaceholder />
     *   }
     *   return <RichPreviewContent />
     * }
     * ```
     */
    export function hasRestrictions(): boolean;
}

declare type ResolveLayoutTransition = (info: RelayoutInfo) => Transition | boolean;

/* Excluded from this release type: roundedNumber */

/* Excluded from this release type: roundedNumberString */

/* Excluded from this release type: roundWithOffset */

/* Excluded from this release type: Runtime */

/* Excluded from this release type: SandboxReactComponentDefinition */

/**
 * @public
 */
export declare function Scroll(props: ScrollProps): JSX.Element;

/**
 * The properties for the {@link Scroll} component, which are also available within other components, like {@link Page}.
 * @public
 */
export declare interface ScrollConfig {
    /**
     * Controls the axis of drag-scrolling.
     * Defaults to `"vertical"` for vertical scrolling.
     *
     * @remarks
     * Set `"horizontal"` or `"vertical"` to only drag in a specific direction.
     * Set `"both"` to drag both directions.
     *
     * ```jsx
     * // Horizontal
     * <Scroll direction="horizontal" />
     *
     * // Vertical
     * <Scroll direction="vertical" />
     *
     * // Locked
     * <Scroll direction="locked" />
     *
     * // Both directions
     * <Scroll direction="both" />
     * ```
     *
     * @public
     */
    direction?: "horizontal" | "vertical" | "both";
    /**
     * If `true`, this will lock dragging to the initial direction.
     *
     * @public
     *
     * ```jsx
     * <Scroll direction="both" directionLock={true} />
     * ```
     */
    directionLock?: boolean;
    /**
     * Enable or disable dragging to scroll. Defaults to `true`.
     *
     * @public
     *
     * ```jsx
     * <Scroll dragEnabled={false} />
     * ```
     */
    dragEnabled?: boolean;
    /**
     * Enable or disable wheel scroll. Defaults to `true`.
     *
     * @public
     *
     * ```jsx
     * <Scroll wheelEnabled={false} />
     * ```
     */
    wheelEnabled?: boolean;
    /**
     * Horizontal offset of the scrollable content. Set to `0` by default
     *
     * @remarks
     * ```jsx
     * <Scroll contentOffsetX={20} />
     * ```
     */
    contentOffsetX?: MotionValue<number> | number;
    /**
     * Vertical offset of the scrollable content. Set to `0` by default.
     *
     * @remarks
     * ```jsx
     * <Scroll contentOffsetY={20} />
     * ```
     */
    contentOffsetY?: MotionValue<number> | number;
    /**
     * Width of the scrollable content.
     *
     * @remarks
     * ```jsx
     * <Scroll contentWidth={500} />
     * ```
     */
    contentWidth?: number;
    /**
     * Height of the scrollable content.
     *
     * @remarks
     * ```jsx
     * <Scroll contentHeight={500} />
     * ```
     */
    contentHeight?: number;
    /**
     * Add a custom control for the scroll animation.
     * @remarks
     * ```jsx
     * const controls = useAnimation()
     * controls.start({ y: -50 })
     * <Scroll scrollAnimate={controls} />
     * ```
     * @public
     * */
    scrollAnimate?: FrameProps["animate"];
    /* Excluded from this release type: __fromCodeComponentNode */
    /* Excluded from this release type: className */
}

/**
 * @public
 */
export declare interface ScrollEvents {
    /**
     * Called when scrolling starts.
     *
     * @remarks
     * ```jsx
     * function onScrollStart(info) {
     *   console.log(info.offset, info.velocity)
     * }
     *
     * <Scroll onScrollStart={onScrollStart} />
     * ```
     * @param info - An {@link PanInfo} object containing `x` and `y` values for:
     *
     *   - `point`: Relative to the device or page.
     *   - `delta`: Distance moved since the last event.
     *   - `offset`: Offset from the original pan event.
     *   - `velocity`: Current velocity of the pointer.
     * @public
     */
    onScrollStart?(info: PanInfo): void;
    /**
     * Called periodically during scrolling.
     *
     * @remarks
     * ```jsx
     * function onScroll(info) {
     *   console.log(info.offset, info.velocity)
     * }
     *
     * <Scroll onScroll={onScroll} />
     * ```
     * @param info - An {@link PanInfo} object containing `x` and `y` values for:
     *
     *   - `point`: Relative to the device or page.
     *   - `delta`: Distance moved since the last event.
     *   - `offset`: Offset from the original pan event.
     *   - `velocity`: Current velocity of the pointer.
     * @public
     */
    onScroll?(info: PanInfo): void;
    /**
     * Called when scrolling ends.
     *
     * @remarks
     * ```jsx
     * function onScrollEnd(info) {
     *   console.log(info.offset, info.velocity)
     * }
     *
     * <Scroll onScrollEnd={onScrollEnd} />
     * ```
     * @param info - An {@link PanInfo} object containing `x` and `y` values for:
     *
     *   - `point`: Relative to the device or page.
     *   - `delta`: Distance moved since the last event.
     *   - `offset`: Offset from the original pan event.
     *   - `velocity`: Current velocity of the pointer.
     * @public
     */
    onScrollEnd?(info: PanInfo): void;
}

/**
 * @public
 */
export declare interface ScrollProps extends Omit<Partial<FrameProps>, "onScroll" | "size" | "overflow">, ScrollEvents, ScrollConfig {
}

/**
 * @deprecated - Use {@link EnumControlDescription} instead, and enable displaySegmentedControl.
 * @public
 */
export declare interface SegmentedEnumControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.SegmentedEnum;
    defaultValue?: string;
    options: string[];
    optionTitles?: string[];
}

/* Excluded from this release type: serverURL */

declare type ServerURLArguments = StringArray | StringArray[];

/* Excluded from this release type: setGlobalRenderEnvironment */

declare type SetState<State> = (latest: State) => void;

/** @public */
export declare interface Shadow {
    color: string;
    x: number;
    y: number;
    blur: number;
}

/** @public */
export declare namespace Shadow {
    export function is(shadow: any): shadow is Shadow;
}

/**
 * @public
 */
declare interface SimpleGradient {
    start: string;
    end: string;
}

/**
 * @public
 */
export declare function Size(width: number, height: number): Size;

/**
 * @public
 */
export declare interface Size {
    width: number;
    height: number;
}

/**
 * @public
 */
export declare namespace Size {
    /* Excluded from this release type: equals */
    /* Excluded from this release type: update */
    /* Excluded from this release type: subtract */
    /**
     * @public
     */
    const zero: Size;
    /**
     * Checks if the size has a zero width and zero height
     * @param size - size to check
     * @public
     */
    const isZero: (size: Size) => boolean;
    /* Excluded from this release type: defaultIfZero */
}

declare interface SizeProperties {
    width: number | string;
    height: number | string;
    minWidth?: number | string;
    minHeight?: number | string;
    size: number | string;
}

/* Excluded from this release type: SpringAnimator */

declare type SpringOptions = TensionFrictionSpringOptions | DampingDurationSpringOptions;

/**
 * @public
 */
export declare const Stack: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<StackProperties> & React.RefAttributes<HTMLDivElement>>>;

/**
 * @public
 */
export declare type StackAlignment = "start" | "center" | "end";

/**
 * @public
 */
export declare type StackDirection = "horizontal" | "vertical";

/**
 * @public
 */
export declare type StackDistribution = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";

/**
 * The Stack component will automatically distribute its contents based on its
 * properties. The Stack component takes the same props as the {@link Frame} component
 * as well as a few additional interface defined below.
 *
 * @remarks
 * ```jsx
 * function MyComponent() {
 *   return (
 *     <Stack>
 *       <Frame />
 *       <Frame />
 *       <Frame />
 *     </Stack>
 *   )
 * }
 * ```
 * @public
 */
export declare interface StackProperties extends StackSpecificProps, FrameProps, WillChangeTransformProp {
    children?: React.ReactNode;
    /* Excluded from this release type: parentSize */
    className?: string;
}

/**
 * @public
 */
export declare interface StackSpecificProps {
    /**
     * Defines the flow direction of the stack contents, either `"vertical"` or `"horizontal"`. Set
     * to `"vertical"` by default.
     *
     * @remarks
     * ```jsx
     * // Vertical
     * <Stack direction="vertical" />
     *
     * // Horizontal
     * <Stack direction="horizontal" />
     * ```
     */
    direction: StackDirection;
    /**
     * Defines the distribution of the stack contents. Set to `"space-around"` by default, which makes the contents spread evenly across the container.
     * @remarks
     *
     * - `"start"` — from the leading edge of the container.
     * - `"center"` — centered within the container.
     * - `"end"` — from the trailing edge of the container.
     * - `"space-between"` — spread evenly in the container.
     * - `"space-around"` — spread evenly with excess applied at the start / end.
     * - `"space-evenly"` — spread with equal padding between contents.
     *
     * ```jsx
     * // Default
     * <Stack distribution="space-around" />
     *
     * // Start
     * <Stack distribution="start" />
     *
     * // Center
     * <Stack distribution="center" />
     *
     * // End
     * <Stack distribution="end" />
     *
     * // Space Between
     * <Stack distribution="space-between" />
     *
     * // Space Around
     * <Stack distribution="space-around" />
     *
     * // Space Evenly
     * <Stack distribution="space-evenly" />
     * ```
     */
    distribution: StackDistribution;
    /**
     * Defines the distribution of the stack contents on the alternative axis to the direction. Can
     * be one of `"start"`, `"end",` or `"center"`. Set to `"center"` by default.
     *
     * @remarks
     * ```jsx
     * <Stack alignment="end" />
     * ```
     */
    alignment: StackAlignment;
    /**
     * The gap between items in the stack. Set to `10` by default.
     * @remarks
     * ```jsx
     * <Stack gap={120} />
     * ```
     */
    gap: number;
    /**
     * Padding to be applied to all sides of container. Set to `0` by default.
     * @remarks
     * To specify different padding for each side you can provide
     * individual `paddingTop`, `paddingLeft`, `paddingRight` and `paddingBottom` values.
     *
     * ```jsx
     * <Stack padding={20} />
     * ```
     */
    padding: number;
    /**
     * Flag to tell the Stack to ignore the `padding` prop and apply values per-side.
     *
     * @remarks
     *
     * ```jsx
     * <Stack paddingPerSide paddingLeft={20} paddingBottom={20} />
     * ```
     */
    paddingPerSide: boolean;
    /**
     * Value for the top padding of the container. Set to `0` by default.
     *
     * @remarks
     *
     * ```jsx
     * <Stack paddingTop={20} />
     * ```
     */
    paddingTop: number;
    /**
     * Value for the right padding of the container. Set to `0` by default.
     * @remarks
     *
     * ```jsx
     * <Stack paddingRight={20} />
     * ```
     */
    paddingRight: number;
    /**
     * Value for the left padding of the container. Set to `0` by default.
     *       @remarks
     *
     * ```jsx
     * <Stack paddingLeft={20} />
     * ```
     */
    paddingLeft: number;
    /**
     * Value for the bottom padding of the container. Set to `0` by default.
     * @remarks
     *
     * ```jsx
     * <Stack paddingBottom={20} />
     * ```
     */
    paddingBottom: number;
    /* Excluded from this release type: __fromCodeComponentNode */
}

/* Excluded from this release type: startAnimation */

/* Excluded from this release type: State */

/* Excluded from this release type: State_2 */

declare type StringArray = string[];

/** @public */
export declare interface StringControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.String;
    defaultValue?: string;
    placeholder?: string;
    obscured?: boolean;
    displayTextArea?: boolean;
}

/* Excluded from this release type: StrokeAlignment */

/* Excluded from this release type: SVG */

/* Excluded from this release type: SVGProperties */

/* Excluded from this release type: SVGProps */

/* Excluded from this release type: systemTypefaceName */

declare interface TensionFrictionSpringOptions {
    tension: number;
    friction: number;
    tolerance: number;
    velocity: number;
}

/* Excluded from this release type: Text */

/* Excluded from this release type: TextAlignment */

/** @public */
export declare interface TextColorProperties {
    color: Color | string;
}

/* Excluded from this release type: TextProperties */

/* Excluded from this release type: TextProps */

/* Excluded from this release type: TextVerticalAlignment */

/* Excluded from this release type: throttle */

declare type ToAnimatableOrValue<PossiblyAnimatable> = PossiblyAnimatable extends Animatable<infer Value> ? Value | Animatable<Value> : PossiblyAnimatable | Animatable<PossiblyAnimatable>;

/* Excluded from this release type: toFlexDirection */

/* Excluded from this release type: toJustifyOrAlignment */

/* Excluded from this release type: TokenDefinition */

/* Excluded from this release type: TokenIdentifier */

/* Excluded from this release type: TokenMap */

/* Excluded from this release type: toSVGPath */

/**
 * @public
 */
declare type TransactionId = number;

/* Excluded from this release type: transformString */

/* Excluded from this release type: TransformValues */

/** @public */
export declare interface TransitionControlDescription<P = any> extends BaseControlDescription<P> {
    type: ControlType.Transition;
    defaultValue?: null | Transition;
}

/* Excluded from this release type: Typeface */

/* Excluded from this release type: TypefaceLocator */

/* Excluded from this release type: TypefaceSelector */

/* Excluded from this release type: TypefaceSourceName */

/* Excluded from this release type: TypefaceSourceNames */

declare type UnknownProps = Record<string, unknown>;

/**
 * @public
 */
declare type UpdateFunction<Value> = (change: Change<Value>, transaction?: TransactionId) => void;

/**
 * @public
 */
declare interface UpdateObserver<Value> {
    onUpdate(handler: Observer<Value>): Cancel;
}

/* Excluded from this release type: useAnimatedState */
export { useInvertedScale }

/**
 * Used to know if a code component is a child of the current screen.
 * This can be useful for resetting timers or interactions that need to trigger on every navigation.
 * @public
 */
export declare function useIsInCurrentNavigationTarget(): boolean;

/* Excluded from this release type: useMeasureLayout */

/**
 * @returns NavigationInterface {@link NavigationInterface}
 * @public
 */
export declare function useNavigation(): NavigationInterface;

/* Excluded from this release type: UserConstraintValues */

/* Excluded from this release type: useRenderEnvironment */

/* Excluded from this release type: useVariantState */

/* Excluded from this release type: ValueInterpolation */

/* Excluded from this release type: valueToDimensionType */

declare type VariantNames = string[];

/**
 * Variant / Node Id / React Prop / Val
 */
declare type VariantProps = Record<string, Record<string, UnknownProps>>;

/* Excluded from this release type: VariantSelector */

declare interface VariantState {
    variants: VariantNames;
    baseVariant: string | undefined;
    gestureVariant: string | undefined;
    classNames: string;
    transition: Partial<Transition> | undefined;
    addVariantProps: (elementId: string) => UnknownProps;
    setVariant: (variant: string | typeof CycleVariantState) => void;
    setGestureState: (gestureState: GestureState) => void;
}

/* Excluded from this release type: Vector */

/* Excluded from this release type: VectorGroup */

/* Excluded from this release type: VectorGroupProperties */

/* Excluded from this release type: VectorGroupProps */

/* Excluded from this release type: VectorProperties */

/* Excluded from this release type: VectorProps */

/**
 * This version is automatically updated by the Makefile
 * @public
 */
export declare const version = "1.2.24";

/**
 * @internalremarks do no use separately from FrameProps
 * @public
 * */
export declare interface VisualProperties {
    /**
     * Defines whether or not the `Frame` is visible. Unlike `opacity`, this property cannot be animated. Set to `true` by default. Maps to CSS.
     * @remarks
     * ```jsx
     * <Frame visible={false} />
     * ```
     * @public
     */
    visible: boolean;
    /**
     * Set the opacity value, which allows you to make elements semi-transparent or entirely hidden. Useful for show-and-hide animations.
     * Set to `1` by default.
     * @remarks
     * ```jsx
     * <Frame opacity={0.5} />
     * ```
     * @public
     */
    opacity: number | MotionValue<number>;
    /**
     * Set the CSS border property, which accepts width, style and color.
     * Set to `"none"` by default.
     * @remarks
     * ```jsx
     * <Frame border="1px solid #09F" />
     * ```
     * @public
     */
    border: string | MotionValue<string>;
    /**
     * Set the CSS border-radius property, in pixels or percentages.
     * Set to `0` by default.
     * @remarks
     * ```jsx
     * // Radius with pixels
     * <Frame radius={10} />
     *
     * // Radius with percentages
     * <Frame radius="50%" />
     * ```
     * @public
     */
    radius: number | string | MotionValue<number | string>;
    /**
     * Set the CSS border-radius property, in pixels or percentages. Alias for `radius`
     * Set to `0` by default.
     * @remarks
     * ```jsx
     * // Radius with pixels
     * <Frame borderRadius={10} />
     *
     * // Radius with percentages
     * <Frame borderRadius="50%" />
     * ```
     * @public
     */
    borderRadius: number | string | MotionValue<number | string>;
    /**
     * Set the color for text elements inside of a `Frame`. By default, text within Frames will be rendered in black.
     * @remarks
     * ```jsx
     * <Frame color="#09F" />
     * ```
     * @public
     */
    color: string | MotionValue<string>;
    /**
     * Set the CSS overflow property. Set to `"visible"` by default.
     * @remarks
     * ```jsx
     * <Frame overflow="hidden" />
     * ```
     * @public
     */
    overflow: "visible" | "hidden";
    /**
     * Set the CSS box-shadow property.
     * @remarks
     * ```jsx
     * <Frame shadow="10px 5px 5px black" />
     * ```
     * @public
     */
    shadow: string | MotionValue<string>;
    /**
     * Position the children of the frame in 3D space. Set to `false` by default.
     * @remarks
     * ```jsx
     * <Frame preserve3d={true} />
     * ```
     * @public
     */
    preserve3d: boolean;
    /**
     * Sets whether the back face is visible when turned towards the user. Set to `true` by default.
     * @remarks
     * ```jsx
     * <Frame backfaceVisible={true} />
     * ```
     * @public
     */
    backfaceVisible: boolean;
}

/* Excluded from this release type: WebFontLocator */

declare interface WillChangeTransformProp {
    willChangeTransform?: boolean;
}

/* Excluded from this release type: withCSS */

declare interface WithEventsProperties extends WithPanHandlers, WithTapHandlers, WithMouseHandlers, WithMouseWheelHandler {
}

/**
 * @public
 */
export declare interface WithFractionOfFreeSpace {
    /* Excluded from this release type: freeSpaceInParent */
    /* Excluded from this release type: freeSpaceUnitDivisor */
}

/* Excluded from this release type: withMeasuredSize */

declare interface WithMouseHandlers {
    onMouseDown: EventHandler;
    onClick: EventHandler;
    onMouseUp: EventHandler;
    onMouseEnter: EventHandler;
    onMouseLeave: EventHandler;
}

declare interface WithMouseWheelHandler {
    onMouseWheelStart: EventHandler;
    onMouseWheel: EventHandler;
    onMouseWheelEnd: EventHandler;
}

/* Excluded from this release type: WithNavigator */

/** @public */
export declare interface WithOpacity {
    opacity: number | Animatable<number>;
}

/* Excluded from this release type: withOpacity */

/* Excluded from this release type: WithOverride */

declare interface WithPanHandlers {
    onPanStart: EventHandler;
    onPan: EventHandler;
    onPanEnd: EventHandler;
}

/* Excluded from this release type: WithPath */

/* Excluded from this release type: withPath */

/* Excluded from this release type: WithPaths */

/* Excluded from this release type: WithShape */

/* Excluded from this release type: withShape */

declare interface WithTapHandlers {
    onTapStart: EventHandler;
    onTap: EventHandler;
    onTapEnd: EventHandler;
}

export * from "framer-motion";

export { }