framer-motion 8.4.4 → 8.4.6

package/dist/index.d.ts

@@ -1561,6 +1561,139 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
 }
 
+interface Animation$1<V> {
+    next: (t: number) => {
+        value: V;
+        done: boolean;
+    };
+    flipTarget: () => void;
+}
+/**
+ * An update function. It accepts a timestamp used to advance the animation.
+ */
+declare type Update = (timestamp: number) => void;
+/**
+ * Drivers accept a update function and call it at an interval. This interval
+ * could be a synchronous loop, a setInterval, or tied to the device's framerate.
+ */
+interface DriverControls {
+    start: () => void;
+    stop: () => void;
+}
+declare type Driver = (update: Update) => DriverControls;
+
+interface VelocityOptions {
+    velocity?: number;
+    restSpeed?: number;
+    restDelta?: number;
+}
+interface AnimationLifecycleOptions<V> {
+    onUpdate?: (v: V) => void;
+    onComplete?: VoidFunction;
+    onPlay?: VoidFunction;
+    onRepeat?: VoidFunction;
+    onStop?: VoidFunction;
+}
+interface AnimationPlaybackOptions {
+    repeat?: number;
+    repeatType?: "loop" | "reverse" | "mirror";
+    repeatDelay?: number;
+}
+interface DurationSpringOptions {
+    duration?: number;
+    bounce?: number;
+}
+interface SpringOptions extends DurationSpringOptions, VelocityOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+interface DecayOptions extends VelocityOptions {
+    keyframes?: number[];
+    power?: number;
+    timeConstant?: number;
+    modifyTarget?: (v: number) => number;
+}
+interface InertiaOptions$1 extends DecayOptions {
+    bounceStiffness?: number;
+    bounceDamping?: number;
+    min?: number;
+    max?: number;
+}
+interface KeyframeOptions {
+    ease?: Easing | Easing[];
+    times?: number[];
+}
+interface AnimationOptions<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
+    keyframes: V[];
+    elapsed?: number;
+    driver?: Driver;
+    type?: "decay" | "spring" | "keyframes" | "tween";
+    duration?: number;
+    autoplay?: boolean;
+}
+/**
+ * @public
+ */
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+interface AnimationControls {
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set(definition: ControlsAnimationDefinition): void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop(): void;
+    mount(): () => void;
+}
+
 /**
  * @public
  */
@@ -1714,139 +1847,6 @@ declare class MotionValue<V = any> {
 }
 declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
 
