framer-motion 7.7.0 → 7.7.1

package/dist/cjs/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styleValueTypes = require('style-value-types');
 var heyListen = require('hey-listen');
-var sync = require('framesync');
 var dom = require('@motionone/dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -30,7 +28,6 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
 
 /**
  * @public
@@ -563,75 +560,121 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
+const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
+const number = {
+    test: (v) => typeof v === "number",
+    parse: parseFloat,
+    transform: (v) => v,
+};
+const alpha = {
+    ...number,
+    transform: (v) => clamp(0, 1, v),
+};
+const scale = {
+    ...number,
+    default: 1,
+};
+
+/**
+ * TODO: When we move from string as a source of truth to data models
+ * everything in this folder should probably be referred to as models vs types
+ */
+// If this number is a decimal, make it just five decimal places
+// to avoid exponents
+const sanitize = (v) => Math.round(v * 100000) / 100000;
+const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
+function isString(v) {
+    return typeof v === "string";
+}
+
+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 = {
+    ...percent,
+    parse: (v) => percent.parse(v) / 100,
+    transform: (v) => percent.transform(v * 100),
+};
+
 const int = {
-    ...styleValueTypes.number,
+    ...number,
     transform: Math.round,
 };
 
 const numberValueTypes = {
     // Border props
-    borderWidth: styleValueTypes.px,
-    borderTopWidth: styleValueTypes.px,
-    borderRightWidth: styleValueTypes.px,
-    borderBottomWidth: styleValueTypes.px,
-    borderLeftWidth: styleValueTypes.px,
-    borderRadius: styleValueTypes.px,
-    radius: styleValueTypes.px,
-    borderTopLeftRadius: styleValueTypes.px,
-    borderTopRightRadius: styleValueTypes.px,
-    borderBottomRightRadius: styleValueTypes.px,
-    borderBottomLeftRadius: styleValueTypes.px,
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
     // Positioning props
-    width: styleValueTypes.px,
-    maxWidth: styleValueTypes.px,
-    height: styleValueTypes.px,
-    maxHeight: styleValueTypes.px,
-    size: styleValueTypes.px,
-    top: styleValueTypes.px,
-    right: styleValueTypes.px,
-    bottom: styleValueTypes.px,
-    left: styleValueTypes.px,
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    size: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
     // Spacing props
-    padding: styleValueTypes.px,
-    paddingTop: styleValueTypes.px,
-    paddingRight: styleValueTypes.px,
-    paddingBottom: styleValueTypes.px,
-    paddingLeft: styleValueTypes.px,
-    margin: styleValueTypes.px,
-    marginTop: styleValueTypes.px,
-    marginRight: styleValueTypes.px,
-    marginBottom: styleValueTypes.px,
-    marginLeft: styleValueTypes.px,
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
     // Transform props
-    rotate: styleValueTypes.degrees,
-    rotateX: styleValueTypes.degrees,
-    rotateY: styleValueTypes.degrees,
-    rotateZ: styleValueTypes.degrees,
-    scale: styleValueTypes.scale,
-    scaleX: styleValueTypes.scale,
-    scaleY: styleValueTypes.scale,
-    scaleZ: styleValueTypes.scale,
-    skew: styleValueTypes.degrees,
-    skewX: styleValueTypes.degrees,
-    skewY: styleValueTypes.degrees,
-    distance: styleValueTypes.px,
-    translateX: styleValueTypes.px,
-    translateY: styleValueTypes.px,
-    translateZ: styleValueTypes.px,
-    x: styleValueTypes.px,
-    y: styleValueTypes.px,
-    z: styleValueTypes.px,
-    perspective: styleValueTypes.px,
-    transformPerspective: styleValueTypes.px,
-    opacity: styleValueTypes.alpha,
-    originX: styleValueTypes.progressPercentage,
-    originY: styleValueTypes.progressPercentage,
-    originZ: styleValueTypes.px,
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
     // Misc
     zIndex: int,
     // SVG
-    fillOpacity: styleValueTypes.alpha,
-    strokeOpacity: styleValueTypes.alpha,
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
     numOctaves: int,
 };
 
@@ -888,7 +931,7 @@ function filterProps(props, isDom, forwardMotionProps) {
 function calcOrigin$1(origin, offset, size) {
     return typeof origin === "string"
         ? origin
-        : styleValueTypes.px.transform(offset + size * origin);
+        : px.transform(offset + size * origin);
 }
 /**
  * The SVG transform origin defaults are different to CSS and is less intuitive,
@@ -922,10 +965,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     // when defining props on a React component.
     const keys = useDashCase ? dashKeys : camelKeys;
     // Build the dash offset
-    attrs[keys.offset] = styleValueTypes.px.transform(-offset);
+    attrs[keys.offset] = px.transform(-offset);
     // Build the dash array
-    const pathLength = styleValueTypes.px.transform(length);
-    const pathSpacing = styleValueTypes.px.transform(spacing);
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
@@ -1943,6 +1986,175 @@ const isEasingArray = (ease) => {
     return Array.isArray(ease) && typeof ease[0] !== "number";
 };
 
+/**
+ * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+ * but false if a number or multiple colors
+ */
+const isColorString = (type, testProp) => (v) => {
+    return Boolean((isString(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 clampRgbUnit = (v) => clamp(0, 255, v);
+const rgbUnit = {
+    ...number,
+    transform: (v) => Math.round(clampRgbUnit(v)),
+};
+const rgba = {
+    test: isColorString("rgb", "red"),
+    parse: splitColor("red", "green", "blue"),
+    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
+        rgbUnit.transform(red) +
+        ", " +
+        rgbUnit.transform(green) +
+        ", " +
+        rgbUnit.transform(blue) +
+        ", " +
+        sanitize(alpha.transform(alpha$1)) +
+        ")",
+};
+
+function parseHex(v) {
+    let r = "";
+    let g = "";
+    let b = "";
+    let a = "";
+    // If we have 6 characters, ie #FF0000
+    if (v.length > 5) {
+        r = v.substring(1, 3);
+        g = v.substring(3, 5);
+        b = v.substring(5, 7);
+        a = v.substring(7, 9);
+        // Or we have 3 characters, ie #F00
+    }
+    else {
+        r = v.substring(1, 2);
+        g = v.substring(2, 3);
+        b = v.substring(3, 4);
+        a = v.substring(4, 5);
+        r += r;
+        g += g;
+        b += b;
+        a += a;
+    }
+    return {
+        red: parseInt(r, 16),
+        green: parseInt(g, 16),
+        blue: parseInt(b, 16),
+        alpha: a ? parseInt(a, 16) / 255 : 1,
+    };
+}
+const hex = {
+    test: isColorString("#"),
+    parse: parseHex,
+    transform: rgba.transform,
+};
+
+const hsla = {
+    test: isColorString("hsl", "hue"),
+    parse: splitColor("hue", "saturation", "lightness"),
+    transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+        return ("hsla(" +
+            Math.round(hue) +
+            ", " +
+            percent.transform(sanitize(saturation)) +
+            ", " +
+            percent.transform(sanitize(lightness)) +
+            ", " +
+            sanitize(alpha.transform(alpha$1)) +
+            ")");
+    },
+};
+
+const color = {
+    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    parse: (v) => {
+        if (rgba.test(v)) {
+            return rgba.parse(v);
+        }
+        else if (hsla.test(v)) {
+            return hsla.parse(v);
+        }
+        else {
+            return hex.parse(v);
+        }
+    },
+    transform: (v) => {
+        return isString(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 analyseComplexValue(v) {
+    if (typeof v === "number")
+        v = `${v}`;
+    const values = [];
+    let numColors = 0;
+    let numNumbers = 0;
+    const colors = v.match(colorRegex);
+    if (colors) {
+        numColors = colors.length;
+        // Strip colors from input so they're not picked up by number regex.
+        // There's a better way to combine these regex searches, but its beyond my regex skills
+        v = v.replace(colorRegex, colorToken);
+        values.push(...colors.map(color.parse));
+    }
+    const numbers = v.match(floatRegex);
+    if (numbers) {
+        numNumbers = numbers.length;
+        v = v.replace(floatRegex, numberToken);
+        values.push(...numbers.map(number.parse));
+    }
+    return { values, numColors, numNumbers, tokenised: v };
+}
+function parse(v) {
+    return analyseComplexValue(v).values;
+}
+function createTransformer(source) {
+    const { values, numColors, tokenised } = analyseComplexValue(source);
+    const numValues = values.length;
+    return (v) => {
+        let output = tokenised;
+        for (let i = 0; i < numValues; i++) {
+            output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
+                ? color.transform(v[i])
+                : sanitize(v[i]));
+        }
+        return output;
+    };
+}
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+function getAnimatableNone$1(v) {
+    const parsed = parse(v);
+    const transformer = createTransformer(v);
+    return transformer(parsed.map(convertNumbersToZero));
+}
+const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+
 /**
  * Check if a value is animatable. Examples:
  *
@@ -1962,7 +2174,7 @@ const isAnimatable = (key, value) => {
     if (typeof value === "number" || Array.isArray(value))
         return true;
     if (typeof value === "string" && // It's animatable if we have a string
-        styleValueTypes.complex.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;
@@ -2020,25 +2232,51 @@ const getDefaultTransition = (valueKey, to) => {
     return { to, ...transitionFactory(to) };
 };
 
+/**
+ * Properties that should default to 1 or 100%
+ */
+const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+function applyDefaultFilter(v) {
+    const [name, value] = v.slice(0, -1).split("(");
+    if (name === "drop-shadow")
+        return v;
+    const [number] = value.match(floatRegex) || [];
+    if (!number)
+        return v;
+    const unit = value.replace(number, "");
+    let defaultValue = maxDefaults.has(name) ? 1 : 0;
+    if (number !== value)
+        defaultValue *= 100;
+    return name + "(" + defaultValue + unit + ")";
+}
+const functionRegex = /([a-z-]*)\(.*?\)/g;
+const filter = {
+    ...complex,
+    getAnimatableNone: (v) => {
+        const functions = v.match(functionRegex);
+        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+    },
+};
+
 /**
  * A map of default value types for common values
  */
 const defaultValueTypes = {
     ...numberValueTypes,
     // Color props
-    color: styleValueTypes.color,
-    backgroundColor: styleValueTypes.color,
-    outlineColor: styleValueTypes.color,
-    fill: styleValueTypes.color,
-    stroke: styleValueTypes.color,
+    color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
     // Border props
-    borderColor: styleValueTypes.color,
-    borderTopColor: styleValueTypes.color,
-    borderRightColor: styleValueTypes.color,
-    borderBottomColor: styleValueTypes.color,
-    borderLeftColor: styleValueTypes.color,
-    filter: styleValueTypes.filter,
-    WebkitFilter: styleValueTypes.filter,
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
 };
 /**
  * Gets the default ValueType for the provided value key
@@ -2048,8 +2286,8 @@ const getDefaultValueType = (key) => defaultValueTypes[key];
 function getAnimatableNone(key, value) {
     var _a;
     let defaultValueType = getDefaultValueType(key);
-    if (defaultValueType !== styleValueTypes.filter)
-        defaultValueType = styleValueTypes.complex;
+    if (defaultValueType !== filter)
+        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);
 }
@@ -2058,21 +2296,176 @@ const instantAnimationState = {
     current: false,
 };
 
+/*
+  Detect and load appropriate clock setting for the execution environment
+ */
+const defaultTimestep = (1 / 60) * 1000;
+const getCurrentTime = typeof performance !== "undefined"
+    ? () => performance.now()
+    : () => Date.now();
+const onNextFrame = typeof window !== "undefined"
+    ? (callback) => window.requestAnimationFrame(callback)
+    : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
+
+function createRenderStep(runNextFrame) {
+    /**
+     * We create and reuse two arrays, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let toRun = [];
+    let toRunNextFrame = [];
+    /**
+     *
+     */
+    let numToRun = 0;
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            // If the buffer doesn't already contain this callback, add it
+            if (buffer.indexOf(callback) === -1) {
+                buffer.push(callback);
+                // If we're adding it to the currently running buffer, update its measured size
+                if (addToCurrentFrame && isProcessing)
+                    numToRun = toRun.length;
+            }
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            const index = toRunNextFrame.indexOf(callback);
+            if (index !== -1)
+                toRunNextFrame.splice(index, 1);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+            // Clear the next frame list
+            toRunNextFrame.length = 0;
+            // Execute this frame
+            numToRun = toRun.length;
+            if (numToRun) {
+                for (let i = 0; i < numToRun; i++) {
+                    const callback = toRun[i];
+                    callback(frameData);
+                    if (toKeepAlive.has(callback)) {
+                        step.schedule(callback);
+                        runNextFrame();
+                    }
+                }
+            }
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const frameData = {
+    delta: 0,
+    timestamp: 0,
+};
+
+const maxElapsed = 40;
+let useDefaultElapsed = true;
+let runNextFrame = false;
+let isProcessing = false;
+const stepsOrder = [
+    "read",
+    "update",
+    "preRender",
+    "render",
+    "postRender",
+];
+const steps = stepsOrder.reduce((acc, key) => {
+    acc[key] = createRenderStep(() => (runNextFrame = true));
+    return acc;
+}, {});
+const sync = stepsOrder.reduce((acc, key) => {
+    const step = steps[key];
+    acc[key] = (process, keepAlive = false, immediate = false) => {
+        if (!runNextFrame)
+            startLoop();
+        return step.schedule(process, keepAlive, immediate);
+    };
+    return acc;
+}, {});
+const cancelSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = steps[key].cancel;
+    return acc;
+}, {});
+const flushSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = () => steps[key].process(frameData);
+    return acc;
+}, {});
+const processStep = (stepId) => steps[stepId].process(frameData);
+const processFrame = (timestamp) => {
+    runNextFrame = false;
+    frameData.delta = useDefaultElapsed
+        ? defaultTimestep
+        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
+    frameData.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (runNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
+    }
+};
+const startLoop = () => {
+    runNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing)
+        onNextFrame(processFrame);
+};
+
 function delay(callback, timeout) {
     const start = performance.now();
     const checkElapsed = ({ timestamp }) => {
         const elapsed = timestamp - start;
         if (elapsed >= timeout) {
-            sync.cancelSync.read(checkElapsed);
+            cancelSync.read(checkElapsed);
             callback(elapsed - timeout);
         }
     };
-    sync__default["default"].read(checkElapsed, true);
-    return () => sync.cancelSync.read(checkElapsed);
+    sync.read(checkElapsed, true);
+    return () => cancelSync.read(checkElapsed);
 }
 
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
 /*
   Value in range from progress
 
@@ -2144,13 +2537,14 @@ const mixLinearColor = (from, to, v) => {
     const fromExpo = from * from;
     return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
 };
-const colorTypes = [styleValueTypes.hex, styleValueTypes.rgba, styleValueTypes.hsla];
+const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color) {
     const type = getColorType(color);
     heyListen.invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
     let model = type.parse(color);
-    if (type === styleValueTypes.hsla) {
+    if (type === hsla) {
+        // TODO Remove this cast - needed since Framer Motion's stricter typing
         model = hslaToRgba(model);
     }
     return model;
@@ -2164,7 +2558,7 @@ const mixColor = (from, to) => {
         blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
         blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
         blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
-        return styleValueTypes.rgba.transform(blended);
+        return rgba.transform(blended);
     };
 };
 
@@ -2172,7 +2566,7 @@ function getMixer$1(origin, target) {
     if (typeof origin === "number") {
         return (v) => mix(origin, target, v);
     }
-    else if (styleValueTypes.color.test(origin)) {
+    else if (color.test(origin)) {
         return mixColor(origin, target);
     }
     else {
@@ -2205,34 +2599,14 @@ const mixObject = (origin, target) => {
         return output;
     };
 };
-/**
- * TODO: Combine with function within complex when style-value-types moved inside Framer Motion
- */
-function analyse(value) {
-    const parsed = styleValueTypes.complex.parse(value);
-    const numValues = parsed.length;
-    let numNumbers = 0;
-    let numColors = 0;
-    for (let i = 0; i < numValues; i++) {
-        // Parsed complex values return with colors first, so if we've seen any number
-        // we're already past that part of the array and don't need to continue running typeof
-        if (numNumbers || typeof parsed[i] === "number") {
-            numNumbers++;
-        }
-        else {
-            numColors++;
-        }
-    }
-    return { parsed, numNumbers, numColors };
-}
 const mixComplex = (origin, target) => {
-    const template = styleValueTypes.complex.createTransformer(target);
-    const originStats = analyse(origin);
-    const targetStats = analyse(target);
+    const template = complex.createTransformer(target);
+    const originStats = analyseComplexValue(origin);
+    const targetStats = analyseComplexValue(target);
     const canInterpolate = originStats.numColors === targetStats.numColors &&
         originStats.numNumbers >= targetStats.numNumbers;
     if (canInterpolate) {
-        return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+        return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
         heyListen.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
@@ -2263,7 +2637,7 @@ function detectMixerFactory(v) {
         return mixNumber;
     }
     else if (typeof v === "string") {
-        if (styleValueTypes.color.test(v)) {
+        if (color.test(v)) {
             return mixColor;
         }
         else {
@@ -2654,8 +3028,8 @@ function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
 const framesync = (update) => {
     const passTimestamp = ({ delta }) => update(delta);
     return {
-        start: () => sync__default["default"].update(passTimestamp, true),
-        stop: () => sync.cancelSync.update(passTimestamp),
+        start: () => sync.update(passTimestamp, true),
+        stop: () => cancelSync.update(passTimestamp),
     };
 };
 function animate$1({ from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
@@ -2801,7 +3175,7 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
         const checkBoundary = (v) => {
             prev = current;
             current = v;
-            velocity = velocityPerSecond(v - prev, sync.getFrameData().delta);
+            velocity = velocityPerSecond(v - prev, frameData.delta);
             if ((heading === 1 && v > boundary) ||
                 (heading === -1 && v < boundary)) {
                 startSpring({ from: v, to: boundary, velocity });
@@ -3092,7 +3466,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.7.0";
+        this.version = "7.7.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3135,11 +3509,11 @@ class MotionValue {
             this.prev = this.current;
             this.current = v;
             // Update timestamp
-            const { delta, timestamp } = sync.getFrameData();
+            const { delta, timestamp } = frameData;
             if (this.lastUpdated !== timestamp) {
                 this.timeDelta = delta;
                 this.lastUpdated = timestamp;
-                sync__default["default"].postRender(this.scheduleVelocityCheck);
+                sync.postRender(this.scheduleVelocityCheck);
             }
             // Update update subscribers
             if (this.prev !== this.current) {
@@ -3162,7 +3536,7 @@ class MotionValue {
          *
          * @internal
          */
-        this.scheduleVelocityCheck = () => sync__default["default"].postRender(this.velocityCheck);
+        this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
         /**
          * Updates `prev` with `current` if the value hasn't been updated this frame.
          * This ensures velocity calculations return `0`.
@@ -3386,7 +3760,7 @@ const auto = {
 /**
  * A list of value types commonly used for dimensions
  */
-const dimensionValueTypes = [styleValueTypes.number, styleValueTypes.px, styleValueTypes.percent, styleValueTypes.degrees, styleValueTypes.vw, styleValueTypes.vh, auto];
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
 /**
  * Tests a dimensional value against the list of dimension ValueTypes
  */
@@ -3395,7 +3769,7 @@ const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v))
 /**
  * A list of all ValueTypes
  */
-const valueTypes = [...dimensionValueTypes, styleValueTypes.color, styleValueTypes.complex];
+const valueTypes = [...dimensionValueTypes, color, complex];
 /**
  * Tests a value against the list of ValueTypes
  */
@@ -3501,7 +3875,7 @@ function checkTargetForNewValues(visualElement, target, origin) {
             // 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) && styleValueTypes.complex.test(targetValue)) {
+        else if (!findValueType(value) && complex.test(targetValue)) {
             value = getAnimatableNone(key, targetValue);
         }
         visualElement.addValue(key, motionValue(value));
@@ -4062,7 +4436,7 @@ class PanSession {
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
-            const { timestamp } = sync.getFrameData();
+            const { timestamp } = frameData;
             this.history.push({ ...point, timestamp });
             const { onStart, onMove } = this.handlers;
             if (!isPanStarted) {
@@ -4080,7 +4454,7 @@ class PanSession {
                 return;
             }
             // Throttle mouse move event to once per frame
-            sync__default["default"].update(this.updatePoint, true);
+            sync.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
             this.end();
@@ -4099,7 +4473,7 @@ class PanSession {
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
-        const { timestamp } = sync.getFrameData();
+        const { timestamp } = frameData;
         this.history = [{ ...point, timestamp }];
         const { onSessionStart } = handlers;
         onSessionStart &&
@@ -4111,7 +4485,7 @@ class PanSession {
     }
     end() {
         this.removeListeners && this.removeListeners();
-        sync.cancelSync.update(this.updatePoint);
+        cancelSync.update(this.updatePoint);
     }
 }
 function transformPoint(info, transformPagePoint) {
@@ -4593,7 +4967,7 @@ class VisualElementDragControls {
                 /**
                  * If the MotionValue is a percentage value convert to px
                  */
-                if (styleValueTypes.percent.test(current)) {
+                if (percent.test(current)) {
                     const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
                     if (measuredAxis) {
                         const length = calcLength(measuredAxis);
@@ -5123,7 +5497,7 @@ const setAndResetVelocity = (value, to) => {
     value.set(to, false);
     value.set(to);
 };
-const isNumOrPxType = (v) => v === styleValueTypes.number || v === styleValueTypes.px;
+const isNumOrPxType = (v) => v === number || v === px;
 var BoundingBoxDimension;
 (function (BoundingBoxDimension) {
     BoundingBoxDimension["width"] = "width";
@@ -5259,7 +5633,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
                 if (typeof to === "string") {
                     target[key] = parseFloat(to);
                 }
-                else if (Array.isArray(to) && toType === styleValueTypes.px) {
+                else if (Array.isArray(to) && toType === px) {
                     target[key] = to.map(parseFloat);
                 }
             }
@@ -5377,7 +5751,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.7.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5494,7 +5868,7 @@ class VisualElement {
             this.triggerBuild();
             this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
         };
-        this.scheduleRender = () => sync__default["default"].render(this.render, false, true);
+        this.scheduleRender = () => sync.render(this.render, false, true);
         const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
@@ -5568,8 +5942,8 @@ class VisualElement {
     unmount() {
         var _a, _b, _c;
         (_a = this.projection) === null || _a === void 0 ? void 0 : _a.unmount();
-        sync.cancelSync.update(this.notifyUpdate);
-        sync.cancelSync.render(this.render);
+        cancelSync.update(this.notifyUpdate);
+        cancelSync.render(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
         (_b = this.removeFromVariantTree) === null || _b === void 0 ? void 0 : _b.call(this);
         (_c = this.parent) === null || _c === void 0 ? void 0 : _c.children.delete(this);
@@ -5583,7 +5957,7 @@ class VisualElement {
         const removeOnChange = value.onChange((latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
-                sync__default["default"].update(this.notifyUpdate, false, true);
+                sync.update(this.notifyUpdate, false, true);
             if (valueIsTransform && this.projection) {
                 this.projection.isTransformDirty = true;
             }
@@ -6004,7 +6378,7 @@ const correctBorderRadius = {
          * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
          */
         if (typeof latest === "string") {
-            if (styleValueTypes.px.test(latest)) {
+            if (px.test(latest)) {
                 latest = parseFloat(latest);
             }
             else {
@@ -6036,11 +6410,11 @@ const correctBoxShadow = {
                 return varToken;
             });
         }
-        const shadow = styleValueTypes.complex.parse(latest);
+        const shadow = complex.parse(latest);
         // TODO: Doesn't support multiple shadows
         if (shadow.length > 5)
             return original;
-        const template = styleValueTypes.complex.createTransformer(latest);
+        const template = complex.createTransformer(latest);
         const offset = typeof shadow[0] !== "number" ? 1 : 0;
         // Calculate the overall context scale
         const xScale = projectionDelta.x.scale * treeScale.x;
@@ -6131,7 +6505,7 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
                  * it's in charge of the exit animation and therefore should
                  * be in charge of the safe to remove. Otherwise we call it here.
                  */
-                sync__default["default"].postRender(() => {
+                sync.postRender(() => {
                     var _a;
                     if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
                         this.safeToRemove();
@@ -6234,7 +6608,7 @@ function animate(from, to, transition = {}) {
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;
 const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
-const isPx = (value) => typeof value === "number" || styleValueTypes.px.test(value);
+const isPx = (value) => typeof value === "number" || px.test(value);
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -6263,7 +6637,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             isPx(followRadius) === isPx(leadRadius);
         if (canMix) {
             target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
-            if (styleValueTypes.percent.test(leadRadius) || styleValueTypes.percent.test(followRadius)) {
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
                 target[borderLabel] += "%";
             }
         }
@@ -6352,7 +6726,7 @@ function removePointDelta(point, translate, scale, originPoint, boxScale) {
  * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
  */
 function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
-    if (styleValueTypes.percent.test(translate)) {
+    if (percent.test(translate)) {
         translate = parseFloat(translate);
         const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
         translate = relativeProgress - sourceAxis.min;
@@ -6819,7 +7193,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.remove(this);
             (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
             this.instance = undefined;
-            sync.cancelSync.preRender(this.updateProjection);
+            cancelSync.preRender(this.updateProjection);
         }
         // only on the root
         blockUpdate() {
@@ -6910,16 +7284,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.nodes.forEach(notifyLayoutUpdate);
             this.clearAllSnapshots();
             // Flush any scheduled updates
-            sync.flushSync.update();
-            sync.flushSync.preRender();
-            sync.flushSync.render();
+            flushSync.update();
+            flushSync.preRender();
+            flushSync.render();
         }
         clearAllSnapshots() {
             this.nodes.forEach(clearSnapshot);
             this.sharedNodes.forEach(removeLeadSnapshots);
         }
         scheduleUpdateProjection() {
-            sync__default["default"].preRender(this.updateProjection, false, true);
+            sync.preRender(this.updateProjection, false, true);
         }
         scheduleCheckAfterUnmount() {
             /**
@@ -6927,7 +7301,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * we manually call didUpdate to give a chance to the siblings to animate.
              * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
              */
-            sync__default["default"].postRender(() => {
+            sync.postRender(() => {
                 if (this.isLayoutDirty) {
                     this.root.didUpdate();
                 }
@@ -7391,7 +7765,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
             }
             if (this.pendingAnimation) {
-                sync.cancelSync.update(this.pendingAnimation);
+                cancelSync.update(this.pendingAnimation);
                 this.pendingAnimation = undefined;
             }
             /**
@@ -7399,7 +7773,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * where the target is the same as when the animation started, so we can
              * calculate the relative positions correctly for instant transitions.
              */
-            this.pendingAnimation = sync__default["default"].update(() => {
+            this.pendingAnimation = sync.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
                 this.currentAnimation = animate(0, animationTarget, {
                     ...options,
@@ -7953,7 +8327,7 @@ function useForceUpdate() {
      * Defer this to the end of the next animation frame in case there are multiple
      * synchronous calls.
      */
-    const deferredForceRender = React.useCallback(() => sync__default["default"].postRender(forceRender), [forceRender]);
+    const deferredForceRender = React.useCallback(() => sync.postRender(forceRender), [forceRender]);
     return [deferredForceRender, forcedRenderCount];
 }
 
@@ -8533,7 +8907,7 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, () => sync__default["default"].update(updateValue, false, true), () => sync.cancelSync.update(updateValue));
+    useMultiOnChange(values, () => sync.update(updateValue, false, true), () => cancelSync.update(updateValue));
     return value;
 }
 
@@ -8771,8 +9145,8 @@ function useAnimationFrame(callback) {
                 initialTimestamp.current = timestamp;
             callback(timestamp - initialTimestamp.current, delta);
         };
-        sync__default["default"].update(provideTimeSinceStart, true);
-        return () => sync.cancelSync.update(provideTimeSinceStart);
+        sync.update(provideTimeSinceStart, true);
+        return () => cancelSync.update(provideTimeSinceStart);
     }, [callback]);
 }
 
@@ -9176,7 +9550,7 @@ function useInstantTransition() {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
-        sync__default["default"].postRender(() => sync__default["default"].postRender(() => (instantAnimationState.current = false)));
+        sync.postRender(() => sync.postRender(() => (instantAnimationState.current = false)));
     }, [forcedRenderCount]);
     return (callback) => {
         startInstantLayoutTransition(() => {