framer-motion 12.4.13 → 12.6.0

package/dist/cjs/m.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var motionUtils = require('motion-utils');
 var react = require('react');
+var motionDom = require('motion-dom');
 
 const LayoutGroupContext = react.createContext({});
 
@@ -154,14 +155,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [visualElement]);
 }
 
-/**
- * @public
- */
-const PresenceContext = 
-/* @__PURE__ */ react.createContext(null);
-
-const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
-
 /**
  * Convert camelCase to dash-case properties.
  */
@@ -170,178 +163,19 @@ const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCas
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
-
-const statsBuffer = {
-    value: null,
-    addProjectionMetrics: null,
-};
-
-function createRenderStep(runNextFrame, stepName) {
-    /**
-     * We create and reuse two queues, one to queue jobs for the current frame
-     * and one for the next. We reuse to avoid triggering GC after x frames.
-     */
-    let thisFrame = new Set();
-    let nextFrame = new Set();
-    /**
-     * Track whether we're currently processing jobs in this step. This way
-     * we can decide whether to schedule new jobs for this frame or next.
-     */
-    let isProcessing = false;
-    let flushNextFrame = false;
-    /**
-     * A set of processes which were marked keepAlive when scheduled.
-     */
-    const toKeepAlive = new WeakSet();
-    let latestFrameData = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    let numCalls = 0;
-    function triggerCallback(callback) {
-        if (toKeepAlive.has(callback)) {
-            step.schedule(callback);
-            runNextFrame();
-        }
-        numCalls++;
-        callback(latestFrameData);
-    }
-    const step = {
-        /**
-         * Schedule a process to run on the next frame.
-         */
-        schedule: (callback, keepAlive = false, immediate = false) => {
-            const addToCurrentFrame = immediate && isProcessing;
-            const queue = addToCurrentFrame ? thisFrame : nextFrame;
-            if (keepAlive)
-                toKeepAlive.add(callback);
-            if (!queue.has(callback))
-                queue.add(callback);
-            return callback;
-        },
-        /**
-         * Cancel the provided callback from running on the next frame.
-         */
-        cancel: (callback) => {
-            nextFrame.delete(callback);
-            toKeepAlive.delete(callback);
-        },
-        /**
-         * Execute all schedule callbacks.
-         */
-        process: (frameData) => {
-            latestFrameData = frameData;
-            /**
-             * If we're already processing we've probably been triggered by a flushSync
-             * inside an existing process. Instead of executing, mark flushNextFrame
-             * as true and ensure we flush the following frame at the end of this one.
-             */
-            if (isProcessing) {
-                flushNextFrame = true;
-                return;
-            }
-            isProcessing = true;
-            [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Execute this frame
-            thisFrame.forEach(triggerCallback);
-            /**
-             * If we're recording stats then
-             */
-            if (stepName && statsBuffer.value) {
-                statsBuffer.value.frameloop[stepName].push(numCalls);
-            }
-            numCalls = 0;
-            // Clear the frame so no callbacks remain. This is to avoid
-            // memory leaks should this render step not run for a while.
-            thisFrame.clear();
-            isProcessing = false;
-            if (flushNextFrame) {
-                flushNextFrame = false;
-                step.process(frameData);
-            }
-        },
-    };
-    return step;
-}
-
-const maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-    let runNextFrame = false;
-    let useDefaultElapsed = true;
-    const state = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    const flagRunNextFrame = () => (runNextFrame = true);
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
-        return acc;
-    }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
-    const processBatch = () => {
-        const timestamp = performance.now();
-        runNextFrame = false;
-        {
-            state.delta = useDefaultElapsed
-                ? 1000 / 60
-                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
-        }
-        state.timestamp = timestamp;
-        state.isProcessing = true;
-        // Unrolled render loop for better per-frame performance
-        read.process(state);
-        resolveKeyframes.process(state);
-        update.process(state);
-        preRender.process(state);
-        render.process(state);
-        postRender.process(state);
-        state.isProcessing = false;
-        if (runNextFrame && allowKeepAlive) {
-            useDefaultElapsed = false;
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const wake = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!state.isProcessing) {
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const schedule = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                wake();
-            return step.schedule(process, keepAlive, immediate);
-        };
-        return acc;
-    }, {});
-    const cancel = (process) => {
-        for (let i = 0; i < stepsOrder.length; i++) {
-            steps[stepsOrder[i]].cancel(process);
-        }
-    };
-    return { schedule, cancel, state, steps };
-}
-
-const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
+/**
+ * @public
+ */
+const PresenceContext = 
+/* @__PURE__ */ react.createContext(null);
 
 /**
  * Internal, exported only for usage in Framer
  */
 const SwitchLayoutGroupContext = react.createContext({});
 
