framer-motion 7.7.0 → 7.7.2

package/dist/framer-motion.dev.js

@@ -558,207 +558,52 @@
             : value;
     };
 
-    const clamp$2 = (min, max) => (v) => Math.max(Math.min(v, max), min);
-    const sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
-    const floatRegex = /(-)?([\d]*\.?[\d])+/g;
-    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
-    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
-    function isString$1(v) {
-        return typeof v === 'string';
-    }
+    const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const number = {
-        test: (v) => typeof v === 'number',
+        test: (v) => typeof v === "number",
         parse: parseFloat,
         transform: (v) => v,
     };
-    const alpha = Object.assign(Object.assign({}, number), { transform: clamp$2(0, 1) });
-    const scale = Object.assign(Object.assign({}, number), { default: 1 });
-
-    const createUnitType = (unit) => ({
-        test: (v) => isString$1(v) && v.endsWith(unit) && v.split(' ').length === 1,
-        parse: parseFloat,
-        transform: (v) => `${v}${unit}`,
-    });
-    const degrees = createUnitType('deg');
-    const percent = createUnitType('%');
-    const px = createUnitType('px');
-    const vh = createUnitType('vh');
-    const vw = createUnitType('vw');
-    const progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
-
-    const isColorString = (type, testProp) => (v) => {
-        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
-            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
-    };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString$1(v))
-            return v;
-        const [a, b, c, alpha] = v.match(floatRegex);
-        return {
-            [aName]: parseFloat(a),
-            [bName]: parseFloat(b),
-            [cName]: parseFloat(c),
-            alpha: alpha !== undefined ? parseFloat(alpha) : 1,
-        };
-    };
-
-    const hsla = {
-        test: isColorString('hsl', 'hue'),
-        parse: splitColor('hue', 'saturation', 'lightness'),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-            return ('hsla(' +
-                Math.round(hue) +
-                ', ' +
-                percent.transform(sanitize(saturation)) +
-                ', ' +
-                percent.transform(sanitize(lightness)) +
-                ', ' +
-                sanitize(alpha.transform(alpha$1)) +
-                ')');
-        },
+    const alpha = {
+        ...number,
+        transform: (v) => clamp$1(0, 1, v),
     };
