framer-motion 6.5.0 → 7.0.1

package/dist/framer-motion.dev.js

@@ -27,7 +27,7 @@
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -69,7 +69,7 @@
         return __assign.apply(this, arguments);
     };
 
-    function __rest$1(s, e) {
+    function __rest(s, e) {
         var t = {};
         for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
             t[p] = s[p];
@@ -887,43 +887,43 @@
             : 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,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) {
+    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) {
         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$2(0, 1) });
-    const scale = Object.assign(Object.assign({}, number), { default: 1 });
+    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 createUnitType = (unit) => ({
-        test: (v) => isString$1(v) && v.endsWith(unit) && v.split(' ').length === 1,
+    const createUnitType$1 = (unit) => ({
+        test: (v) => isString$2(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)) ||
+    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)) ||
             (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
     };
-    const splitColor = (aName, bName, cName) => (v) => {
-        if (!isString$1(v))
+    const splitColor$1 = (aName, bName, cName) => (v) => {
+        if (!isString$2(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),
@@ -932,39 +932,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$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) +
+    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) +
             ', ' +
-            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 = '';
@@ -992,88 +992,88 @@
             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$1(v)
+            return isString$2(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$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);
+            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);
     }
-    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 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 complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+    const complex$1 = { test: test$1, parse: parse$1, createTransformer: createTransformer$1, getAnimatableNone: getAnimatableNone$2 };
 
     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) || [];
