framer-motion 12.4.10 → 12.4.12

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-C1YMxw9b.js');
+var create = require('./create-Da6xW2BP.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-C1YMxw9b.js → create-Da6xW2BP.js}

@@ -410,7 +410,7 @@ class MotionValue {
          * 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 = "12.4.10";
+        this.version = "12.4.12";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -1836,6 +1836,8 @@ class BaseAnimation {
         return this.currentFinishedPromise.then(resolve, reject);
     }
     flatten() {
+        if (!this.options.allowFlatten)
+            return;
         this.options.type = "keyframes";
         this.options.ease = "linear";
     }
@@ -3400,7 +3402,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     };
     /**
      * If there's no transition defined for this value, we can generate
-     * unqiue transition settings for this value.
+     * unique transition settings for this value.
      */
     if (!isTransitionDefined(valueTransition)) {
         options = {
@@ -3436,6 +3438,11 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
         options.duration = 0;
         options.delay = 0;
     }
+    /**
+     * If the transition type or easing has been explicitly set by the user
+     * then we don't want to allow flattening the animation.
+     */
+    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
     /**
      * If we can or must skip creating the animation, and apply only
      * the final keyframe, do so. We also check once keyframes are resolved but
@@ -4570,7 +4577,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.4.10", `Attempting to mix Motion versions ${nextValue.version} with 12.4.10 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.12", `Attempting to mix Motion versions ${nextValue.version} with 12.4.12 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7760,6 +7767,11 @@ function loadFeatures(features) {
     }
 }
 
+// Fixes https://github.com/motiondivision/motion/issues/2270
+const getContextWindow = ({ current }) => {
+    return current ? current.ownerDocument.defaultView : null;
+};
+
 function isRefObject(ref) {
     return (ref &&
         typeof ref === "object" &&
@@ -7770,7 +7782,7 @@ function isRefObject(ref) {
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
         /**
          * @internal
          */
@@ -7787,6 +7799,10 @@ class PanSession {
          * @internal
          */
         this.handlers = {};
+        /**
+         * @internal
+         */
+        this.contextWindow = window;
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -7809,32 +7825,19 @@ class PanSession {
             onMove && onMove(this.lastMoveEvent, info);
         };
         this.handlePointerMove = (event, info) => {
-            this.index = getElementIndex(event.currentTarget);
-            if (event.target instanceof Element &&
-                event.target.hasPointerCapture &&
-                event.pointerId !== undefined) {
-                try {
-                    if (!event.target.hasPointerCapture(event.pointerId)) {
-                        return;
-                    }
-                }
-                catch (e) { }
-            }
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
             // Throttle mouse move event to once per frame
             frame.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
-            motionDom.capturePointer(event, "release");
             this.end();
             const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
             if (this.dragSnapToOrigin)
                 resumeAnimation && resumeAnimation();
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
-            const panInfo = getPanInfo(event.type === "pointercancel" ||
-                event.type === "lostpointercapture"
+            const panInfo = getPanInfo(event.type === "pointercancel"
                 ? this.lastMoveEventInfo
                 : transformPoint(info, this.transformPagePoint), this.history);
             if (this.startEvent && onEnd) {
@@ -7848,6 +7851,7 @@ class PanSession {
         this.dragSnapToOrigin = dragSnapToOrigin;
         this.handlers = handlers;
         this.transformPagePoint = transformPagePoint;
+        this.contextWindow = contextWindow || window;
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
@@ -7856,20 +7860,7 @@ class PanSession {
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
-        motionDom.capturePointer(event, "set");
-        this.removeListeners = pipe(addPointerEvent(event.currentTarget, "pointermove", this.handlePointerMove), addPointerEvent(event.currentTarget, "pointerup", this.handlePointerUp), addPointerEvent(event.currentTarget, "pointercancel", this.handlePointerUp), addPointerEvent(event.currentTarget, "lostpointercapture", (lostPointerEvent, lostPointerInfo) => {
-            const index = getElementIndex(lostPointerEvent.currentTarget);
-            /**
-             * If the pointer has lost capture because it's moved in the DOM
-             * then we need to re-capture it.
-             */
-            if (index !== this.index) {
-                motionDom.capturePointer(lostPointerEvent, "set");
-            }
-            else {
-                this.handlePointerUp(lostPointerEvent, lostPointerInfo);
-            }
-        }));
+        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
@@ -7933,11 +7924,6 @@ function getVelocity(history, timeDelta) {
     }
     return currentVelocity;
 }
-function getElementIndex(element) {
-    if (!element.parentNode)
-        return -1;
-    return Array.from(element.parentNode.children).indexOf(element);
-}
 
 /**
  * Apply constraints to a point. These constraints are both physical along an
@@ -8194,6 +8180,7 @@ class VisualElementDragControls {
         }, {
             transformPagePoint: this.visualElement.getTransformPagePoint(),
             dragSnapToOrigin,
+            contextWindow: getContextWindow(this.visualElement),
         });
     }
     stop(event, info) {
@@ -8559,6 +8546,7 @@ class PanGesture extends Feature {
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
             transformPagePoint: this.node.getTransformPagePoint(),
+            contextWindow: getContextWindow(this.node),
         });
     }
     createPanHandlers() {

package/dist/cjs/dom-mini.js

@@ -619,6 +619,8 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
                 ? motionUtils.secondsToMilliseconds(valueOptions.duration)
                 : valueOptions.duration;
             valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
+            valueOptions.allowFlatten =
+                !elementTransition.type && !elementTransition.ease;
             animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
         }
     }

package/dist/cjs/dom.js

@@ -1011,7 +1011,7 @@ class MotionValue {
          * 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 = "12.4.10";
+        this.version = "12.4.12";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -2460,6 +2460,8 @@ class BaseAnimation {
         return this.currentFinishedPromise.then(resolve, reject);
     }
     flatten() {
+        if (!this.options.allowFlatten)
+            return;
         this.options.type = "keyframes";
         this.options.ease = "linear";
     }
@@ -3707,7 +3709,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     };
     /**
      * If there's no transition defined for this value, we can generate
-     * unqiue transition settings for this value.
+     * unique transition settings for this value.
      */
     if (!isTransitionDefined(valueTransition)) {
         options = {
@@ -3737,6 +3739,11 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
+    /**
+     * If the transition type or easing has been explicitly set by the user
+     * then we don't want to allow flattening the animation.
+     */
+    options.allowFlatten = !valueTransition.type && !valueTransition.ease;
     /**
      * If we can or must skip creating the animation, and apply only
      * the final keyframe, do so. We also check once keyframes are resolved but
@@ -3947,7 +3954,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.4.10", `Attempting to mix Motion versions ${nextValue.version} with 12.4.10 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.12", `Attempting to mix Motion versions ${nextValue.version} with 12.4.12 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5211,6 +5218,8 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
                 ? motionUtils.secondsToMilliseconds(valueOptions.duration)
                 : valueOptions.duration;
             valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
+            valueOptions.allowFlatten =
+                !elementTransition.type && !elementTransition.ease;
             animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
         }
     }

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-C1YMxw9b.js');
+var create = require('./create-Da6xW2BP.js');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
 
@@ -1017,6 +1017,8 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
                 ? motionUtils.secondsToMilliseconds(valueOptions.duration)
                 : valueOptions.duration;
             valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
+            valueOptions.allowFlatten =
+                !elementTransition.type && !elementTransition.ease;
             animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
         }
     }

package/dist/cjs/mini.js

@@ -246,6 +246,8 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
                 ? motionUtils.secondsToMilliseconds(valueOptions.duration)
                 : valueOptions.duration;
             valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
+            valueOptions.allowFlatten =
+                !elementTransition.type && !elementTransition.ease;
             animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
         }
     }

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},s=t=>1e3*t,o=t=>t/1e3,r=i(()=>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=>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 l(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:o(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 s=Math.max(Math.round(e/n),2);for(let e=0;e<s;e++)i+=t(a(0,s-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 s=null!==(i=null==n?void 0:n[t])&&void 0!==i?i:a.querySelectorAll(t);return s?Array.from(s):[]}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 s=a(0,e,i);t.push(A(n,1,s))}}function T(t){const e=[0];return b(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)?g(t,n,i):t instanceof NodeList?Array.from(t):Array.isArray(t)?t:[t]}function P(t,e,n){return t*(e+1)}function w(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,s){!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,s);for(let o=0;o<e.length;o++)t.push({value:e[o],at:A(a,s,i[o]),easing:v(n,o)})}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 E(t,e){return e[t]||(e[t]=[]),e[t]}function F(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 o(Number(i))}get time(){var t;return this.animation?o((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;this.animation&&(null===(t=this.animation.effect)||void 0===t||t.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 o=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=l(a,100,a.type);a.ease=m()?t.ease:"easeOut",a.duration=s(t.duration),a.type="keyframes"}else a.ease=a.ease||"easeOut";const u=()=>{this.setValue(t,e,function(t,{repeat:e,repeatType:n="loop"},i){const a=t.filter(V),s=e&&"loop"!==n&&e%2==1?0:a.length-1;return s&&void 0!==i?i:a[s]}(i,a)),this.cancel(),this.resolveFinishedPromise()},h=()=>{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:s=0,repeatType:o="loop",ease:r="easeInOut",times:u}={}){const l={[e]:n};u&&(l.offset=u);const c=y(r,a);return Array.isArray(c)&&(l.easing=c),t.animate(l,{delay:i,duration:a,easing:Array.isArray(c)?"linear":c,fill:"both",iterations:s+1,direction:"reverse"===o?"alternate":"normal"})}(t,e,i,a)),h(),!1===a.autoplay&&this.animation.pause(),this.animation.onfinish=u,D(t).set(e,this)):(super(),h(),u())}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),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={...(u=c,l=t,u?u[l]||u.default||u:void 0)};a.duration=a.duration?s(a.duration):a.duration,a.delay=s(a.delay||0),r.push(new H(i,t,n,a))}}var u,l;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,o){const r=e.duration||.3,u=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,w(p,a.at,d,m));continue}let[u,A,k={}]=a;void 0!==k.at&&(p=w(p,k.at,d,m));let R=0;const S=(t,n,i,a=0,u=0)=>{const h=F(t),{delay:f=0,times:m=T(h),type:d="keyframes",repeat:g,repeatType:A,repeatDelay:x=0,...w}=n;let{ease:k=e.ease||"easeOut",duration:W}=n;const E="function"==typeof f?f(a,u):f,B=h.length,S=c(d)?d:null==o?void 0:o[d];if(B<=2&&S){let t=100;if(2===B&&$(h)){const e=h[1]-h[0];t=Math.abs(e)}const e={...w};void 0!==W&&(e.duration=s(W));const n=l(e,t,S);k=n.ease,W=n.duration}null!=W||(W=r);const I=p+E;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=P(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(E+W,R),y=Math.max(V,y)};if(g=u,Boolean(g&&g.getVelocity)){S(A,k,E("default",W(u,h)))}else{const t=x(u,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),E(t,i),n,e)}}d=p,p+=R}var g;return h.forEach((t,i)=>{for(const s in t){const o=t[s];o.sort(R);const r=[],l=[],c=[];for(let t=0;t<o.length;t++){const{at:e,value:n,easing:i}=o[t];r.push(n),l.push(a(0,y,e)),c.push(i||"easeOut")}0!==l[0]&&(l.unshift(0),r.unshift(r[0]),c.unshift("easeInOut")),1!==l[l.length-1]&&(l.push(1),r.push(null)),u.has(i)||u.set(i,{keyframes:{},transition:{}});const h=u.get(i);h.keyframes[s]=r,h.transition[s]={...e,duration:y,ease:c,times:l,...n}}}),u}(t,e).forEach(({keyframes:t,transition:e},i)=>{n.push(...X(i,t,e))}),new u(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";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)}}));