-
-    const clampRgbUnit = clamp$2(0, 255);
-    const rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });
-    const rgba = {
-        test: isColorString('rgb', 'red'),
-        parse: splitColor('red', 'green', 'blue'),
-        transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => 'rgba(' +
-            rgbUnit.transform(red) +
-            ', ' +
-            rgbUnit.transform(green) +
-            ', ' +
-            rgbUnit.transform(blue) +
-            ', ' +
-            sanitize(alpha.transform(alpha$1)) +
-            ')',
+    const scale = {
+        ...number,
+        default: 1,
     };
 
-    function parseHex(v) {
-        let r = '';
-        let g = '';
-        let b = '';
-        let a = '';
-        if (v.length > 5) {
-            r = v.substr(1, 2);
-            g = v.substr(3, 2);
-            b = v.substr(5, 2);
-            a = v.substr(7, 2);
-        }
-        else {
-            r = v.substr(1, 1);
-            g = v.substr(2, 1);
-            b = v.substr(3, 1);
-            a = v.substr(4, 1);
-            r += r;
-            g += g;
-            b += b;
-            a += a;
-        }
-        return {
-            red: parseInt(r, 16),
-            green: parseInt(g, 16),
-            blue: parseInt(b, 16),
-            alpha: a ? parseInt(a, 16) / 255 : 1,
-        };
+    /**
+     * TODO: When we move from string as a source of truth to data models
+     * everything in this folder should probably be referred to as models vs types
+     */
+    // If this number is a decimal, make it just five decimal places
+    // to avoid exponents
+    const sanitize = (v) => Math.round(v * 100000) / 100000;
+    const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+    const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
+    function isString$1(v) {
+        return typeof v === "string";
     }
-    const hex = {
-        test: isColorString('#'),
-        parse: parseHex,
-        transform: rgba.transform,
-    };
 
-    const color = {
-        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-        parse: (v) => {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
-            }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
-            }
-            else {
-                return hex.parse(v);
-            }
-        },
-        transform: (v) => {
-            return isString$1(v)
-                ? v
-                : v.hasOwnProperty('red')
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
-        },
+    const createUnitType = (unit) => ({
+        test: (v) => isString$1(v) && v.endsWith(unit) && v.split(" ").length === 1,
+        parse: parseFloat,
+        transform: (v) => `${v}${unit}`,
+    });
+    const degrees = createUnitType("deg");
+    const percent = createUnitType("%");
+    const px = createUnitType("px");
+    const vh = createUnitType("vh");
+    const vw = createUnitType("vw");
+    const progressPercentage = {
+        ...percent,
+        parse: (v) => percent.parse(v) / 100,
+        transform: (v) => percent.transform(v * 100),
     };
 
-    const colorToken = '${c}';
-    const numberToken = '${n}';
-    function test(v) {
-        var _a, _b, _c, _d;
-        return (isNaN(v) &&
-            isString$1(v) &&
-            ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
-    }
-    function analyse$1(v) {
-        if (typeof v === 'number')
-            v = `${v}`;
-        const values = [];
-        let numColors = 0;
-        const colors = v.match(colorRegex);
-        if (colors) {
-            numColors = colors.length;
-            v = v.replace(colorRegex, colorToken);
-            values.push(...colors.map(color.parse));
-        }
-        const numbers = v.match(floatRegex);
-        if (numbers) {
-            v = v.replace(floatRegex, numberToken);
-            values.push(...numbers.map(number.parse));
-        }
-        return { values, numColors, tokenised: v };
-    }
-    function parse(v) {
-        return analyse$1(v).values;
-    }
-    function createTransformer(v) {
-        const { values, numColors, tokenised } = analyse$1(v);
-        const numValues = values.length;
-        return (v) => {
-            let output = tokenised;
-            for (let i = 0; i < numValues; i++) {
-                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
-            }
-            return output;
-        };
-    }
-    const convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v;
-    function getAnimatableNone$1(v) {
-        const parsed = parse(v);
-        const transformer = createTransformer(v);
-        return transformer(parsed.map(convertNumbersToZero));
-    }
-    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
-
-    const maxDefaults = new Set(['brightness', 'contrast', 'saturate', 'opacity']);
-    function applyDefaultFilter(v) {
-        let [name, value] = v.slice(0, -1).split('(');
-        if (name === 'drop-shadow')
-            return v;
-        const [number] = value.match(floatRegex) || [];
-        if (!number)
-            return v;
-        const unit = value.replace(number, '');
-        let defaultValue = maxDefaults.has(name) ? 1 : 0;
-        if (number !== value)
-            defaultValue *= 100;
-        return name + '(' + defaultValue + unit + ')';
-    }
-    const functionRegex = /([a-z-]*)\(.*?\)/g;
-    const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => {
-            const functions = v.match(functionRegex);
-            return functions ? functions.map(applyDefaultFilter).join(' ') : v;
-        } });
-
     const int = {
         ...number,
         transform: Math.round,
@@ -2154,6 +1999,175 @@
         return Array.isArray(ease) && typeof ease[0] !== "number";
     };
 
