framer-motion 7.7.0 → 7.7.2

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -1,7 +1,7 @@
 import { keyframes } from './keyframes.mjs';
 import { spring } from './spring.mjs';
 import { decay } from './decay.mjs';
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../../frameloop/index.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
 
 const types = { decay, keyframes, spring };
@@ -74,8 +74,10 @@ function animate({ from, autoplay = true, driver = framesync, elapsed = 0, repea
         }
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
         if (isComplete) {
-            if (repeatCount === 0)
-                computedDuration !== null && computedDuration !== void 0 ? computedDuration : (computedDuration = elapsed);
+            if (repeatCount === 0) {
+                computedDuration =
+                    computedDuration !== undefined ? computedDuration : elapsed;
+            }
             if (repeatCount < repeatMax) {
                 hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
             }

package/dist/es/animation/legacy-popmotion/inertia.mjs

@@ -1,6 +1,6 @@
 import { animate } from './index.mjs';
-import { getFrameData } from 'framesync';
 import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
+import { frameData } from '../../frameloop/data.mjs';
 
 function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
     let currentAnimation;
@@ -60,7 +60,7 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
         const checkBoundary = (v) => {
             prev = current;
             current = v;
-            velocity = velocityPerSecond(v - prev, getFrameData().delta);
+            velocity = velocityPerSecond(v - prev, frameData.delta);
             if ((heading === 1 && v > boundary) ||
                 (heading === -1 && v < boundary)) {
                 startSpring({ from: v, to: boundary, velocity });

package/dist/es/animation/utils/is-animatable.mjs

@@ -1,4 +1,4 @@
-import { complex } from 'style-value-types';
+import { complex } from '../../value/types/complex/index.mjs';
 
 /**
  * Check if a value is animatable. Examples:

package/dist/es/animation/utils/transitions.mjs

@@ -58,9 +58,12 @@ function convertTransitionToAnimationOptions({ ease, times, ...transition }) {
  * Get the delay for a value by checking Transition with decreasing specificity.
  */
 function getDelayFromTransition(transition, key) {
-    var _a, _b;
     const valueTransition = getValueTransition(transition, key) || {};
-    return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
+    return valueTransition.delay !== undefined
+        ? valueTransition.delay
+        : transition.delay !== undefined
+            ? transition.delay
+            : 0;
 }
 function hydrateKeyframes(options) {
     if (Array.isArray(options.to) && options.to[0] === null) {

package/dist/es/frameloop/create-render-step.mjs

@@ -0,0 +1,88 @@
+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;
+}
+
+export { createRenderStep };

package/dist/es/frameloop/data.mjs

@@ -0,0 +1,6 @@
+const frameData = {
+    delta: 0,
+    timestamp: 0,
+};
+
+export { frameData };

package/dist/es/frameloop/index.mjs

@@ -0,0 +1,59 @@
+import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';
+import { createRenderStep } from './create-render-step.mjs';
+import { frameData } from './data.mjs';
+
+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);
+};
+
+export { cancelSync, flushSync, sync };

package/dist/es/frameloop/on-next-frame.mjs

@@ -0,0 +1,12 @@
+/*
+  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);
+
+export { defaultTimestep, onNextFrame };

package/dist/es/gestures/PanSession.mjs

@@ -1,10 +1,11 @@
 import { isMouseEvent, isTouchEvent } from './utils/event-type.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
-import sync, { getFrameData, cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
 import { addPointerEvent } from '../events/use-pointer-event.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { distance2D } from '../utils/distance.mjs';
+import { frameData } from '../frameloop/data.mjs';
 
 /**
  * @internal
@@ -39,7 +40,7 @@ class PanSession {
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
-            const { timestamp } = getFrameData();
+            const { timestamp } = frameData;
             this.history.push({ ...point, timestamp });
             const { onStart, onMove } = this.handlers;
             if (!isPanStarted) {
@@ -76,7 +77,7 @@ class PanSession {
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
-        const { timestamp } = getFrameData();
+        const { timestamp } = frameData;
         this.history = [{ ...point, timestamp }];
         const { onSessionStart } = handlers;
         onSessionStart &&

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -12,9 +12,9 @@ import { extractEventInfo } from '../../events/event-info.mjs';
 import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
 import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { percent } from 'style-value-types';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
+import { percent } from '../../value/types/numbers/units.mjs';
 
 const elementDragControls = new WeakMap();
 /**
@@ -236,11 +236,10 @@ class VisualElementDragControls {
         const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
         const constraints = this.constraints || {};
         const momentumAnimations = eachAxis((axis) => {
-            var _a;
             if (!shouldDrag(axis, drag, this.currentDirection)) {
                 return;
             }
-            let transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
+            let transition = (constraints === null || constraints === void 0 ? void 0 : constraints[axis]) || {};
             if (dragSnapToOrigin)
                 transition = { min: 0, max: 0 };
             /**
@@ -284,12 +283,12 @@ class VisualElementDragControls {
      * - Otherwise, we apply the delta to the x/y motion values.
      */
     getAxisMotionValue(axis) {
-        var _a, _b;
+        var _a;
         const dragKey = "_drag" + axis.toUpperCase();
         const externalMotionValue = this.visualElement.getProps()[dragKey];
         return externalMotionValue
             ? externalMotionValue
-            : this.visualElement.getValue(axis, (_b = (_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) !== null && _b !== void 0 ? _b : 0);
+            : this.visualElement.getValue(axis, ((_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) || 0);
     }
     snapToCursor(point) {
         eachAxis((axis) => {

package/dist/es/gestures/drag/utils/constraints.mjs

@@ -117,10 +117,9 @@ function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
     };
 }
 function resolvePointElastic(dragElastic, label) {
-    var _a;
     return typeof dragElastic === "number"
         ? dragElastic
-        : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0;
+        : dragElastic[label] || 0;
 }
 
 export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../../../frameloop/index.mjs';
 import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';

package/dist/es/projection/animation/mix-values.mjs

@@ -1,24 +1,22 @@
-import { percent, px } from 'style-value-types';
 import { circOut } from '../../easing/circ.mjs';
 import { progress } from '../../utils/progress.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { noop } from '../../utils/noop.mjs';
+import { percent, px } from '../../value/types/numbers/units.mjs';
 
 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" || px.test(value);
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
-    var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
         target.opacity = mix(0, 
-        // (follow?.opacity as number) ?? 0,
         // TODO Reinstate this if only child
-        (_a = lead.opacity) !== null && _a !== void 0 ? _a : 1, easeCrossfadeIn(progress));
-        target.opacityExit = mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
+        lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
+        target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
     }
     else if (isOnlyMember) {
-        target.opacity = mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
+        target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
     }
     /**
      * Mix border radius
@@ -52,8 +50,9 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
     }
 }
 function getRadius(values, radiusName) {
-    var _a;
-    return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius;
+    return values[radiusName] !== undefined
+        ? values[radiusName]
+        : values.borderRadius;
 }
 // /**
 //  * We only want to mix the background color if there's a follow element

package/dist/es/projection/geometry/delta-remove.mjs

@@ -1,5 +1,5 @@
-import { percent } from 'style-value-types';
 import { mix } from '../../utils/mix.mjs';
+import { percent } from '../../value/types/numbers/units.mjs';
 import { scalePoint } from './delta-apply.mjs';
 
 /**

package/dist/es/projection/node/create-projection-node.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync, flushSync } from 'framesync';
+import { cancelSync, flushSync, sync } from '../../frameloop/index.mjs';
 import { animate } from '../../animation/animate.mjs';
 import { SubscriptionManager } from '../../utils/subscription-manager.mjs';
 import { mixValues } from '../animation/mix-values.mjs';

package/dist/es/projection/styles/scale-border-radius.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../value/types/numbers/units.mjs';
 
 function pixelsToPercent(pixels, axis) {
     if (axis.max === axis.min)

package/dist/es/projection/styles/scale-box-shadow.mjs

@@ -1,6 +1,6 @@
-import { complex } from 'style-value-types';
 import { cssVariableRegex } from '../../render/dom/utils/css-variables-conversion.mjs';
 import { mix } from '../../utils/mix.mjs';
+import { complex } from '../../value/types/complex/index.mjs';
 
 const varToken = "_$css";
 const correctBoxShadow = {

package/dist/es/render/VisualElement.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { invariant } from 'hey-listen';
 import { createElement } from 'react';
 import { featureDefinitions } from '../motion/features/definitions.mjs';

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,9 +1,10 @@
-import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
 import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
 import { isBrowser } from '../../../utils/is-browser.mjs';
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 const positionalKeys = new Set([
     "width",

package/dist/es/render/dom/value-types/animatable-none.mjs

@@ -1,4 +1,5 @@
-import { filter, complex } from 'style-value-types';
+import { complex } from '../../../value/types/complex/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
 import { getDefaultValueType } from './defaults.mjs';
 
 function getAnimatableNone(key, value) {

package/dist/es/render/dom/value-types/defaults.mjs

@@ -1,4 +1,5 @@
-import { color, filter } from 'style-value-types';
+import { color } from '../../../value/types/color/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
 import { numberValueTypes } from './number.mjs';
 
 /**

package/dist/es/render/dom/value-types/dimensions.mjs

@@ -1,4 +1,5 @@
-import { number, px, percent, degrees, vw, vh } from 'style-value-types';
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';
 import { testValueType } from './test.mjs';
 import { auto } from './type-auto.mjs';
 

package/dist/es/render/dom/value-types/find.mjs

@@ -1,4 +1,5 @@
-import { color, complex } from 'style-value-types';
+import { color } from '../../../value/types/color/index.mjs';
+import { complex } from '../../../value/types/complex/index.mjs';
 import { dimensionValueTypes } from './dimensions.mjs';
 import { testValueType } from './test.mjs';
 

package/dist/es/render/dom/value-types/number.mjs

@@ -1,4 +1,5 @@
-import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';
+import { scale, alpha } from '../../../value/types/numbers/index.mjs';
+import { px, degrees, progressPercentage } from '../../../value/types/numbers/units.mjs';
 import { int } from './type-int.mjs';
 
 const numberValueTypes = {

package/dist/es/render/dom/value-types/type-int.mjs

@@ -1,4 +1,4 @@
-import { number } from 'style-value-types';
+import { number } from '../../../value/types/numbers/index.mjs';
 
 const int = {
     ...number,

package/dist/es/render/svg/utils/path.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 const dashKeys = {
     offset: "stroke-dashoffset",

package/dist/es/render/svg/utils/transform-origin.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 function calcOrigin(origin, offset, size) {
     return typeof origin === "string"

package/dist/es/render/utils/animation-state.mjs

@@ -54,7 +54,6 @@ function createAnimationState(visualElement) {
      *    what to animate those to.
      */
     function animateChanges(options, changedActiveType) {
-        var _a;
         const props = visualElement.getProps();
         const context = visualElement.getVariantContext(true) || {};
         /**
@@ -87,7 +86,7 @@ function createAnimationState(visualElement) {
         for (let i = 0; i < numAnimationTypes; i++) {
             const type = reversePriorityOrder[i];
             const typeState = state[type];
-            const prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
+            const prop = props[type] !== undefined ? props[type] : context[type];
             const propIsVariant = isVariantLabel(prop);
             /**
              * If this type has *just* changed isActive status, set activeDelta

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

@@ -22,7 +22,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.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/render/utils/setters.mjs

@@ -1,8 +1,8 @@
-import { complex } from 'style-value-types';
 import { isNumericalString } from '../../utils/is-numerical-string.mjs';
 import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
 import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 import { motionValue } from '../../value/index.mjs';
+import { complex } from '../../value/types/complex/index.mjs';
 import { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';
 import { findValueType } from '../dom/value-types/find.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';

package/dist/es/utils/delay.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 
 function delay(callback, timeout) {
     const start = performance.now();

package/dist/es/utils/interpolate.mjs

@@ -1,5 +1,5 @@
 import { invariant } from 'hey-listen';
-import { color } from 'style-value-types';
+import { color } from '../value/types/color/index.mjs';
 import { clamp } from './clamp.mjs';
 import { mix } from './mix.mjs';
 import { mixColor } from './mix-color.mjs';

package/dist/es/utils/mix-color.mjs

@@ -1,7 +1,9 @@
 import { mix } from './mix.mjs';
-import { rgba, hsla, hex } from 'style-value-types';
 import { invariant } from 'hey-listen';
 import { hslaToRgba } from './hsla-to-rgba.mjs';
+import { hex } from '../value/types/color/hex.mjs';
+import { rgba } from '../value/types/color/rgba.mjs';
+import { hsla } from '../value/types/color/hsla.mjs';
 
 // Linear color space blending
 // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
@@ -17,6 +19,7 @@ function asRGBA(color) {
     invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
     let model = type.parse(color);
     if (type === hsla) {
+        // TODO Remove this cast - needed since Framer Motion's stricter typing
         model = hslaToRgba(model);
     }
     return model;

package/dist/es/utils/mix-complex.mjs

@@ -1,8 +1,9 @@
-import { complex, color } from 'style-value-types';
 import { mix } from './mix.mjs';
 import { mixColor } from './mix-color.mjs';
 import { pipe } from './pipe.mjs';
 import { warning } from 'hey-listen';
+import { color } from '../value/types/color/index.mjs';
+import { complex, analyseComplexValue } from '../value/types/complex/index.mjs';
 
 function getMixer(origin, target) {
     if (typeof origin === "number") {
@@ -41,34 +42,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 = complex.parse(value);
-    const numValues = parsed.length;
-    let numNumbers = 0;
-    let numColors = 0;
-    for (let i = 0; i < numValues; i++) {
-        // Parsed complex values return with colors first, so if we've seen any number
-        // we're already past that part of the array and don't need to continue running typeof
-        if (numNumbers || typeof parsed[i] === "number") {
-            numNumbers++;
-        }
-        else {
-            numColors++;
-        }
-    }
-    return { parsed, numNumbers, numColors };
-}
 const mixComplex = (origin, target) => {
     const template = complex.createTransformer(target);
-    const originStats = analyse(origin);
-    const targetStats = analyse(target);
+    const originStats = analyseComplexValue(origin);
+    const targetStats = analyseComplexValue(target);
     const canInterpolate = originStats.numColors === targetStats.numColors &&
         originStats.numNumbers >= targetStats.numNumbers;
     if (canInterpolate) {
-        return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+        return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
         warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);

package/dist/es/utils/use-animation-frame.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 

package/dist/es/utils/use-force-update.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../frameloop/index.mjs';
 import { useState, useCallback } from 'react';
 import { useIsMounted } from './use-is-mounted.mjs';
 

package/dist/es/utils/use-instant-transition.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../frameloop/index.mjs';
 import { useEffect } from 'react';
 import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
 import { useForceUpdate } from './use-force-update.mjs';