framer-motion 6.5.0 → 7.0.1

package/dist/projection.dev.js

@@ -4,7 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}));
 })(this, (function (exports) { 'use strict';
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -206,7 +206,7 @@
         };
     }
 
-    const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
+    const clamp$2 = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const safeMin = 0.001;
     const minDuration = 0.01;
@@ -218,8 +218,8 @@
         let derivative;
         warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
         let dampingRatio = 1 - bounce;
-        dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
-        duration = clamp$1(minDuration, maxDuration, duration / 1000);
+        dampingRatio = clamp$2(minDamping, maxDamping, dampingRatio);
+        duration = clamp$2(minDuration, maxDuration, duration / 1000);
         if (dampingRatio < 1) {
             envelope = (undampedFreq) => {
                 const exponentialDecay = undampedFreq * dampingRatio;
@@ -405,43 +405,39 @@
 
     const mix = (from, to, progress) => -progress * from + progress * to + from;
 
-    const clamp = (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,3}\s*\/*\s*[\d\.]+%?\))/gi;
-    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
-    function isString(v) {
+    const clamp$1 = (min, max) => (v) => Math.max(Math.min(v, max), min);
+    const sanitize$1 = (v) => (v % 1 ? Number(v.toFixed(5)) : v);
+    const floatRegex$1 = /(-)?([\d]*\.?[\d])+/g;
+    const colorRegex$1 = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+    const singleColorRegex$1 = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    function isString$1(v) {
         return typeof v === 'string';
     }
 
-    const number = {
+    const number$1 = {
         test: (v) => typeof v === 'number',
         parse: parseFloat,
         transform: (v) => v,
     };
-    const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
-    const scale = Object.assign(Object.assign({}, number), { default: 1 });
+    const alpha$1 = Object.assign(Object.assign({}, number$1), { transform: clamp$1(0, 1) });
+    Object.assign(Object.assign({}, number$1), { default: 1 });
 
-    const createUnitType = (unit) => ({
-        test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,
+    const createUnitType$1 = (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 percent$1 = createUnitType$1('%');
+    Object.assign(Object.assign({}, percent$1), { parse: (v) => percent$1.parse(v) / 100, transform: (v) => percent$1.transform(v * 100) });
 
-    const isColorString = (type, testProp) => (v) => {
-        return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+    const isColorString$1 = (type, testProp) => (v) => {
+        return Boolean((isString$1(v) && singleColorRegex$1.test(v) && v.startsWith(type)) ||
             (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
     };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString(v))
+    const splitColor$1 = (aName, bName, cName) => (v) => {
+        if (!isString$1(v))
             return v;
-        const [a, b, c, alpha] = v.match(floatRegex);
+        const [a, b, c, alpha] = v.match(floatRegex$1);
         return {
             [aName]: parseFloat(a),
             [bName]: parseFloat(b),
@@ -450,39 +446,39 @@
         };
     };
 
-    const hsla = {
-        test: isColorString('hsl', 'hue'),
-        parse: splitColor('hue', 'saturation', 'lightness'),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+    const hsla$1 = {
+        test: isColorString$1('hsl', 'hue'),
+        parse: splitColor$1('hue', 'saturation', 'lightness'),
+        transform: ({ hue, saturation, lightness, alpha: alpha$1$1 = 1 }) => {
             return ('hsla(' +
                 Math.round(hue) +
                 ', ' +
-                percent.transform(sanitize(saturation)) +
+                percent$1.transform(sanitize$1(saturation)) +
                 ', ' +
-                percent.transform(sanitize(lightness)) +
+                percent$1.transform(sanitize$1(lightness)) +
                 ', ' +
-                sanitize(alpha.transform(alpha$1)) +
+                sanitize$1(alpha$1.transform(alpha$1$1)) +
                 ')');
         },
     };
 
-    const clampRgbUnit = clamp(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) +
+    const clampRgbUnit$1 = clamp$1(0, 255);
+    const rgbUnit$1 = Object.assign(Object.assign({}, number$1), { transform: (v) => Math.round(clampRgbUnit$1(v)) });
+    const rgba$1 = {
+        test: isColorString$1('rgb', 'red'),
+        parse: splitColor$1('red', 'green', 'blue'),
+        transform: ({ red, green, blue, alpha: alpha$1$1 = 1 }) => 'rgba(' +
+            rgbUnit$1.transform(red) +
             ', ' +
-            rgbUnit.transform(green) +
+            rgbUnit$1.transform(green) +
             ', ' +
-            rgbUnit.transform(blue) +
+            rgbUnit$1.transform(blue) +
             ', ' +
-            sanitize(alpha.transform(alpha$1)) +
+            sanitize$1(alpha$1.transform(alpha$1$1)) +
             ')',
     };
 
-    function parseHex(v) {
+    function parseHex$1(v) {
         let r = '';
         let g = '';
         let b = '';
@@ -510,101 +506,81 @@
             alpha: a ? parseInt(a, 16) / 255 : 1,
         };
     }
-    const hex = {
-        test: isColorString('#'),
-        parse: parseHex,
-        transform: rgba.transform,
+    const hex$1 = {
+        test: isColorString$1('#'),
+        parse: parseHex$1,
+        transform: rgba$1.transform,
     };
 
-    const color = {
-        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    const color$1 = {
+        test: (v) => rgba$1.test(v) || hex$1.test(v) || hsla$1.test(v),
         parse: (v) => {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
+            if (rgba$1.test(v)) {
+                return rgba$1.parse(v);
             }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
+            else if (hsla$1.test(v)) {
+                return hsla$1.parse(v);
             }
             else {
-                return hex.parse(v);
+                return hex$1.parse(v);
             }
         },
         transform: (v) => {
-            return isString(v)
+            return isString$1(v)
                 ? v
                 : v.hasOwnProperty('red')
-                    ? rgba.transform(v)
-                    : hsla.transform(v);
+                    ? rgba$1.transform(v)
+                    : hsla$1.transform(v);
         },
     };
 
-    const colorToken = '${c}';
-    const numberToken = '${n}';
-    function test(v) {
+    const colorToken$1 = '${c}';
+    const numberToken$1 = '${n}';
+    function test$1(v) {
         var _a, _b, _c, _d;
         return (isNaN(v) &&
-            isString(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);
+            isString$1(v) &&
+            ((_b = (_a = v.match(floatRegex$1)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex$1)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
     }
-    function analyse$1(v) {
+    function analyse$2(v) {
         if (typeof v === 'number')
             v = `${v}`;
         const values = [];
         let numColors = 0;
-        const colors = v.match(colorRegex);
+        const colors = v.match(colorRegex$1);
         if (colors) {
             numColors = colors.length;
-            v = v.replace(colorRegex, colorToken);
-            values.push(...colors.map(color.parse));
+            v = v.replace(colorRegex$1, colorToken$1);
+            values.push(...colors.map(color$1.parse));
         }
-        const numbers = v.match(floatRegex);
+        const numbers = v.match(floatRegex$1);
         if (numbers) {
-            v = v.replace(floatRegex, numberToken);
-            values.push(...numbers.map(number.parse));
+            v = v.replace(floatRegex$1, numberToken$1);
+            values.push(...numbers.map(number$1.parse));
         }
         return { values, numColors, tokenised: v };
     }
-    function parse(v) {
-        return analyse$1(v).values;
+    function parse$1(v) {
+        return analyse$2(v).values;
     }
-    function createTransformer(v) {
-        const { values, numColors, tokenised } = analyse$1(v);
+    function createTransformer$1(v) {
+        const { values, numColors, tokenised } = analyse$2(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]));
+                output = output.replace(i < numColors ? colorToken$1 : numberToken$1, i < numColors ? color$1.transform(v[i]) : sanitize$1(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 convertNumbersToZero$1 = (v) => typeof v === 'number' ? 0 : v;
+    function getAnimatableNone$2(v) {
+        const parsed = parse$1(v);
+        const transformer = createTransformer$1(v);
+        return transformer(parsed.map(convertNumbersToZero$1));
     }
-    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 complex$1 = { test: test$1, parse: parse$1, createTransformer: createTransformer$1, getAnimatableNone: getAnimatableNone$2 };
 
     function hueToRgb(p, q, t) {
         if (t < 0)
@@ -651,7 +627,7 @@
         const toExpo = to * to;
         return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
     };
-    const colorTypes = [hex, rgba, hsla];
+    const colorTypes = [hex$1, rgba$1, hsla$1];
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     const notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`;
     const mixColor = (from, to) => {
@@ -661,13 +637,13 @@
         invariant(!!toColorType, notAnimatable(to));
         let fromColor = fromColorType.parse(from);
         let toColor = toColorType.parse(to);
-        if (fromColorType === hsla) {
+        if (fromColorType === hsla$1) {
             fromColor = hslaToRgba(fromColor);
-            fromColorType = rgba;
+            fromColorType = rgba$1;
         }
-        if (toColorType === hsla) {
+        if (toColorType === hsla$1) {
             toColor = hslaToRgba(toColor);
-            toColorType = rgba;
+            toColorType = rgba$1;
         }
         const blended = Object.assign({}, fromColor);
         return (v) => {
@@ -690,7 +666,7 @@
         if (isNum(origin)) {
             return (v) => mix(origin, target, v);
         }
-        else if (color.test(origin)) {
+        else if (color$1.test(origin)) {
             return mixColor(origin, target);
         }
         else {
@@ -723,8 +699,8 @@
             return output;
         };
     };
-    function analyse(value) {
-        const parsed = complex.parse(value);
+    function analyse$1(value) {
+        const parsed = complex$1.parse(value);
         const numValues = parsed.length;
         let numNumbers = 0;
         let numRGB = 0;
@@ -745,9 +721,9 @@
         return { parsed, numNumbers, numRGB, numHSL };
     }
     const mixComplex = (origin, target) => {
-        const template = complex.createTransformer(target);
-        const originStats = analyse(origin);
-        const targetStats = analyse(target);
+        const template = complex$1.createTransformer(target);
+        const originStats = analyse$1(origin);
+        const targetStats = analyse$1(target);
         const canInterpolate = originStats.numHSL === targetStats.numHSL &&
             originStats.numRGB === targetStats.numRGB &&
             originStats.numNumbers >= targetStats.numNumbers;
@@ -766,7 +742,7 @@
             return mixNumber;
         }
         else if (typeof v === 'string') {
-            if (color.test(v)) {
+            if (color$1.test(v)) {
                 return mixColor;
             }
             else {
@@ -838,7 +814,7 @@
             ? fastInterpolate(input, mixers)
             : slowInterpolate(input, mixers);
         return isClamp
-            ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
+            ? (v) => interpolator(clamp$2(input[0], input[inputLength - 1], v))
             : interpolator;
     }
 
@@ -1281,7 +1257,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 = "6.5.0";
+            this.version = "7.0.1";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -1610,6 +1586,207 @@
         return Array.isArray(ease) && typeof ease[0] !== "number";
     };
 
+    const clamp = (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,3}\s*\/*\s*[\d\.]+%?\))/gi;
+    const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+    function isString(v) {
+        return typeof v === 'string';
+    }
+
+    const number = {
+        test: (v) => typeof v === 'number',
+        parse: parseFloat,
+        transform: (v) => v,
+    };
+    const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
+    const scale = Object.assign(Object.assign({}, number), { default: 1 });
+
+    const createUnitType = (unit) => ({
+        test: (v) => isString(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(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+            (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+    };
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (!isString(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 clampRgbUnit = clamp(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)) +
+            ')',
+    };
+
+    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,
+        };
+    }
+    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(v)
+                ? v
+                : v.hasOwnProperty('red')
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
+        },
+    };
+
+    const colorToken = '${c}';
+    const numberToken = '${n}';
+    function test(v) {
+        var _a, _b, _c, _d;
+        return (isNaN(v) &&
+            isString(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(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(v).values;
+    }
+    function createTransformer(v) {
+        const { values, numColors, tokenised } = analyse(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;
+        } });
+
     /**
      * Check if a value is animatable. Examples:
      *
@@ -2643,9 +2820,9 @@
         var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
         return /** @class */ (function () {
             function ProjectionNode(id, latestValues, parent) {
-                var _this = this;
                 if (latestValues === void 0) { latestValues = {}; }
                 if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+                var _this = this;
                 /**
                  * A Set containing all this component's children. This is used to iterate
                  * through the children.
@@ -4338,7 +4515,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "6.5.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.5.0 may not work as expected."));
+                    warnOnce(nextValue.version === "7.0.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.1 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5234,9 +5411,9 @@
          * can be animated by Motion.
          */
         makeTargetAnimatable: function (element, _a, _b, isMounted) {
+            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var transformValues = _b.transformValues;
             if (isMounted === void 0) { isMounted = true; }
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them