framer-motion 12.23.5 → 12.23.7

package/dist/{types.d-D0HXPxHm.d.ts → types.d-Bq-Qm38R.d.ts}

@@ -1,10 +1,51 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
 import { CSSProperties, PropsWithoutRef, RefAttributes, JSX, SVGAttributes } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as motion_dom from 'motion-dom';
-import { TransformProperties, MotionNodeOptions, MotionValue, SVGPathProperties, Transition, JSAnimation, ValueTransition, TargetAndTransition, AnyResolvedKeyframe, KeyframeResolver, AnimationDefinition, Batcher } from 'motion-dom';
+import { Transition, TransformProperties, MotionNodeOptions, MotionValue, SVGPathProperties, JSAnimation, ValueTransition, TargetAndTransition, AnyResolvedKeyframe, KeyframeResolver, AnimationDefinition, Batcher } from 'motion-dom';
 import { TransformPoint, Box, Delta, Point, Axis } from 'motion-utils';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ReducedMotionConfig = "always" | "never" | "user";
+/**
+ * @public
+ */
+interface MotionConfigContext {
+    /**
+     * Internal, exported only for usage in Framer
+     */
+    transformPagePoint: TransformPoint;
+    /**
+     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
+     * it'll disable all dynamic functionality.
+     */
+    isStatic: boolean;
+    /**
+     * Defines a new default transition for the entire tree.
+     *
+     * @public
+     */
+    transition?: Transition;
+    /**
+     * If true, will respect the device prefersReducedMotion setting by switching
+     * transform animations off.
+     *
+     * @public
+     */
+    reducedMotion?: ReducedMotionConfig;
+    /**
+     * A custom `nonce` attribute used when wanting to enforce a Content Security Policy (CSP).
+     * For more details see:
+     * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles
+     *
+     * @public
+     */
+    nonce?: string;
+}
+/**
+ * @public
+ */
+declare const MotionConfigContext: React$1.Context<MotionConfigContext>;
 
 /**
  * Either a string, or array of strings, that reference variants defined via the `variants` prop.
@@ -55,62 +96,232 @@ interface MotionProps extends MotionNodeOptions {
     children?: React.ReactNode | MotionValueNumber | MotionValueString;
 }
 
-type ReducedMotionConfig = "always" | "never" | "user";
 /**
  * @public
  */
