framer-motion 7.0.1 → 7.0.2

package/dist/cjs/index.js

@@ -2437,7 +2437,7 @@ var MotionValue = /** @class */ (function () {
          * 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.0.1";
+        this.version = "7.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4407,7 +4407,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.0.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.1 may not work as expected."));
+                warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/render/utils/motion-values.mjs

@@ -18,7 +18,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.0.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.1 may not work as expected."));
+                warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * 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.0.1";
+        this.version = "7.0.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -887,43 +887,43 @@
             : value;
     };
 
-    const clamp$3 = (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$2(v) {
+    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 number$1 = {
+    const number = {
         test: (v) => typeof v === 'number',
         parse: parseFloat,
         transform: (v) => v,
     };
-    const alpha$1 = Object.assign(Object.assign({}, number$1), { transform: clamp$3(0, 1) });
-    const scale = Object.assign(Object.assign({}, number$1), { default: 1 });
+    const alpha = Object.assign(Object.assign({}, number), { transform: clamp$2(0, 1) });
+    const scale = Object.assign(Object.assign({}, number), { default: 1 });
 
-    const createUnitType$1 = (unit) => ({
-        test: (v) => isString$2(v) && v.endsWith(unit) && v.split(' ').length === 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$1('deg');
-    const percent$1 = createUnitType$1('%');
-    const px = createUnitType$1('px');
-    const vh = createUnitType$1('vh');
-    const vw = createUnitType$1('vw');
-    const progressPercentage = Object.assign(Object.assign({}, percent$1), { parse: (v) => percent$1.parse(v) / 100, transform: (v) => percent$1.transform(v * 100) });
-
-    const isColorString$1 = (type, testProp) => (v) => {
-        return Boolean((isString$2(v) && singleColorRegex$1.test(v) && v.startsWith(type)) ||
+    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$1 = (aName, bName, cName) => (v) => {
-        if (!isString$2(v))
+    const splitColor = (aName, bName, cName) => (v) => {
+        if (!isString$1(v))
             return v;
-        const [a, b, c, alpha] = v.match(floatRegex$1);
+        const [a, b, c, alpha] = v.match(floatRegex);
         return {
             [aName]: parseFloat(a),
             [bName]: parseFloat(b),
@@ -932,39 +932,39 @@
         };
     };
 
-    const hsla$1 = {
-        test: isColorString$1('hsl', 'hue'),
-        parse: splitColor$1('hue', 'saturation', 'lightness'),
-        transform: ({ hue, saturation, lightness, alpha: alpha$1$1 = 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$1.transform(sanitize$1(saturation)) +
+                percent.transform(sanitize(saturation)) +
                 ', ' +
-                percent$1.transform(sanitize$1(lightness)) +
+                percent.transform(sanitize(lightness)) +
                 ', ' +
-                sanitize$1(alpha$1.transform(alpha$1$1)) +
+                sanitize(alpha.transform(alpha$1)) +
                 ')');
         },
     };
 
-    const clampRgbUnit$1 = clamp$3(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) +
+    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$1.transform(green) +
+            rgbUnit.transform(green) +
             ', ' +
-            rgbUnit$1.transform(blue) +
+            rgbUnit.transform(blue) +
             ', ' +
-            sanitize$1(alpha$1.transform(alpha$1$1)) +
+            sanitize(alpha.transform(alpha$1)) +
             ')',
     };
 
-    function parseHex$1(v) {
+    function parseHex(v) {
         let r = '';
         let g = '';
         let b = '';
@@ -992,88 +992,88 @@
             alpha: a ? parseInt(a, 16) / 255 : 1,
         };
     }
-    const hex$1 = {
-        test: isColorString$1('#'),
-        parse: parseHex$1,
-        transform: rgba$1.transform,
+    const hex = {
+        test: isColorString('#'),
+        parse: parseHex,
+        transform: rgba.transform,
     };
 
-    const color$1 = {
-        test: (v) => rgba$1.test(v) || hex$1.test(v) || hsla$1.test(v),
+    const color = {
+        test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
         parse: (v) => {
-            if (rgba$1.test(v)) {
-                return rgba$1.parse(v);
+            if (rgba.test(v)) {
+                return rgba.parse(v);
             }
-            else if (hsla$1.test(v)) {
-                return hsla$1.parse(v);
+            else if (hsla.test(v)) {
+                return hsla.parse(v);
             }
             else {
-                return hex$1.parse(v);
+                return hex.parse(v);
             }
         },
         transform: (v) => {
-            return isString$2(v)
+            return isString$1(v)
                 ? v
                 : v.hasOwnProperty('red')
-                    ? rgba$1.transform(v)
-                    : hsla$1.transform(v);
+                    ? rgba.transform(v)
+                    : hsla.transform(v);
         },
     };
 
-    const colorToken$1 = '${c}';
-    const numberToken$1 = '${n}';
-    function test$1(v) {
+    const colorToken = '${c}';
+    const numberToken = '${n}';
+    function test(v) {
         var _a, _b, _c, _d;
         return (isNaN(v) &&
-            isString$2(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);
+            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$2(v) {
+    function analyse$1(v) {
         if (typeof v === 'number')
             v = `${v}`;
         const values = [];
         let numColors = 0;
-        const colors = v.match(colorRegex$1);
+        const colors = v.match(colorRegex);
         if (colors) {
             numColors = colors.length;
-            v = v.replace(colorRegex$1, colorToken$1);
-            values.push(...colors.map(color$1.parse));
+            v = v.replace(colorRegex, colorToken);
+            values.push(...colors.map(color.parse));
         }
-        const numbers = v.match(floatRegex$1);
+        const numbers = v.match(floatRegex);
         if (numbers) {
-            v = v.replace(floatRegex$1, numberToken$1);
-            values.push(...numbers.map(number$1.parse));
+            v = v.replace(floatRegex, numberToken);
+            values.push(...numbers.map(number.parse));
         }
         return { values, numColors, tokenised: v };
     }
-    function parse$1(v) {
-        return analyse$2(v).values;
+    function parse(v) {
+        return analyse$1(v).values;
     }
-    function createTransformer$1(v) {
-        const { values, numColors, tokenised } = analyse$2(v);
+    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$1 : numberToken$1, i < numColors ? color$1.transform(v[i]) : sanitize$1(v[i]));
+                output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
             }
             return output;
         };
     }
-    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 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$1 = { test: test$1, parse: parse$1, createTransformer: createTransformer$1, getAnimatableNone: getAnimatableNone$2 };
+    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$1) || [];
+        const [number] = value.match(floatRegex) || [];
         if (!number)
             return v;
         const unit = value.replace(number, '');
@@ -1083,12 +1083,12 @@
         return name + '(' + defaultValue + unit + ')';
     }
     const functionRegex = /([a-z-]*)\(.*?\)/g;
-    const filter = Object.assign(Object.assign({}, complex$1), { getAnimatableNone: (v) => {
+    const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => {
             const functions = v.match(functionRegex);
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
-    var int = __assign(__assign({}, number$1), { transform: Math.round });
+    var int = __assign(__assign({}, number), { transform: Math.round });
 
     var numberValueTypes = {
         // Border props
@@ -1145,15 +1145,15 @@
         z: px,
         perspective: px,
         transformPerspective: px,
-        opacity: alpha$1,
+        opacity: alpha,
         originX: progressPercentage,
         originY: progressPercentage,
         originZ: px,
         // Misc
         zIndex: int,
         // SVG
-        fillOpacity: alpha$1,
-        strokeOpacity: alpha$1,
+        fillOpacity: alpha,
+        strokeOpacity: alpha,
         numOctaves: int,
     };
 
@@ -2008,7 +2008,7 @@
         return React.useEffect(function () { return function () { return callback(); }; }, []);
     }
 
-    const clamp$2 = (min, max, v) => Math.min(Math.max(v, min), max);
+    const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const safeMin = 0.001;
     const minDuration = 0.01;
@@ -2020,8 +2020,8 @@
         let derivative;
         warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
         let dampingRatio = 1 - bounce;
-        dampingRatio = clamp$2(minDamping, maxDamping, dampingRatio);
-        duration = clamp$2(minDuration, maxDuration, duration / 1000);
+        dampingRatio = clamp$1(minDamping, maxDamping, dampingRatio);
+        duration = clamp$1(minDuration, maxDuration, duration / 1000);
         if (dampingRatio < 1) {
             envelope = (undampedFreq) => {
                 const exponentialDecay = undampedFreq * dampingRatio;
@@ -2207,183 +2207,6 @@
 
     const mix$1 = (from, to, progress) => -progress * from + progress * to + from;
 
-    const clamp$1 = (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$1(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$1(0, 1) });
-    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 percent = createUnitType('%');
-    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 clampRgbUnit = clamp$1(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$1(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$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 };
-
     function hueToRgb(p, q, t) {
         if (t < 0)
             t += 1;
@@ -2616,7 +2439,7 @@
             ? fastInterpolate(input, mixers)
             : slowInterpolate(input, mixers);
         return isClamp
-            ? (v) => interpolator(clamp$2(input[0], input[inputLength - 1], v))
+            ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v))
             : interpolator;
     }
 
@@ -3476,7 +3299,7 @@
         if (typeof value === "number" || Array.isArray(value))
             return true;
         if (typeof value === "string" && // It's animatable if we have a string
-            complex$1.test(value) && // And it contains numbers and/or colors
+            complex.test(value) && // And it contains numbers and/or colors
             !value.startsWith("url(") // Unless it starts with "url("
         ) {
             return true;
@@ -3539,9 +3362,9 @@
      */
     var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
         // Color props
-        color: color$1, backgroundColor: color$1, outlineColor: color$1, fill: color$1, stroke: color$1, 
+        color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
         // Border props
-        borderColor: color$1, borderTopColor: color$1, borderRightColor: color$1, borderBottomColor: color$1, borderLeftColor: color$1, filter: filter, WebkitFilter: filter });
+        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter });
     /**
      * Gets the default ValueType for the provided value key
      */
@@ -3551,7 +3374,7 @@
         var _a;
         var defaultValueType = getDefaultValueType(key);
         if (defaultValueType !== filter)
-            defaultValueType = complex$1;
+            defaultValueType = complex;
         // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
         return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
     }
@@ -3847,7 +3670,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.0.1";
+            this.version = "7.0.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4146,7 +3969,7 @@
     /**
      * A list of value types commonly used for dimensions
      */
-    var dimensionValueTypes = [number$1, px, percent$1, degrees, vw, vh, auto];
+    var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
     /**
      * Tests a dimensional value against the list of dimension ValueTypes
      */
@@ -4157,7 +3980,7 @@
     /**
      * A list of all ValueTypes
      */
-    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color$1, complex$1], false);
+    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);
     /**
      * Tests a value against the list of ValueTypes
      */
@@ -4243,7 +4066,7 @@
                 // If this is a number read as a string, ie "0" or "200", convert it to a number
                 value = parseFloat(value);
             }
-            else if (!findValueType(value) && complex$1.test(targetValue)) {
+            else if (!findValueType(value) && complex.test(targetValue)) {
                 value = getAnimatableNone(key, targetValue);
             }
             visualElement.addValue(key, motionValue(value));
@@ -5032,7 +4855,7 @@
         else if (sourceLength > targetLength) {
             origin = progress$1(source.min, source.max - targetLength, target.min);
         }
-        return clamp$2(0, 1, origin);
+        return clamp$1(0, 1, origin);
     }
     /**
      * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -5337,7 +5160,7 @@
                     /**
                      * If the MotionValue is a percentage value convert to px
                      */
-                    if (percent$1.test(current)) {
+                    if (percent.test(current)) {
                         var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
                         if (measuredAxis) {
                             var length_1 = calcLength(measuredAxis);
@@ -5817,7 +5640,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.0.1", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.1 may not work as expected."));
+                    warnOnce(nextValue.version === "7.0.2", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.2 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6349,7 +6172,7 @@
         value.set(to);
     };
     var isNumOrPxType = function (v) {
-        return v === number$1 || v === px;
+        return v === number || v === px;
     };
     var BoundingBoxDimension;
     (function (BoundingBoxDimension) {
@@ -6765,11 +6588,11 @@
                     return varToken;
                 });
             }
-            var shadow = complex$1.parse(latest);
+            var shadow = complex.parse(latest);
             // TODO: Doesn't support multiple shadows
             if (shadow.length > 5)
                 return original;
-            var template = complex$1.createTransformer(latest);
+            var template = complex.createTransformer(latest);
             var offset = typeof shadow[0] !== "number" ? 1 : 0;
             // Calculate the overall context scale
             var xScale = projectionDelta.x.scale * treeScale.x;
@@ -6998,7 +6821,7 @@
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
                 target[borderLabel] = Math.max(mix$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
-                if (percent$1.test(leadRadius) || percent$1.test(followRadius)) {
+                if (percent.test(leadRadius) || percent.test(followRadius)) {
                     target[borderLabel] += "%";
                 }
             }
@@ -7092,7 +6915,7 @@
         if (origin === void 0) { origin = 0.5; }
         if (originAxis === void 0) { originAxis = axis; }
         if (sourceAxis === void 0) { sourceAxis = axis; }
-        if (percent$1.test(translate)) {
+        if (percent.test(translate)) {
             translate = parseFloat(translate);
             var relativeProgress = mix$1(sourceAxis.min, sourceAxis.max, translate / 100);
             translate = relativeProgress - sourceAxis.min;