+        const [number] = value.match(floatRegex$1) || [];
         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), { getAnimatableNone: (v) => {
+    const filter = Object.assign(Object.assign({}, complex$1), { getAnimatableNone: (v) => {
             const functions = v.match(functionRegex);
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
-    var int = __assign(__assign({}, number), { transform: Math.round });
+    var int = __assign(__assign({}, number$1), { transform: Math.round });
 
     var numberValueTypes = {
         // Border props
@@ -1145,15 +1145,15 @@
         z: px,
         perspective: px,
         transformPerspective: px,
-        opacity: alpha,
+        opacity: alpha$1,
         originX: progressPercentage,
         originY: progressPercentage,
         originZ: px,
         // Misc
         zIndex: int,
         // SVG
-        fillOpacity: alpha,
-        strokeOpacity: alpha,
+        fillOpacity: alpha$1,
+        strokeOpacity: alpha$1,
         numOctaves: int,
     };
 
@@ -1457,7 +1457,7 @@
     function buildSVGAttrs(state, _a, options, transformTemplate) {
         var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 
         // This is object creation, which we try to avoid per-frame.
-        latest = __rest$1(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+        latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
         buildHTMLStyles(state, latest, options, transformTemplate);
         state.attrs = state.style;
         state.style = {};
@@ -1671,7 +1671,7 @@
                 var resolved = resolveVariantFromProps(props, definition);
                 if (!resolved)
                     return;
-                var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest$1(resolved, ["transitionEnd", "transition"]);
+                var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, ["transitionEnd", "transition"]);
                 for (var key in target) {
                     var valueTarget = target[key];
                     if (Array.isArray(valueTarget)) {
@@ -2008,7 +2008,7 @@
         return React.useEffect(function () { return function () { return callback(); }; }, []);
     }
 
-    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;
@@ -2020,8 +2020,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;
@@ -2101,7 +2101,7 @@
         return springOptions;
     }
     function spring(_a) {
-        var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest$1(_a, ["from", "to", "restSpeed", "restDelta"]);
+        var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest(_a, ["from", "to", "restSpeed", "restDelta"]);
         const state = { done: false, value: from };
         let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
         let resolveSpring = zero;
@@ -2207,6 +2207,183 @@
 
     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;
@@ -2439,7 +2616,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;
     }
 
@@ -2567,12 +2744,12 @@
     }
 
     const defaultTimestep = (1 / 60) * 1000;
-    const getCurrentTime$1 = typeof performance !== "undefined"
+    const getCurrentTime = typeof performance !== "undefined"
         ? () => performance.now()
         : () => Date.now();
     const onNextFrame = typeof window !== "undefined"
         ? (callback) => window.requestAnimationFrame(callback)
-        : (callback) => setTimeout(() => callback(getCurrentTime$1()), defaultTimestep);
+        : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
 
     function createRenderStep(runNextFrame) {
         let toRun = [];
@@ -2709,7 +2886,7 @@
     };
     function animate$1(_a) {
         var _b, _c;
-        var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest$1(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
+        var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
         let { to } = options;
         let driverControls;
         let repeatCount = 0;
@@ -3029,7 +3206,7 @@
         entries.forEach(fireObserverCallback);
     };
     function initIntersectionObserver(_a) {
-        var root = _a.root, options = __rest$1(_a, ["root"]);
+        var root = _a.root, options = __rest(_a, ["root"]);
         var lookupRoot = root || document;
         /**
          * If we don't have an observer lookup map for this root, create one.
@@ -3162,18 +3339,6 @@
         hover: makeRenderlessComponent(useHoverGesture),
     };
 
-    var counter = 0;
-    var incrementId = function () { return counter++; };
-    var useId = function () { return useConstant(incrementId); };
-    /**
-     * Ideally we'd use the following code to support React 18 optionally.
-     * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
-     * Need to come up with a different way of figuring this out.
-     */
-    // export const useId = (React as any).useId
-    //     ? (React as any).useId
-    //     : () => useConstant(incrementId)
-
     /**
      * When a component is the child of `AnimatePresence`, it can use `usePresence`
      * to access information about whether it's still present in the React tree.
@@ -3205,7 +3370,7 @@
         // It's safe to call the following hooks conditionally (after an early return) because the context will always
         // either be null or non-null for the lifespan of the component.
         // Replace with useId when released in React
-        var id = useId();
+        var id = React.useId();
         React.useEffect(function () { return register(id); }, []);
         var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
         return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -3311,7 +3476,7 @@
         if (typeof value === "number" || Array.isArray(value))
             return true;
         if (typeof value === "string" && // It's animatable if we have a string
-            complex.test(value) && // And it contains numbers and/or colors
+            complex$1.test(value) && // And it contains numbers and/or colors
             !value.startsWith("url(") // Unless it starts with "url("
         ) {
             return true;
@@ -3374,9 +3539,9 @@
      */
     var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
         // Color props
-        color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+        color: color$1, backgroundColor: color$1, outlineColor: color$1, fill: color$1, stroke: color$1, 
         // Border props
-        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter });
+        borderColor: color$1, borderTopColor: color$1, borderRightColor: color$1, borderBottomColor: color$1, borderLeftColor: color$1, filter: filter, WebkitFilter: filter });
     /**
      * Gets the default ValueType for the provided value key
      */
@@ -3386,7 +3551,7 @@
         var _a;
         var defaultValueType = getDefaultValueType(key);
         if (defaultValueType !== filter)
-            defaultValueType = complex;
+            defaultValueType = complex$1;
         // 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);
     }
@@ -3401,7 +3566,7 @@
      * if any options are left.
      */
     function isTransitionDefined(_a) {
-        _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest$1(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+        _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
         return !!Object.keys(transition).length;
     }
     var legacyRepeatWarning = false;
@@ -3409,7 +3574,7 @@
      * Convert Framer Motion's Transition type into Popmotion-compatible options.
      */
     function convertTransitionToAnimationOptions(_a) {
-        var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest$1(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+        var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
         var options = __assign({}, transition);
         if (times)
             options["offset"] = times;
@@ -3682,7 +3847,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.
              *
@@ -3981,7 +4146,7 @@
     /**
      * A list of value types commonly used for dimensions
      */
-    var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+    var dimensionValueTypes = [number$1, px, percent$1, degrees, vw, vh, auto];
     /**
      * Tests a dimensional value against the list of dimension ValueTypes
      */
@@ -3992,7 +4157,7 @@
     /**
      * A list of all ValueTypes
      */
-    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);
+    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color$1, complex$1], false);
     /**
      * Tests a value against the list of ValueTypes
      */
@@ -4012,7 +4177,7 @@
     }
     function setTarget(visualElement, definition) {
         var resolved = resolveVariant(visualElement, definition);
-        var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest$1(_a, ["transitionEnd", "transition"]);
+        var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]);
         target = __assign(__assign({}, target), transitionEnd);
         for (var key in target) {
             var value = resolveFinalValueInKeyframes(target[key]);
@@ -4078,7 +4243,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.test(targetValue)) {
+            else if (!findValueType(value) && complex$1.test(targetValue)) {
                 value = getAnimatableNone(key, targetValue);
             }
             visualElement.addValue(key, motionValue(value));
@@ -4172,7 +4337,7 @@
     function animateTarget(visualElement, definition, _a) {
         var _b;
         var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
-        var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest$1(_e, ["transition", "transitionEnd"]);
+        var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]);
         if (transitionOverride)
             transition = transitionOverride;
         var animations = [];