+const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
+
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
     var _a, _b;
     const { visualElement: parent } = react.useContext(MotionContext);
@@ -401,7 +235,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         isMounted.current = true;
         window.MotionIsMounted = true;
         visualElement.updateFeatures();
-        microtask.render(visualElement.render);
+        motionDom.microtask.render(visualElement.render);
         /**
          * Ideally this function would always run in a useEffect.
          *
@@ -1367,8 +1201,6 @@ const htmlMotionConfig = {
     }),
 };
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true);
-
 function updateSVGDimensions(instance, renderState) {
     try {
         renderState.dimensions =
@@ -1480,9 +1312,9 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => {
+            motionDom.frame.read(() => {
                 updateSVGDimensions(current, renderState);
-                frame.render(() => {
+                motionDom.frame.render(() => {
                     buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
                     renderSVG(current, renderState);
                 });

package/dist/cjs/mini.js

@@ -35,6 +35,9 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
+    if (motionDom.statsBuffer.value) {
+        motionDom.activeAnimations.waapi++;
+    }
     const animation = element.animate(keyframeOptions, {
         delay,
         duration,
@@ -43,6 +46,11 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    if (motionDom.statsBuffer.value) {
+        animation.finished.finally(() => {
+            motionDom.activeAnimations.waapi--;
+        });
+    }
     return animation;
 }
 

package/dist/debug.d.ts

@@ -1,35 +1,2 @@
-type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
-
-declare const stepsOrder: StepId[];
-type StepNames = (typeof stepsOrder)[number];
-
-interface Summary {
-    min: number;
-    max: number;
-    avg: number;
-}
-type FrameloopStatNames = "rate" | StepNames;
-interface Stats<T> {
-    frameloop: {
-        [key in FrameloopStatNames]: T;
-    };
-    animations: {
-        mainThread: T;
-        waapi: T;
-        layout: T;
-    };
-    layoutProjection: {
-        nodes: T;
-        calculatedTargetDeltas: T;
-        calculatedProjections: T;
-    };
-}
-type StatsBuffer = number[];
-type FrameStats = Stats<number>;
-type StatsRecording = Stats<StatsBuffer>;
-type StatsSummary = Stats<Summary>;
-
-declare function reportStats(): StatsSummary;
-declare function recordStats(): typeof reportStats;
-
-export { type FrameStats, type Stats, type StatsBuffer, type StatsRecording, type StatsSummary, type Summary, recordStats };
+export * from 'motion-dom';
+export { recordStats } from 'motion-dom';

package/dist/dom-mini.d.ts

@@ -1,184 +1,4 @@
-import { AnimationPlaybackControls, TransformProperties, AnimationPlaybackOptions, Transition, UnresolvedValueKeyframe, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, GroupPlaybackControls } from 'motion-dom';
-
-/**
- * @public
- */
-type Subscriber<T> = (v: T) => void;
-interface MotionValueEventCallbacks<V> {
-    animationStart: () => void;
-    animationComplete: () => void;
-    animationCancel: () => void;
-    change: (latestValue: V) => void;
-    renderRequest: () => void;
-}
-interface ResolvedValues {
-    [key: string]: string | number;
-}
-interface Owner {
-    current: HTMLElement | unknown;
-    getProps: () => {
-        onUpdate?: (latest: ResolvedValues) => void;
-        transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    };
-}
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-declare class MotionValue<V = any> {
-    /**
-     * 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.
-     */
-    version: string;
-    /**
-     * If a MotionValue has an owner, it was created internally within Motion
-     * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
-     */
-    owner?: Owner;
-    /**
-     * The current state of the `MotionValue`.
-     */
-    private current;
-    /**
-     * The previous state of the `MotionValue`.
-     */
-    private prev;
-    /**
-     * The previous state of the `MotionValue` at the end of the previous frame.
-     */
-    private prevFrameValue;
-    /**
-     * The last time the `MotionValue` was updated.
-     */
-    updatedAt: number;
-    /**
-     * The time `prevFrameValue` was updated.
-     */
-    prevUpdatedAt: number | undefined;
-    private stopPassiveEffect?;
-    /**
-     * A reference to the currently-controlling animation.
-     */
-    animation?: AnimationPlaybackControls;
-    setCurrent(current: V): void;
-    setPrevFrameValue(prevFrameValue?: V | undefined): void;
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.on("change", updateOpacity)
-     *     const unsubscribeY = y.on("change", updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @deprecated
-     */
-    onChange(subscription: Subscriber<V>): () => void;
-    /**
-     * An object containing a SubscriptionManager for each active event.
-     */
-    private events;
-    on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
-    clearListeners(): void;
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v: V, render?: boolean): void;
-    setWithVelocity(prev: V, current: V, delta: number): void;
-    /**
-     * Set the state of the `MotionValue`, stopping any active animations,
-     * effects, and resets velocity to `0`.
-     */
-    jump(v: V, endAnimation?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get(): NonNullable<V>;
-    /**
-     * @public
-     */
-    getPrevious(): V | undefined;
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity(): number;
-    hasAnimated: boolean;
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop(): void;
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy(): void;
-}
+import { AnimationPlaybackOptions, Transition, MotionValue, UnresolvedValueKeyframe, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, GroupPlaybackControls, AnimationPlaybackControls } from 'motion-dom';
 
 type GenericKeyframesTarget<V> = V[] | Array<null | V>;
 

package/dist/dom-mini.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=t=>t;let n=e;function i(t){let e;return()=>(void 0===e&&(e=t()),e)}const a=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},o=t=>1e3*t,s=t=>t/1e3,r=i(()=>void 0!==window.ScrollTimeline);class l extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>r()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function u(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:s(a)}}function c(t){return"function"==typeof t}const h={linearEasing:void 0};function f(t,e){const n=i(t);return()=>{var t;return null!==(t=h[e])&&void 0!==t?t:n()}}const m=f(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),d=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,p={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:d([0,.65,.55,1]),circOut:d([.55,0,1,.45]),backIn:d([.31,.01,.66,-.59]),backOut:d([.33,1.53,.69,.99])};function y(t,e){return t?"function"==typeof t&&m()?((t,e,n=10)=>{let i="";const o=Math.max(Math.round(e/n),2);for(let e=0;e<o;e++)i+=t(a(0,o-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?d(t):Array.isArray(t)?t.map(t=>y(t,e)||p.easeOut):p[t]:void 0}function g(t,e,n){var i;if(t instanceof EventTarget)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const o=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return o?Array.from(o):[]}return Array.from(t)}function v(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const A=(t,e,n)=>t+(e-t)*n;function b(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const o=a(0,e,i);t.push(A(n,1,o))}}function T(t){const e=[0];return b(e,t.length-1),e}function w(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function x(t,e,n){return t*(e+1)}function P(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function k(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}function M(t,e,n,i,a,o){!function(t,e,n){for(let i=0;i<t.length;i++){const a=t[i];a.at>e&&a.at<n&&(k(t,a),i--)}}(t,a,o);for(let s=0;s<e.length;s++)t.push({value:e[s],at:A(a,o,i[s]),easing:v(n,s)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function F(t,e){return e[t]||(e[t]=[]),e[t]}function E(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty(e,n)}function q(t,e,n){t.style[e]=n}const C=i(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=i(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return s(Number(i))}get time(){var t;return this.animation?s((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=o(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t,e;this.animation&&(null===(t=this.options)||void 0===t?void 0:t.allowFlatten)&&(null===(e=this.animation.effect)||void 0===e||e.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),e}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,i,a){const s=e.startsWith("--");n("string"!=typeof a.type);const r=D(t).get(e);r&&r.stop();if(Array.isArray(i)||(i=[i]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,i,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),c(a.type)){const t=u(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=o(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const l=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),o=e&&"loop"!==n&&e%2==1?0:a.length-1;return o&&void 0!==i?i:a[o]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{this.setValue=s?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{const n=z.get(t);n&&n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:o=0,repeatType:s="loop",ease:r="easeInOut",times:l}={}){const u={[e]:n};l&&(u.offset=l);const c=y(r,a);return Array.isArray(c)&&(u.easing=c),t.animate(u,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:o+1,direction:"reverse"===s?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=l,D(t).set(e,this)):(super(),h(),l())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=g(t,i),s=a.length,r=[];for(let t=0;t<s;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,s));for(const t in e){const n=e[t],a={...(l=c,u=t,l?l[u]||l.default||l:void 0)};a.duration=a.duration?o(a.duration):a.duration,a.delay=o(a.delay||0),a.allowFlatten=!c.type&&!c.ease,r.push(new H(i,t,n,a))}}var l,u;return r}const Y=(t=>function(e,n,i){return new l(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,s){const r=e.duration||.3,l=new Map,h=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const a=t[n];if("string"==typeof a){m.set(a,p);continue}if(!Array.isArray(a)){m.set(a.name,P(p,a.at,d,m));continue}let[l,A,k={}]=a;void 0!==k.at&&(p=P(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,l=0)=>{const h=E(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:w=0,...P}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const F="function"==typeof f?f(a,l):f,B=h.length,S=c(d)?d:null==s?void 0:s[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...P};void 0!==W&&(e.duration=o(W));const n=u(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+F;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-h.length;if(L>0&&b(m,L),1===h.length&&h.unshift(null),g){W=x(W,g);const t=[...h],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){h.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":v(n,a-1))}O(m,g)}const V=I+W;M(i,h,k,m,I,V),R=Math.max(F+W,R),y=Math.max(V,y)};if(g=l,Boolean(g&&g.getVelocity)){S(A,k,F("default",W(l,h)))}else{const t=w(l,A,i,f),e=t.length;for(let n=0;n<e;n++){A=A,k=k;const i=W(t[n],h);for(const t in A)S(A[t],B(k,t),F(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const o in t){const s=t[o];s.sort(R);const r=[],u=[],c=[];for(let t=0;t<s.length;t++){const{at:e,value:n,easing:i}=s[t];r.push(n),u.push(a(0,y,e)),c.push(i||"easeOut")}0!==u[0]&&(u.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==u[u.length-1]&&(u.push(1),r.push(null)),l.has(i)||l.set(i,{keyframes:{},transition:{}});const h=l.get(i);h.keyframes[o]=r,h.transition[o]={...e,duration:y,ease:c,times:u,...n}}}),l}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new l(n)}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";function e(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const n=t=>t;let i=n;function a(t){let e;return()=>(void 0===e&&(e=t()),e)}const o=(t,e,n)=>{const i=e-t;return 0===i?1:(n-t)/i},s=t=>1e3*t,r=t=>t/1e3,l=a(()=>void 0!==window.ScrollTimeline);class u extends class{constructor(t){this.stop=()=>this.runAll("stop"),this.animations=t.filter(Boolean)}get finished(){return Promise.all(this.animations.map(t=>"finished"in t?t.finished:t))}getAll(t){return this.animations[0][t]}setAll(t,e){for(let n=0;n<this.animations.length;n++)this.animations[n][t]=e}attachTimeline(t,e){const n=this.animations.map(n=>l()&&n.attachTimeline?n.attachTimeline(t):"function"==typeof e?e(n):void 0);return()=>{n.forEach((t,e)=>{t&&t(),this.animations[e].stop()})}}get time(){return this.getAll("time")}set time(t){this.setAll("time",t)}get speed(){return this.getAll("speed")}set speed(t){this.setAll("speed",t)}get startTime(){return this.getAll("startTime")}get duration(){let t=0;for(let e=0;e<this.animations.length;e++)t=Math.max(t,this.animations[e].duration);return t}runAll(t){this.animations.forEach(e=>e[t]())}flatten(){this.runAll("flatten")}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}{then(t,e){return Promise.all(this.animations).then(t).catch(e)}}function c(t,e=100,n){const i=n({...t,keyframes:[0,e]}),a=Math.min(function(t){let e=0,n=t.next(e);for(;!n.done&&e<2e4;)e+=50,n=t.next(e);return e>=2e4?1/0:e}(i),2e4);return{type:"keyframes",ease:t=>i.next(a*t).value/e,duration:r(a)}}function h(t){return"function"==typeof t}const f={linearEasing:void 0};function m(t,e){const n=a(t);return()=>{var t;return null!==(t=f[e])&&void 0!==t?t:n()}}const d=m(()=>{try{document.createElement("div").animate({opacity:0},{easing:"linear(0, 1)"})}catch(t){return!1}return!0},"linearEasing"),p=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,y={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",circIn:p([0,.65,.55,1]),circOut:p([.55,0,1,.45]),backIn:p([.31,.01,.66,-.59]),backOut:p([.33,1.53,.69,.99])};function g(t,e){return t?"function"==typeof t&&d()?((t,e,n=10)=>{let i="";const a=Math.max(Math.round(e/n),2);for(let e=0;e<a;e++)i+=t(o(0,a-1,e))+", ";return`linear(${i.substring(0,i.length-2)})`})(t,e):(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?p(t):Array.isArray(t)?t.map(t=>g(t,e)||y.easeOut):y[t]:void 0}function v(t,e,n){var i;if(t instanceof EventTarget)return[t];if("string"==typeof t){let a=document;e&&(a=e.current);const o=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return o?Array.from(o):[]}return Array.from(t)}function A(t,e){return n=t,Array.isArray(n)&&"number"!=typeof n[0]?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t;var n}const b=(t,e,n)=>t+(e-t)*n;function T(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=o(0,e,i);t.push(b(n,1,a))}}function w(t){const e=[0];return T(e,t.length-1),e}function x(t,e,n,i){return"string"==typeof t&&function(t){return"object"==typeof t&&!Array.isArray(t)}(e)?v(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function k(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function M(t,n,i,a,o,s){!function(t,n,i){for(let a=0;a<t.length;a++){const o=t[a];o.at>n&&o.at<i&&(e(t,o),a--)}}(t,o,s);for(let e=0;e<n.length;e++)t.push({value:n[e],at:b(o,s,a[e]),easing:A(i,e)})}function O(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function R(t,e){return t.at===e.at?null===t.value?1:null===e.value?-1:0:t.at-e.at}function W(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function F(t,e){return e[t]||(e[t]=[]),e[t]}function E(t){return Array.isArray(t)?t:[t]}function B(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const S=t=>"number"==typeof t,$=t=>t.every(S);const I=(t=>({test:e=>"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length,parse:parseFloat,transform:e=>`${e}${t}`}))("px"),L={borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,radius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,backgroundPositionX:I,backgroundPositionY:I},V=t=>null!==t;function j(t,e,n){t.style.setProperty(e,n)}function q(t,e,n){t.style[e]=n}const C=a(()=>{try{document.createElement("div").animate({opacity:[1]})}catch(t){return!1}return!0}),N=a(()=>Object.hasOwnProperty.call(Element.prototype,"animate")),z=new WeakMap;function D(t){const e=z.get(t)||new Map;return z.set(t,e),z.get(t)}class H extends class{constructor(t){this.animation=t}get duration(){var t,e,n;const i=(null===(e=null===(t=this.animation)||void 0===t?void 0:t.effect)||void 0===e?void 0:e.getComputedTiming().duration)||(null===(n=this.options)||void 0===n?void 0:n.duration)||300;return r(Number(i))}get time(){var t;return this.animation?r((null===(t=this.animation)||void 0===t?void 0:t.currentTime)||0):0}set time(t){this.animation&&(this.animation.currentTime=s(t))}get speed(){return this.animation?this.animation.playbackRate:1}set speed(t){this.animation&&(this.animation.playbackRate=t)}get state(){return this.animation?this.animation.playState:"finished"}get startTime(){return this.animation?this.animation.startTime:null}get finished(){return this.animation?this.animation.finished:Promise.resolve()}play(){this.animation&&this.animation.play()}pause(){this.animation&&this.animation.pause()}stop(){this.animation&&"idle"!==this.state&&"finished"!==this.state&&(this.animation.commitStyles&&this.animation.commitStyles(),this.cancel())}flatten(){var t,e;this.animation&&(null===(t=this.options)||void 0===t?void 0:t.allowFlatten)&&(null===(e=this.animation.effect)||void 0===e||e.updateTiming({easing:"linear"}))}attachTimeline(t){return this.animation&&function(t,e){t.timeline=e,t.onfinish=null}(this.animation,t),n}complete(){this.animation&&this.animation.finish()}cancel(){try{this.animation&&this.animation.cancel()}catch(t){}}}{constructor(t,e,n,a){const o=e.startsWith("--");i("string"!=typeof a.type);const r=D(t).get(e);r&&r.stop();if(Array.isArray(n)||(n=[n]),function(t,e,n){for(let i=0;i<e.length;i++)null===e[i]&&(e[i]=0===i?n():e[i-1]),"number"==typeof e[i]&&L[t]&&(e[i]=L[t].transform(e[i]));!C()&&e.length<2&&e.unshift(n())}(e,n,()=>e.startsWith("--")?t.style.getPropertyValue(e):window.getComputedStyle(t)[e]),h(a.type)){const t=c(a,100,a.type);a.ease=d()?t.ease:"easeOut",a.duration=s(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const l=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),o=e&&"loop"!==n&&e%2==1?0:a.length-1;return o&&void 0!==i?i:a[o]}(n,a)),this.cancel(),this.resolveFinishedPromise()},u=()=>{this.setValue=o?j:q,this.options=a,this.updateFinishedPromise(),this.removeAnimation=()=>{const n=z.get(t);n&&n.delete(e)}};N()?(super(function(t,e,n,{delay:i=0,duration:a=300,repeat:o=0,repeatType:s="loop",ease:r="easeInOut",times:l}={}){const u={[e]:n};l&&(u.offset=l);const c=g(r,a);return Array.isArray(c)&&(u.easing=c),t.animate(u,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:o+1,direction:"reverse"===s?"alternate":"normal"})}(t,e,n,a)),u(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=l,D(t).set(e,this)):(super(),u(),l())}then(t,e){return this.currentFinishedPromise.then(t,e)}updateFinishedPromise(){this.currentFinishedPromise=new Promise(t=>{this.resolveFinishedPromise=t})}play(){"finished"===this.state&&this.updateFinishedPromise(),super.play()}cancel(){this.removeAnimation(),super.cancel()}}function X(t,e,n,i){const a=v(t,i),o=a.length,r=[];for(let t=0;t<o;t++){const i=a[t],c={...n};"function"==typeof c.delay&&(c.delay=c.delay(t,o));for(const t in e){const n=e[t],a={...(l=c,u=t,l?l[u]||l.default||l:void 0)};a.duration=a.duration?s(a.duration):a.duration,a.delay=s(a.delay||0),a.allowFlatten=!c.type&&!c.ease,r.push(new H(i,t,n,a))}}var l,u;return r}const Y=(t=>function(e,n,i){return new u(X(e,n,i,t))})();t.animate=Y,t.animateSequence=function(t,e){const n=[];return function(t,{defaultTransition:e={},...n}={},i,a){const r=e.duration||.3,l=new Map,u=new Map,f={},m=new Map;let d=0,p=0,y=0;for(let n=0;n<t.length;n++){const o=t[n];if("string"==typeof o){m.set(o,p);continue}if(!Array.isArray(o)){m.set(o.name,k(p,o.at,d,m));continue}let[l,v,b={}]=o;void 0!==b.at&&(p=k(p,b.at,d,m));let R=0;const S=(t,n,i,o=0,l=0)=>{const u=E(t),{delay:f=0,times:m=w(u),type:d="keyframes",repeat:g,repeatType:v,repeatDelay:b=0,...x}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const F="function"==typeof f?f(o,l):f,B=u.length,S=h(d)?d:null==a?void 0:a[d];if(B<=2&&S){let t=100;if(2===B&&$(u)){const e=u[1]-u[0];t=Math.abs(e)}const e={...x};void 0!==W&&(e.duration=s(W));const n=c(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+F;1===m.length&&0===m[0]&&(m[1]=1);const L=m.length-u.length;if(L>0&&T(m,L),1===u.length&&u.unshift(null),g){W=P(W,g);const t=[...u],e=[...m];k=Array.isArray(k)?[...k]:[k];const n=[...k];for(let i=0;i<g;i++){u.push(...t);for(let a=0;a<t.length;a++)m.push(e[a]+(i+1)),k.push(0===a?"linear":A(n,a-1))}O(m,g)}const V=I+W;M(i,u,k,m,I,V),R=Math.max(F+W,R),y=Math.max(V,y)};if(g=l,Boolean(g&&g.getVelocity)){S(v,b,F("default",W(l,u)))}else{const t=x(l,v,i,f),e=t.length;for(let n=0;n<e;n++){v=v,b=b;const i=W(t[n],u);for(const t in v)S(v[t],B(b,t),F(t,i),n,e)}}d=p,p+=R}var g;return u.forEach((t,i)=>{for(const a in t){const s=t[a];s.sort(R);const r=[],u=[],c=[];for(let t=0;t<s.length;t++){const{at:e,value:n,easing:i}=s[t];r.push(n),u.push(o(0,y,e)),c.push(i||"easeOut")}0!==u[0]&&(u.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==u[u.length-1]&&(u.push(1),r.push(null)),l.has(i)||l.set(i,{keyframes:{},transition:{}});const h=l.get(i);h.keyframes[a]=r,h.transition[a]={...e,duration:y,ease:c,times:u,...n}}}),l}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(n)}}));