+    /**
+     * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+     * but false if a number or multiple colors
+     */
+    const isColorString = (type, testProp) => (v) => {
+        return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+    };
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (!isString$1(v))
+            return v;
+        const [a, b, c, alpha] = v.match(floatRegex);
+        return {
+            [aName]: parseFloat(a),
+            [bName]: parseFloat(b),
+            [cName]: parseFloat(c),
+            alpha: alpha !== undefined ? parseFloat(alpha) : 1,
+        };
+    };
+
+    const clampRgbUnit = (v) => clamp$1(0, 255, v);
+    const rgbUnit = {
+        ...number,
+        transform: (v) => Math.round(clampRgbUnit(v)),
+    };
+    const rgba = {
+        test: isColorString("rgb", "red"),
+        parse: splitColor("red", "green", "blue"),
+        transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
+            rgbUnit.transform(red) +
+            ", " +
+            rgbUnit.transform(green) +
+            ", " +
+            rgbUnit.transform(blue) +
+            ", " +
+            sanitize(alpha.transform(alpha$1)) +
+            ")",
+    };
+
+    function parseHex(v) {
+        let r = "";
+        let g = "";
+        let b = "";
+        let a = "";
+        // If we have 6 characters, ie #FF0000
+        if (v.length > 5) {
+            r = v.substring(1, 3);
+            g = v.substring(3, 5);
+            b = v.substring(5, 7);
+            a = v.substring(7, 9);
+            // Or we have 3 characters, ie #F00
+        }
+        else {
+            r = v.substring(1, 2);
+            g = v.substring(2, 3);
+            b = v.substring(3, 4);
+            a = v.substring(4, 5);
+            r += r;
+            g += g;
+            b += b;
+            a += a;
+        }
+        return {
+            red: parseInt(r, 16),
+            green: parseInt(g, 16),
+            blue: parseInt(b, 16),
+            alpha: a ? parseInt(a, 16) / 255 : 1,
+        };
+    }
+    const hex = {
+        test: isColorString("#"),
+        parse: parseHex,
+        transform: rgba.transform,
+    };
+
+    const hsla = {
+        test: isColorString("hsl", "hue"),
+        parse: splitColor("hue", "saturation", "lightness"),
+        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+            return ("hsla(" +
+                Math.round(hue) +
+                ", " +
+                percent.transform(sanitize(saturation)) +
+                ", " +
+                percent.transform(sanitize(lightness)) +
+                ", " +
+                sanitize(alpha.transform(alpha$1)) +
+                ")");
+        },
+    };
+
+    const color = {
+        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+        parse: (v) => {
+            if (rgba.test(v)) {
+                return rgba.parse(v);
+            }
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
+            }
+            else {
+                return hex.parse(v);
+            }
+        },
+        transform: (v) => {
+            return isString$1(v)
+                ? v
+                : v.hasOwnProperty("red")
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
+    };
+
+    const colorToken = "${c}";
+    const numberToken = "${n}";
+    function test(v) {
+        var _a, _b;
+        return (isNaN(v) &&
+            isString$1(v) &&
+            (((_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) >
+                0);
+    }
+    function analyseComplexValue(v) {
+        if (typeof v === "number")
+            v = `${v}`;
+        const values = [];
+        let numColors = 0;
+        let numNumbers = 0;
+        const colors = v.match(colorRegex);
+        if (colors) {
+            numColors = colors.length;
+            // Strip colors from input so they're not picked up by number regex.
+            // There's a better way to combine these regex searches, but its beyond my regex skills
+            v = v.replace(colorRegex, colorToken);
+            values.push(...colors.map(color.parse));
+        }
+        const numbers = v.match(floatRegex);
+        if (numbers) {
+            numNumbers = numbers.length;
+            v = v.replace(floatRegex, numberToken);
+            values.push(...numbers.map(number.parse));
+        }
+        return { values, numColors, numNumbers, tokenised: v };
+    }
+    function parse(v) {
+        return analyseComplexValue(v).values;
+    }
+    function createTransformer(source) {
+        const { values, numColors, tokenised } = analyseComplexValue(source);
+        const numValues = values.length;
+        return (v) => {
+            let output = tokenised;
+            for (let i = 0; i < numValues; i++) {
+                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
+                    ? color.transform(v[i])
+                    : sanitize(v[i]));
+            }
+            return output;
+        };
+    }
+    const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+    function getAnimatableNone$1(v) {
+        const parsed = parse(v);
+        const transformer = createTransformer(v);
+        return transformer(parsed.map(convertNumbersToZero));
+    }
+    const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+
     /**
      * Check if a value is animatable. Examples:
      *
@@ -2231,6 +2245,32 @@
         return { to, ...transitionFactory(to) };
     };
 
+    /**
+     * Properties that should default to 1 or 100%
+     */
+    const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+    function applyDefaultFilter(v) {
+        const [name, value] = v.slice(0, -1).split("(");
+        if (name === "drop-shadow")
+            return v;
+        const [number] = value.match(floatRegex) || [];
+        if (!number)
+            return v;
+        const unit = value.replace(number, "");
+        let defaultValue = maxDefaults.has(name) ? 1 : 0;
+        if (number !== value)
+            defaultValue *= 100;
+        return name + "(" + defaultValue + unit + ")";
+    }
+    const functionRegex = /([a-z-]*)\(.*?\)/g;
+    const filter = {
+        ...complex,
+        getAnimatableNone: (v) => {
+            const functions = v.match(functionRegex);
+            return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+        },
+    };
+
     /**
      * A map of default value types for common values
      */
@@ -2269,6 +2309,9 @@
         current: false,
     };
 