@@ -4272,7 +4437,7 @@
         var buildResolvedTypeValues = function (acc, definition) {
             var resolved = resolveVariant(visualElement, definition);
             if (resolved) {
-                resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest$1(resolved, ["transition", "transitionEnd"]);
+                resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
                 acc = __assign(__assign(__assign({}, acc), target), transitionEnd);
             }
             return acc;
@@ -4608,8 +4773,8 @@
      */
     var PanSession = /** @class */ (function () {
         function PanSession(event, handlers, _a) {
-            var _this = this;
             var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+            var _this = this;
             /**
              * @internal
              */
@@ -4867,7 +5032,7 @@
         else if (sourceLength > targetLength) {
             origin = progress$1(source.min, source.max - targetLength, target.min);
         }
-        return clamp$1(0, 1, origin);
+        return clamp$2(0, 1, origin);
     }
     /**
      * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -5172,7 +5337,7 @@
                     /**
                      * If the MotionValue is a percentage value convert to px
                      */
-                    if (percent.test(current)) {
+                    if (percent$1.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);
@@ -5480,7 +5645,7 @@
              * If the element's layout changes, calculate the delta and apply that to
              * the drag gesture's origin point.
              */
-            projection.addEventListener("didUpdate", (function (_a) {
+            var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
                 var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
                 if (_this.isDragging && hasLayoutChanged) {
                     eachAxis(function (axis) {
@@ -5497,6 +5662,7 @@
                 stopResizeListener();
                 stopPointerListener();
                 stopMeasureLayoutListener();
+                stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
             };
         };
         VisualElementDragControls.prototype.getProps = function () {
@@ -5651,7 +5817,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)) {
@@ -6124,7 +6290,7 @@
      */
     function resolveCSSVariables(visualElement, _a, transitionEnd) {
         var _b;
-        var target = __rest$1(_a, []);
+        var target = __rest(_a, []);
         var element = visualElement.getInstance();
         if (!(element instanceof Element))
             return { target: target, transitionEnd: transitionEnd };
@@ -6183,7 +6349,7 @@
         value.set(to);
     };
     var isNumOrPxType = function (v) {
-        return v === number || v === px;
+        return v === number$1 || v === px;
     };
     var BoundingBoxDimension;
     (function (BoundingBoxDimension) {
@@ -6490,9 +6656,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$1(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -6599,11 +6765,11 @@
                     return varToken;
                 });
             }
-            var shadow = complex.parse(latest);
+            var shadow = complex$1.parse(latest);
             // TODO: Doesn't support multiple shadows
             if (shadow.length > 5)
                 return original;
-            var template = complex.createTransformer(latest);
+            var template = complex$1.createTransformer(latest);
             var offset = typeof shadow[0] !== "number" ? 1 : 0;
             // Calculate the overall context scale
             var xScale = projectionDelta.x.scale * treeScale.x;
@@ -6832,7 +6998,7 @@
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
                 target[borderLabel] = Math.max(mix$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
-                if (percent.test(leadRadius) || percent.test(followRadius)) {
+                if (percent$1.test(leadRadius) || percent$1.test(followRadius)) {
                     target[borderLabel] += "%";
                 }
             }
@@ -6926,7 +7092,7 @@
         if (origin === void 0) { origin = 0.5; }
         if (originAxis === void 0) { originAxis = axis; }
         if (sourceAxis === void 0) { sourceAxis = axis; }
-        if (percent.test(translate)) {
+        if (percent$1.test(translate)) {
             translate = parseFloat(translate);
             var relativeProgress = mix$1(sourceAxis.min, sourceAxis.max, translate / 100);
             translate = relativeProgress - sourceAxis.min;
@@ -7152,9 +7318,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.
@@ -8422,7 +8588,7 @@
     var PresenceChild = function (_a) {
         var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
         var presenceChildren = useConstant(newChildrenMap);
-        var id = useId();
+        var id = React.useId();
         var context = React.useMemo(function () { return ({
             id: id,
             initial: initial,
@@ -8704,7 +8870,7 @@
      * @public
      */
     function MotionConfig(_a) {
-        var children = _a.children, isValidProp = _a.isValidProp, config = __rest$1(_a, ["children", "isValidProp"]);
+        var children = _a.children, isValidProp = _a.isValidProp, config = __rest(_a, ["children", "isValidProp"]);
         isValidProp && loadExternalIsValidProp(isValidProp);
         /**
          * Inherit props from any parent MotionConfig components
@@ -8766,14 +8932,14 @@
          * If this is a synchronous load, load features immediately
          */
         if (!isLazyBundle(features)) {
-            var renderer = features.renderer, loadedFeatures = __rest$1(features, ["renderer"]);
+            var renderer = features.renderer, loadedFeatures = __rest(features, ["renderer"]);
             loadedRenderer.current = renderer;
             loadFeatures(loadedFeatures);
         }
         React.useEffect(function () {
             if (isLazyBundle(features)) {
                 features().then(function (_a) {
-                    var renderer = _a.renderer, loadedFeatures = __rest$1(_a, ["renderer"]);
+                    var renderer = _a.renderer, loadedFeatures = __rest(_a, ["renderer"]);
                     loadFeatures(loadedFeatures);
                     loadedRenderer.current = renderer;
                     setIsLoaded(true);
@@ -8809,7 +8975,7 @@
     }
 
     function ReorderGroup(_a, externalRef) {
-        var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest$1(_a, ["children", "as", "axis", "onReorder", "values"]);
+        var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest(_a, ["children", "as", "axis", "onReorder", "values"]);
         var Component = useConstant(function () { return motion(as); });
         var order = [];
         var isReordering = React.useRef(false);
@@ -8904,13 +9070,13 @@
     }
 
     function useOnChange(value, callback) {
-        React.useEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             if (isMotionValue(value))
                 return value.onChange(callback);
         }, [callback]);
     }
     function useMultiOnChange(values, handler) {
-        React.useEffect(function () {
+        useIsomorphicLayoutEffect(function () {
             var subscriptions = values.map(function (value) { return value.onChange(handler); });
             return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
         });
@@ -8969,7 +9135,7 @@
         return isMotionValue(value) ? value : useMotionValue(defaultValue);
     }
     function ReorderItem(_a, externalRef) {
-        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest$1(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
+        var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, _c = _a.layout, layout = _c === void 0 ? true : _c, props = __rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
         var Component = useConstant(function () { return motion(as); });
         var context = React.useContext(ReorderContext);
         var point = {
@@ -9123,7 +9289,7 @@
     const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const isNumber = (value) => typeof value === "number";
-    const isString = (value) => typeof value === "string";
+
     const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
 
     const wrap = (min, max, v) => {
@@ -9179,6 +9345,10 @@
         };
     }
 
+    const isFunction = (value) => typeof value === "function";
+
+    const isString = (value) => typeof value === "string";
+
     /*
       Convert velocity into velocity per second
 
@@ -9209,33 +9379,6 @@
         return Array.from(elements || []);
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
     const thresholds = {
         any: 0,
         all: 1,
@@ -9263,7 +9406,7 @@
                     return;
                 if (entry.isIntersecting) {
                     const newOnEnd = onStart(entry);
-                    if (typeof newOnEnd === "function") {
+                    if (isFunction(newOnEnd)) {
                         activeIntersections.set(entry.target, newOnEnd);
                     }
                     else {
@@ -9376,7 +9519,7 @@
     }
 
     function resize(a, b) {
-        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+        return isFunction(a) ? resizeWindow(a) : resizeElement(a, b);
     }
 
     /**
@@ -9626,7 +9769,7 @@
                     resolveOffsets(element, info, options);
                 }
             },
-            notify: typeof onScroll === "function"
+            notify: isFunction(onScroll)
                 ? () => onScroll(info)
                 : scrubAnimation(onScroll, info[axis]),
         };
@@ -9732,7 +9875,7 @@
     }); };
     function useScroll(_a) {
         if (_a === void 0) { _a = {}; }
-        var container = _a.container, target = _a.target, options = __rest$1(_a, ["container", "target"]);
+        var container = _a.container, target = _a.target, options = __rest(_a, ["container", "target"]);
         var values = useConstant(createScrollMotionValues);
         useIsomorphicLayoutEffect(function () {
             return scroll(function (_a) {
@@ -9746,28 +9889,33 @@
         return values;
     }
 
+    /**
+     * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
+     */
     function useElementScroll(ref) {
         warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
         return useScroll({ container: ref });
     }
 
+    /**
+     * @deprecated useViewportScroll is deprecated. Convert to useScroll()
+     */
     function useViewportScroll() {
         warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
         return useScroll();
     }
 
-    var getCurrentTime = typeof performance !== "undefined"
-        ? function () { return performance.now(); }
-        : function () { return Date.now(); };
     function useAnimationFrame(callback) {
-        var initialTimestamp = useConstant(getCurrentTime);
+        var initialTimestamp = React.useRef(0);
         var isStatic = React.useContext(MotionConfigContext).isStatic;
         React.useEffect(function () {
             if (isStatic)
                 return;
             var provideTimeSinceStart = function (_a) {
                 var timestamp = _a.timestamp;
-                callback(timestamp - initialTimestamp);
+                if (!initialTimestamp.current)
+                    initialTimestamp.current = timestamp;
+                callback(timestamp - initialTimestamp.current);
             };
             sync.update(provideTimeSinceStart, true);
             return function () { return cancelSync.update(provideTimeSinceStart); };
@@ -10094,7 +10242,7 @@
             return options.initialState[key] || 0;
         },
         makeTargetAnimatable: function (element, _a) {
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest$1(_a, ["transition", "transitionEnd"]);
+            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
             var origin = getOrigin(target, transition || {}, element);
             checkTargetForNewValues(element, target, origin);
             return __assign({ transition: transition, transitionEnd: transitionEnd }, target);