-interface Animation$1<V> {
-    next: (t: number) => {
-        value: V;
-        done: boolean;
-    };
-    flipTarget: () => void;
-}
-/**
- * An update function. It accepts a timestamp used to advance the animation.
- */
-declare type Update = (timestamp: number) => void;
-/**
- * Drivers accept a update function and call it at an interval. This interval
- * could be a synchronous loop, a setInterval, or tied to the device's framerate.
- */
-interface DriverControls {
-    start: () => void;
-    stop: () => void;
-}
-declare type Driver = (update: Update) => DriverControls;
-
-interface VelocityOptions {
-    velocity?: number;
-    restSpeed?: number;
-    restDelta?: number;
-}
-interface AnimationLifecycleOptions<V> {
-    onUpdate?: (v: V) => void;
-    onComplete?: VoidFunction;
-    onPlay?: VoidFunction;
-    onRepeat?: VoidFunction;
-    onStop?: VoidFunction;
-}
-interface AnimationPlaybackOptions {
-    repeat?: number;
-    repeatType?: "loop" | "reverse" | "mirror";
-    repeatDelay?: number;
-}
-interface DurationSpringOptions {
-    duration?: number;
-    bounce?: number;
-}
-interface SpringOptions extends DurationSpringOptions, VelocityOptions {
-    stiffness?: number;
-    damping?: number;
-    mass?: number;
-}
-interface DecayOptions extends VelocityOptions {
-    keyframes?: number[];
-    power?: number;
-    timeConstant?: number;
-    modifyTarget?: (v: number) => number;
-}
-interface InertiaOptions$1 extends DecayOptions {
-    bounceStiffness?: number;
-    bounceDamping?: number;
-    min?: number;
-    max?: number;
-}
-interface KeyframeOptions {
-    ease?: Easing | Easing[];
-    times?: number[];
-}
-interface AnimationOptions<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
-    keyframes: V[];
-    elapsed?: number;
-    driver?: Driver;
-    type?: "decay" | "spring" | "keyframes" | "tween";
-    duration?: number;
-    autoplay?: boolean;
-}
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-interface AnimationControls {
-    /**
-     * Starts an animation on all linked components.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * controls.start("variantLabel")
-     * controls.start({
-     *   x: 0,
-     *   transition: { duration: 1 }
-     * })
-     * ```
-     *
-     * @param definition - Properties or variant label to animate to
-     * @param transition - Optional `transtion` to apply to a variant
-     * @returns - A `Promise` that resolves when all animations have completed.
-     *
-     * @public
-     */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
-    /**
-     * Instantly set to a set of properties or a variant.
-     *
-     * ```jsx
-     * // With properties
-     * controls.set({ opacity: 0 })
-     *
-     * // With variants
-     * controls.set("hidden")
-     * ```
-     *
-     * @privateRemarks
-     * We could perform a similar trick to `.start` where this can be called before mount
-     * and we maintain a list of of pending actions that get applied on mount. But the
-     * expectation of `set` is that it happens synchronously and this would be difficult
-     * to do before any children have even attached themselves. It's also poor practise
-     * and we should discourage render-synchronous `.start` calls rather than lean into this.
-     *
-     * @public
-     */
-    set(definition: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}
-
 /**
  * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
  * information about the current state of the tap gesture such as its

package/dist/projection.dev.js

@@ -1183,6 +1183,25 @@
               onStop && onStop();
               driverControls && driverControls.stop();
           },
+          /**
+           * Set the current time of the animation. This is purposefully
+           * mirroring the WAAPI animation API to make them interchanagable.
+           * Going forward this file should be ported more towards
+           * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
+           * Which behaviourally adheres to WAAPI as far as possible.
+           *
+           * WARNING: This is not safe to use for most animations. We currently
+           * only use it for handoff from WAAPI within Framer.
+           *
+           * This animation function consumes time every frame rather than being sampled for time.
+           * So the sample() method performs some headless frames to ensure
+           * repeats are handled correctly. Ideally in the future we will replace
+           * that method with this, once repeat calculations are pure.
+           */
+          set currentTime(t) {
+              elapsed = initialElapsed;
+              update(t);
+          },
           /**
            * animate() can't yet be sampled for time, instead it
            * consumes time. So to sample it we have to run a low
@@ -1339,21 +1358,29 @@
       /**
        * Animation interrupt callback.
        */
-      return () => {
-          /**
-           * WAAPI doesn't natively have any interruption capabilities.
-           *
-           * Rather than read commited styles back out of the DOM, we can
-           * create a renderless JS animation and sample it twice to calculate
-           * its current value, "previous" value, and therefore allow
-           * Motion to calculate velocity for any subsequent animation.
-           */
-          const { currentTime } = animation;
-          if (currentTime) {
-              const sampleAnimation = animate$1({ ...options, autoplay: false });
-              value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
-          }
-          sync.update(() => animation.cancel());
+      return {
+          get currentTime() {
+              return animation.currentTime || 0;
+          },
+          set currentTime(t) {
+              animation.currentTime = t;
+          },
+          stop: () => {
+              /**
+               * WAAPI doesn't natively have any interruption capabilities.
+               *
+               * Rather than read commited styles back out of the DOM, we can
+               * create a renderless JS animation and sample it twice to calculate
+               * its current value, "previous" value, and therefore allow
+               * Motion to calculate velocity for any subsequent animation.
+               */
+              const { currentTime } = animation;
+              if (currentTime) {
+                  const sampleAnimation = animate$1({ ...options, autoplay: false });
+                  value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
+              }
+              sync.update(() => animation.cancel());
+          },
       };
   }
 
@@ -1377,9 +1404,8 @@
       const setValue = () => {
           onUpdate && onUpdate(keyframes[keyframes.length - 1]);
           onComplete && onComplete();
-          return () => { };
       };
-      return elapsed ? delay(setValue, -elapsed) : setValue();
+      return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
   }
 
   function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
@@ -1788,8 +1814,7 @@
                * If this is an inertia animation, we currently don't support pre-generating
                * keyframes for this as such it must always run on the main thread.
                */
-              const animation = inertia(options);
-              return () => animation.stop();
+              return inertia(options);
           }
           /**
            * If there's no transition defined for this value, we can generate
@@ -1827,8 +1852,7 @@
           /**
            * If we didn't create an accelerated animation, create a JS animation
            */
-          const animation = animate$1(options);
-          return () => animation.stop();
+          return animate$1(options);
       };
   };
 