+    /*
+      Detect and load appropriate clock setting for the execution environment
+     */
     const defaultTimestep = (1 / 60) * 1000;
     const getCurrentTime = typeof performance !== "undefined"
         ? () => performance.now()
@@ -2278,39 +2321,71 @@
         : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
 
     function createRenderStep(runNextFrame) {
+        /**
+         * We create and reuse two arrays, one to queue jobs for the current frame
+         * and one for the next. We reuse to avoid triggering GC after x frames.
+         */
         let toRun = [];
         let toRunNextFrame = [];
+        /**
+         *
+         */
         let numToRun = 0;
+        /**
+         * 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();
         const step = {
+            /**
+             * Schedule a process to run on the next frame.
+             */
             schedule: (callback, keepAlive = false, immediate = false) => {
                 const addToCurrentFrame = immediate && isProcessing;
                 const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
+                // If the buffer doesn't already contain this callback, add it
                 if (buffer.indexOf(callback) === -1) {
                     buffer.push(callback);
+                    // If we're adding it to the currently running buffer, update its measured size
                     if (addToCurrentFrame && isProcessing)
                         numToRun = toRun.length;
                 }
                 return callback;
             },
+            /**
+             * Cancel the provided callback from running on the next frame.
+             */
             cancel: (callback) => {
                 const index = toRunNextFrame.indexOf(callback);
                 if (index !== -1)
                     toRunNextFrame.splice(index, 1);
                 toKeepAlive.delete(callback);
             },
+            /**
+             * Execute all schedule callbacks.
+             */
             process: (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;
                 [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+                // Clear the next frame list
                 toRunNextFrame.length = 0;
+                // Execute this frame
                 numToRun = toRun.length;
                 if (numToRun) {
                     for (let i = 0; i < numToRun; i++) {
@@ -2332,14 +2407,15 @@
         return step;
     }
 
+    const frameData = {
+        delta: 0,
+        timestamp: 0,
+    };
+
     const maxElapsed$1 = 40;
     let useDefaultElapsed = true;
     let runNextFrame = false;
     let isProcessing = false;
-    const frame = {
-        delta: 0,
-        timestamp: 0,
-    };
     const stepsOrder = [
         "read",
         "update",
@@ -2365,16 +2441,16 @@
         return acc;
     }, {});
     const flushSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = () => steps[key].process(frame);
+        acc[key] = () => steps[key].process(frameData);
         return acc;
     }, {});
-    const processStep = (stepId) => steps[stepId].process(frame);
+    const processStep = (stepId) => steps[stepId].process(frameData);
     const processFrame = (timestamp) => {
         runNextFrame = false;
-        frame.delta = useDefaultElapsed
+        frameData.delta = useDefaultElapsed
             ? defaultTimestep
-            : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed$1), 1);
-        frame.timestamp = timestamp;
+            : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
+        frameData.timestamp = timestamp;
         isProcessing = true;
         stepsOrder.forEach(processStep);
         isProcessing = false;
