framer-motion 7.6.16 → 7.6.18

package/dist/cjs/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styleValueTypes = require('style-value-types');
-var popmotion = require('popmotion');
 var heyListen = require('hey-listen');
 var sync = require('framesync');
 var dom = require('@motionone/dom');
@@ -1497,6 +1496,16 @@ function useUnmountEffect(callback) {
     return React.useEffect(() => () => callback(), []);
 }
 
+/**
+ * Pipe
+ * Compose other transformers to run linearily
+ * pipe(min(20), max(40))
+ * @param  {...functions} transformers
+ * @return {function}
+ */
+const combineFunctions = (a, b) => (v) => b(a(v));
+const pipe = (...transformers) => transformers.reduce(combineFunctions);
+
 /**
  * @param handlers -
  * @internal
@@ -1543,7 +1552,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         if (isPressing.current)
             return;
         isPressing.current = true;
-        cancelPointerEndListeners.current = popmotion.pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         /**
          * Ensure we trigger animations before firing event callback
          */
@@ -1808,28 +1817,104 @@ function shallowCompare(next, prev) {
  */
 const secondsToMilliseconds = (seconds) => seconds * 1000;
 
+const noop = (any) => any;
+
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+// Accepts an easing function and returns a new one that outputs mirrored values for
+// the second half of the animation. Turns easeIn into easeInOut.
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+const easeIn = (p) => p * p;
+const easeOut = reverseEasing(easeIn);
+const easeInOut = mirrorEasing(easeIn);
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circOut);
+
+const createBackIn = (power = 1.525) => (p) => p * p * ((power + 1) * p - power);
+const backIn = createBackIn();
+const backOut = reverseEasing(backIn);
+const backInOut = mirrorEasing(backIn);
+
+const createAnticipate = (power) => {
+    const backEasing = createBackIn(power);
+    return (p) => (p *= 2) < 1
+        ? 0.5 * backEasing(p)
+        : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+};
+const anticipate = createAnticipate();
+
 const easingLookup = {
-    linear: popmotion.linear,
-    easeIn: popmotion.easeIn,
-    easeInOut: popmotion.easeInOut,
-    easeOut: popmotion.easeOut,
-    circIn: popmotion.circIn,
-    circInOut: popmotion.circInOut,
-    circOut: popmotion.circOut,
-    backIn: popmotion.backIn,
-    backInOut: popmotion.backInOut,
-    backOut: popmotion.backOut,
-    anticipate: popmotion.anticipate,
-    bounceIn: popmotion.bounceIn,
-    bounceInOut: popmotion.bounceInOut,
-    bounceOut: popmotion.bounceOut,
+    linear: noop,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
 };
 const easingDefinitionToFunction = (definition) => {
     if (Array.isArray(definition)) {
         // If cubic bezier definition, create bezier curve
         heyListen.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
         const [x1, y1, x2, y2] = definition;
-        return popmotion.cubicBezier(x1, y1, x2, y2);
+        return cubicBezier(x1, y1, x2, y2);
     }
     else if (typeof definition === "string") {
         // Else lookup from table
@@ -1886,7 +1971,7 @@ const linearTween = () => ({
     ease: "linear",
     duration: 0.3,
 });
-const keyframes = (values) => ({
+const keyframes$1 = (values) => ({
     type: "keyframes",
     duration: 0.8,
     values,
@@ -1910,7 +1995,7 @@ const defaultTransitions = {
 const getDefaultTransition = (valueKey, to) => {
     let transitionFactory;
     if (isKeyframesTarget(to)) {
-        transitionFactory = keyframes;
+        transitionFactory = keyframes$1;
     }
     else {
         transitionFactory =
@@ -1970,6 +2055,758 @@ function delay(callback, timeout) {
     return () => sync.cancelSync.read(checkElapsed);
 }
 
+const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
+/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/
+const mix = (from, to, progress) => -progress * from + progress * to + from;
+
+// Adapted from https://gist.github.com/mjackson/5311256
+function hueToRgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+function hslaToRgba({ hue, saturation, lightness, alpha }) {
+    hue /= 360;
+    saturation /= 100;
+    lightness /= 100;
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (!saturation) {
+        red = green = blue = lightness;
+    }
+    else {
+        const q = lightness < 0.5
+            ? lightness * (1 + saturation)
+            : lightness + saturation - lightness * saturation;
+        const p = 2 * lightness - q;
+        red = hueToRgb(p, q, hue + 1 / 3);
+        green = hueToRgb(p, q, hue);
+        blue = hueToRgb(p, q, hue - 1 / 3);
+    }
+    return {
+        red: Math.round(red * 255),
+        green: Math.round(green * 255),
+        blue: Math.round(blue * 255),
+        alpha,
+    };
+}
+
+// Linear color space blending
+// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+// Demonstrated http://codepen.io/osublake/pen/xGVVaN
+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 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) {
+        model = hslaToRgba(model);
+    }
+    return model;
+}
+const mixColor = (from, to) => {
+    const fromRGBA = asRGBA(from);
+    const toRGBA = asRGBA(to);
+    const blended = { ...fromRGBA };
+    return (v) => {
+        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
+        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);
+    };
+};
+
+function getMixer$1(origin, target) {
+    if (typeof origin === "number") {
+        return (v) => mix(origin, target, v);
+    }
+    else if (styleValueTypes.color.test(origin)) {
+        return mixColor(origin, target);
+    }
+    else {
+        return mixComplex(origin, target);
+    }
+}
+const mixArray = (from, to) => {
+    const output = [...from];
+    const numValues = output.length;
+    const blendValue = from.map((fromThis, i) => getMixer$1(fromThis, to[i]));
+    return (v) => {
+        for (let i = 0; i < numValues; i++) {
+            output[i] = blendValue[i](v);
+        }
+        return output;
+    };
+};
+const mixObject = (origin, target) => {
+    const output = { ...origin, ...target };
+    const blendValue = {};
+    for (const key in output) {
+        if (origin[key] !== undefined && target[key] !== undefined) {
+            blendValue[key] = getMixer$1(origin[key], target[key]);
+        }
+    }
+    return (v) => {
+        for (const key in blendValue) {
+            output[key] = blendValue[key](v);
+        }
+        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 canInterpolate = originStats.numColors === targetStats.numColors &&
+        originStats.numNumbers >= targetStats.numNumbers;
+    if (canInterpolate) {
+        return pipe(mixArray(originStats.parsed, targetStats.parsed), 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.`);
+        return (p) => `${p > 0 ? target : origin}`;
+    }
+};
+
+/*
+  Progress within given range
+
+  Given a lower limit and an upper limit, we return the progress
+  (expressed as a number 0-1) represented by the given value, and
+  limit that progress to within 0-1.
+
+  @param [number]: Lower limit
+  @param [number]: Upper limit
+  @param [number]: Value to find progress within given range
+  @return [number]: Progress of value within range as expressed 0-1
+*/
+const progress = (from, to, value) => {
+    const toFromDifference = to - from;
+    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+
+const mixNumber = (from, to) => (p) => mix(from, to, p);
+function detectMixerFactory(v) {
+    if (typeof v === "number") {
+        return mixNumber;
+    }
+    else if (typeof v === "string") {
+        if (styleValueTypes.color.test(v)) {
+            return mixColor;
+        }
+        else {
+            return mixComplex;
+        }
+    }
+    else if (Array.isArray(v)) {
+        return mixArray;
+    }
+    else if (typeof v === "object") {
+        return mixObject;
+    }
+    return mixNumber;
+}
+function createMixers(output, ease, customMixer) {
+    const mixers = [];
+    const mixerFactory = customMixer || detectMixerFactory(output[0]);
+    const numMixers = output.length - 1;
+    for (let i = 0; i < numMixers; i++) {
+        let mixer = mixerFactory(output[i], output[i + 1]);
+        if (ease) {
+            const easingFunction = Array.isArray(ease) ? ease[i] : ease;
+            mixer = pipe(easingFunction, mixer);
+        }
+        mixers.push(mixer);
+    }
+    return mixers;
+}
+/**
+ * Create a function that maps from a numerical input array to a generic output array.
+ *
+ * Accepts:
+ *   - Numbers
+ *   - Colors (hex, hsl, hsla, rgb, rgba)
+ *   - Complex (combinations of one or more numbers or strings)
+ *
+ * ```jsx
+ * const mixColor = interpolate([0, 1], ['#fff', '#000'])
+ *
+ * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
+ * ```
+ *
+ * TODO Revist this approach once we've moved to data models for values,
+ * probably not needed to pregenerate mixer functions.
+ *
+ * @public
+ */
+function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+    const inputLength = input.length;
+    heyListen.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+    heyListen.invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
+    // If input runs highest -> lowest, reverse both arrays
+    if (input[0] > input[inputLength - 1]) {
+        input = [...input].reverse();
+        output = [...output].reverse();
+    }
+    const mixers = createMixers(output, ease, mixer);
+    const numMixers = mixers.length;
+    const interpolator = (v) => {
+        let i = 0;
+        if (numMixers > 1) {
+            for (; i < input.length - 2; i++) {
+                if (v < input[i + 1])
+                    break;
+            }
+        }
+        const progressInRange = progress(input[i], input[i + 1], v);
+        return mixers[i](progressInRange);
+    };
+    return isClamp
+        ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))
+        : interpolator;
+}
+
+function defaultEasing(values, easing) {
+    return values.map(() => easing || easeInOut).splice(0, values.length - 1);
+}
+function defaultOffset(values) {
+    const numValues = values.length;
+    return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
+}
+function convertOffsetToTimes(offset, duration) {
+    return offset.map((o) => o * duration);
+}
+function keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {
+    /**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */
+    const state = { done: false, value: from };
+    /**
+     * Convert values to an array if they've been given as from/to options
+     */
+    const values = Array.isArray(to) ? to : [from, to];
+    /**
+     * Create a times array based on the provided 0-1 offsets
+     */
+    const times = convertOffsetToTimes(
+    // Only use the provided offsets if they're the correct length
+    // TODO Maybe we should warn here if there's a length mismatch
+    offset && offset.length === values.length
+        ? offset
+        : defaultOffset(values), duration);
+    function createInterpolator() {
+        return interpolate(times, values, {
+            ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
+        });
+    }
+    let interpolator = createInterpolator();
+    return {
+        next: (t) => {
+            state.value = interpolator(t);
+            state.done = t >= duration;
+            return state;
+        },
+        flipTarget: () => {
+            values.reverse();
+            interpolator = createInterpolator();
+        },
+    };
+}
+
+const safeMin = 0.001;
+const minDuration = 0.01;
+const maxDuration = 10.0;
+const minDamping = 0.05;
+const maxDamping = 1;
+function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+    let envelope;
+    let derivative;
+    heyListen.warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+    let dampingRatio = 1 - bounce;
+    /**
+     * Restrict dampingRatio and duration to within acceptable ranges.
+     */
+    dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
+    duration = clamp(minDuration, maxDuration, duration / 1000);
+    if (dampingRatio < 1) {
+        /**
+         * Underdamped spring
+         */
+        envelope = (undampedFreq) => {
+            const exponentialDecay = undampedFreq * dampingRatio;
+            const delta = exponentialDecay * duration;
+            const a = exponentialDecay - velocity;
+            const b = calcAngularFreq(undampedFreq, dampingRatio);
+            const c = Math.exp(-delta);
+            return safeMin - (a / b) * c;
+        };
+        derivative = (undampedFreq) => {
+            const exponentialDecay = undampedFreq * dampingRatio;
+            const delta = exponentialDecay * duration;
+            const d = delta * velocity + velocity;
+            const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;
+            const f = Math.exp(-delta);
+            const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);
+            const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;
+            return (factor * ((d - e) * f)) / g;
+        };
+    }
+    else {
+        /**
+         * Critically-damped spring
+         */
+        envelope = (undampedFreq) => {
+            const a = Math.exp(-undampedFreq * duration);
+            const b = (undampedFreq - velocity) * duration + 1;
+            return -safeMin + a * b;
+        };
+        derivative = (undampedFreq) => {
+            const a = Math.exp(-undampedFreq * duration);
+            const b = (velocity - undampedFreq) * (duration * duration);
+            return a * b;
+        };
+    }
+    const initialGuess = 5 / duration;
+    const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
+    duration = duration * 1000;
+    if (isNaN(undampedFreq)) {
+        return {
+            stiffness: 100,
+            damping: 10,
+            duration,
+        };
+    }
+    else {
+        const stiffness = Math.pow(undampedFreq, 2) * mass;
+        return {
+            stiffness,
+            damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
+            duration,
+        };
+    }
+}
+const rootIterations = 12;
+function approximateRoot(envelope, derivative, initialGuess) {
+    let result = initialGuess;
+    for (let i = 1; i < rootIterations; i++) {
+        result = result - envelope(result) / derivative(result);
+    }
+    return result;
+}
+function calcAngularFreq(undampedFreq, dampingRatio) {
+    return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
+}
+
+const durationKeys = ["duration", "bounce"];
+const physicsKeys = ["stiffness", "damping", "mass"];
+function isSpringType(options, keys) {
+    return keys.some((key) => options[key] !== undefined);
+}
+function getSpringOptions(options) {
+    let springOptions = {
+        velocity: 0.0,
+        stiffness: 100,
+        damping: 10,
+        mass: 1.0,
+        isResolvedFromDuration: false,
+        ...options,
+    };
+    // stiffness/damping/mass overrides duration/bounce
+    if (!isSpringType(options, physicsKeys) &&
+        isSpringType(options, durationKeys)) {
+        const derived = findSpring(options);
+        springOptions = {
+            ...springOptions,
+            ...derived,
+            velocity: 0.0,
+            mass: 1.0,
+        };
+        springOptions.isResolvedFromDuration = true;
+    }
+    return springOptions;
+}
+/**
+ * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
+ */
+function spring({ from = 0.0, to = 1.0, restSpeed = 2, restDelta = 0.01, ...options }) {
+    /**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */
+    const state = { done: false, value: from };
+    let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+    let resolveSpring = zero;
+    let resolveVelocity = zero;
+    function createSpring() {
+        const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+        const initialDelta = to - from;
+        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+        const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+        /**
+         * If we're working within what looks like a 0-1 range, change the default restDelta
+         * to 0.01
+         */
+        if (restDelta === undefined) {
+            restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
+        }
+        if (dampingRatio < 1) {
+            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            // Underdamped spring
+            resolveSpring = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                return (to -
+                    envelope *
+                        (((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) /
+                            angularFreq) *
+                            Math.sin(angularFreq * t) +
+                            initialDelta * Math.cos(angularFreq * t)));
+            };
+            resolveVelocity = (t) => {
+                // TODO Resolve these calculations with the above
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                return (dampingRatio *
+                    undampedAngularFreq *
+                    envelope *
+                    ((Math.sin(angularFreq * t) *
+                        (initialVelocity +
+                            dampingRatio *
+                                undampedAngularFreq *
+                                initialDelta)) /
+                        angularFreq +
+                        initialDelta * Math.cos(angularFreq * t)) -
+                    envelope *
+                        (Math.cos(angularFreq * t) *
+                            (initialVelocity +
+                                dampingRatio *
+                                    undampedAngularFreq *
+                                    initialDelta) -
+                            angularFreq *
+                                initialDelta *
+                                Math.sin(angularFreq * t)));
+            };
+        }
+        else if (dampingRatio === 1) {
+            // Critically damped spring
+            resolveSpring = (t) => to -
+                Math.exp(-undampedAngularFreq * t) *
+                    (initialDelta +
+                        (initialVelocity + undampedAngularFreq * initialDelta) *
+                            t);
+        }
+        else {
+            // Overdamped spring
+            const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
+            resolveSpring = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                // When performing sinh or cosh values can hit Infinity so we cap them here
+                const freqForT = Math.min(dampedAngularFreq * t, 300);
+                return (to -
+                    (envelope *
+                        ((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) *
+                            Math.sinh(freqForT) +
+                            dampedAngularFreq *
+                                initialDelta *
+                                Math.cosh(freqForT))) /
+                        dampedAngularFreq);
+            };
+        }
+    }
+    createSpring();
+    return {
+        next: (t) => {
+            const current = resolveSpring(t);
+            if (!isResolvedFromDuration) {
+                const currentVelocity = resolveVelocity(t) * 1000;
+                const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
+                const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
+                state.done =
+                    isBelowVelocityThreshold && isBelowDisplacementThreshold;
+            }
+            else {
+                state.done = t >= duration;
+            }
+            state.value = state.done ? to : current;
+            return state;
+        },
+        flipTarget: () => {
+            velocity = -velocity;
+            [from, to] = [to, from];
+            createSpring();
+        },
+    };
+}
+spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
+const zero = (_t) => 0;
+
+function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+    /**
+     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
+     * to reduce GC during animation.
+     */
+    const state = { done: false, value: from };
+    let amplitude = power * velocity;
+    const ideal = from + amplitude;
+    const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
+    /**
+     * If the target has changed we need to re-calculate the amplitude, otherwise
+     * the animation will start from the wrong position.
+     */
+    if (target !== ideal)
+        amplitude = target - from;
+    return {
+        next: (t) => {
+            const delta = -amplitude * Math.exp(-t / timeConstant);
+            state.done = !(delta > restDelta || delta < -restDelta);
+            state.value = state.done ? target : target + delta;
+            return state;
+        },
+        flipTarget: () => { },
+    };
+}
+
+const types = { decay, keyframes, spring };
+function loopElapsed(elapsed, duration, delay = 0) {
+    return elapsed - duration - delay;
+}
+function reverseElapsed(elapsed, duration = 0, delay = 0, isForwardPlayback = true) {
+    return isForwardPlayback
+        ? loopElapsed(duration + -elapsed, duration, delay)
+        : duration - (elapsed - duration) + delay;
+}
+function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
+    return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
+}
+const framesync = (update) => {
+    const passTimestamp = ({ delta }) => update(delta);
+    return {
+        start: () => sync__default["default"].update(passTimestamp, true),
+        stop: () => sync.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 }) {
+    var _a, _b;
+    let { to } = options;
+    let driverControls;
+    let repeatCount = 0;
+    let computedDuration = options
+        .duration;
+    let latest;
+    let isComplete = false;
+    let isForwardPlayback = true;
+    let interpolateFromNumber;
+    const animator = types[Array.isArray(to) ? "keyframes" : type];
+    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, from, to)) {
+        interpolateFromNumber = interpolate([0, 100], [from, to], {
+            clamp: false,
+        });
+        from = 0;
+        to = 100;
+    }
+    const animation = animator({ ...options, from, to });
+    function repeat() {
+        repeatCount++;
+        if (repeatType === "reverse") {
+            isForwardPlayback = repeatCount % 2 === 0;
+            elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
+        }
+        else {
+            elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
+            if (repeatType === "mirror")
+                animation.flipTarget();
+        }
+        isComplete = false;
+        onRepeat && onRepeat();
+    }
+    function complete() {
+        driverControls.stop();
+        onComplete && onComplete();
+    }
+    function update(delta) {
+        if (!isForwardPlayback)
+            delta = -delta;
+        elapsed += delta;
+        if (!isComplete) {
+            const state = animation.next(Math.max(0, elapsed));
+            latest = state.value;
+            if (interpolateFromNumber)
+                latest = interpolateFromNumber(latest);
+            isComplete = isForwardPlayback ? state.done : elapsed <= 0;
+        }
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
+        if (isComplete) {
+            if (repeatCount === 0)
+                computedDuration !== null && computedDuration !== void 0 ? computedDuration : (computedDuration = elapsed);
+            if (repeatCount < repeatMax) {
+                hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+            }
+            else {
+                complete();
+            }
+        }
+    }
+    function play() {
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+        driverControls = driver(update);
+        driverControls.start();
+    }
+    autoplay && play();
+    return {
+        stop: () => {
+            onStop === null || onStop === void 0 ? void 0 : onStop();
+            driverControls.stop();
+        },
+    };
+}
+
+/*
+  Convert velocity into velocity per second
+
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/
+function velocityPerSecond(velocity, frameDuration) {
+    return frameDuration ? velocity * (1000 / frameDuration) : 0;
+}
+
+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;
+    function isOutOfBounds(v) {
+        return (min !== undefined && v < min) || (max !== undefined && v > max);
+    }
+    function boundaryNearest(v) {
+        if (min === undefined)
+            return max;
+        if (max === undefined)
+            return min;
+        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
+    }
+    function startAnimation(options) {
+        currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
+        currentAnimation = animate$1({
+            ...options,
+            driver,
+            onUpdate: (v) => {
+                var _a;
+                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
+                (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
+            },
+            onComplete,
+            onStop,
+        });
+    }
+    function startSpring(options) {
+        startAnimation({
+            type: "spring",
+            stiffness: bounceStiffness,
+            damping: bounceDamping,
+            restDelta,
+            ...options,
+        });
+    }
+    if (isOutOfBounds(from)) {
+        // Start the animation with spring if outside the defined boundaries
+        startSpring({ from, velocity, to: boundaryNearest(from) });
+    }
+    else {
+        /**
+         * Or if the value is out of bounds, simulate the inertia movement
+         * with the decay animation.
+         *
+         * Pre-calculate the target so we can detect if it's out-of-bounds.
+         * If it is, we want to check per frame when to switch to a spring
+         * animation
+         */
+        let target = power * velocity + from;
+        if (typeof modifyTarget !== "undefined")
+            target = modifyTarget(target);
+        const boundary = boundaryNearest(target);
+        const heading = boundary === min ? -1 : 1;
+        let prev;
+        let current;
+        const checkBoundary = (v) => {
+            prev = current;
+            current = v;
+            velocity = velocityPerSecond(v - prev, sync.getFrameData().delta);
+            if ((heading === 1 && v > boundary) ||
+                (heading === -1 && v < boundary)) {
+                startSpring({ from: v, to: boundary, velocity });
+            }
+        };
+        startAnimation({
+            type: "decay",
+            from,
+            velocity,
+            timeConstant,
+            power,
+            restDelta,
+            modifyTarget,
+            onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
+        });
+    }
+    return {
+        stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
+    };
+}
+
 /**
  * Decide whether a transition is defined on a given Transition.
  * This filters out orchestration options and returns true
@@ -2100,8 +2937,8 @@ function getAnimation(key, value, target, transition, onComplete) {
         };
         return valueTransition.type === "inertia" ||
             valueTransition.type === "decay"
-            ? popmotion.inertia({ ...options, ...valueTransition })
-            : popmotion.animate({
+            ? inertia({ ...options, ...valueTransition })
+            : animate$1({
                 ...getPopmotionAnimationOptions(valueTransition, options, key),
                 onUpdate: (v) => {
                     options.onUpdate(v);
@@ -2257,7 +3094,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.6.16";
+        this.version = "7.6.18";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2472,7 +3309,7 @@ class MotionValue {
         // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
         return this.canTrackVelocity
             ? // These casts could be avoided if parseFloat would be typed better
-                popmotion.velocityPerSecond(parseFloat(this.current) -
+                velocityPerSecond(parseFloat(this.current) -
                     parseFloat(this.prev), this.timeDelta)
             : 0;
     }
@@ -3186,6 +4023,14 @@ const animations = {
     }),
 };
 
+const distance = (a, b) => Math.abs(a - b);
+function distance2D(a, b) {
+    // Multi-dimensional
+    const xDelta = distance(a.x, b.x);
+    const yDelta = distance(a.y, b.y);
+    return Math.sqrt(xDelta ** 2 + yDelta ** 2);
+}
+
 /**
  * @internal
  */
@@ -3215,7 +4060,7 @@ class PanSession {
             // Only start panning if the offset is larger than 3 pixels. If we make it
             // any larger than this we'll want to reset the pointer history
             // on the first update to avoid visual snapping to the cursoe.
-            const isDistancePastThreshold = popmotion.distance(info.offset, { x: 0, y: 0 }) >= 3;
+            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
@@ -3261,7 +4106,7 @@ class PanSession {
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
-        this.removeListeners = popmotion.pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
+        this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
@@ -3334,12 +4179,12 @@ function isNear(value, target = 0, maxDistance = 0.01) {
 }
 function calcAxisDelta(delta, source, target, origin = 0.5) {
     delta.origin = origin;
-    delta.originPoint = popmotion.mix(source.min, source.max, delta.origin);
+    delta.originPoint = mix(source.min, source.max, delta.origin);
     delta.scale = calcLength(target) / calcLength(source);
     if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))
         delta.scale = 1;
     delta.translate =
-        popmotion.mix(target.min, target.max, delta.origin) - delta.originPoint;
+        mix(target.min, target.max, delta.origin) - delta.originPoint;
     if (isNear(delta.translate) || isNaN(delta.translate))
         delta.translate = 0;
 }
@@ -3372,11 +4217,11 @@ function calcRelativePosition(target, layout, parent) {
 function applyConstraints(point, { min, max }, elastic) {
     if (min !== undefined && point < min) {
         // If we have a min point defined, and this is outside of that, constrain
-        point = elastic ? popmotion.mix(min, point, elastic.min) : Math.max(point, min);
+        point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
     }
     else if (max !== undefined && point > max) {
         // If we have a max point defined, and this is outside of that, constrain
-        point = elastic ? popmotion.mix(max, point, elastic.max) : Math.min(point, max);
+        point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
     }
     return point;
 }
@@ -3435,12 +4280,12 @@ function calcOrigin(source, target) {
     const sourceLength = calcLength(source);
     const targetLength = calcLength(target);
     if (targetLength > sourceLength) {
-        origin = popmotion.progress(target.min, target.max - sourceLength, source.min);
+        origin = progress(target.min, target.max - sourceLength, source.min);
     }
     else if (sourceLength > targetLength) {
-        origin = popmotion.progress(source.min, source.max - targetLength, target.min);
+        origin = progress(source.min, source.max - targetLength, target.min);
     }
-    return popmotion.clamp(0, 1, origin);
+    return clamp(0, 1, origin);
 }
 /**
  * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -3653,7 +4498,7 @@ function translateAxis(axis, distance) {
  */
 function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
     const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-    const originPoint = popmotion.mix(axis.min, axis.max, axisOrigin);
+    const originPoint = mix(axis.min, axis.max, axisOrigin);
     // Apply the axis delta to the final axis
     applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
 }
@@ -3968,7 +4813,7 @@ class VisualElementDragControls {
             const axisValue = this.getAxisMotionValue(axis);
             if (projection && projection.layout) {
                 const { min, max } = projection.layout.layoutBox[axis];
-                axisValue.set(point[axis] - popmotion.mix(min, max, 0.5));
+                axisValue.set(point[axis] - mix(min, max, 0.5));
             }
         });
     }
@@ -4024,7 +4869,7 @@ class VisualElementDragControls {
              */
             const axisValue = this.getAxisMotionValue(axis);
             const { min, max } = this.constraints[axis];
-            axisValue.set(popmotion.mix(min, max, boxProgress[axis]));
+            axisValue.set(mix(min, max, boxProgress[axis]));
         });
     }
     addListeners() {
@@ -4534,7 +5379,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.16", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.16 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.18 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5202,7 +6047,7 @@ const correctBoxShadow = {
          * We could potentially improve the outcome of this by incorporating the ratio between
          * the two scales.
          */
-        const averageScale = popmotion.mix(xScale, yScale, 0.5);
+        const averageScale = mix(xScale, yScale, 0.5);
         // Blur
         if (typeof shadow[2 + offset] === "number")
             shadow[2 + offset] /= averageScale;
@@ -5387,14 +6232,14 @@ const isPx = (value) => typeof value === "number" || styleValueTypes.px.test(val
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
-        target.opacity = popmotion.mix(0, 
+        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 = popmotion.mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
+        target.opacityExit = mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
     }
     else if (isOnlyMember) {
-        target.opacity = popmotion.mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
+        target.opacity = mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
     }
     /**
      * Mix border radius
@@ -5411,7 +6256,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             leadRadius === 0 ||
             isPx(followRadius) === isPx(leadRadius);
         if (canMix) {
-            target[borderLabel] = Math.max(popmotion.mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
             if (styleValueTypes.percent.test(leadRadius) || styleValueTypes.percent.test(followRadius)) {
                 target[borderLabel] += "%";
             }
@@ -5424,7 +6269,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix rotation
      */
     if (follow.rotate || lead.rotate) {
-        target.rotate = popmotion.mix(follow.rotate || 0, lead.rotate || 0, progress);
+        target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
     }
 }
 function getRadius(values, radiusName) {
@@ -5454,8 +6299,8 @@ function getRadius(values, radiusName) {
 //         latestLeadValues.backgroundColor as string
 //     )(p)
 // }
-const easeCrossfadeIn = compress(0, 0.5, popmotion.circOut);
-const easeCrossfadeOut = compress(0.5, 0.95, popmotion.linear);
+const easeCrossfadeIn = compress(0, 0.5, circOut);
+const easeCrossfadeOut = compress(0.5, 0.95, noop);
 function compress(min, max, easing) {
     return (p) => {
         // Could replace ifs with clamp
@@ -5463,7 +6308,7 @@ function compress(min, max, easing) {
             return 0;
         if (p > max)
             return 1;
-        return easing(popmotion.progress(min, max, p));
+        return easing(progress(min, max, p));
     };
 }
 
@@ -5503,12 +6348,12 @@ function removePointDelta(point, translate, scale, originPoint, boxScale) {
 function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
     if (styleValueTypes.percent.test(translate)) {
         translate = parseFloat(translate);
-        const relativeProgress = popmotion.mix(sourceAxis.min, sourceAxis.max, translate / 100);
+        const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
         translate = relativeProgress - sourceAxis.min;
     }
     if (typeof translate !== "number")
         return;
-    let originPoint = popmotion.mix(originAxis.min, originAxis.max, origin);
+    let originPoint = mix(originAxis.min, originAxis.max, origin);
     if (axis === originAxis)
         originPoint -= translate;
     axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
@@ -6961,14 +7806,14 @@ function removeLeadSnapshots(stack) {
     stack.removeLeadSnapshot();
 }
 function mixAxisDelta(output, delta, p) {
-    output.translate = popmotion.mix(delta.translate, 0, p);
-    output.scale = popmotion.mix(delta.scale, 1, p);
+    output.translate = mix(delta.translate, 0, p);
+    output.scale = mix(delta.scale, 1, p);
     output.origin = delta.origin;
     output.originPoint = delta.originPoint;
 }
 function mixAxis(output, from, to, p) {
-    output.min = popmotion.mix(from.min, to.min, p);
-    output.max = popmotion.mix(from.max, to.max, p);
+    output.min = mix(from.min, to.min, p);
+    output.max = mix(from.max, to.max, p);
 }
 function mixBox(output, from, to, p) {
     mixAxis(output.x, from.x, to.x, p);
@@ -7542,7 +8387,7 @@ function checkReorder(order, value, offset, velocity) {
         return order;
     const item = order[index];
     const nextLayout = nextItem.layout;
-    const nextItemCenter = popmotion.mix(nextLayout.min, nextLayout.max, 0.5);
+    const nextItemCenter = mix(nextLayout.min, nextLayout.max, 0.5);
     if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
         (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
         return moveItem(order, index, index + nextOffset);
@@ -7636,7 +8481,7 @@ function transform(...args) {
     const inputRange = args[1 + argOffset];
     const outputRange = args[2 + argOffset];
     const options = args[3 + argOffset];
-    const interpolator = popmotion.interpolate(inputRange, outputRange, {
+    const interpolator = interpolate(inputRange, outputRange, {
         mixer: getMixer(outputRange[0]),
         ...options,
     });
@@ -7645,8 +8490,10 @@ function transform(...args) {
 
 function useOnChange(value, callback) {
     useIsomorphicLayoutEffect(() => {
-        if (isMotionValue(value))
+        if (isMotionValue(value)) {
+            callback(value.get());
             return value.onChange(callback);
+        }
     }, [value, callback]);
 }
 function useMultiOnChange(values, handler, cleanup) {
@@ -7830,7 +8677,7 @@ function useSpring(source, config = {}) {
             if (activeSpringAnimation.current) {
                 activeSpringAnimation.current.stop();
             }
-            activeSpringAnimation.current = popmotion.animate({
+            activeSpringAnimation.current = animate$1({
                 from: value.get(),
                 to: v,
                 velocity: value.getVelocity(),
@@ -8131,6 +8978,11 @@ function useAnimationControls() {
 }
 const useAnimation = useAnimationControls;
 
+const wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+
 /**
  * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
  *
@@ -8163,7 +9015,7 @@ function useCycle(...items) {
     const runCycle = React.useCallback((next) => {
         index.current =
             typeof next !== "number"
-                ? popmotion.wrap(0, items.length, index.current + 1)
+                ? wrap(0, items.length, index.current + 1)
                 : next;
         setItem(items[index.current]);
     }, 
@@ -8468,10 +9320,13 @@ exports.animations = animations;
 exports.buildTransform = buildTransform;
 exports.calcLength = calcLength;
 exports.checkTargetForNewValues = checkTargetForNewValues;
+exports.clamp = clamp;
 exports.createBox = createBox;
 exports.createDomMotionComponent = createDomMotionComponent;
 exports.createMotionComponent = createMotionComponent;
 exports.delay = delay;
+exports.distance = distance;
+exports.distance2D = distance2D;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
 exports.filterProps = filterProps;
@@ -8482,8 +9337,10 @@ exports.isMotionValue = isMotionValue;
 exports.isValidMotionProp = isValidMotionProp;
 exports.m = m;
 exports.makeUseVisualState = makeUseVisualState;
+exports.mix = mix;
 exports.motion = motion;
 exports.motionValue = motionValue;
+exports.pipe = pipe;
 exports.resolveMotionValue = resolveMotionValue;
 exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
@@ -8517,4 +9374,5 @@ exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useVisualElementContext = useVisualElementContext;
 exports.useWillChange = useWillChange;
+exports.wrap = wrap;
 exports.wrapHandler = wrapHandler;