@@ -1901,7 +1925,7 @@
            * This will be replaced by the build step with the latest version number.
            * When MotionValues are provided to motion components, warn if versions are mixed.
            */
-          this.version = "8.4.4";
+          this.version = "8.4.6";
           /**
            * Duration, in milliseconds, since last updating frame.
            *
@@ -2140,11 +2164,11 @@
        *
        * @internal
        */
-      start(animation) {
+      start(startAnimation) {
           this.stop();
           return new Promise((resolve) => {
               this.hasAnimated = true;
-              this.stopAnimation = animation(resolve);
+              this.animation = startAnimation(resolve) || null;
               if (this.events.animationStart) {
                   this.events.animationStart.notify();
               }
@@ -2161,8 +2185,8 @@
        * @public
        */
       stop() {
-          if (this.stopAnimation) {
-              this.stopAnimation();
+          if (this.animation) {
+              this.animation.stop();
               if (this.events.animationCancel) {
                   this.events.animationCancel.notify();
               }
@@ -2175,10 +2199,10 @@
        * @public
        */
       isAnimating() {
-          return !!this.stopAnimation;
+          return !!this.animation;
       }
       clearAnimation() {
-          this.stopAnimation = null;
+          this.animation = null;
       }
       /**
        * Destroy and clean up subscribers to this `MotionValue`.
@@ -5062,7 +5086,7 @@
                * and warn against mismatches.
                */
               {
-                  warnOnce(nextValue.version === "8.4.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.4 may not work as expected.`);
+                  warnOnce(nextValue.version === "8.4.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.4.6 may not work as expected.`);
               }
           }
           else if (isMotionValue(prevValue)) {
@@ -5088,7 +5112,7 @@
               }
               else {
                   const latestValue = element.getStaticValue(key);
-                  element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
+                  element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
               }
           }
       }

package/dist/size-rollup-dom-animation-m.js

@@ -1 +1 @@
-import*as t from"react";import n,{createContext as e,useContext as r,useLayoutEffect as o,useEffect as a,useRef as s,useCallback as i,useMemo as u,forwardRef as c,createElement as l}from"react";import{i as d,P as m,M as f,a as p,b as g,c as y,f as v,u as h,g as S,S as E,L as w,d as C,e as V,h as b,j as A,k as M,l as P,r as T,m as j,n as x,o as D,s as L,p as B,q as F}from"./size-rollup-dom-max-assets.js";const I=e({});const O=d?o:a,k=e({strict:!1});function H(t,n,e,o){const a=r(I).visualElement,i=r(k),u=r(m),c=r(f).reducedMotion,l=s();o=o||i.renderer,!l.current&&o&&(l.current=o(t,{visualState:n,parent:a,props:e,presenceId:u?u.id:void 0,blockInitialAnimation:!!u&&!1===u.initial,reducedMotionConfig:c}));const d=l.current;return O(()=>{d&&d.render()}),O(()=>{d&&d.animationState&&d.animationState.animateChanges()}),d}function N(t){const{initial:n,animate:e}=function(t,n){if(g(t)){const{initial:n,animate:e}=t;return{initial:!1===n||y(n)?n:void 0,animate:y(e)?e:void 0}}return!1!==t.inherit?n:{}}(t,r(I));return u(()=>({initial:n,animate:e}),[R(n),R(e)])}function R(t){return Array.isArray(t)?t.join(" "):t}let U=1;class K extends n.Component{getSnapshotBeforeUpdate(){const{visualElement:t,props:n}=this.props;return t&&t.setProps(n),null}componentDidUpdate(){}render(){return this.props.children}}const W=Symbol.for("motionComponentSymbol");function q({preloadedFeatures:n,createVisualElement:e,projectionNodeConstructor:o,useRender:a,useVisualState:s,Component:u}){n&&function(t){for(const n in t)"projectionNodeConstructor"===n?v.projectionNodeConstructor=t[n]:v[n].Component=t[n]}(n);const l=c((function(c,l){const m={...r(f),...c,layoutId:_(c)},{isStatic:g}=m;let y=null;const w=N(c),C=g?void 0:h(()=>{if(S.hasEverUpdated)return U++}),V=s(c,g);if(!g&&d){w.visualElement=H(u,V,m,e);const t=r(k).strict,a=r(E);w.visualElement&&(y=w.visualElement.loadFeatures(m,t,n,C,o||v.projectionNodeConstructor,a))}return t.createElement(K,{visualElement:w.visualElement,props:m},y,t.createElement(I.Provider,{value:w},a(u,c,C,function(t,n,e){return i(r=>{r&&t.mount&&t.mount(r),n&&(r?n.mount(r):n.unmount()),e&&("function"==typeof e?e(r):p(e)&&(e.current=r))},[n])}(V,w.visualElement,l),V,g,w.visualElement)))}));return l[W]=u,l}function _({layoutId:t}){const n=r(w).id;return n&&void 0!==t?n+"-"+t:t}const z=()=>({style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}});function X(t,n,e){for(const r in n)C(n[r])||V(r,e)||(t[r]=n[r])}function Y(t,n,e){const r={};return X(r,t.style||{},t),Object.assign(r,function({transformTemplate:t},n,e){return u(()=>{const r={style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}};return b(r,n,{enableHardwareAcceleration:!e},t),Object.assign({},r.vars,r.style)},[n])}(t,n,e)),t.transformValues?t.transformValues(r):r}function G(t,n,e){const r={},o=Y(t,n,e);return t.drag&&!1!==t.dragListener&&(r.draggable=!1,o.userSelect=o.WebkitUserSelect=o.WebkitTouchCallout="none",o.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),r.style=o,r}const J=new Set(["initial","style","values","variants","transition","transformTemplate","transformValues","custom","inherit","layout","layoutId","layoutDependency","onLayoutAnimationStart","onLayoutAnimationComplete","onLayoutMeasure","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","drag","dragControls","dragListener","dragConstraints","dragDirectionLock","dragSnapToOrigin","_dragX","_dragY","dragElastic","dragMomentum","dragPropagation","dragTransition","onHoverStart","onHoverEnd","layoutScroll","whileInView","onViewportEnter","onViewportLeave","viewport","whileTap","onTap","onTapStart","onTapCancel","animate","exit","variants","whileHover","whileTap","whileFocus","whileDrag","whileInView","onPan","onPanStart","onPanSessionStart","onPanEnd"]);function Q(t){return J.has(t)}let Z=t=>!Q(t);try{($=require("@emotion/is-prop-valid").default)&&(Z=t=>t.startsWith("on")?!Q(t):$(t))}catch(t){}var $;const tt=()=>({style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{},attrs:{}});function nt(t,n,e,r){const o=u(()=>{const e={style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{},attrs:{}};return A(e,n,{enableHardwareAcceleration:!1},M(r),t.transformTemplate),{...e.attrs,style:{...e.style}}},[n]);if(t.style){const n={};X(n,t.style,t),o.style={...n,...o.style}}return o}function et(t=!1){return(n,e,r,o,{latestValues:a},s)=>{const i=(P(n)?nt:G)(e,a,s,n),c={...function(t,n,e){const r={};for(const o in t)"values"===o&&"object"==typeof t.values||(Z(o)||!0===e&&Q(o)||!n&&!Q(o)||t.draggable&&o.startsWith("onDrag"))&&(r[o]=t[o]);return r}(e,"string"==typeof n,t),...i,ref:o},{children:d}=e,m=u(()=>C(d)?d.get():d,[d]);return r&&(c["data-projection-id"]=r),l(n,{...c,children:m})}}const rt=t=>(n,e)=>{const o=r(I),a=r(m),s=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n,onMount:e},r,o,a){const s={latestValues:ot(r,o,a,t),renderState:n()};return e&&(s.mount=t=>e(r,t,s)),s}(t,n,o,a);return e?s():h(s)};function ot(t,n,e,r){const o={},a=r(t,{});for(const t in a)o[t]=T(a[t]);let{initial:s,animate:i}=t;const u=g(t),c=j(t);n&&c&&!u&&!1!==t.inherit&&(void 0===s&&(s=n.initial),void 0===i&&(i=n.animate));let l=!!e&&!1===e.initial;l=l||!1===s;const d=l?i:s;if(d&&"boolean"!=typeof d&&!x(d)){(Array.isArray(d)?d:[d]).forEach(n=>{const e=D(t,n);if(!e)return;const{transitionEnd:r,transition:a,...s}=e;for(const t in s){let n=s[t];if(Array.isArray(n)){n=n[l?n.length-1:0]}null!==n&&(o[t]=n)}for(const t in r)o[t]=r[t]})}return o}const at={useVisualState:rt({scrapeMotionValuesFromProps:L,createRenderState:tt,onMount:(t,n,{renderState:e,latestValues:r})=>{try{e.dimensions="function"==typeof n.getBBox?n.getBBox():n.getBoundingClientRect()}catch(t){e.dimensions={x:0,y:0,width:0,height:0}}A(e,r,{enableHardwareAcceleration:!1},M(n.tagName),t.transformTemplate),B(n,e)}})},st={useVisualState:rt({scrapeMotionValuesFromProps:F,createRenderState:z})};const it=function(t){function n(n,e={}){return q(t(n,e))}if("undefined"==typeof Proxy)return n;const e=new Map;return new Proxy(n,{get:(t,r)=>(e.has(r)||e.set(r,n(r)),e.get(r))})}((function(t,{forwardMotionProps:n=!1},e,r,o){return{...P(t)?at:st,preloadedFeatures:e,useRender:et(n),createVisualElement:r,projectionNodeConstructor:o,Component:t}}));export{it as m};
+import*as t from"react";import n,{createContext as e,useContext as r,useLayoutEffect as o,useEffect as a,useRef as s,useCallback as i,useMemo as u,forwardRef as c,createElement as l}from"react";import{i as d,P as m,M as f,a as p,b as g,c as y,f as v,u as h,g as S,S as w,L as E,d as C,e as V,h as A,j as b,k as M,l as P,r as T,m as j,n as x,o as D,s as L,p as B,q as F}from"./size-rollup-dom-max-assets.js";const I=e({});const O=d?o:a,k=e({strict:!1});function H(t,n,e,o){const i=r(I).visualElement,u=r(k),c=r(m),l=r(f).reducedMotion,d=s();o=o||u.renderer,!d.current&&o&&(d.current=o(t,{visualState:n,parent:i,props:e,presenceId:c?c.id:void 0,blockInitialAnimation:!!c&&!1===c.initial,reducedMotionConfig:l}));const p=d.current;O(()=>{p&&p.render()});return(window.MotionAppearAnimations?O:a)(()=>{p&&p.animationState&&p.animationState.animateChanges()}),p}function N(t){const{initial:n,animate:e}=function(t,n){if(g(t)){const{initial:n,animate:e}=t;return{initial:!1===n||y(n)?n:void 0,animate:y(e)?e:void 0}}return!1!==t.inherit?n:{}}(t,r(I));return u(()=>({initial:n,animate:e}),[R(n),R(e)])}function R(t){return Array.isArray(t)?t.join(" "):t}let U=1;class K extends n.Component{getSnapshotBeforeUpdate(){const{visualElement:t,props:n}=this.props;return t&&t.setProps(n),null}componentDidUpdate(){}render(){return this.props.children}}const W=Symbol.for("motionComponentSymbol");function q({preloadedFeatures:n,createVisualElement:e,projectionNodeConstructor:o,useRender:a,useVisualState:s,Component:u}){n&&function(t){for(const n in t)"projectionNodeConstructor"===n?v.projectionNodeConstructor=t[n]:v[n].Component=t[n]}(n);const l=c((function(c,l){const m={...r(f),...c,layoutId:_(c)},{isStatic:g}=m;let y=null;const E=N(c),C=g?void 0:h(()=>{if(S.hasEverUpdated)return U++}),V=s(c,g);if(!g&&d){E.visualElement=H(u,V,m,e);const t=r(k).strict,a=r(w);E.visualElement&&(y=E.visualElement.loadFeatures(m,t,n,C,o||v.projectionNodeConstructor,a))}return t.createElement(K,{visualElement:E.visualElement,props:m},y,t.createElement(I.Provider,{value:E},a(u,c,C,function(t,n,e){return i(r=>{r&&t.mount&&t.mount(r),n&&(r?n.mount(r):n.unmount()),e&&("function"==typeof e?e(r):p(e)&&(e.current=r))},[n])}(V,E.visualElement,l),V,g,E.visualElement)))}));return l[W]=u,l}function _({layoutId:t}){const n=r(E).id;return n&&void 0!==t?n+"-"+t:t}const z=()=>({style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}});function X(t,n,e){for(const r in n)C(n[r])||V(r,e)||(t[r]=n[r])}function Y(t,n,e){const r={};return X(r,t.style||{},t),Object.assign(r,function({transformTemplate:t},n,e){return u(()=>{const r={style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{}};return A(r,n,{enableHardwareAcceleration:!e},t),Object.assign({},r.vars,r.style)},[n])}(t,n,e)),t.transformValues?t.transformValues(r):r}function G(t,n,e){const r={},o=Y(t,n,e);return t.drag&&!1!==t.dragListener&&(r.draggable=!1,o.userSelect=o.WebkitUserSelect=o.WebkitTouchCallout="none",o.touchAction=!0===t.drag?"none":"pan-"+("x"===t.drag?"y":"x")),r.style=o,r}const J=new Set(["initial","style","values","variants","transition","transformTemplate","transformValues","custom","inherit","layout","layoutId","layoutDependency","onLayoutAnimationStart","onLayoutAnimationComplete","onLayoutMeasure","onBeforeLayoutMeasure","onAnimationStart","onAnimationComplete","onUpdate","onDragStart","onDrag","onDragEnd","onMeasureDragConstraints","onDirectionLock","onDragTransitionEnd","drag","dragControls","dragListener","dragConstraints","dragDirectionLock","dragSnapToOrigin","_dragX","_dragY","dragElastic","dragMomentum","dragPropagation","dragTransition","onHoverStart","onHoverEnd","layoutScroll","whileInView","onViewportEnter","onViewportLeave","viewport","whileTap","onTap","onTapStart","onTapCancel","animate","exit","variants","whileHover","whileTap","whileFocus","whileDrag","whileInView","onPan","onPanStart","onPanSessionStart","onPanEnd"]);function Q(t){return J.has(t)}let Z=t=>!Q(t);try{($=require("@emotion/is-prop-valid").default)&&(Z=t=>t.startsWith("on")?!Q(t):$(t))}catch(t){}var $;const tt=()=>({style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{},attrs:{}});function nt(t,n,e,r){const o=u(()=>{const e={style:{},transform:{},transformKeys:[],transformOrigin:{},vars:{},attrs:{}};return b(e,n,{enableHardwareAcceleration:!1},M(r),t.transformTemplate),{...e.attrs,style:{...e.style}}},[n]);if(t.style){const n={};X(n,t.style,t),o.style={...n,...o.style}}return o}function et(t=!1){return(n,e,r,o,{latestValues:a},s)=>{const i=(P(n)?nt:G)(e,a,s,n),c={...function(t,n,e){const r={};for(const o in t)"values"===o&&"object"==typeof t.values||(Z(o)||!0===e&&Q(o)||!n&&!Q(o)||t.draggable&&o.startsWith("onDrag"))&&(r[o]=t[o]);return r}(e,"string"==typeof n,t),...i,ref:o},{children:d}=e,m=u(()=>C(d)?d.get():d,[d]);return r&&(c["data-projection-id"]=r),l(n,{...c,children:m})}}const rt=t=>(n,e)=>{const o=r(I),a=r(m),s=()=>function({scrapeMotionValuesFromProps:t,createRenderState:n,onMount:e},r,o,a){const s={latestValues:ot(r,o,a,t),renderState:n()};return e&&(s.mount=t=>e(r,t,s)),s}(t,n,o,a);return e?s():h(s)};function ot(t,n,e,r){const o={},a=r(t,{});for(const t in a)o[t]=T(a[t]);let{initial:s,animate:i}=t;const u=g(t),c=j(t);n&&c&&!u&&!1!==t.inherit&&(void 0===s&&(s=n.initial),void 0===i&&(i=n.animate));let l=!!e&&!1===e.initial;l=l||!1===s;const d=l?i:s;if(d&&"boolean"!=typeof d&&!x(d)){(Array.isArray(d)?d:[d]).forEach(n=>{const e=D(t,n);if(!e)return;const{transitionEnd:r,transition:a,...s}=e;for(const t in s){let n=s[t];if(Array.isArray(n)){n=n[l?n.length-1:0]}null!==n&&(o[t]=n)}for(const t in r)o[t]=r[t]})}return o}const at={useVisualState:rt({scrapeMotionValuesFromProps:L,createRenderState:tt,onMount:(t,n,{renderState:e,latestValues:r})=>{try{e.dimensions="function"==typeof n.getBBox?n.getBBox():n.getBoundingClientRect()}catch(t){e.dimensions={x:0,y:0,width:0,height:0}}b(e,r,{enableHardwareAcceleration:!1},M(n.tagName),t.transformTemplate),B(n,e)}})},st={useVisualState:rt({scrapeMotionValuesFromProps:F,createRenderState:z})};const it=function(t){function n(n,e={}){return q(t(n,e))}if("undefined"==typeof Proxy)return n;const e=new Map;return new Proxy(n,{get:(t,r)=>(e.has(r)||e.set(r,n(r)),e.get(r))})}((function(t,{forwardMotionProps:n=!1},e,r,o){return{...P(t)?at:st,preloadedFeatures:e,useRender:et(n),createVisualElement:r,projectionNodeConstructor:o,Component:t}}));export{it as m};