motion 12.6.3-alpha.0 → 12.6.4-alpha.0

package/dist/motion.dev.js

@@ -14,11 +14,8 @@
             arr.splice(index, 1);
     }
 
-    /*#__NO_SIDE_EFFECTS__*/
-    const noop = (any) => any;
-
-    let warning = noop;
-    exports.invariant = noop;
+    let warning = () => { };
+    exports.invariant = () => { };
     {
         warning = (check, message) => {
             if (!check && typeof console !== "undefined") {
@@ -32,10 +29,7 @@
         };
     }
 
-    const MotionGlobalConfig = {
-        skipAnimations: false,
-        useManualTiming: false,
-    };
+    const MotionGlobalConfig = {};
 
     /*#__NO_SIDE_EFFECTS__*/
     function memo(callback) {
@@ -47,6 +41,9 @@
         };
     }
 
+    /*#__NO_SIDE_EFFECTS__*/
+    const noop = (any) => any;
+
     /*
       Progress within given range
 
@@ -135,15 +132,14 @@
 
     const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
 
-    class BaseGroupPlaybackControls {
+    class GroupAnimation {
         constructor(animations) {
             // Bound to accomodate common `return animation.stop` pattern
             this.stop = () => this.runAll("stop");
             this.animations = animations.filter(Boolean);
         }
         get finished() {
-            // Support for new finished Promise and legacy thennable API
-            return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+            return Promise.all(this.animations.map((animation) => animation.finished));
         }
         /**
          * TODO: Filter out cancelled or stopped animations before returning
@@ -214,156 +210,122 @@
         }
     }
 
-    /**
-     * TODO: This is a temporary class to support the legacy
-     * thennable API
-     */
-    class GroupPlaybackControls extends BaseGroupPlaybackControls {
-        then(onResolve, onReject) {
-            return Promise.all(this.animations).then(onResolve).catch(onReject);
-        }
-    }
-
-    function getValueTransition$1(transition, key) {
-        return transition
-            ? transition[key] ||
-                transition["default"] ||
-                transition
-            : undefined;
-    }
-
-    /**
-     * Implement a practical max duration for keyframe generation
-     * to prevent infinite loops
-     */
-    const maxGeneratorDuration = 20000;
-    function calcGeneratorDuration(generator) {
-        let duration = 0;
-        const timeStep = 50;
-        let state = generator.next(duration);
-        while (!state.done && duration < maxGeneratorDuration) {
-            duration += timeStep;
-            state = generator.next(duration);
+    class GroupAnimationWithThen extends GroupAnimation {
+        then(onResolve, _onReject) {
+            return this.finished.finally(onResolve).then(() => { });
         }
-        return duration >= maxGeneratorDuration ? Infinity : duration;
-    }
-
-    /**
-     * Create a progress => progress easing function from a generator.
-     */
-    function createGeneratorEasing(options, scale = 100, createGenerator) {
-        const generator = createGenerator({ ...options, keyframes: [0, scale] });
-        const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-        return {
-            type: "keyframes",
-            ease: (progress) => {
-                return generator.next(duration * progress).value / scale;
-            },
-            duration: millisecondsToSeconds(duration),
-        };
     }
 
-    function isGenerator(type) {
-        return typeof type === "function";
-    }
+    const isCSSVar = (name) => name.startsWith("--");
+    const style = {
+        set: (element, name, value) => {
+            isCSSVar(name)
+                ? element.style.setProperty(name, value)
+                : (element.style[name] = value);
+        },
+        get: (element, name) => {
+            return isCSSVar(name)
+                ? element.style.getPropertyValue(name)
+                : element.style[name];
+        },
+    };
 
-    function attachTimeline(animation, timeline) {
-        animation.timeline = timeline;
-        animation.onfinish = null;
+    const isNotNull$1 = (value) => value !== null;
+    function getFinalKeyframe$1(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+        const resolvedKeyframes = keyframes.filter(isNotNull$1);
+        const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+            ? 0
+            : resolvedKeyframes.length - 1;
+        return !index || finalKeyframe === undefined
+            ? resolvedKeyframes[index]
+            : finalKeyframe;
     }
 
-    class NativeAnimationControls {
-        constructor(animation) {
-            this.animation = animation;
-        }
-        get duration() {
-            var _a, _b, _c;
-            const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
-                ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
-                300;
-            return millisecondsToSeconds(Number(durationInMs));
-        }
-        get time() {
-            var _a;
-            if (this.animation) {
-                return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-            }
-            return 0;
-        }
-        set time(newTime) {
-            if (this.animation) {
-                this.animation.currentTime = secondsToMilliseconds(newTime);
-            }
-        }
-        get speed() {
-            return this.animation ? this.animation.playbackRate : 1;
-        }
-        set speed(newSpeed) {
-            if (this.animation) {
-                this.animation.playbackRate = newSpeed;
-            }
-        }
-        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();
+    const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
+        try {
+            document.createElement("div").animate({ opacity: [1] });
         }
-        play() {
-            this.animation && this.animation.play();
+        catch (e) {
+            return false;
         }
-        pause() {
-            this.animation && this.animation.pause();
+        return true;
+    });
+
+    const pxValues = new Set([
+        // Border props
+        "borderWidth",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "borderRadius",
+        "radius",
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius",
+        // Positioning props
+        "width",
+        "maxWidth",
+        "height",
+        "maxHeight",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        // Spacing props
+        "padding",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "margin",
+        "marginTop",
+        "marginRight",
+        "marginBottom",
+        "marginLeft",
+        // Misc
+        "backgroundPositionX",
+        "backgroundPositionY",
+    ]);
+
+    function hydrateKeyframes(element, name, keyframes, pseudoElement) {
+        if (!Array.isArray(keyframes)) {
+            keyframes = [keyframes];
         }
-        stop() {
-            if (!this.animation ||
-                this.state === "idle" ||
-                this.state === "finished") {
-                return;
+        for (let i = 0; i < keyframes.length; i++) {
+            if (keyframes[i] === null) {
+                keyframes[i] =
+                    i === 0 && !pseudoElement
+                        ? style.get(element, name)
+                        : keyframes[i - 1];
             }
-            if (this.animation.commitStyles) {
-                this.animation.commitStyles();
+            if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+                keyframes[i] = keyframes[i] + "px";
             }
-            this.cancel();
-        }
-        flatten() {
-            var _a, _b;
-            if (!this.animation || !((_a = this.options) === null || _a === void 0 ? void 0 : _a.allowFlatten))
-                return;
-            (_b = this.animation.effect) === null || _b === void 0 ? void 0 : _b.updateTiming({ easing: "linear" });
-        }
-        attachTimeline(timeline) {
-            if (this.animation)
-                attachTimeline(this.animation, timeline);
-            return noop;
-        }
-        complete() {
-            this.animation && this.animation.finish();
         }
-        cancel() {
-            try {
-                this.animation && this.animation.cancel();
-            }
-            catch (e) { }
+        if (!pseudoElement && !supportsPartialKeyframes() && keyframes.length < 2) {
+            keyframes.unshift(style.get(element, name));
         }
+        return keyframes;
     }
 
+    const statsBuffer = {
+        value: null,
+        addProjectionMetrics: null,
+    };
+
     const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
     /**
      * Add the ability for test suites to manually set support flags
      * to better test more environments.
      */
-    const supportsFlags = {
-        linearEasing: undefined,
-    };
+    const supportsFlags = {};
 
     function memoSupports(callback, supportsFlag) {
         const memoized = memo(callback);
-        return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+        return () => supportsFlags[supportsFlag] ?? memoized();
     }
 
     const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
@@ -384,20 +346,13 @@
         let points = "";
         const numPoints = Math.max(Math.round(duration / resolution), 2);
         for (let i = 0; i < numPoints; i++) {
-            points += easing(progress(0, numPoints - 1, i)) + ", ";
+            points += easing(i / (numPoints - 1)) + ", ";
         }
         return `linear(${points.substring(0, points.length - 2)})`;
     };
 
-    function isWaapiSupportedEasing(easing) {
-        return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
-            !easing ||
-            (typeof easing === "string" &&
-                (easing in supportedWaapiEasing || supportsLinearEasing())) ||
-            isBezierDefinition(easing) ||
-            (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
-    }
     const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
     const supportedWaapiEasing = {
         linear: "linear",
         ease: "ease",
@@ -409,6 +364,7 @@
         backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
         backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
     };
+
     function mapEasingToNativeEasing(easing, duration) {
         if (!easing) {
             return undefined;
@@ -428,6 +384,247 @@
         }
     }
 
+    function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+        const keyframeOptions = {
+            [valueName]: keyframes,
+        };
+        if (times)
+            keyframeOptions.offset = times;
+        const easing = mapEasingToNativeEasing(ease, duration);
+        /**
+         * If this is an easing array, apply to keyframes, not animation as a whole
+         */
+        if (Array.isArray(easing))
+            keyframeOptions.easing = easing;
+        const animation = element.animate(keyframeOptions, {
+            delay,
+            duration,
+            easing: !Array.isArray(easing) ? easing : "linear",
+            fill: "both",
+            iterations: repeat + 1,
+            direction: repeatType === "reverse" ? "alternate" : "normal",
+            pseudoElement,
+        });
+        return animation;
+    }
+
+    function isGenerator(type) {
+        return typeof type === "function" && "applyToOptions" in type;
+    }
+
+    function applyGeneratorOptions({ type, ...options }) {
+        if (isGenerator(type)) {
+            return type.applyToOptions(options);
+        }
+        else {
+            options.duration ?? (options.duration = 300);
+            options.ease ?? (options.ease = "easeOut");
+        }
+        return options;
+    }
+
+    const animationMaps = new WeakMap();
+    const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
+    function getAnimationMap(element) {
+        const map = animationMaps.get(element) || new Map();
+        animationMaps.set(element, map);
+        return map;
+    }
+    /**
+     * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+     */
+    class NativeAnimation {
+        constructor(options) {
+            /**
+             * If we already have an animation, we don't need to instantiate one
+             * and can just use this as a controls interface.
+             */
+            if ("animation" in options) {
+                this.animation = options.animation;
+                return;
+            }
+            const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
+            let { transition } = options;
+            this.allowFlatten = allowFlatten;
+            /**
+             * Stop any existing animations on the element before reading existing keyframes.
+             *
+             * TODO: Check for VisualElement before using animation state. This is a fallback
+             * for mini animate(). Do this when implementing NativeAnimationExtended.
+             */
+            const animationMap = getAnimationMap(element);
+            const key = animationMapKey(name, pseudoElement || "");
+            const currentAnimation = animationMap.get(key);
+            currentAnimation && currentAnimation.stop();
+            /**
+             * TODO: If these keyframes aren't correctly hydrated then we want to throw
+             * run an instant animation.
+             */
+            const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
+            exports.invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+            transition = applyGeneratorOptions(transition);
+            this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+            if (transition.autoplay === false) {
+                this.animation.pause();
+            }
+            this.removeAnimation = () => animationMap.delete(key);
+            this.animation.onfinish = () => {
+                if (!pseudoElement) {
+                    style.set(element, name, getFinalKeyframe$1(keyframes, transition));
+                }
+                else {
+                    this.commitStyles();
+                }
+                this.cancel();
+            };
+            /**
+             * TODO: Check for VisualElement before using animation state.
+             */
+            animationMap.set(key, this);
+        }
+        play() {
+            this.animation.play();
+        }
+        pause() {
+            this.animation.pause();
+        }
+        complete() {
+            this.animation.finish();
+        }
+        cancel() {
+            try {
+                this.animation.cancel();
+            }
+            catch (e) { }
+            this.removeAnimation();
+        }
+        stop() {
+            const { state } = this;
+            if (state === "idle" || state === "finished") {
+                return;
+            }
+            this.commitStyles();
+            this.cancel();
+        }
+        /**
+         * WAAPI doesn't natively have any interruption capabilities.
+         *
+         * In this method, we commit styles back to the DOM before cancelling
+         * the animation.
+         *
+         * This is designed to be overridden by NativeAnimationExtended, which
+         * will create a renderless JS animation and sample it twice to calculate
+         * its current value, "previous" value, and therefore allow
+         * Motion to also correctly calculate velocity for any subsequent animation
+         * while deferring the commit until the next animation frame.
+         */
+        commitStyles() {
+            this.animation.commitStyles?.();
+        }
+        get duration() {
+            console.log(this.animation.effect?.getComputedTiming());
+            const duration = this.animation.effect?.getComputedTiming().duration || 0;
+            return millisecondsToSeconds(Number(duration));
+        }
+        get time() {
+            return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+        }
+        set time(newTime) {
+            this.animation.currentTime = secondsToMilliseconds(newTime);
+        }
+        /**
+         * The playback speed of the animation.
+         * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+         */
+        get speed() {
+            return this.animation.playbackRate;
+        }
+        set speed(newSpeed) {
+            this.animation.playbackRate = newSpeed;
+        }
+        get state() {
+            return this.animation.playState;
+        }
+        get startTime() {
+            return Number(this.animation.startTime);
+        }
+        get finished() {
+            return this.animation.finished;
+        }
+        flatten() {
+            if (this.allowFlatten) {
+                this.animation.effect?.updateTiming({ easing: "linear" });
+            }
+        }
+        /**
+         * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+         */
+        attachTimeline(timeline) {
+            this.animation.timeline = timeline;
+            this.animation.onfinish = null;
+            return noop;
+        }
+        /**
+         * Allows the animation to be awaited.
+         *
+         * @deprecated Use `finished` instead.
+         */
+        then(onResolve, onReject) {
+            return this.finished.then(onResolve).catch(onReject);
+        }
+    }
+
+    function getValueTransition$1(transition, key) {
+        return (transition?.[key] ??
+            transition?.["default"] ??
+            transition);
+    }
+
+    /**
+     * Implement a practical max duration for keyframe generation
+     * to prevent infinite loops
+     */
+    const maxGeneratorDuration = 20000;
+    function calcGeneratorDuration(generator) {
+        let duration = 0;
+        const timeStep = 50;
+        let state = generator.next(duration);
+        while (!state.done && duration < maxGeneratorDuration) {
+            duration += timeStep;
+            state = generator.next(duration);
+        }
+        return duration >= maxGeneratorDuration ? Infinity : duration;
+    }
+
+    /**
+     * Create a progress => progress easing function from a generator.
+     */
+    function createGeneratorEasing(options, scale = 100, createGenerator) {
+        const generator = createGenerator({ ...options, keyframes: [0, scale] });
+        const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+        return {
+            type: "keyframes",
+            ease: (progress) => {
+                return generator.next(duration * progress).value / scale;
+            },
+            duration: millisecondsToSeconds(duration),
+        };
+    }
+
+    function isWaapiSupportedEasing(easing) {
+        return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+            !easing ||
+            (typeof easing === "string" &&
+                (easing in supportedWaapiEasing || supportsLinearEasing())) ||
+            isBezierDefinition(easing) ||
+            (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
+    }
+
+    function attachTimeline(animation, timeline) {
+        animation.timeline = timeline;
+        animation.onfinish = null;
+    }
+
     const stepsOrder = [
         "read", // Read
         "resolveKeyframes", // Write/Read/Write/Read
@@ -437,11 +634,6 @@
         "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
@@ -547,9 +739,11 @@
         }, {});
         const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
         const processBatch = () => {
-            const timestamp = performance.now();
+            const timestamp = MotionGlobalConfig.useManualTiming
+                ? state.timestamp
+                : performance.now();
             runNextFrame = false;
-            {
+            if (!MotionGlobalConfig.useManualTiming) {
                 state.delta = useDefaultElapsed
                     ? 1000 / 60
                     : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
@@ -631,21 +825,16 @@
     }
 
     function resolveElements(elementOrSelector, scope, selectorCache) {
-        var _a;
         if (elementOrSelector instanceof EventTarget) {
             return [elementOrSelector];
         }
         else if (typeof elementOrSelector === "string") {
             let root = document;
             if (scope) {
-                // TODO: Refactor to utils package
-                // invariant(
-                //     Boolean(scope.current),
-                //     "Scope provided, but no element detected."
-                // )
                 root = scope.current;
             }
-            const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+            const elements = selectorCache?.[elementOrSelector] ??
+                root.querySelectorAll(elementOrSelector);
             return elements ? Array.from(elements) : [];
         }
         return Array.from(elementOrSelector);
@@ -844,7 +1033,7 @@
             if (target instanceof HTMLElement) {
                 target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
                 if (!isElementKeyboardAccessible(target) &&
-                    target.tabIndex === null) {
+                    !target.hasAttribute("tabindex")) {
                     target.tabIndex = 0;
                 }
             }
@@ -877,7 +1066,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 = "12.6.3-alpha.0";
+            this.version = "12.6.4-alpha.0";
             /**
              * 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
@@ -1426,9 +1615,17 @@
                 const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
                 return calculatedDuration + "ms " + easing;
             },
+            toTransition: () => { },
         };
         return generator;
     }
+    spring.applyToOptions = (options) => {
+        const generatorOptions = createGeneratorEasing(options, 100, spring);
+        options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+        options.duration = secondsToMilliseconds(generatorOptions.duration);
+        options.type = "keyframes";
+        return options;
+    };
 
     const wrap = (min, max, v) => {
         const rangeSize = max - min;
@@ -1512,7 +1709,6 @@
      * calculate an absolute time for the next keyframes.
      */
     function calcNextTime(current, next, prev, labels) {
-        var _a;
         if (typeof next === "number") {
             return next;
         }
@@ -1523,7 +1719,7 @@
             return prev;
         }
         else {
-            return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+            return labels.get(next) ?? current;
         }
     }
 
@@ -1636,7 +1832,7 @@
                 const numKeyframes = valueKeyframesAsList.length;
                 const createGenerator = isGenerator(type)
                     ? type
-                    : generators === null || generators === void 0 ? void 0 : generators[type];
+                    : generators?.[type];
                 if (numKeyframes <= 2 && createGenerator) {
                     /**
                      * As we're creating an easing function from a spring,
@@ -1658,7 +1854,7 @@
                     ease = springEasing.ease;
                     duration = springEasing.duration;
                 }
-                duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+                duration ?? (duration = defaultDuration);
                 const startTime = currentTime + calculatedDelay;
                 /**
                  * If there's only one time offset of 0, fill in a second with length 1
@@ -1867,7 +2063,7 @@
 
     function getValueState(visualElement) {
         const state = [{}, {}];
-        visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+        visualElement?.values.forEach((value, key) => {
             state[0][key] = value.get();
             state[1][key] = value.getVelocity();
         });
@@ -1940,11 +2136,6 @@
         if (isWillChangeMotionValue(willChange)) {
             return willChange.add(key);
         }
-        else if (!willChange && MotionGlobalConfig.WillChange) {
-            const newWillChange = new MotionGlobalConfig.WillChange("auto");
-            visualElement.addValue("willChange", newWillChange);
-            newWillChange.add(key);
-        }
     }
 
     /**
@@ -2204,11 +2395,10 @@
     const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 
     function test(v) {
-        var _a, _b;
         return (isNaN(v) &&
             typeof v === "string" &&
-            (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-                (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+            (v.match(floatRegex)?.length || 0) +
+                (v.match(colorRegex)?.length || 0) >
                 0);
     }
     const NUMBER_TOKEN = "number";
@@ -2596,8 +2786,7 @@
                 const restore = transformsToRestore.get(element);
                 if (restore) {
                     restore.forEach(([key, value]) => {
-                        var _a;
-                        (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
+                        element.getValue(key)?.set(value);
                     });
                 }
             });
@@ -2684,7 +2873,7 @@
                      * If the first keyframe is null, we need to find its value by sampling the element
                      */
                     if (i === 0) {
-                        const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+                        const currentValue = motionValue?.get();
                         const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
                         if (currentValue !== undefined) {
                             unresolvedKeyframes[0] = currentValue;
@@ -2765,7 +2954,7 @@
         if (!match)
             return [,];
         const [, token1, token2, fallback] = match;
-        return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+        return [`--${token1 ?? token2}`, fallback];
     }
     const maxDepth = 4;
     function getVariableValue(current, element, depth = 1) {
@@ -2904,7 +3093,6 @@
             }
         }
         measureEndState() {
-            var _a;
             const { element, name, unresolvedKeyframes } = this;
             if (!element || !element.current)
                 return;
@@ -2917,7 +3105,7 @@
                 this.finalKeyframe = finalKeyframe;
             }
             // If we removed transform values, reapply them before the next render
-            if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+            if (this.removedTransforms?.length) {
                 this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
                     element
                         .getValue(unsetTransformName)
@@ -3273,13 +3461,12 @@
         };
     }
     function matchOrder(origin, target) {
-        var _a;
         const orderedOrigin = [];
         const pointers = { color: 0, var: 0, number: 0 };
         for (let i = 0; i < target.values.length; i++) {
             const type = target.types[i];
             const originIndex = origin.indexes[type][pointers[type]];
-            const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+            const originValue = origin.values[originIndex] ?? 0;
             orderedOrigin[i] = originValue;
             pointers[type]++;
         }
@@ -3434,7 +3621,7 @@
 
     function createMixers(output, ease, customMixer) {
         const mixers = [];
-        const mixerFactory = customMixer || mix;
+        const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
         const numMixers = output.length - 1;
         for (let i = 0; i < numMixers; i++) {
             let mixer = mixerFactory(output[i], output[i + 1]);
@@ -3506,7 +3693,7 @@
         return offset.map((o) => o * duration);
     }
 
-    function defaultEasing$1(values, easing) {
+    function defaultEasing(values, easing) {
         return values.map(() => easing || easeInOut).splice(0, values.length - 1);
     }
     function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
@@ -3537,7 +3724,7 @@
         const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
             ease: Array.isArray(easingFunctions)
                 ? easingFunctions
-                : defaultEasing$1(keyframeValues, easingFunctions),
+                : defaultEasing(keyframeValues, easingFunctions),
         });
         return {
             calculatedDuration: duration,
@@ -3619,7 +3806,7 @@
                 onStop && onStop();
             };
             const { name, motionValue, element, keyframes } = this.options;
-            const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
+            const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
             const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
             this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
             this.resolver.scheduleResolve();
@@ -3867,7 +4054,7 @@
                 this.startTime = now - this.holdTime;
             }
             else if (!this.startTime) {
-                this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+                this.startTime = startTime ?? this.calcStartTime();
             }
             else if (this.state === "finished") {
                 this.startTime = now;
@@ -3885,13 +4072,12 @@
             this.driver.start();
         }
         pause() {
-            var _a;
             if (!this._resolved) {
                 this.pendingPlayState = "paused";
                 return;
             }
             this.state = "paused";
-            this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+            this.holdTime = this.currentTime ?? 0;
         }
         complete() {
             if (this.state !== "running") {
@@ -3931,6 +4117,9 @@
             this.startTime = 0;
             return this.tick(time, true);
         }
+        get finished() {
+            return this.currentFinishedPromise;
+        }
     }
 
     /**
@@ -3946,27 +4135,6 @@
         // "background-color"
     ]);
 
-    function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
-        const keyframeOptions = { [valueName]: keyframes };
-        if (times)
-            keyframeOptions.offset = times;
-        const easing = mapEasingToNativeEasing(ease, duration);
-        /**
-         * If this is an easing array, apply to keyframes, not animation as a whole
-         */
-        if (Array.isArray(easing))
-            keyframeOptions.easing = easing;
-        const animation = element.animate(keyframeOptions, {
-            delay,
-            duration,
-            easing: !Array.isArray(easing) ? easing : "linear",
-            fill: "both",
-            iterations: repeat + 1,
-            direction: repeatType === "reverse" ? "alternate" : "normal",
-        });
-        return animation;
-    }
-
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 
     /**
@@ -4077,7 +4245,7 @@
             const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
             // Override the browser calculated startTime with one synchronised to other JS
             // and WAAPI animations starting this event loop.
-            animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            animation.startTime = startTime ?? this.calcStartTime();
             if (this.pendingTimeline) {
                 attachTimeline(animation, this.pendingTimeline);
                 this.pendingTimeline = undefined;
@@ -4136,6 +4304,9 @@
             const { animation } = resolved;
             return animation.playbackRate;
         }
+        get finished() {
+            return this.resolved.animation.finished;
+        }
         set speed(newSpeed) {
             const { resolved } = this;
             if (!resolved)
@@ -4382,6 +4553,11 @@
                 shouldSkip = true;
             }
         }
+        if (MotionGlobalConfig.skipAnimations) {
+            shouldSkip = true;
+            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.
@@ -4401,7 +4577,7 @@
                 });
                 // We still want to return some animation controls here rather
                 // than returning undefined
-                return new GroupPlaybackControls([]);
+                return new GroupAnimationWithThen([]);
             }
         }
         /**
@@ -4429,7 +4605,6 @@
         return shouldBlock;
     }
     function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-        var _a;
         let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
         if (transitionOverride)
             transition = transitionOverride;
@@ -4438,7 +4613,7 @@
             visualElement.animationState &&
             visualElement.animationState.getState()[type];
         for (const key in target) {
-            const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
+            const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
             const valueTarget = target[key];
             if (valueTarget === undefined ||
                 (animationTypeState &&
@@ -4597,7 +4772,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.6.3-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3-alpha.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.6.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.4-alpha.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5021,10 +5196,10 @@
          * directly from the instance (which might have performance implications).
          */
         readValue(key, target) {
-            var _a;
             let value = this.latestValues[key] !== undefined || !this.current
                 ? this.latestValues[key]
-                : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+                : this.getBaseTargetFromProps(this.props, key) ??
+                    this.readValueFromInstance(this.current, key, this.options);
             if (value !== undefined && value !== null) {
                 if (typeof value === "string" &&
                     (isNumericalString(value) || isZeroValueString(value))) {
@@ -5050,11 +5225,10 @@
          * props.
          */
         getBaseTarget(key) {
-            var _a;
             const { initial } = this.props;
             let valueFromInitial;
             if (typeof initial === "string" || typeof initial === "object") {
-                const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+                const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
                 if (variant) {
                     valueFromInitial = variant[key];
                 }
@@ -5421,7 +5595,6 @@
     }
 
     function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-        var _a;
         const { style } = props;
         const newValues = {};
         for (const key in style) {
@@ -5429,7 +5602,7 @@
                 (prevProps.style &&
                     isMotionValue(prevProps.style[key])) ||
                 isForcedMotionValue(key, props) ||
-                ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+                visualElement?.getValue(key)?.liveStyle !== undefined) {
                 newValues[key] = style[key];
             }
         }
@@ -5708,7 +5881,7 @@
             else {
                 animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
             }
-            const animation = new GroupPlaybackControls(animations);
+            const animation = new GroupAnimationWithThen(animations);
             if (scope) {
                 scope.animations.push(animation);
             }
@@ -5718,125 +5891,6 @@
     }
     const animate = createScopedAnimate();
 
-    function setCSSVar(element, name, value) {
-        element.style.setProperty(name, value);
-    }
-    function setStyle(element, name, value) {
-        element.style[name] = value;
-    }
-
-    const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
-        try {
-            document.createElement("div").animate({ opacity: [1] });
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    });
-
-    const state = new WeakMap();
-    function hydrateKeyframes(valueName, keyframes, read) {
-        for (let i = 0; i < keyframes.length; i++) {
-            if (keyframes[i] === null) {
-                keyframes[i] = i === 0 ? read() : keyframes[i - 1];
-            }
-            if (typeof keyframes[i] === "number" &&
-                browserNumberValueTypes[valueName]) {
-                keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
-            }
-        }
-        if (!supportsPartialKeyframes() && keyframes.length < 2) {
-            keyframes.unshift(read());
-        }
-    }
-    const defaultEasing = "easeOut";
-    function getElementAnimationState(element) {
-        const animationState = state.get(element) || new Map();
-        state.set(element, animationState);
-        return state.get(element);
-    }
-    class NativeAnimation extends NativeAnimationControls {
-        constructor(element, valueName, valueKeyframes, options) {
-            const isCSSVar = valueName.startsWith("--");
-            exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
-            const existingAnimation = getElementAnimationState(element).get(valueName);
-            existingAnimation && existingAnimation.stop();
-            const readInitialKeyframe = () => {
-                return valueName.startsWith("--")
-                    ? element.style.getPropertyValue(valueName)
-                    : window.getComputedStyle(element)[valueName];
-            };
-            if (!Array.isArray(valueKeyframes)) {
-                valueKeyframes = [valueKeyframes];
-            }
-            hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-            // TODO: Replace this with toString()?
-            if (isGenerator(options.type)) {
-                const generatorOptions = createGeneratorEasing(options, 100, options.type);
-                options.ease = supportsLinearEasing()
-                    ? generatorOptions.ease
-                    : defaultEasing;
-                options.duration = secondsToMilliseconds(generatorOptions.duration);
-                options.type = "keyframes";
-            }
-            else {
-                options.ease = options.ease || defaultEasing;
-            }
-            const onFinish = () => {
-                this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
-                this.cancel();
-                this.resolveFinishedPromise();
-            };
-            const init = () => {
-                this.setValue = isCSSVar ? setCSSVar : setStyle;
-                this.options = options;
-                this.updateFinishedPromise();
-                this.removeAnimation = () => {
-                    const elementState = state.get(element);
-                    elementState && elementState.delete(valueName);
-                };
-            };
-            if (!supportsWaapi()) {
-                super();
-                init();
-                onFinish();
-            }
-            else {
-                super(startWaapiAnimation(element, valueName, valueKeyframes, options));
-                init();
-                if (options.autoplay === false) {
-                    this.animation.pause();
-                }
-                this.animation.onfinish = onFinish;
-                getElementAnimationState(element).set(valueName, this);
-            }
-        }
-        /**
-         * Allows the returned animation to be awaited or promise-chained. Currently
-         * resolves when the animation finishes at all but in a future update could/should
-         * reject if its cancels.
-         */
-        then(resolve, reject) {
-            return this.currentFinishedPromise.then(resolve, reject);
-        }
-        updateFinishedPromise() {
-            this.currentFinishedPromise = new Promise((resolve) => {
-                this.resolveFinishedPromise = resolve;
-            });
-        }
-        play() {
-            if (this.state === "finished") {
-                this.updateFinishedPromise();
-            }
-            super.play();
-        }
-        cancel() {
-            this.removeAnimation();
-            super.cancel();
-        }
-    }
-
     function animateElements(elementOrSelector, keyframes, options, scope) {
         const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
@@ -5856,13 +5910,15 @@
                 const valueOptions = {
                     ...getValueTransition$1(elementTransition, valueName),
                 };
-                valueOptions.duration = valueOptions.duration
-                    ? secondsToMilliseconds(valueOptions.duration)
-                    : valueOptions.duration;
-                valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
-                valueOptions.allowFlatten =
-                    !elementTransition.type && !elementTransition.ease;
-                animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+                valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+                valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+                animations.push(new NativeAnimation({
+                    element,
+                    name: valueName,
+                    keyframes: valueKeyframes,
+                    transition: valueOptions,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                }));
             }
         }
         return animations;
@@ -5870,7 +5926,7 @@
 
     const createScopedWaapiAnimate = (scope) => {
         function scopedAnimate(elementOrSelector, keyframes, options) {
-            return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+            return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
         }
         return scopedAnimate;
     };
@@ -5909,8 +5965,7 @@
         }
     }
     function notifyTarget({ target, contentRect, borderBoxSize, }) {
-        var _a;
-        (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+        resizeHandlers.get(target)?.forEach((handler) => {
             handler({
                 target,
                 contentSize: contentRect,
@@ -5939,14 +5994,14 @@
                 resizeHandlers.set(element, elementHandlers);
             }
             elementHandlers.add(handler);
-            observer === null || observer === void 0 ? void 0 : observer.observe(element);
+            observer?.observe(element);
         });
         return () => {
             elements.forEach((element) => {
                 const elementHandlers = resizeHandlers.get(element);
-                elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-                if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                    observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+                elementHandlers?.delete(handler);
+                if (!elementHandlers?.size) {
+                    observer?.unobserve(element);
                 }
             });
         };
@@ -6325,7 +6380,6 @@
         const listener = scrollListeners.get(container);
         frame.read(listener, false, true);
         return () => {
-            var _a;
             cancelFrame(listener);
             /**
              * Check if we even have any handlers for this container.
@@ -6343,7 +6397,7 @@
             scrollListeners.delete(container);
             if (scrollListener) {
                 getEventTarget(container).removeEventListener("scroll", scrollListener);
-                (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+                resizeListeners.get(container)?.();
                 window.removeEventListener("resize", scrollListener);
             }
         };
@@ -6573,6 +6627,7 @@
     exports.frame = frame;
     exports.frameData = frameData;
     exports.hover = hover;
+    exports.hslaToRgba = hslaToRgba;
     exports.inView = inView;
     exports.inertia = inertia;
     exports.interpolate = interpolate;