-interface MotionConfigContext {
-    /**
-     * Internal, exported only for usage in Framer
-     */
-    transformPagePoint: TransformPoint;
+interface PresenceContextProps {
+    id: string;
+    isPresent: boolean;
+    register: (id: string | number) => () => void;
+    onExitComplete?: (id: string | number) => void;
+    initial?: false | VariantLabels;
+    custom?: any;
+}
+/**
+ * @public
+ */
+declare const PresenceContext: React$1.Context<PresenceContextProps | null>;
+
+interface VisualState<Instance, RenderState> {
+    renderState: RenderState;
+    latestValues: ResolvedValues;
+    onMount?: (instance: Instance) => void;
+}
+type UseVisualState<Instance, RenderState> = (props: MotionProps, isStatic: boolean) => VisualState<Instance, RenderState>;
+interface UseVisualStateConfig<RenderState> {
+    scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps;
+    createRenderState: () => RenderState;
+}
+declare const makeUseVisualState: <I, RS>(config: UseVisualStateConfig<RS>) => UseVisualState<I, RS>;
+
+interface HTMLElements {
+    a: HTMLAnchorElement;
+    abbr: HTMLElement;
+    address: HTMLElement;
+    area: HTMLAreaElement;
+    article: HTMLElement;
+    aside: HTMLElement;
+    audio: HTMLAudioElement;
+    b: HTMLElement;
+    base: HTMLBaseElement;
+    bdi: HTMLElement;
+    bdo: HTMLElement;
+    big: HTMLElement;
+    blockquote: HTMLQuoteElement;
+    body: HTMLBodyElement;
+    br: HTMLBRElement;
+    button: HTMLButtonElement;
+    canvas: HTMLCanvasElement;
+    caption: HTMLElement;
+    center: HTMLElement;
+    cite: HTMLElement;
+    code: HTMLElement;
+    col: HTMLTableColElement;
+    colgroup: HTMLTableColElement;
+    data: HTMLDataElement;
+    datalist: HTMLDataListElement;
+    dd: HTMLElement;
+    del: HTMLModElement;
+    details: HTMLDetailsElement;
+    dfn: HTMLElement;
+    dialog: HTMLDialogElement;
+    div: HTMLDivElement;
+    dl: HTMLDListElement;
+    dt: HTMLElement;
+    em: HTMLElement;
+    embed: HTMLEmbedElement;
+    fieldset: HTMLFieldSetElement;
+    figcaption: HTMLElement;
+    figure: HTMLElement;
+    footer: HTMLElement;
+    form: HTMLFormElement;
+    h1: HTMLHeadingElement;
+    h2: HTMLHeadingElement;
+    h3: HTMLHeadingElement;
+    h4: HTMLHeadingElement;
+    h5: HTMLHeadingElement;
+    h6: HTMLHeadingElement;
+    head: HTMLHeadElement;
+    header: HTMLElement;
+    hgroup: HTMLElement;
+    hr: HTMLHRElement;
+    html: HTMLHtmlElement;
+    i: HTMLElement;
+    iframe: HTMLIFrameElement;
+    img: HTMLImageElement;
+    input: HTMLInputElement;
+    ins: HTMLModElement;
+    kbd: HTMLElement;
+    keygen: HTMLElement;
+    label: HTMLLabelElement;
+    legend: HTMLLegendElement;
+    li: HTMLLIElement;
+    link: HTMLLinkElement;
+    main: HTMLElement;
+    map: HTMLMapElement;
+    mark: HTMLElement;
+    menu: HTMLElement;
+    menuitem: HTMLElement;
+    meta: HTMLMetaElement;
+    meter: HTMLMeterElement;
+    nav: HTMLElement;
+    noindex: HTMLElement;
+    noscript: HTMLElement;
+    object: HTMLObjectElement;
+    ol: HTMLOListElement;
+    optgroup: HTMLOptGroupElement;
+    option: HTMLOptionElement;
+    output: HTMLOutputElement;
+    p: HTMLParagraphElement;
+    param: HTMLParamElement;
+    picture: HTMLElement;
+    pre: HTMLPreElement;
+    progress: HTMLProgressElement;
+    q: HTMLQuoteElement;
+    rp: HTMLElement;
+    rt: HTMLElement;
+    ruby: HTMLElement;
+    s: HTMLElement;
+    samp: HTMLElement;
+    search: HTMLElement;
+    slot: HTMLSlotElement;
+    script: HTMLScriptElement;
+    section: HTMLElement;
+    select: HTMLSelectElement;
+    small: HTMLElement;
+    source: HTMLSourceElement;
+    span: HTMLSpanElement;
+    strong: HTMLElement;
+    style: HTMLStyleElement;
+    sub: HTMLElement;
+    summary: HTMLElement;
+    sup: HTMLElement;
+    table: HTMLTableElement;
+    template: HTMLTemplateElement;
+    tbody: HTMLTableSectionElement;
+    td: HTMLTableDataCellElement;
+    textarea: HTMLTextAreaElement;
+    tfoot: HTMLTableSectionElement;
+    th: HTMLTableHeaderCellElement;
+    thead: HTMLTableSectionElement;
+    time: HTMLTimeElement;
+    title: HTMLTitleElement;
+    tr: HTMLTableRowElement;
+    track: HTMLTrackElement;
+    u: HTMLElement;
+    ul: HTMLUListElement;
+    var: HTMLElement;
+    video: HTMLVideoElement;
+    wbr: HTMLElement;
+    webview: HTMLWebViewElement;
+}
+
+interface TransformOrigin {
+    originX?: number | string;
+    originY?: number | string;
+    originZ?: number | string;
+}
+interface HTMLRenderState {
     /**
-     * Internal. Determines whether this is a static context ie the Framer canvas. If so,
-     * it'll disable all dynamic functionality.
+     * A mutable record of transforms we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
      */
-    isStatic: boolean;
+    transform: ResolvedValues;
     /**
-     * Defines a new default transition for the entire tree.
-     *
-     * @public
+     * A mutable record of transform origins we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
      */
-    transition?: Transition;
+    transformOrigin: TransformOrigin;
     /**
-     * If true, will respect the device prefersReducedMotion setting by switching
-     * transform animations off.
-     *
-     * @public
+     * A mutable record of styles we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
      */
-    reducedMotion?: ReducedMotionConfig;
+    style: ResolvedValues;
     /**
-     * A custom `nonce` attribute used when wanting to enforce a Content Security Policy (CSP).
-     * For more details see:
-     * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles
-     *
-     * @public
+     * A mutable record of CSS variables we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
      */
-    nonce?: string;
+    vars: ResolvedValues;
 }
 /**
  * @public
  */
-declare const MotionConfigContext: React$1.Context<MotionConfigContext>;
+type ForwardRefComponent<T, P> = {
+    readonly $$typeof: symbol;
+} & ((props: PropsWithoutRef<P> & RefAttributes<T>) => JSX.Element);
+type AttributesWithoutMotionProps<Attributes> = {
+    [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
+};
+/**
+ * @public
+ */
+type HTMLMotionProps<Tag extends keyof HTMLElements> = AttributesWithoutMotionProps<JSX.IntrinsicElements[Tag]> & MotionProps;
+/**
+ * Motion-optimised versions of React's HTML components.
+ *
+ * @public
+ */
+type HTMLMotionComponents = {
+    [K in keyof HTMLElements]: ForwardRefComponent<HTMLElements[K], HTMLMotionProps<K>>;
+};
+
+type UnionStringArray<T extends Readonly<string[]>> = T[number];
+declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
+type SVGElements = UnionStringArray<typeof svgElements>;
 
+interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
+}
 /**
+ * Blanket-accept any SVG attribute as a `MotionValue`
  * @public
  */
-interface PresenceContextProps {
-    id: string;
-    isPresent: boolean;
-    register: (id: string | number) => () => void;
-    onExitComplete?: (id: string | number) => void;
-    initial?: false | VariantLabels;
-    custom?: any;
+type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
+type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
+/**
+ * @public
+ */
+interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
 }
 /**
+ * Motion-optimised versions of React's SVG components.
+ *
  * @public
  */
-declare const PresenceContext: React$1.Context<PresenceContextProps | null>;
+type SVGMotionComponents = {
+    [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
+};
+
+type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
 interface SwitchLayoutGroup {
     register?: (member: IProjectionNode) => void;
@@ -595,6 +806,7 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     getBaseTarget(key: string): ResolvedValues[string] | undefined | null;
     on<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, callback: VisualElementEventCallbacks[EventName]): VoidFunction;
     notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
+    scheduleRenderMicrotask(): void;
 }
 
 type ScrapeMotionValuesFromProps = (props: MotionProps, prevProps: MotionProps, visualElement?: VisualElement) => {
@@ -627,19 +839,7 @@ interface VisualElementEventCallbacks {
     SetAxisTarget: () => void;
     Unmount: () => void;
 }
-type CreateVisualElement<Instance> = (Component: string | React.ComponentType<React.PropsWithChildren<unknown>>, options: VisualElementOptions<Instance>) => VisualElement<Instance>;
-
-interface VisualState<Instance, RenderState> {
-    renderState: RenderState;
-    latestValues: ResolvedValues;
-    onMount?: (instance: Instance) => void;
-}
-type UseVisualState<Instance, RenderState> = (props: MotionProps, isStatic: boolean) => VisualState<Instance, RenderState>;
-interface UseVisualStateConfig<RenderState> {
-    scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps;
-    createRenderState: () => RenderState;
-}
-declare const makeUseVisualState: <I, RS>(config: UseVisualStateConfig<RS>) => UseVisualState<I, RS>;
+type CreateVisualElement<Props = {}, TagName extends keyof DOMMotionComponents | string = "div"> = (Component: TagName | string | React.ComponentType<Props>, options: VisualElementOptions<HTMLElement | SVGElement>) => VisualElement<HTMLElement | SVGElement>;
 
 declare abstract class Feature<T extends any = any> {
     isMounted: boolean;
@@ -657,12 +857,12 @@ declare function MeasureLayout(props: MotionProps & {
 interface FeatureClass<Props = unknown> {
     new (props: Props): Feature<Props>;
 }
-type HydratedFeatureDefinition = {
+interface HydratedFeatureDefinition {
     isEnabled: (props: MotionProps) => boolean;
     Feature: FeatureClass<unknown>;
     ProjectionNode?: any;
     MeasureLayout?: typeof MeasureLayout;
-};
+}
 interface HydratedFeatureDefinitions {
     animation?: HydratedFeatureDefinition;
     exit?: HydratedFeatureDefinition;
@@ -674,236 +874,37 @@ interface HydratedFeatureDefinitions {
     inView?: HydratedFeatureDefinition;
     layout?: HydratedFeatureDefinition;
 }
-type FeatureDefinition = {
+interface FeatureDefinition {
     isEnabled: HydratedFeatureDefinition["isEnabled"];
     Feature?: HydratedFeatureDefinition["Feature"];
     ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
     MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
-};
+}
 type FeatureDefinitions = {
     [K in keyof HydratedFeatureDefinitions]: FeatureDefinition;
 };
-type FeaturePackage = {
+interface FeaturePackage {
     Feature?: HydratedFeatureDefinition["Feature"];
     ProjectionNode?: HydratedFeatureDefinition["ProjectionNode"];
     MeasureLayout?: HydratedFeatureDefinition["MeasureLayout"];
-};
+}
 type FeaturePackages = {
     [K in keyof HydratedFeatureDefinitions]: FeaturePackage;
 };
 interface FeatureBundle extends FeaturePackages {
-    renderer: CreateVisualElement<any>;
+    renderer: CreateVisualElement;
 }
 type LazyFeatureBundle = () => Promise<FeatureBundle>;
-type RenderComponent<Instance, RenderState> = (Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>, props: MotionProps, ref: React$1.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean, visualElement?: VisualElement<Instance>) => any;
 
-interface HTMLElements {
-    a: HTMLAnchorElement;
-    abbr: HTMLElement;
-    address: HTMLElement;
-    area: HTMLAreaElement;
-    article: HTMLElement;
-    aside: HTMLElement;
-    audio: HTMLAudioElement;
-    b: HTMLElement;
-    base: HTMLBaseElement;
-    bdi: HTMLElement;
-    bdo: HTMLElement;
-    big: HTMLElement;
-    blockquote: HTMLQuoteElement;
-    body: HTMLBodyElement;
-    br: HTMLBRElement;
-    button: HTMLButtonElement;
-    canvas: HTMLCanvasElement;
-    caption: HTMLElement;
-    center: HTMLElement;
-    cite: HTMLElement;
-    code: HTMLElement;
-    col: HTMLTableColElement;
-    colgroup: HTMLTableColElement;
-    data: HTMLDataElement;
-    datalist: HTMLDataListElement;
-    dd: HTMLElement;
-    del: HTMLModElement;
-    details: HTMLDetailsElement;
-    dfn: HTMLElement;
-    dialog: HTMLDialogElement;
-    div: HTMLDivElement;
-    dl: HTMLDListElement;
-    dt: HTMLElement;
-    em: HTMLElement;
-    embed: HTMLEmbedElement;
-    fieldset: HTMLFieldSetElement;
-    figcaption: HTMLElement;
-    figure: HTMLElement;
-    footer: HTMLElement;
-    form: HTMLFormElement;
-    h1: HTMLHeadingElement;
-    h2: HTMLHeadingElement;
-    h3: HTMLHeadingElement;
-    h4: HTMLHeadingElement;
-    h5: HTMLHeadingElement;
-    h6: HTMLHeadingElement;
-    head: HTMLHeadElement;
-    header: HTMLElement;
-    hgroup: HTMLElement;
-    hr: HTMLHRElement;
-    html: HTMLHtmlElement;
-    i: HTMLElement;
-    iframe: HTMLIFrameElement;
-    img: HTMLImageElement;
-    input: HTMLInputElement;
-    ins: HTMLModElement;
-    kbd: HTMLElement;
-    keygen: HTMLElement;
-    label: HTMLLabelElement;
-    legend: HTMLLegendElement;
-    li: HTMLLIElement;
-    link: HTMLLinkElement;
-    main: HTMLElement;
-    map: HTMLMapElement;
-    mark: HTMLElement;
-    menu: HTMLElement;
-    menuitem: HTMLElement;
-    meta: HTMLMetaElement;
-    meter: HTMLMeterElement;
-    nav: HTMLElement;
-    noindex: HTMLElement;
-    noscript: HTMLElement;
-    object: HTMLObjectElement;
-    ol: HTMLOListElement;
-    optgroup: HTMLOptGroupElement;
-    option: HTMLOptionElement;
-    output: HTMLOutputElement;
-    p: HTMLParagraphElement;
-    param: HTMLParamElement;
-    picture: HTMLElement;
-    pre: HTMLPreElement;
-    progress: HTMLProgressElement;
-    q: HTMLQuoteElement;
-    rp: HTMLElement;
-    rt: HTMLElement;
-    ruby: HTMLElement;
-    s: HTMLElement;
-    samp: HTMLElement;
-    search: HTMLElement;
-    slot: HTMLSlotElement;
-    script: HTMLScriptElement;
-    section: HTMLElement;
-    select: HTMLSelectElement;
-    small: HTMLElement;
-    source: HTMLSourceElement;
-    span: HTMLSpanElement;
-    strong: HTMLElement;
-    style: HTMLStyleElement;
-    sub: HTMLElement;
-    summary: HTMLElement;
-    sup: HTMLElement;
-    table: HTMLTableElement;
-    template: HTMLTemplateElement;
-    tbody: HTMLTableSectionElement;
-    td: HTMLTableDataCellElement;
-    textarea: HTMLTextAreaElement;
-    tfoot: HTMLTableSectionElement;
-    th: HTMLTableHeaderCellElement;
-    thead: HTMLTableSectionElement;
-    time: HTMLTimeElement;
-    title: HTMLTitleElement;
-    tr: HTMLTableRowElement;
-    track: HTMLTrackElement;
-    u: HTMLElement;
-    ul: HTMLUListElement;
-    var: HTMLElement;
-    video: HTMLVideoElement;
-    wbr: HTMLElement;
-    webview: HTMLWebViewElement;
-}
-
-interface TransformOrigin {
-    originX?: number | string;
-    originY?: number | string;
-    originZ?: number | string;
-}
-interface HTMLRenderState {
-    /**
-     * A mutable record of transforms we want to apply directly to the rendered Element
-     * every frame. We use a mutable data structure to reduce GC during animations.
-     */
-    transform: ResolvedValues;
-    /**
-     * A mutable record of transform origins we want to apply directly to the rendered Element
-     * every frame. We use a mutable data structure to reduce GC during animations.
-     */
-    transformOrigin: TransformOrigin;
-    /**
-     * A mutable record of styles we want to apply directly to the rendered Element
-     * every frame. We use a mutable data structure to reduce GC during animations.
-     */
-    style: ResolvedValues;
-    /**
-     * A mutable record of CSS variables we want to apply directly to the rendered Element
-     * every frame. We use a mutable data structure to reduce GC during animations.
-     */
-    vars: ResolvedValues;
-}
-/**
- * @public
- */
-type ForwardRefComponent<T, P> = {
-    readonly $$typeof: symbol;
-} & ((props: PropsWithoutRef<P> & RefAttributes<T>) => JSX.Element);
-type AttributesWithoutMotionProps<Attributes> = {
-    [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K];
-};
-/**
- * @public
- */
-type HTMLMotionProps<Tag extends keyof HTMLElements> = AttributesWithoutMotionProps<JSX.IntrinsicElements[Tag]> & MotionProps;
-/**
- * Motion-optimised versions of React's HTML components.
- *
- * @public
- */
-type HTMLMotionComponents = {
-    [K in keyof HTMLElements]: ForwardRefComponent<HTMLElements[K], HTMLMotionProps<K>>;
-};
-
-type UnionStringArray<T extends Readonly<string[]>> = T[number];
-declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
-type SVGElements = UnionStringArray<typeof svgElements>;
-
-interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
-}
-/**
- * Blanket-accept any SVG attribute as a `MotionValue`
- * @public
- */
-type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
-type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
-/**
- * @public
- */
-interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
-}
-/**
- * Motion-optimised versions of React's SVG components.
- *
- * @public
- */
-type SVGMotionComponents = {
-    [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
-};
-
-interface MotionComponentConfig<Instance, RenderState> {
-    preloadedFeatures?: FeatureBundle;
-    createVisualElement?: CreateVisualElement<Instance>;
-    useRender: RenderComponent<Instance, RenderState>;
-    useVisualState: UseVisualState<Instance, RenderState>;
-    Component: string | React$1.ComponentType<React$1.PropsWithChildren<unknown>>;
-}
 type MotionComponentProps<Props> = {
     [K in Exclude<keyof Props, keyof MotionProps>]?: Props[K];
 } & MotionProps;
+type MotionComponent<T, P> = T extends keyof DOMMotionComponents ? DOMMotionComponents[T] : React$1.ComponentType<Omit<MotionComponentProps<P>, "children"> & {
+    children?: "children" extends keyof P ? P["children"] | MotionComponentProps<P>["children"] : MotionComponentProps<P>["children"];
+}>;
+interface MotionComponentOptions {
+    forwardMotionProps?: boolean;
+}
 /**
  * Create a `motion` component.
  *
@@ -913,7 +914,7 @@ type MotionComponentProps<Props> = {
  * Alongside this is a config option which provides a way of rendering the provided
  * component "offline", or outside the React render cycle.
  */
-declare function createRendererMotionComponent<Props extends {}, Instance, RenderState>({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }: MotionComponentConfig<Instance, RenderState>): React$1.ForwardRefExoticComponent<React$1.RefAttributes<unknown>>;
+declare function createMotionComponent<Props, TagName extends keyof DOMMotionComponents | string = "div">(Component: TagName | string | React$1.ComponentType<Props>, { forwardMotionProps }?: MotionComponentOptions, preloadedFeatures?: FeaturePackages, createVisualElement?: CreateVisualElement<Props, TagName>): MotionComponent<TagName, Props>;
 
 declare const optimizedAppearDataAttribute: "data-framer-appear-id";
 
@@ -946,6 +947,4 @@ declare global {
     }
 }
 
-type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
-
-export { type AnimationType as A, type CreateVisualElement as C, type DOMMotionComponents as D, type FeatureBundle as F, type HTMLMotionProps as H, type IProjectionNode as I, type LazyFeatureBundle as L, type MotionProps as M, PresenceContext as P, type ResolvedValues as R, type SVGMotionComponents as S, VisualElement as V, MotionConfigContext as a, type HTMLElements as b, type MotionComponentProps as c, type HTMLMotionComponents as d, type FeaturePackages as e, type VisualElementAnimationOptions as f, type HTMLRenderState as g, type ScrapeMotionValuesFromProps as h, type VisualState as i, createRendererMotionComponent as j, SwitchLayoutGroupContext as k, type MotionStyle as l, makeUseVisualState as m, type MotionTransform as n, optimizedAppearDataAttribute as o, type VariantLabels as p, type ForwardRefComponent as q, type SVGAttributesAsMotionValues as r, type SVGMotionProps as s, FlatTree as t, type HydratedFeatureDefinition as u, type HydratedFeatureDefinitions as v, type FeatureDefinition as w, type FeatureDefinitions as x, type FeaturePackage as y, type RenderComponent as z };
+export { type AnimationType as A, type CreateVisualElement as C, type DOMMotionComponents as D, type FeatureBundle as F, type HTMLMotionProps as H, type IProjectionNode as I, type LazyFeatureBundle as L, type MotionProps as M, PresenceContext as P, type ResolvedValues as R, type SVGMotionComponents as S, VisualElement as V, MotionConfigContext as a, type HTMLElements as b, createMotionComponent as c, type HTMLMotionComponents as d, type FeaturePackages as e, type VisualElementAnimationOptions as f, type HTMLRenderState as g, type ScrapeMotionValuesFromProps as h, type VisualState as i, SwitchLayoutGroupContext as j, type MotionStyle as k, type MotionTransform as l, makeUseVisualState as m, type VariantLabels as n, optimizedAppearDataAttribute as o, type ForwardRefComponent as p, type SVGAttributesAsMotionValues as q, type SVGMotionProps as r, FlatTree as s, type HydratedFeatureDefinition as t, type HydratedFeatureDefinitions as u, type FeatureDefinition as v, type FeatureDefinitions as w, type FeaturePackage as x };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.23.5",
+    "version": "12.23.7",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,8 +87,8 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.23.5",
-        "motion-utils": "^12.23.2",
+        "motion-dom": "^12.23.7",
+        "motion-utils": "^12.23.6",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
@@ -142,5 +142,5 @@
             "maxSize": "2.26 kB"
         }
     ],
-    "gitHead": "db66bee31fe698bf43833d83ec859ee3295a36e4"
+    "gitHead": "5fb87429d0103ed17bf956e3af33804fb760d2f6"
 }

package/dist/es/render/components/create-factory.mjs

@@ -1,23 +0,0 @@
-import { createRendererMotionComponent } from '../../motion/index.mjs';
-import { createUseRender } from '../dom/use-render.mjs';
-import { isSVGComponent } from '../dom/utils/is-svg-component.mjs';
-import { htmlMotionConfig } from '../html/config-motion.mjs';
-import { svgMotionConfig } from '../svg/config-motion.mjs';
-
-function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
-    return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {
-        const baseConfig = isSVGComponent(Component)
-            ? svgMotionConfig
-            : htmlMotionConfig;
-        const config = {
-            ...baseConfig,
-            preloadedFeatures,
-            useRender: createUseRender(forwardMotionProps),
-            createVisualElement,
-            Component,
-        };
-        return createRendererMotionComponent(config);
-    };
-}
-
-export { createMotionComponentFactory };