@@ -2389,7 +2465,6 @@
         if (!isProcessing)
             onNextFrame(processFrame);
     };
-    const getFrameData = () => frame;
 
     function delay(callback, timeout) {
         const start = performance.now();
@@ -2404,8 +2479,6 @@
         return () => cancelSync.read(checkElapsed);
     }
 
-    const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
-
     /*
       Value in range from progress
 
@@ -2484,6 +2557,7 @@
         invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
         let model = type.parse(color);
         if (type === hsla) {
+            // TODO Remove this cast - needed since Framer Motion's stricter typing
             model = hslaToRgba(model);
         }
         return model;
@@ -2538,34 +2612,14 @@
             return output;
         };
     };
-    /**
-     * TODO: Combine with function within complex when style-value-types moved inside Framer Motion
-     */
-    function analyse(value) {
-        const parsed = complex.parse(value);
-        const numValues = parsed.length;
-        let numNumbers = 0;
-        let numColors = 0;
-        for (let i = 0; i < numValues; i++) {
-            // Parsed complex values return with colors first, so if we've seen any number
-            // we're already past that part of the array and don't need to continue running typeof
-            if (numNumbers || typeof parsed[i] === "number") {
-                numNumbers++;
-            }
-            else {
-                numColors++;
-            }
-        }
-        return { parsed, numNumbers, numColors };
-    }
     const mixComplex = (origin, target) => {
         const template = complex.createTransformer(target);
-        const originStats = analyse(origin);
-        const targetStats = analyse(target);
+        const originStats = analyseComplexValue(origin);
+        const targetStats = analyseComplexValue(target);
         const canInterpolate = originStats.numColors === targetStats.numColors &&
             originStats.numNumbers >= targetStats.numNumbers;
         if (canInterpolate) {
-            return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+            return pipe(mixArray(originStats.values, targetStats.values), template);
         }
         else {
             warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
@@ -3042,8 +3096,10 @@
             }
             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
             if (isComplete) {
-                if (repeatCount === 0)
-                    computedDuration !== null && computedDuration !== void 0 ? computedDuration : (computedDuration = elapsed);
+                if (repeatCount === 0) {
+                    computedDuration =
+                        computedDuration !== undefined ? computedDuration : elapsed;
+                }
                 if (repeatCount < repeatMax) {
                     hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
                 }
@@ -3134,7 +3190,7 @@
             const checkBoundary = (v) => {
                 prev = current;
                 current = v;
-                velocity = velocityPerSecond$1(v - prev, getFrameData().delta);
+                velocity = velocityPerSecond$1(v - prev, frameData.delta);
                 if ((heading === 1 && v > boundary) ||
                     (heading === -1 && v < boundary)) {
                     startSpring({ from: v, to: boundary, velocity });
@@ -3204,9 +3260,12 @@
      * Get the delay for a value by checking Transition with decreasing specificity.
      */
     function getDelayFromTransition(transition, key) {
-        var _a, _b;
         const valueTransition = getValueTransition(transition, key) || {};
-        return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
+        return valueTransition.delay !== undefined
+            ? valueTransition.delay
+            : transition.delay !== undefined
+                ? transition.delay
+                : 0;
     }
     function hydrateKeyframes(options) {
         if (Array.isArray(options.to) && options.to[0] === null) {
@@ -3425,7 +3484,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 = "7.7.0";
+            this.version = "7.7.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -3468,7 +3527,7 @@
                 this.prev = this.current;
                 this.current = v;
                 // Update timestamp
-                const { delta, timestamp } = getFrameData();
+                const { delta, timestamp } = frameData;
                 if (this.lastUpdated !== timestamp) {
                     this.timeDelta = delta;
                     this.lastUpdated = timestamp;
@@ -4049,7 +4108,6 @@
          *    what to animate those to.
          */
         function animateChanges(options, changedActiveType) {
-            var _a;
             const props = visualElement.getProps();
             const context = visualElement.getVariantContext(true) || {};
             /**
@@ -4082,7 +4140,7 @@
             for (let i = 0; i < numAnimationTypes; i++) {
                 const type = reversePriorityOrder[i];
                 const typeState = state[type];
-                const prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
+                const prop = props[type] !== undefined ? props[type] : context[type];
                 const propIsVariant = isVariantLabel(prop);
                 /**
                  * If this type has *just* changed isActive status, set activeDelta
@@ -4395,7 +4453,7 @@
                 if (!isPanStarted && !isDistancePastThreshold)
                     return;
                 const { point } = info;
-                const { timestamp } = getFrameData();
+                const { timestamp } = frameData;
                 this.history.push({ ...point, timestamp });
                 const { onStart, onMove } = this.handlers;
                 if (!isPanStarted) {
@@ -4432,7 +4490,7 @@
             const info = extractEventInfo(event);
             const initialInfo = transformPoint(info, this.transformPagePoint);
             const { point } = initialInfo;
-            const { timestamp } = getFrameData();
+            const { timestamp } = frameData;
             this.history = [{ ...point, timestamp }];
             const { onSessionStart } = handlers;
             onSessionStart &&
@@ -4654,10 +4712,9 @@
         };
     }
     function resolvePointElastic(dragElastic, label) {
-        var _a;
         return typeof dragElastic === "number"
             ? dragElastic
-            : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0;
+            : dragElastic[label] || 0;
     }
 
     const createAxisDelta = () => ({
@@ -5079,11 +5136,10 @@
             const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
             const constraints = this.constraints || {};
             const momentumAnimations = eachAxis((axis) => {
-                var _a;
                 if (!shouldDrag(axis, drag, this.currentDirection)) {
                     return;
                 }
-                let transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
+                let transition = (constraints === null || constraints === void 0 ? void 0 : constraints[axis]) || {};
                 if (dragSnapToOrigin)
                     transition = { min: 0, max: 0 };
                 /**
@@ -5127,12 +5183,12 @@
          * - Otherwise, we apply the delta to the x/y motion values.
          */
         getAxisMotionValue(axis) {
-            var _a, _b;
+            var _a;
             const dragKey = "_drag" + axis.toUpperCase();
             const externalMotionValue = this.visualElement.getProps()[dragKey];
             return externalMotionValue
                 ? externalMotionValue
-                : this.visualElement.getValue(axis, (_b = (_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) !== null && _b !== void 0 ? _b : 0);
+                : this.visualElement.getValue(axis, ((_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) || 0);
         }
         snapToCursor(point) {
             eachAxis((axis) => {
@@ -5710,7 +5766,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.7.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6569,16 +6625,14 @@
     const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
-        var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
             target.opacity = mix$1(0, 
-            // (follow?.opacity as number) ?? 0,
             // TODO Reinstate this if only child
-            (_a = lead.opacity) !== null && _a !== void 0 ? _a : 1, easeCrossfadeIn(progress));
-            target.opacityExit = mix$1((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
+            lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
+            target.opacityExit = mix$1(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
         }
         else if (isOnlyMember) {
-            target.opacity = mix$1((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
+            target.opacity = mix$1(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
         }
         /**
          * Mix border radius
@@ -6612,8 +6666,9 @@
         }
     }
     function getRadius(values, radiusName) {
-        var _a;
-        return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius;
+        return values[radiusName] !== undefined
+            ? values[radiusName]
+            : values.borderRadius;
     }
     // /**
     //  * We only want to mix the background color if there's a follow element