framer-motion 10.1.0-alpha.3 → 10.1.0

package/dist/cjs/index.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-e6a894d7.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -459,20 +458,49 @@ function addScaleCorrector(correctors) {
     Object.assign(scaleCorrectors, correctors);
 }
 
+/**
+ * Generate a list of every possible transform key.
+ */
+const transformPropOrder = [
+    "transformPerspective",
+    "x",
+    "y",
+    "z",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "skew",
+    "skewX",
+    "skewY",
+];
+/**
+ * A quick lookup for transform props.
+ */
+const transformProps = new Set(transformPropOrder);
+
 function isForcedMotionValue(key, { layout, layoutId }) {
-    return (wrap.transformProps.has(key) ||
+    return (transformProps.has(key) ||
         key.startsWith("origin") ||
         ((layout || layoutId !== undefined) &&
             (!!scaleCorrectors[key] || key === "opacity")));
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 const translateAlias = {
     x: "translateX",
     y: "translateY",
     z: "translateZ",
     transformPerspective: "perspective",
 };
-const numTransforms = wrap.transformPropOrder.length;
+const numTransforms = transformPropOrder.length;
 /**
  * Build a CSS transform style from individual x/y/scale etc properties.
  *
@@ -487,7 +515,7 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra
      * are present to the transform string.
      */
     for (let i = 0; i < numTransforms; i++) {
-        const key = wrap.transformPropOrder[i];
+        const key = transformPropOrder[i];
         if (transform[key] !== undefined) {
             const transformName = translateAlias[key] || key;
             transformString += `${transformName}(${transform[key]}) `;
@@ -521,6 +549,124 @@ 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]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3,8}|(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 = {
+    ...number,
+    transform: Math.round,
+};
+
+const numberValueTypes = {
+    // Border props
+    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: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    size: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Transform props
+    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: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+};
+
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     const { style, vars, transform, transformOrigin } = state;
     // Track whether we encounter any transform or transformOrigin values.
@@ -544,9 +690,9 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             continue;
         }
         // Convert the value to its default value type, ie 0 -> "0px"
-        const valueType = wrap.numberValueTypes[key];
+        const valueType = numberValueTypes[key];
         const valueAsType = getValueAsType(value, valueType);
-        if (wrap.transformProps.has(key)) {
+        if (transformProps.has(key)) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;
             transform[key] = valueAsType;
@@ -597,7 +743,7 @@ const createHtmlRenderState = () => ({
 
 function copyRawValuesOnly(target, source, props) {
     for (const key in source) {
-        if (!wrap.isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
             target[key] = source[key];
         }
     }
@@ -760,7 +906,7 @@ function filterProps(props, isDom, forwardMotionProps) {
 function calcOrigin$1(origin, offset, size) {
     return typeof origin === "string"
         ? origin
-        : wrap.px.transform(offset + size * origin);
+        : px.transform(offset + size * origin);
 }
 /**
  * The SVG transform origin defaults are different to CSS and is less intuitive,
@@ -794,10 +940,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] = wrap.px.transform(-offset);
+    attrs[keys.offset] = px.transform(-offset);
     // Build the dash array
-    const pathLength = wrap.px.transform(length);
-    const pathSpacing = wrap.px.transform(spacing);
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
@@ -888,7 +1034,7 @@ function createUseRender(forwardMotionProps = false) {
          * will be handled by the onChange handler
          */
         const { children } = props;
-        const renderedChildren = React.useMemo(() => (wrap.isMotionValue(children) ? children.get() : children), [children]);
+        const renderedChildren = React.useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);
         if (projectionId) {
             elementProps["data-projection-id"] = projectionId;
         }
@@ -953,8 +1099,8 @@ function scrapeMotionValuesFromProps$1(props, prevProps) {
     const { style } = props;
     const newValues = {};
     for (const key in style) {
-        if (wrap.isMotionValue(style[key]) ||
-            (prevProps.style && wrap.isMotionValue(prevProps.style[key])) ||
+        if (isMotionValue(style[key]) ||
+            (prevProps.style && isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props)) {
             newValues[key] = style[key];
         }
@@ -965,7 +1111,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps) {
 function scrapeMotionValuesFromProps(props, prevProps) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps);
     for (const key in props) {
-        if (wrap.isMotionValue(props[key]) || wrap.isMotionValue(prevProps[key])) {
+        if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
             const targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
             newValues[targetKey] = props[key];
         }
@@ -1016,7 +1162,7 @@ const resolveFinalValueInKeyframes = (v) => {
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    const unwrappedValue = wrap.isMotionValue(value) ? value.get() : value;
+    const unwrappedValue = isMotionValue(value) ? value.get() : value;
     return isCustomValue(unwrappedValue)
         ? unwrappedValue.toValue()
         : unwrappedValue;
@@ -1178,6 +1324,16 @@ function addPointerEvent(target, eventName, handler, options) {
     return addDomEvent(target, eventName, addPointerInfo(handler), options);
 }
 
+/**
+ * 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);
+
 function createLock(name) {
     let lock = null;
     return () => {
@@ -1238,6 +1394,163 @@ class Feature {
     update() { }
 }
 
+/*
+  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$1 = 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), 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 addHoverEvent(node, isActive) {
     const eventName = "pointer" + (isActive ? "enter" : "leave");
     const callbackName = "onHover" + (isActive ? "Start" : "End");
@@ -1249,7 +1562,7 @@ function addHoverEvent(node, isActive) {
             node.animationState.setActive("whileHover", isActive);
         }
         if (props[callbackName]) {
-            props[callbackName](event, info);
+            sync.update(() => props[callbackName](event, info));
         }
     };
     return addPointerEvent(node.current, eventName, handleEvent, {
@@ -1258,7 +1571,7 @@ function addHoverEvent(node, isActive) {
 }
 class HoverGesture extends Feature {
     mount() {
-        this.unmount = wrap.pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
+        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
     }
     unmount() { }
 }
@@ -1294,7 +1607,7 @@ class FocusGesture extends Feature {
         this.isActive = false;
     }
     mount() {
-        this.unmount = wrap.pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
+        this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
     }
     unmount() { }
 }
@@ -1318,6 +1631,8 @@ const isNodeOrChild = (parent, child) => {
     }
 };
 
+const noop = (any) => any;
+
 function fireSyntheticPointerEvent(name, handler) {
     if (!handler)
         return;
@@ -1327,9 +1642,9 @@ function fireSyntheticPointerEvent(name, handler) {
 class PressGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removeStartListeners = wrap.noop;
-        this.removeEndListeners = wrap.noop;
-        this.removeAccessibleListeners = wrap.noop;
+        this.removeStartListeners = noop;
+        this.removeEndListeners = noop;
+        this.removeAccessibleListeners = noop;
         this.startPointerPress = (startEvent, startInfo) => {
             this.removeEndListeners();
             if (this.isPressing)
@@ -1339,17 +1654,19 @@ class PressGesture extends Feature {
                 if (!this.checkPressEnd())
                     return;
                 const { onTap, onTapCancel } = this.node.getProps();
-                /**
-                 * We only count this as a tap gesture if the event.target is the same
-                 * as, or a child of, this component's element
-                 */
-                !isNodeOrChild(this.node.current, endEvent.target)
-                    ? onTapCancel && onTapCancel(endEvent, endInfo)
-                    : onTap && onTap(endEvent, endInfo);
+                sync.update(() => {
+                    /**
+                     * We only count this as a tap gesture if the event.target is the same
+                     * as, or a child of, this component's element
+                     */
+                    !isNodeOrChild(this.node.current, endEvent.target)
+                        ? onTapCancel && onTapCancel(endEvent, endInfo)
+                        : onTap && onTap(endEvent, endInfo);
+                });
             };
             const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
             const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
-            this.removeEndListeners = wrap.pipe(removePointerUpListener, removePointerCancelListener);
+            this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
             this.startPress(startEvent, startInfo);
         };
         this.startAccessiblePress = () => {
@@ -1359,7 +1676,12 @@ class PressGesture extends Feature {
                 const handleKeyup = (keyupEvent) => {
                     if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
                         return;
-                    fireSyntheticPointerEvent("up", this.node.getProps().onTap);
+                    fireSyntheticPointerEvent("up", (event, info) => {
+                        const { onTap } = this.node.getProps();
+                        if (onTap) {
+                            sync.update(() => onTap(event, info));
+                        }
+                    });
                 };
                 this.removeEndListeners();
                 this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
@@ -1374,7 +1696,7 @@ class PressGesture extends Feature {
                 fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
             };
             const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
-            this.removeAccessibleListeners = wrap.pipe(removeKeydownListener, removeBlurListener);
+            this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
         };
     }
     startPress(event, info) {
@@ -1386,7 +1708,9 @@ class PressGesture extends Feature {
         if (whileTap && this.node.animationState) {
             this.node.animationState.setActive("whileTap", true);
         }
-        onTapStart && onTapStart(event, info);
+        if (onTapStart) {
+            sync.update(() => onTapStart(event, info));
+        }
     }
     checkPressEnd() {
         this.removeEndListeners();
@@ -1401,13 +1725,15 @@ class PressGesture extends Feature {
         if (!this.checkPressEnd())
             return;
         const { onTapCancel } = this.node.getProps();
-        onTapCancel && onTapCancel(event, info);
+        if (onTapCancel) {
+            sync.update(() => onTapCancel(event, info));
+        }
     }
     mount() {
         const props = this.node.getProps();
         const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) });
         const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
-        this.removeStartListeners = wrap.pipe(removePointerListener, removeFocusListener);
+        this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
     }
     unmount() {
         this.removeStartListeners();
@@ -1570,178 +1896,2165 @@ const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
  */
 const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
 
-/**
- * Tests a provided value against a ValueType
- */
-const testValueType = (v) => (type) => type.test(v);
-
-/**
- * ValueType for "auto"
- */
-const auto = {
-    test: (v) => v === "auto",
-    parse: (v) => v,
-};
+function addUniqueItem(arr, item) {
+    if (arr.indexOf(item) === -1)
+        arr.push(item);
+}
+function removeItem(arr, item) {
+    const index = arr.indexOf(item);
+    if (index > -1)
+        arr.splice(index, 1);
+}
+// Adapted from array-move
+function moveItem([...arr], fromIndex, toIndex) {
+    const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+    if (startIndex >= 0 && startIndex < arr.length) {
+        const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+        const [item] = arr.splice(fromIndex, 1);
+        arr.splice(endIndex, 0, item);
+    }
+    return arr;
+}
 
-/**
- * A list of value types commonly used for dimensions
- */
-const dimensionValueTypes = [wrap.number, wrap.px, wrap.percent, wrap.degrees, wrap.vw, wrap.vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+class SubscriptionManager {
+    constructor() {
+        this.subscriptions = [];
+    }
+    add(handler) {
+        addUniqueItem(this.subscriptions, handler);
+        return () => removeItem(this.subscriptions, handler);
+    }
+    notify(a, b, c) {
+        const numSubscriptions = this.subscriptions.length;
+        if (!numSubscriptions)
+            return;
+        if (numSubscriptions === 1) {
+            /**
+             * If there's only a single handler we can just call it without invoking a loop.
+             */
+            this.subscriptions[0](a, b, c);
+        }
+        else {
+            for (let i = 0; i < numSubscriptions; i++) {
+                /**
+                 * Check whether the handler exists before firing as it's possible
+                 * the subscriptions were modified during this loop running.
+                 */
+                const handler = this.subscriptions[i];
+                handler && handler(a, b, c);
+            }
+        }
+    }
+    getSize() {
+        return this.subscriptions.length;
+    }
+    clear() {
+        this.subscriptions.length = 0;
+    }
+}
 
-/**
- * A list of all ValueTypes
- */
-const valueTypes = [...dimensionValueTypes, wrap.color, wrap.complex];
-/**
- * Tests a value against the list of ValueTypes
- */
-const findValueType = (v) => valueTypes.find(testValueType(v));
+/*
+  Convert velocity into velocity per second
 
-/**
- * Creates an object containing the latest state of every MotionValue on a VisualElement
- */
-function getCurrent(visualElement) {
-    const current = {};
-    visualElement.values.forEach((value, key) => (current[key] = value.get()));
-    return current;
-}
-/**
- * Creates an object containing the latest velocity of every MotionValue on a VisualElement
- */
-function getVelocity$1(visualElement) {
-    const velocity = {};
-    visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
-    return velocity;
+  @param [number]: Unit per frame
+  @param [number]: Frame duration in ms
+*/
+function velocityPerSecond(velocity, frameDuration) {
+    return frameDuration ? velocity * (1000 / frameDuration) : 0;
 }
-function resolveVariant(visualElement, definition, custom) {
-    const props = visualElement.getProps();
-    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+
+const warned = new Set();
+function warnOnce(condition, message, element) {
+    if (condition || warned.has(message))
+        return;
+    console.warn(message);
+    if (element)
+        console.warn(element);
+    warned.add(message);
 }
 
+const isFloat = (value) => {
+    return !isNaN(parseFloat(value));
+};
 /**
- * Set VisualElement's MotionValue, creating a new MotionValue for it if
- * it doesn't exist.
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
  */
-function setMotionValue(visualElement, key, value) {
-    if (visualElement.hasValue(key)) {
-        visualElement.getValue(key).set(value);
-    }
-    else {
-        visualElement.addValue(key, wrap.motionValue(value));
+class MotionValue {
+    /**
+     * @param init - The initiating value
+     * @param config - Optional configuration options
+     *
+     * -  `transformer`: A function to transform incoming values with.
+     *
+     * @internal
+     */
+    constructor(init, options = {}) {
+        /**
+         * 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 = "10.1.0";
+        /**
+         * Duration, in milliseconds, since last updating frame.
+         *
+         * @internal
+         */
+        this.timeDelta = 0;
+        /**
+         * Timestamp of the last time this `MotionValue` was updated.
+         *
+         * @internal
+         */
+        this.lastUpdated = 0;
+        /**
+         * Tracks whether this value can output a velocity. Currently this is only true
+         * if the value is numerical, but we might be able to widen the scope here and support
+         * other value types.
+         *
+         * @internal
+         */
+        this.canTrackVelocity = false;
+        /**
+         * An object containing a SubscriptionManager for each active event.
+         */
+        this.events = {};
+        this.updateAndNotify = (v, render = true) => {
+            this.prev = this.current;
+            this.current = v;
+            // Update timestamp
+            const { delta, timestamp } = frameData;
+            if (this.lastUpdated !== timestamp) {
+                this.timeDelta = delta;
+                this.lastUpdated = timestamp;
+                sync.postRender(this.scheduleVelocityCheck);
+            }
+            // Update update subscribers
+            if (this.prev !== this.current && this.events.change) {
+                this.events.change.notify(this.current);
+            }
+            // Update velocity subscribers
+            if (this.events.velocityChange) {
+                this.events.velocityChange.notify(this.getVelocity());
+            }
+            // Update render subscribers
+            if (render && this.events.renderRequest) {
+                this.events.renderRequest.notify(this.current);
+            }
+        };
+        /**
+         * Schedule a velocity check for the next frame.
+         *
+         * This is an instanced and bound function to prevent generating a new
+         * function once per frame.
+         *
+         * @internal
+         */
+        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`.
+         *
+         * This is an instanced and bound function to prevent generating a new
+         * function once per frame.
+         *
+         * @internal
+         */
+        this.velocityCheck = ({ timestamp }) => {
+            if (timestamp !== this.lastUpdated) {
+                this.prev = this.current;
+                if (this.events.velocityChange) {
+                    this.events.velocityChange.notify(this.getVelocity());
+                }
+            }
+        };
+        this.hasAnimated = false;
+        this.prev = this.current = init;
+        this.canTrackVelocity = isFloat(this.current);
+        this.owner = options.owner;
     }
-}
-function setTarget(visualElement, definition) {
-    const resolved = resolveVariant(visualElement, definition);
-    let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
-    target = { ...target, ...transitionEnd };
-    for (const key in target) {
-        const value = resolveFinalValueInKeyframes(target[key]);
-        setMotionValue(visualElement, key, value);
+    /**
+     * Adds a function that will be notified when the `MotionValue` is updated.
+     *
+     * It returns a function that, when called, will cancel the subscription.
+     *
+     * When calling `onChange` inside a React component, it should be wrapped with the
+     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+     * from the `useEffect` function to ensure you don't add duplicate subscribers..
+     *
+     * ```jsx
+     * export const MyComponent = () => {
+     *   const x = useMotionValue(0)
+     *   const y = useMotionValue(0)
+     *   const opacity = useMotionValue(1)
+     *
+     *   useEffect(() => {
+     *     function updateOpacity() {
+     *       const maxXY = Math.max(x.get(), y.get())
+     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+     *       opacity.set(newOpacity)
+     *     }
+     *
+     *     const unsubscribeX = x.on("change", updateOpacity)
+     *     const unsubscribeY = y.on("change", updateOpacity)
+     *
+     *     return () => {
+     *       unsubscribeX()
+     *       unsubscribeY()
+     *     }
+     *   }, [])
+     *
+     *   return <motion.div style={{ x }} />
+     * }
+     * ```
+     *
+     * @param subscriber - A function that receives the latest value.
+     * @returns A function that, when called, will cancel this subscription.
+     *
+     * @deprecated
+     */
+    onChange(subscription) {
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+        }
+        return this.on("change", subscription);
     }
-}
-function setVariants(visualElement, variantLabels) {
-    const reversedLabels = [...variantLabels].reverse();
-    reversedLabels.forEach((key) => {
-        const variant = visualElement.getVariant(key);
-        variant && setTarget(visualElement, variant);
-        if (visualElement.variantChildren) {
-            visualElement.variantChildren.forEach((child) => {
-                setVariants(child, variantLabels);
-            });
+    on(eventName, callback) {
+        if (!this.events[eventName]) {
+            this.events[eventName] = new SubscriptionManager();
         }
-    });
-}
-function setValues(visualElement, definition) {
-    if (Array.isArray(definition)) {
-        return setVariants(visualElement, definition);
+        const unsubscribe = this.events[eventName].add(callback);
+        if (eventName === "change") {
+            return () => {
+                unsubscribe();
+                /**
+                 * If we have no more change listeners by the start
+                 * of the next frame, stop active animations.
+                 */
+                sync.read(() => {
+                    if (!this.events.change.getSize()) {
+                        this.stop();
+                    }
+                });
+            };
+        }
+        return unsubscribe;
     }
-    else if (typeof definition === "string") {
-        return setVariants(visualElement, [definition]);
+    clearListeners() {
+        for (const eventManagers in this.events) {
+            this.events[eventManagers].clear();
+        }
     }
-    else {
-        setTarget(visualElement, definition);
+    /**
+     * Attaches a passive effect to the `MotionValue`.
+     *
+     * @internal
+     */
+    attach(passiveEffect, stopPassiveEffect) {
+        this.passiveEffect = passiveEffect;
+        this.stopPassiveEffect = stopPassiveEffect;
     }
-}
-function checkTargetForNewValues(visualElement, target, origin) {
-    var _a, _b;
-    const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
-    const numNewValues = newValueKeys.length;
-    if (!numNewValues)
-        return;
-    for (let i = 0; i < numNewValues; i++) {
-        const key = newValueKeys[i];
-        const targetValue = target[key];
+    /**
+     * Sets the state of the `MotionValue`.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * const x = useMotionValue(0)
+     * x.set(10)
+     * ```
+     *
+     * @param latest - Latest value to set.
+     * @param render - Whether to notify render subscribers. Defaults to `true`
+     *
+     * @public
+     */
+    set(v, render = true) {
+        if (!render || !this.passiveEffect) {
+            this.updateAndNotify(v, render);
+        }
+        else {
+            this.passiveEffect(v, this.updateAndNotify);
+        }
+    }
+    setWithVelocity(prev, current, delta) {
+        this.set(current);
+        this.prev = prev;
+        this.timeDelta = delta;
+    }
+    /**
+     * Set the state of the `MotionValue`, stopping any active animations,
+     * effects, and resets velocity to `0`.
+     */
+    jump(v) {
+        this.updateAndNotify(v);
+        this.prev = v;
+        this.stop();
+        if (this.stopPassiveEffect)
+            this.stopPassiveEffect();
+    }
+    /**
+     * Returns the latest state of `MotionValue`
+     *
+     * @returns - The latest state of `MotionValue`
+     *
+     * @public
+     */
+    get() {
+        return this.current;
+    }
+    /**
+     * @public
+     */
+    getPrevious() {
+        return this.prev;
+    }
+    /**
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     *
+     * @public
+     */
+    getVelocity() {
+        // 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
+                velocityPerSecond(parseFloat(this.current) -
+                    parseFloat(this.prev), this.timeDelta)
+            : 0;
+    }
+    /**
+     * Registers a new animation to control this `MotionValue`. Only one
+     * animation can drive a `MotionValue` at one time.
+     *
+     * ```jsx
+     * value.start()
+     * ```
+     *
+     * @param animation - A function that starts the provided animation
+     *
+     * @internal
+     */
+    start(startAnimation) {
+        this.stop();
+        return new Promise((resolve) => {
+            this.hasAnimated = true;
+            this.animation = startAnimation(resolve) || null;
+            if (this.events.animationStart) {
+                this.events.animationStart.notify();
+            }
+        }).then(() => {
+            if (this.events.animationComplete) {
+                this.events.animationComplete.notify();
+            }
+            this.clearAnimation();
+        });
+    }
+    /**
+     * Stop the currently active animation.
+     *
+     * @public
+     */
+    stop() {
+        if (this.animation) {
+            this.animation.stop();
+            if (this.events.animationCancel) {
+                this.events.animationCancel.notify();
+            }
+        }
+        this.clearAnimation();
+    }
+    /**
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
+     */
+    isAnimating() {
+        return !!this.animation;
+    }
+    clearAnimation() {
+        this.animation = null;
+    }
+    /**
+     * Destroy and clean up subscribers to this `MotionValue`.
+     *
+     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+     * created a `MotionValue` via the `motionValue` function.
+     *
+     * @public
+     */
+    destroy() {
+        this.clearListeners();
+        this.stop();
+        if (this.stopPassiveEffect) {
+            this.stopPassiveEffect();
+        }
+    }
+}
+function motionValue(init, options) {
+    return new MotionValue(init, options);
+}
+
+/**
+ * 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;
+    return (isNaN(v) &&
+        isString(v) &&
+        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
+            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 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 };
+
+/**
+ * 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,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
+    // Border props
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
+};
+/**
+ * Gets the default ValueType for the provided value key
+ */
+const getDefaultValueType = (key) => defaultValueTypes[key];
+
+function getAnimatableNone(key, value) {
+    let defaultValueType = getDefaultValueType(key);
+    if (defaultValueType !== filter)
+        defaultValueType = complex;
+    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    return defaultValueType.getAnimatableNone
+        ? defaultValueType.getAnimatableNone(value)
+        : undefined;
+}
+
+/**
+ * Tests a provided value against a ValueType
+ */
+const testValueType = (v) => (type) => type.test(v);
+
+/**
+ * ValueType for "auto"
+ */
+const auto = {
+    test: (v) => v === "auto",
+    parse: (v) => v,
+};
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+
+/**
+ * A list of all ValueTypes
+ */
+const valueTypes = [...dimensionValueTypes, color, complex];
+/**
+ * Tests a value against the list of ValueTypes
+ */
+const findValueType = (v) => valueTypes.find(testValueType(v));
+
+/**
+ * Creates an object containing the latest state of every MotionValue on a VisualElement
+ */
+function getCurrent(visualElement) {
+    const current = {};
+    visualElement.values.forEach((value, key) => (current[key] = value.get()));
+    return current;
+}
+/**
+ * Creates an object containing the latest velocity of every MotionValue on a VisualElement
+ */
+function getVelocity$1(visualElement) {
+    const velocity = {};
+    visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));
+    return velocity;
+}
+function resolveVariant(visualElement, definition, custom) {
+    const props = visualElement.getProps();
+    return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+}
+
+/**
+ * Set VisualElement's MotionValue, creating a new MotionValue for it if
+ * it doesn't exist.
+ */
+function setMotionValue(visualElement, key, value) {
+    if (visualElement.hasValue(key)) {
+        visualElement.getValue(key).set(value);
+    }
+    else {
+        visualElement.addValue(key, motionValue(value));
+    }
+}
+function setTarget(visualElement, definition) {
+    const resolved = resolveVariant(visualElement, definition);
+    let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
+    target = { ...target, ...transitionEnd };
+    for (const key in target) {
+        const value = resolveFinalValueInKeyframes(target[key]);
+        setMotionValue(visualElement, key, value);
+    }
+}
+function setVariants(visualElement, variantLabels) {
+    const reversedLabels = [...variantLabels].reverse();
+    reversedLabels.forEach((key) => {
+        const variant = visualElement.getVariant(key);
+        variant && setTarget(visualElement, variant);
+        if (visualElement.variantChildren) {
+            visualElement.variantChildren.forEach((child) => {
+                setVariants(child, variantLabels);
+            });
+        }
+    });
+}
+function setValues(visualElement, definition) {
+    if (Array.isArray(definition)) {
+        return setVariants(visualElement, definition);
+    }
+    else if (typeof definition === "string") {
+        return setVariants(visualElement, [definition]);
+    }
+    else {
+        setTarget(visualElement, definition);
+    }
+}
+function checkTargetForNewValues(visualElement, target, origin) {
+    var _a, _b;
+    const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
+    const numNewValues = newValueKeys.length;
+    if (!numNewValues)
+        return;
+    for (let i = 0; i < numNewValues; i++) {
+        const key = newValueKeys[i];
+        const targetValue = target[key];
         let value = null;
         /**
-         * If the target is a series of keyframes, we can use the first value
-         * in the array. If this first value is null, we'll still need to read from the DOM.
+         * If the target is a series of keyframes, we can use the first value
+         * in the array. If this first value is null, we'll still need to read from the DOM.
+         */
+        if (Array.isArray(targetValue)) {
+            value = targetValue[0];
+        }
+        /**
+         * If the target isn't keyframes, or the first keyframe was null, we need to
+         * first check if an origin value was explicitly defined in the transition as "from",
+         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+         */
+        if (value === null) {
+            value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
+        }
+        /**
+         * If value is still undefined or null, ignore it. Preferably this would throw,
+         * but this was causing issues in Framer.
+         */
+        if (value === undefined || value === null)
+            continue;
+        if (typeof value === "string" &&
+            (isNumericalString(value) || isZeroValueString(value))) {
+            // If this is a number read as a string, ie "0" or "200", convert it to a number
+            value = parseFloat(value);
+        }
+        else if (!findValueType(value) && complex.test(targetValue)) {
+            value = getAnimatableNone(key, targetValue);
+        }
+        visualElement.addValue(key, motionValue(value, { owner: visualElement }));
+        if (origin[key] === undefined) {
+            origin[key] = value;
+        }
+        if (value !== null)
+            visualElement.setBaseTarget(key, value);
+    }
+}
+function getOriginFromTransition(key, transition) {
+    if (!transition)
+        return;
+    const valueTransition = transition[key] || transition["default"] || transition;
+    return valueTransition.from;
+}
+function getOrigin(target, transition, visualElement) {
+    const origin = {};
+    for (const key in target) {
+        const transitionOrigin = getOriginFromTransition(key, transition);
+        if (transitionOrigin !== undefined) {
+            origin[key] = transitionOrigin;
+        }
+        else {
+            const value = visualElement.getValue(key);
+            if (value) {
+                origin[key] = value.get();
+            }
+        }
+    }
+    return origin;
+}
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
+const optimizedAppearDataId = "framerAppearId";
+const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+exports.warning = noop;
+exports.invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    exports.warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    exports.invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
+/**
+ * Converts seconds to milliseconds
+ *
+ * @param seconds - Time in seconds.
+ * @return milliseconds - Converted time in milliseconds.
+ */
+const secondsToMilliseconds = (seconds) => seconds * 1000;
+
+const instantAnimationState = {
+    current: false,
+};
+
+// 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);
+
+/*
+  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 = [hex, rgba, hsla];
+const getColorType = (v) => colorTypes.find((type) => type.test(v));
+function asRGBA(color) {
+    const type = getColorType(color);
+    exports.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;
+}
+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 rgba.transform(blended);
+    };
+};
+
+function getMixer$1(origin, target) {
+    if (typeof origin === "number") {
+        return (v) => mix(origin, target, v);
+    }
+    else if (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;
+    };
+};
+const mixComplex = (origin, 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.values, targetStats.values), template);
+    }
+    else {
+        exports.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 (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;
+    exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+    exports.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 fillOffset(offset, remaining) {
+    const min = offset[offset.length - 1];
+    for (let i = 1; i <= remaining; i++) {
+        const offsetProgress = progress(0, remaining, i);
+        offset.push(mix(min, 1, offsetProgress));
+    }
+}
+
+function defaultOffset$1(arr) {
+    const offset = [0];
+    fillOffset(offset, arr.length - 1);
+    return offset;
+}
+
+function convertOffsetToTimes(offset, duration) {
+    return offset.map((o) => o * duration);
+}
+
+/*
+  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);
+}
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circOut);
+
+const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = reverseEasing(backOut);
+const backInOut = mirrorEasing(backIn);
+
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+
+const easingLookup = {
+    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
+        exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+        const [x1, y1, x2, y2] = definition;
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    else if (typeof definition === "string") {
+        // Else lookup from table
+        exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+        return easingLookup[definition];
+    }
+    return definition;
+};
+const isEasingArray = (ease) => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+
+function defaultEasing(values, easing) {
+    return values.map(() => easing || easeInOut).splice(0, values.length - 1);
+}
+function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
+    keyframeValues = [...keyframeValues];
+    /**
+     * Easing functions can be externally defined as strings. Here we convert them
+     * into actual functions.
+     */
+    const easingFunctions = isEasingArray(ease)
+        ? ease.map(easingDefinitionToFunction)
+        : easingDefinitionToFunction(ease);
+    /**
+     * 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: keyframeValues[0],
+    };
+    /**
+     * Create a times array based on the provided 0-1 offsets
+     */
+    const absoluteTimes = convertOffsetToTimes(
+    // Only use the provided offsets if they're the correct length
+    // TODO Maybe we should warn here if there's a length mismatch
+    times && times.length === keyframeValues.length
+        ? times
+        : defaultOffset$1(keyframeValues), duration);
+    function createInterpolator() {
+        return interpolate(absoluteTimes, keyframeValues, {
+            ease: Array.isArray(easingFunctions)
+                ? easingFunctions
+                : defaultEasing(keyframeValues, easingFunctions),
+        });
+    }
+    let interpolator = createInterpolator();
+    return {
+        next: (t) => {
+            state.value = interpolator(t);
+            state.done = t >= duration;
+            return state;
+        },
+        flipTarget: () => {
+            keyframeValues.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;
+    exports.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;
+}
+const velocitySampleDuration = 5;
+/**
+ * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
+ */
+function spring({ keyframes, restDelta, restSpeed, ...options }) {
+    let origin = keyframes[0];
+    let target = keyframes[keyframes.length - 1];
+    /**
+     * 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: origin };
+    const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);
+    let resolveSpring = zero;
+    let initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+    function createSpring() {
+        const initialDelta = target - origin;
+        const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;
+        /**
+         * If we're working on a granular scale, use smaller defaults for determining
+         * when the spring is finished.
+         *
+         * These defaults have been selected emprically based on what strikes a good
+         * ratio between feeling good and finishing as soon as changes are imperceptible.
+         */
+        const isGranularScale = Math.abs(initialDelta) < 5;
+        restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
+        restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+        if (dampingRatio < 1) {
+            const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+            // Underdamped spring
+            resolveSpring = (t) => {
+                const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+                return (target -
+                    envelope *
+                        (((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) /
+                            angularFreq) *
+                            Math.sin(angularFreq * t) +
+                            initialDelta * Math.cos(angularFreq * t)));
+            };
+        }
+        else if (dampingRatio === 1) {
+            // Critically damped spring
+            resolveSpring = (t) => target -
+                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 (target -
+                    (envelope *
+                        ((initialVelocity +
+                            dampingRatio * undampedAngularFreq * initialDelta) *
+                            Math.sinh(freqForT) +
+                            dampedAngularFreq *
+                                initialDelta *
+                                Math.cosh(freqForT))) /
+                        dampedAngularFreq);
+            };
+        }
+    }
+    createSpring();
+    return {
+        next: (t) => {
+            const current = resolveSpring(t);
+            if (!isResolvedFromDuration) {
+                let currentVelocity = initialVelocity;
+                if (t !== 0) {
+                    /**
+                     * We only need to calculate velocity for under-damped springs
+                     * as over- and critically-damped springs can't overshoot, so
+                     * checking only for displacement is enough.
+                     */
+                    if (dampingRatio < 1) {
+                        const prevT = Math.max(0, t - velocitySampleDuration);
+                        currentVelocity = velocityPerSecond(current - resolveSpring(prevT), t - prevT);
+                    }
+                    else {
+                        currentVelocity = 0;
+                    }
+                }
+                const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
+                const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
+                state.done =
+                    isBelowVelocityThreshold && isBelowDisplacementThreshold;
+            }
+            else {
+                state.done = t >= duration;
+            }
+            state.value = state.done ? target : current;
+            return state;
+        },
+        flipTarget: () => {
+            initialVelocity = -initialVelocity;
+            [origin, target] = [target, origin];
+            createSpring();
+        },
+    };
+}
+spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string";
+const zero = (_t) => 0;
+
+function decay({ 
+/**
+ * The decay animation dynamically calculates an end of the animation
+ * based on the initial keyframe, so we only need to define a single keyframe
+ * as default.
+ */
+keyframes = [0], velocity = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {
+    const origin = keyframes[0];
+    /**
+     * 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: origin };
+    let amplitude = power * velocity;
+    const ideal = origin + 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 - origin;
+    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: keyframes,
+    tween: 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.update(passTimestamp, true),
+        stop: () => cancelSync.update(passTimestamp),
+    };
+};
+function animateValue({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes: keyframes$1, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
+    const initialElapsed = elapsed;
+    let driverControls;
+    let repeatCount = 0;
+    let computedDuration = duration;
+    let isComplete = false;
+    let isForwardPlayback = true;
+    let interpolateFromNumber;
+    const animator = types[keyframes$1.length > 2 ? "keyframes" : type] || keyframes;
+    const origin = keyframes$1[0];
+    const target = keyframes$1[keyframes$1.length - 1];
+    let state = { done: false, value: origin };
+    /**
+     * If this value needs interpolation (ie is non-numerical), set up an interpolator.
+     * TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
+     */
+    const { needsInterpolation } = animator;
+    if (needsInterpolation && needsInterpolation(origin, target)) {
+        interpolateFromNumber = interpolate([0, 100], [origin, target], {
+            clamp: false,
+        });
+        keyframes$1 = [0, 100];
+    }
+    const animation = animator({
+        ...options,
+        duration,
+        keyframes: keyframes$1,
+    });
+    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 && driverControls.stop();
+        onComplete && onComplete();
+    }
+    function update(delta) {
+        if (!isForwardPlayback)
+            delta = -delta;
+        elapsed += delta;
+        if (!isComplete) {
+            state = animation.next(Math.max(0, elapsed));
+            if (interpolateFromNumber)
+                state.value = interpolateFromNumber(state.value);
+            isComplete = isForwardPlayback ? state.done : elapsed <= 0;
+        }
+        onUpdate && onUpdate(state.value);
+        if (isComplete) {
+            if (repeatCount === 0) {
+                computedDuration =
+                    computedDuration !== undefined ? computedDuration : elapsed;
+            }
+            if (repeatCount < repeatMax) {
+                hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
+            }
+            else {
+                complete();
+            }
+        }
+    }
+    function play() {
+        onPlay && onPlay();
+        driverControls = driver(update);
+        driverControls.start();
+    }
+    autoplay && play();
+    return {
+        stop: () => {
+            onStop && onStop();
+            driverControls && driverControls.stop();
+        },
+        /**
+         * Set the current time of the animation. This is purposefully
+         * mirroring the WAAPI animation API to make them interchanagable.
+         * Going forward this file should be ported more towards
+         * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
+         * Which behaviourally adheres to WAAPI as far as possible.
+         *
+         * WARNING: This is not safe to use for most animations. We currently
+         * only use it for handoff from WAAPI within Framer.
+         *
+         * This animation function consumes time every frame rather than being sampled for time.
+         * So the sample() method performs some headless frames to ensure
+         * repeats are handled correctly. Ideally in the future we will replace
+         * that method with this, once repeat calculations are pure.
+         */
+        set currentTime(t) {
+            elapsed = initialElapsed;
+            update(t);
+        },
+        /**
+         * animate() can't yet be sampled for time, instead it
+         * consumes time. So to sample it we have to run a low
+         * temporal-resolution version.
+         *
+         * isControlled should be set to true if sample is being run within
+         * a loop. This indicates that we're not arbitrarily sampling
+         * the animation but running it one step after another. Therefore
+         * we don't need to run a low-res version here. This is a stop-gap
+         * until a rewrite can sample for time.
+         */
+        sample: (t, isControlled = false) => {
+            elapsed = initialElapsed;
+            if (isControlled) {
+                update(t);
+                return state;
+            }
+            const sampleResolution = duration && typeof duration === "number"
+                ? Math.max(duration * 0.5, 50)
+                : 50;
+            let sampleElapsed = 0;
+            update(0);
+            while (sampleElapsed <= t) {
+                const remaining = t - sampleElapsed;
+                update(Math.min(remaining, sampleResolution));
+                sampleElapsed += sampleResolution;
+            }
+            return state;
+        },
+    };
+}
+
+function isWaapiSupportedEasing(easing) {
+    return (!easing || // Default easing
+        Array.isArray(easing) || // Bezier curve
+        (typeof easing === "string" && supportedWaapiEasing[easing]));
+}
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
+function mapEasingToNativeEasing(easing) {
+    if (!easing)
+        return undefined;
+    return Array.isArray(easing)
+        ? cubicBezierAsString(easing)
+        : supportedWaapiEasing[easing];
+}
+
+function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    return element.animate(keyframeOptions, {
+        delay,
+        duration,
+        easing: mapEasingToNativeEasing(ease),
+        fill: "both",
+        iterations: repeat + 1,
+        direction: repeatType === "reverse" ? "alternate" : "normal",
+    });
+}
+
+const featureTests = {
+    waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
+};
+const results = {};
+const supports = {};
+/**
+ * Generate features tests that cache their results.
+ */
+for (const key in featureTests) {
+    supports[key] = () => {
+        if (results[key] === undefined)
+            results[key] = featureTests[key]();
+        return results[key];
+    };
+}
+
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) {
+    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+        ? 0
+        : keyframes.length - 1;
+    return keyframes[index];
+}
+
+/**
+ * A list of values that can be hardware-accelerated.
+ */
+const acceleratedValues = new Set([
+    "opacity",
+    "clipPath",
+    "filter",
+    "transform",
+    "backgroundColor",
+]);
+/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */
+const sampleDelta = 10; //ms
+const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" ||
+    valueName === "backgroundColor" ||
+    !isWaapiSupportedEasing(options.ease);
+function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {
+    const canAccelerateAnimation = supports.waapi() &&
+        acceleratedValues.has(valueName) &&
+        !options.repeatDelay &&
+        options.repeatType !== "mirror" &&
+        options.damping !== 0;
+    if (!canAccelerateAnimation)
+        return false;
+    let { keyframes, duration = 300, elapsed = 0, ease } = options;
+    /**
+     * If this animation needs pre-generated keyframes then generate.
+     */
+    if (requiresPregeneratedKeyframes(valueName, options)) {
+        const sampleAnimation = animateValue({
+            ...options,
+            repeat: 0,
+            elapsed: 0,
+        });
+        let state = { done: false, value: keyframes[0] };
+        const pregeneratedKeyframes = [];
+        /**
+         * Bail after 20 seconds of pre-generated keyframes as it's likely
+         * we're heading for an infinite loop.
+         */
+        let t = 0;
+        while (!state.done && t < 20000) {
+            state = sampleAnimation.sample(t, true);
+            pregeneratedKeyframes.push(state.value);
+            t += sampleDelta;
+        }
+        keyframes = pregeneratedKeyframes;
+        duration = t - sampleDelta;
+        ease = "linear";
+    }
+    const animation = animateStyle(value.owner.current, valueName, keyframes, {
+        ...options,
+        delay: -elapsed,
+        duration,
+        /**
+         * This function is currently not called if ease is provided
+         * as a function so the cast is safe.
+         *
+         * However it would be possible for a future refinement to port
+         * in easing pregeneration from Motion One for browsers that
+         * support the upcoming `linear()` easing function.
+         */
+        ease: ease,
+    });
+    /**
+     * Prefer the `onfinish` prop as it's more widely supported than
+     * the `finished` promise.
+     *
+     * Here, we synchronously set the provided MotionValue to the end
+     * keyframe. If we didn't, when the WAAPI animation is finished it would
+     * be removed from the element which would then revert to its old styles.
+     */
+    animation.onfinish = () => {
+        value.set(getFinalKeyframe(keyframes, options));
+        sync.update(() => animation.cancel());
+        onComplete && onComplete();
+    };
+    /**
+     * Animation interrupt callback.
+     */
+    return {
+        get currentTime() {
+            return animation.currentTime || 0;
+        },
+        set currentTime(t) {
+            animation.currentTime = t;
+        },
+        stop: () => {
+            /**
+             * WAAPI doesn't natively have any interruption capabilities.
+             *
+             * Rather than read commited styles back out of the DOM, we can
+             * create a renderless JS animation and sample it twice to calculate
+             * its current value, "previous" value, and therefore allow
+             * Motion to calculate velocity for any subsequent animation.
+             */
+            const { currentTime } = animation;
+            if (currentTime) {
+                const sampleAnimation = animateValue({
+                    ...options,
+                    autoplay: false,
+                });
+                value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);
+            }
+            sync.update(() => animation.cancel());
+        },
+    };
+}
+
+/**
+ * Timeout defined in ms
+ */
+function delay(callback, timeout) {
+    const start = performance.now();
+    const checkElapsed = ({ timestamp }) => {
+        const elapsed = timestamp - start;
+        if (elapsed >= timeout) {
+            cancelSync.read(checkElapsed);
+            callback(elapsed - timeout);
+        }
+    };
+    sync.read(checkElapsed, true);
+    return () => cancelSync.read(checkElapsed);
+}
+
+function createInstantAnimation({ keyframes, elapsed, onUpdate, onComplete, }) {
+    const setValue = () => {
+        onUpdate && onUpdate(keyframes[keyframes.length - 1]);
+        onComplete && onComplete();
+    };
+    return elapsed ? { stop: delay(setValue, -elapsed) } : setValue();
+}
+
+function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
+    const origin = keyframes[0];
+    let currentAnimation;
+    function isOutOfBounds(v) {
+        return (min !== undefined && v < min) || (max !== undefined && v > max);
+    }
+    function findNearestBoundary(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 && currentAnimation.stop();
+        currentAnimation = animateValue({
+            keyframes: [0, 1],
+            velocity: 0,
+            ...options,
+            driver,
+            onUpdate: (v) => {
+                onUpdate && onUpdate(v);
+                options.onUpdate && options.onUpdate(v);
+            },
+            onComplete,
+            onStop,
+        });
+    }
+    function startSpring(options) {
+        startAnimation({
+            type: "spring",
+            stiffness: bounceStiffness,
+            damping: bounceDamping,
+            restDelta,
+            ...options,
+        });
+    }
+    if (isOutOfBounds(origin)) {
+        // Start the animation with spring if outside the defined boundaries
+        startSpring({
+            velocity,
+            keyframes: [origin, findNearestBoundary(origin)],
+        });
+    }
+    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 + origin;
+        if (typeof modifyTarget !== "undefined")
+            target = modifyTarget(target);
+        const boundary = findNearestBoundary(target);
+        const heading = boundary === min ? -1 : 1;
+        let prev;
+        let current;
+        const checkBoundary = (v) => {
+            prev = current;
+            current = v;
+            velocity = velocityPerSecond(v - prev, frameData.delta);
+            if ((heading === 1 && v > boundary) ||
+                (heading === -1 && v < boundary)) {
+                startSpring({ keyframes: [v, boundary], velocity });
+            }
+        };
+        startAnimation({
+            type: "decay",
+            keyframes: [origin, 0],
+            velocity,
+            timeConstant,
+            power,
+            restDelta,
+            modifyTarget,
+            onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,
+        });
+    }
+    return {
+        stop: () => currentAnimation && currentAnimation.stop(),
+    };
+}
+
+const underDampedSpring = {
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restSpeed: 10,
+};
+const criticallyDampedSpring = (target) => ({
+    type: "spring",
+    stiffness: 550,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+    restSpeed: 10,
+});
+const keyframesTransition = {
+    type: "keyframes",
+    duration: 0.8,
+};
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
+};
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
+    }
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
+    }
+    return ease;
+};
+
+/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */
+const isAnimatable = (key, value) => {
+    // If the list of keys tat might be non-animatable grows, replace with Set
+    if (key === "zIndex")
+        return false;
+    // If it's a number or a keyframes array, we can animate it. We might at some point
+    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+    // but for now lets leave it like this for performance reasons
+    if (typeof value === "number" || Array.isArray(value))
+        return true;
+    if (typeof value === "string" && // It's animatable if we have a string
+        complex.test(value) && // And it contains numbers and/or colors
+        !value.startsWith("url(") // Unless it starts with "url("
+    ) {
+        return true;
+    }
+    return false;
+};
+
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+    return !!Object.keys(transition).length;
+}
+function isZero(value) {
+    return (value === 0 ||
+        (typeof value === "string" &&
+            parseFloat(value) === 0 &&
+            value.indexOf(" ") === -1));
+}
+function getZeroUnit(potentialUnitType) {
+    return typeof potentialUnitType === "number"
+        ? 0
+        : getAnimatableNone("", potentialUnitType);
+}
+function getValueTransition(transition, key) {
+    return transition[key] || transition["default"] || transition;
+}
+
+function getKeyframes(value, valueName, target, transition) {
+    const isTargetAnimatable = isAnimatable(valueName, target);
+    let origin = transition.from !== undefined ? transition.from : value.get();
+    if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
+        origin = getAnimatableNone(valueName, target);
+    }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
+    /**
+     * If the target has been defined as a series of keyframes
+     */
+    if (Array.isArray(target)) {
+        /**
+         * Ensure an initial wildcard keyframe is hydrated by the origin.
+         * TODO: Support extra wildcard keyframes i.e [1, null, 0]
+         */
+        if (target[0] === null) {
+            target[0] = origin;
+        }
+        return target;
+    }
+    else {
+        return [origin, target];
+    }
+}
+
+const createMotionValueAnimation = (valueName, value, target, transition = {}) => {
+    return (onComplete) => {
+        const valueTransition = getValueTransition(transition, valueName) || {};
+        /**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
          */
-        if (Array.isArray(targetValue)) {
-            value = targetValue[0];
-        }
+        const delay = valueTransition.delay || transition.delay || 0;
         /**
-         * If the target isn't keyframes, or the first keyframe was null, we need to
-         * first check if an origin value was explicitly defined in the transition as "from",
-         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
          */
-        if (value === null) {
-            value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
-        }
+        let { elapsed = 0 } = transition;
+        elapsed = elapsed - secondsToMilliseconds(delay);
+        const keyframes = getKeyframes(value, valueName, target, valueTransition);
         /**
-         * If value is still undefined or null, ignore it. Preferably this would throw,
-         * but this was causing issues in Framer.
+         * Check if we're able to animate between the start and end keyframes,
+         * and throw a warning if we're attempting to animate between one that's
+         * animatable and another that isn't.
          */
-        if (value === undefined || value === null)
-            continue;
-        if (typeof value === "string" &&
-            (isNumericalString(value) || isZeroValueString(value))) {
-            // If this is a number read as a string, ie "0" or "200", convert it to a number
-            value = parseFloat(value);
+        const originKeyframe = keyframes[0];
+        const targetKeyframe = keyframes[keyframes.length - 1];
+        const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
+        const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
+        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        let options = {
+            keyframes,
+            velocity: value.getVelocity(),
+            ...valueTransition,
+            elapsed,
+            onUpdate: (v) => {
+                value.set(v);
+                valueTransition.onUpdate && valueTransition.onUpdate(v);
+            },
+            onComplete: () => {
+                onComplete();
+                valueTransition.onComplete && valueTransition.onComplete();
+            },
+        };
+        if (!isOriginAnimatable ||
+            !isTargetAnimatable ||
+            instantAnimationState.current ||
+            valueTransition.type === false) {
+            /**
+             * If we can't animate this value, or the global instant animation flag is set,
+             * or this is simply defined as an instant transition, return an instant transition.
+             */
+            return createInstantAnimation(options);
         }
-        else if (!findValueType(value) && wrap.complex.test(targetValue)) {
-            value = wrap.getAnimatableNone(key, targetValue);
+        else if (valueTransition.type === "inertia") {
+            /**
+             * If this is an inertia animation, we currently don't support pre-generating
+             * keyframes for this as such it must always run on the main thread.
+             */
+            return inertia(options);
         }
-        visualElement.addValue(key, wrap.motionValue(value, { owner: visualElement }));
-        if (origin[key] === undefined) {
-            origin[key] = value;
+        /**
+         * If there's no transition defined for this value, we can generate
+         * unqiue transition settings for this value.
+         */
+        if (!isTransitionDefined(valueTransition)) {
+            options = {
+                ...options,
+                ...getDefaultTransition(valueName, options),
+            };
         }
-        if (value !== null)
-            visualElement.setBaseTarget(key, value);
-    }
-}
-function getOriginFromTransition(key, transition) {
-    if (!transition)
-        return;
-    const valueTransition = transition[key] || transition["default"] || transition;
-    return valueTransition.from;
-}
-function getOrigin(target, transition, visualElement) {
-    const origin = {};
-    for (const key in target) {
-        const transitionOrigin = getOriginFromTransition(key, transition);
-        if (transitionOrigin !== undefined) {
-            origin[key] = transitionOrigin;
+        /**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */
+        if (options.duration) {
+            options.duration = secondsToMilliseconds(options.duration);
         }
-        else {
-            const value = visualElement.getValue(key);
-            if (value) {
-                origin[key] = value.get();
-            }
+        if (options.repeatDelay) {
+            options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
-    }
-    return origin;
-}
-
-function isWillChangeMotionValue(value) {
-    return Boolean(wrap.isMotionValue(value) && value.add);
-}
-
-const optimizedAppearDataId = "framerAppearId";
-const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+        /**
+         * Animate via WAAPI if possible.
+         */
+        if (value.owner &&
+            value.owner.current instanceof HTMLElement &&
+            !value.owner.getProps().onUpdate) {
+            const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
+            if (acceleratedAnimation)
+                return acceleratedAnimation;
+        }
+        /**
+         * If we didn't create an accelerated animation, create a JS animation
+         */
+        return animateValue(options);
+    };
+};
 
 function animateVisualElement(visualElement, definition, options = {}) {
     visualElement.notify("AnimationStart", definition);
@@ -1828,10 +4141,10 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
         if (window.HandoffAppearAnimations && !value.hasAnimated) {
             const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
             if (appearId) {
-                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, wrap.sync);
+                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, sync);
             }
         }
-        let animation = value.start(wrap.createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && wrap.transformProps.has(key)
+        let animation = value.start(createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
             ? { type: false }
             : valueTransition));
         if (isWillChangeMotionValue(willChange)) {
@@ -2259,6 +4572,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
  */
@@ -2288,11 +4609,11 @@ 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 = wrap.distance2D(info.offset, { x: 0, y: 0 }) >= 3;
+            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
-            const { timestamp } = wrap.frameData;
+            const { timestamp } = frameData;
             this.history.push({ ...point, timestamp });
             const { onStart, onMove } = this.handlers;
             if (!isPanStarted) {
@@ -2305,7 +4626,7 @@ class PanSession {
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
             // Throttle mouse move event to once per frame
-            wrap.sync.update(this.updatePoint, true);
+            sync.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
             this.end();
@@ -2328,19 +4649,19 @@ class PanSession {
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
-        const { timestamp } = wrap.frameData;
+        const { timestamp } = frameData;
         this.history = [{ ...point, timestamp }];
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
-        this.removeListeners = wrap.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;
     }
     end() {
         this.removeListeners && this.removeListeners();
-        wrap.cancelSync.update(this.updatePoint);
+        cancelSync.update(this.updatePoint);
     }
 }
 function transformPoint(info, transformPagePoint) {
@@ -2373,7 +4694,7 @@ function getVelocity(history, timeDelta) {
     while (i >= 0) {
         timestampedPoint = history[i];
         if (lastPoint.timestamp - timestampedPoint.timestamp >
-            wrap.secondsToMilliseconds(timeDelta)) {
+            secondsToMilliseconds(timeDelta)) {
             break;
         }
         i--;
@@ -2406,12 +4727,12 @@ function isNear(value, target = 0, maxDistance = 0.01) {
 }
 function calcAxisDelta(delta, source, target, origin = 0.5) {
     delta.origin = origin;
-    delta.originPoint = wrap.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 =
-        wrap.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;
 }
@@ -2444,11 +4765,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 ? wrap.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 ? wrap.mix(max, point, elastic.max) : Math.min(point, max);
+        point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
     }
     return point;
 }
@@ -2507,12 +4828,12 @@ function calcOrigin(source, target) {
     const sourceLength = calcLength(source);
     const targetLength = calcLength(target);
     if (targetLength > sourceLength) {
-        origin = wrap.progress(target.min, target.max - sourceLength, source.min);
+        origin = progress(target.min, target.max - sourceLength, source.min);
     }
     else if (sourceLength > targetLength) {
-        origin = wrap.progress(source.min, source.max - targetLength, target.min);
+        origin = progress(source.min, source.max - targetLength, target.min);
     }
-    return wrap.clamp(0, 1, origin);
+    return clamp(0, 1, origin);
 }
 /**
  * Rebase the calculated viewport constraints relative to the layout.min point.
@@ -2731,7 +5052,7 @@ function translateAxis(axis, distance) {
  */
 function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
     const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-    const originPoint = wrap.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);
 }
@@ -2827,7 +5148,7 @@ class VisualElementDragControls {
                 /**
                  * If the MotionValue is a percentage value convert to px
                  */
-                if (wrap.percent.test(current)) {
+                if (percent.test(current)) {
                     const { projection } = this.visualElement;
                     if (projection && projection.layout) {
                         const measuredAxis = projection.layout.layoutBox[axis];
@@ -2840,7 +5161,9 @@ class VisualElementDragControls {
                 this.originPoint[axis] = current;
             });
             // Fire onDragStart event
-            onDragStart && onDragStart(event, info);
+            if (onDragStart) {
+                sync.update(() => onDragStart(event, info));
+            }
             const { animationState } = this.visualElement;
             animationState && animationState.setActive("whileDrag", true);
         };
@@ -2892,7 +5215,9 @@ class VisualElementDragControls {
         const { velocity } = info;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
-        onDragEnd && onDragEnd(event, info);
+        if (onDragEnd) {
+            sync.update(() => onDragEnd(event, info));
+        }
     }
     cancel() {
         this.isDragging = false;
@@ -2960,7 +5285,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        wrap.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
@@ -3019,7 +5344,7 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return axisValue.start(wrap.createMotionValueAnimation(axis, axisValue, 0, transition));
+        return axisValue.start(createMotionValueAnimation(axis, axisValue, 0, transition));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -3048,7 +5373,7 @@ class VisualElementDragControls {
             const axisValue = this.getAxisMotionValue(axis);
             if (projection && projection.layout) {
                 const { min, max } = projection.layout.layoutBox[axis];
-                axisValue.set(point[axis] - wrap.mix(min, max, 0.5));
+                axisValue.set(point[axis] - mix(min, max, 0.5));
             }
         });
     }
@@ -3103,7 +5428,7 @@ class VisualElementDragControls {
              */
             const axisValue = this.getAxisMotionValue(axis);
             const { min, max } = this.constraints[axis];
-            axisValue.set(wrap.mix(min, max, boxProgress[axis]));
+            axisValue.set(mix(min, max, boxProgress[axis]));
         });
     }
     addListeners() {
@@ -3198,8 +5523,8 @@ function getCurrentDirection(offset, lockThreshold = 10) {
 class DragGesture extends Feature {
     constructor(node) {
         super(node);
-        this.removeGroupControls = wrap.noop;
-        this.removeListeners = wrap.noop;
+        this.removeGroupControls = noop;
+        this.removeListeners = noop;
         this.controls = new VisualElementDragControls(node);
     }
     mount() {
@@ -3209,7 +5534,7 @@ class DragGesture extends Feature {
         if (dragControls) {
             this.removeGroupControls = dragControls.subscribe(this.controls);
         }
-        this.removeListeners = this.controls.addListeners() || wrap.noop;
+        this.removeListeners = this.controls.addListeners() || noop;
     }
     unmount() {
         this.removeGroupControls();
@@ -3217,10 +5542,15 @@ class DragGesture extends Feature {
     }
 }
 
+const asyncHandler = (handler) => (event, info) => {
+    if (handler) {
+        sync.update(() => handler(event, info));
+    }
+};
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removePointerDownListener = wrap.noop;
+        this.removePointerDownListener = noop;
     }
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
@@ -3228,12 +5558,14 @@ class PanGesture extends Feature {
     createPanHandlers() {
         const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
         return {
-            onSessionStart: onPanSessionStart,
-            onStart: onPanStart,
+            onSessionStart: asyncHandler(onPanSessionStart),
+            onStart: asyncHandler(onPanStart),
             onMove: onPan,
             onEnd: (event, info) => {
                 delete this.session;
-                onPanEnd && onPanEnd(event, info);
+                if (onPanEnd) {
+                    sync.update(() => onPanEnd(event, info));
+                }
             },
         };
     }
@@ -3249,19 +5581,55 @@ class PanGesture extends Feature {
     }
 }
 
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+function animate(from, to, transition = {}) {
+    const value = isMotionValue(from) ? from : motionValue(from);
+    value.start(createMotionValueAnimation("", value, to, transition));
+    return {
+        stop: () => value.stop(),
+        isAnimating: () => value.isAnimating(),
+    };
+}
+
 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" || wrap.px.test(value);
+const isPx = (value) => typeof value === "number" || px.test(value);
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     if (shouldCrossfadeOpacity) {
-        target.opacity = wrap.mix(0, 
+        target.opacity = mix(0, 
         // TODO Reinstate this if only child
         lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));
-        target.opacityExit = wrap.mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
+        target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));
     }
     else if (isOnlyMember) {
-        target.opacity = wrap.mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
+        target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);
     }
     /**
      * Mix border radius
@@ -3278,8 +5646,8 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             leadRadius === 0 ||
             isPx(followRadius) === isPx(leadRadius);
         if (canMix) {
-            target[borderLabel] = Math.max(wrap.mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
-            if (wrap.percent.test(leadRadius) || wrap.percent.test(followRadius)) {
+            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
                 target[borderLabel] += "%";
             }
         }
@@ -3291,7 +5659,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix rotation
      */
     if (follow.rotate || lead.rotate) {
-        target.rotate = wrap.mix(follow.rotate || 0, lead.rotate || 0, progress);
+        target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);
     }
 }
 function getRadius(values, radiusName) {
@@ -3322,8 +5690,8 @@ function getRadius(values, radiusName) {
 //         latestLeadValues.backgroundColor as string
 //     )(p)
 // }
-const easeCrossfadeIn = compress(0, 0.5, wrap.circOut);
-const easeCrossfadeOut = compress(0.5, 0.95, wrap.noop);
+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
@@ -3331,7 +5699,7 @@ function compress(min, max, easing) {
             return 0;
         if (p > max)
             return 1;
-        return easing(wrap.progress(min, max, p));
+        return easing(progress(min, max, p));
     };
 }
 
@@ -3369,14 +5737,14 @@ 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 (wrap.percent.test(translate)) {
+    if (percent.test(translate)) {
         translate = parseFloat(translate);
-        const relativeProgress = wrap.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 = wrap.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);
@@ -3424,11 +5792,11 @@ class NodeStack {
         this.members = [];
     }
     add(node) {
-        wrap.addUniqueItem(this.members, node);
+        addUniqueItem(this.members, node);
         node.scheduleRender();
     }
     remove(node) {
-        wrap.removeItem(this.members, node);
+        removeItem(this.members, node);
         if (node === this.prevLead) {
             this.prevLead = undefined;
         }
@@ -3577,11 +5945,11 @@ class FlatTree {
         this.isDirty = false;
     }
     add(child) {
-        wrap.addUniqueItem(this.children, child);
+        addUniqueItem(this.children, child);
         this.isDirty = true;
     }
     remove(child) {
-        wrap.removeItem(this.children, child);
+        removeItem(this.children, child);
         this.isDirty = true;
     }
     forEach(callback) {
@@ -3753,7 +6121,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         addEventListener(name, handler) {
             if (!this.eventHandlers.has(name)) {
-                this.eventHandlers.set(name, new wrap.SubscriptionManager());
+                this.eventHandlers.set(name, new SubscriptionManager());
             }
             return this.eventHandlers.get(name).add(handler);
         }
@@ -3792,7 +6160,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 attachResizeListener(instance, () => {
                     this.root.updateBlockedByResize = true;
                     cancelDelay && cancelDelay();
-                    cancelDelay = wrap.delay(resizeUnblockUpdate, 250);
+                    cancelDelay = delay(resizeUnblockUpdate, 250);
                     if (globalProjectionState.hasAnimatedSinceResize) {
                         globalProjectionState.hasAnimatedSinceResize = false;
                         this.nodes.forEach(finishAnimation);
@@ -3841,7 +6209,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                         }
                         this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         const animationOptions = {
-                            ...wrap.getValueTransition(layoutTransition, "layout"),
+                            ...getValueTransition(layoutTransition, "layout"),
                             onPlay: onLayoutAnimationStart,
                             onComplete: onLayoutAnimationComplete,
                         };
@@ -3877,7 +6245,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             stack && stack.remove(this);
             this.parent && this.parent.children.delete(this);
             this.instance = undefined;
-            wrap.cancelSync.preRender(this.updateProjection);
+            cancelSync.preRender(this.updateProjection);
         }
         // only on the root
         blockUpdate() {
@@ -3974,16 +6342,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.nodes.forEach(notifyLayoutUpdate);
             this.clearAllSnapshots();
             // Flush any scheduled updates
-            wrap.flushSync.update();
-            wrap.flushSync.preRender();
-            wrap.flushSync.render();
+            flushSync.update();
+            flushSync.preRender();
+            flushSync.render();
         }
         clearAllSnapshots() {
             this.nodes.forEach(clearSnapshot);
             this.sharedNodes.forEach(removeLeadSnapshots);
         }
         scheduleUpdateProjection() {
-            wrap.sync.preRender(this.updateProjection, false, true);
+            sync.preRender(this.updateProjection, false, true);
         }
         scheduleCheckAfterUnmount() {
             /**
@@ -3991,7 +6359,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.
              */
-            wrap.sync.postRender(() => {
+            sync.postRender(() => {
                 if (this.isLayoutDirty) {
                     this.root.didUpdate();
                 }
@@ -4503,7 +6871,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.resumingFrom.currentAnimation.stop();
             }
             if (this.pendingAnimation) {
-                wrap.cancelSync.update(this.pendingAnimation);
+                cancelSync.update(this.pendingAnimation);
                 this.pendingAnimation = undefined;
             }
             /**
@@ -4511,9 +6879,9 @@ 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 = wrap.sync.update(() => {
+            this.pendingAnimation = sync.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
-                this.currentAnimation = wrap.animate(0, animationTarget, {
+                this.currentAnimation = animate(0, animationTarget, {
                     ...options,
                     onUpdate: (latest) => {
                         this.mixTargetDelta(latest);
@@ -4958,14 +7326,14 @@ function removeLeadSnapshots(stack) {
     stack.removeLeadSnapshot();
 }
 function mixAxisDelta(output, delta, p) {
-    output.translate = wrap.mix(delta.translate, 0, p);
-    output.scale = wrap.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 = wrap.mix(from.min, to.min, p);
-    output.max = wrap.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);
@@ -5085,7 +7453,7 @@ const correctBorderRadius = {
          * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
          */
         if (typeof latest === "string") {
-            if (wrap.px.test(latest)) {
+            if (px.test(latest)) {
                 latest = parseFloat(latest);
             }
             else {
@@ -5121,7 +7489,7 @@ function parseCSSVariable(current) {
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {
-    wrap.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+    exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
     const [token, fallback] = parseCSSVariable(current);
     // No CSS variable detected
     if (!token)
@@ -5198,11 +7566,11 @@ const correctBoxShadow = {
                 return varToken;
             });
         }
-        const shadow = wrap.complex.parse(latest);
+        const shadow = complex.parse(latest);
         // TODO: Doesn't support multiple shadows
         if (shadow.length > 5)
             return original;
-        const template = wrap.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;
@@ -5215,7 +7583,7 @@ const correctBoxShadow = {
          * We could potentially improve the outcome of this by incorporating the ratio between
          * the two scales.
          */
-        const averageScale = wrap.mix(xScale, yScale, 0.5);
+        const averageScale = mix(xScale, yScale, 0.5);
         // Blur
         if (typeof shadow[2 + offset] === "number")
             shadow[2 + offset] /= averageScale;
@@ -5249,7 +7617,7 @@ const isPositionalKey = (key) => positionalKeys.has(key);
 const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
-const isNumOrPxType = (v) => v === wrap.number || v === wrap.px;
+const isNumOrPxType = (v) => v === number || v === px;
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     if (transform === "none" || !transform)
@@ -5269,7 +7637,7 @@ const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     }
 };
 const transformKeys = new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = wrap.transformPropOrder.filter((key) => !transformKeys.has(key));
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
     const removedTransforms = [];
     nonTranslationalTransformKeys.forEach((key) => {
@@ -5354,11 +7722,11 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
             for (let i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
-                    wrap.invariant(toType === fromType ||
+                    exports.invariant(toType === fromType ||
                         (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
                 }
                 else {
-                    wrap.invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                    exports.invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
                 }
             }
         }
@@ -5376,7 +7744,7 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
                 if (typeof to === "string") {
                     target[key] = parseFloat(to);
                 }
-                else if (Array.isArray(to) && toType === wrap.px) {
+                else if (Array.isArray(to) && toType === px) {
                     target[key] = to.map(parseFloat);
                 }
             }
@@ -5480,7 +7848,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     for (const key in next) {
         const nextValue = next[key];
         const prevValue = prev[key];
-        if (wrap.isMotionValue(nextValue)) {
+        if (isMotionValue(nextValue)) {
             /**
              * If this is a motion value found in props or style, we want to add it
              * to our visual element's motion value map.
@@ -5494,15 +7862,15 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.1.0-alpha.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.1.0-alpha.3 may not work as expected.`);
+                warnOnce(nextValue.version === "10.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.1.0 may not work as expected.`);
             }
         }
-        else if (wrap.isMotionValue(prevValue)) {
+        else if (isMotionValue(prevValue)) {
             /**
              * If we're swapping from a motion value to a static value,
              * create a new motion value from that
              */
-            element.addValue(key, wrap.motionValue(nextValue, { owner: element }));
+            element.addValue(key, motionValue(nextValue, { owner: element }));
             if (isWillChangeMotionValue(willChange)) {
                 willChange.remove(key);
             }
@@ -5520,7 +7888,7 @@ function updateMotionValuesFromProps(element, next, prev) {
             }
             else {
                 const latestValue = element.getStaticValue(key);
-                element.addValue(key, wrap.motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
+                element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
             }
         }
     }
@@ -5610,7 +7978,7 @@ class VisualElement {
             this.triggerBuild();
             this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
         };
-        this.scheduleRender = () => wrap.sync.render(this.render, false, true);
+        this.scheduleRender = () => sync.render(this.render, false, true);
         const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
@@ -5641,7 +8009,7 @@ class VisualElement {
         const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});
         for (const key in initialMotionValues) {
             const value = initialMotionValues[key];
-            if (latestValues[key] !== undefined && wrap.isMotionValue(value)) {
+            if (latestValues[key] !== undefined && isMotionValue(value)) {
                 value.set(latestValues[key], false);
                 if (isWillChangeMotionValue(willChange)) {
                     willChange.add(key);
@@ -5678,7 +8046,7 @@ class VisualElement {
                     ? true
                     : prefersReducedMotion.current;
         if (process.env.NODE_ENV !== "production") {
-            wrap.warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+            warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
         }
         if (this.parent)
             this.parent.children.add(this);
@@ -5686,8 +8054,8 @@ class VisualElement {
     }
     unmount() {
         this.projection && this.projection.unmount();
-        wrap.cancelSync.update(this.notifyUpdate);
-        wrap.cancelSync.render(this.render);
+        cancelSync.update(this.notifyUpdate);
+        cancelSync.render(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
         this.removeFromVariantTree && this.removeFromVariantTree();
         this.parent && this.parent.children.delete(this);
@@ -5700,11 +8068,11 @@ class VisualElement {
         this.current = null;
     }
     bindToMotionValue(key, value) {
-        const valueIsTransform = wrap.transformProps.has(key);
+        const valueIsTransform = transformProps.has(key);
         const removeOnChange = value.on("change", (latestValue) => {
             this.latestValues[key] = latestValue;
             this.props.onUpdate &&
-                wrap.sync.update(this.notifyUpdate, false, true);
+                sync.update(this.notifyUpdate, false, true);
             if (valueIsTransform && this.projection) {
                 this.projection.isTransformDirty = true;
             }
@@ -5738,8 +8106,8 @@ class VisualElement {
             isStrict) {
             const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
             renderedProps.ignoreStrict
-                ? wrap.warning(false, strictMessage)
-                : wrap.invariant(false, strictMessage);
+                ? exports.warning(false, strictMessage)
+                : exports.invariant(false, strictMessage);
         }
         for (let i = 0; i < numFeatures; i++) {
             const name = featureNames[i];
@@ -5948,7 +8316,7 @@ class VisualElement {
         }
         let value = this.values.get(key);
         if (value === undefined && defaultValue !== undefined) {
-            value = wrap.motionValue(defaultValue, { owner: this });
+            value = motionValue(defaultValue, { owner: this });
             this.addValue(key, value);
         }
         return value;
@@ -5991,7 +8359,7 @@ class VisualElement {
          * so we can read the value from an alternative source, try that.
          */
         const target = this.getBaseTargetFromProps(this.props, key);
-        if (target !== undefined && !wrap.isMotionValue(target))
+        if (target !== undefined && !isMotionValue(target))
             return target;
         /**
          * If the value was initially defined on initial, but it doesn't any more,
@@ -6004,7 +8372,7 @@ class VisualElement {
     }
     on(eventName, callback) {
         if (!this.events[eventName]) {
-            this.events[eventName] = new wrap.SubscriptionManager();
+            this.events[eventName] = new SubscriptionManager();
         }
         return this.events[eventName].add(callback);
     }
@@ -6063,8 +8431,8 @@ function getComputedStyle$1(element) {
 }
 class HTMLVisualElement extends DOMVisualElement {
     readValueFromInstance(instance, key) {
-        if (wrap.transformProps.has(key)) {
-            const defaultType = wrap.getDefaultValueType(key);
+        if (transformProps.has(key)) {
+            const defaultType = getDefaultValueType(key);
             return defaultType ? defaultType.default || 0 : 0;
         }
         else {
@@ -6090,7 +8458,7 @@ class HTMLVisualElement extends DOMVisualElement {
             delete this.childSubscription;
         }
         const { children } = this.props;
-        if (wrap.isMotionValue(children)) {
+        if (isMotionValue(children)) {
             this.childSubscription = children.on("change", (latest) => {
                 if (this.current)
                     this.current.textContent = `${latest}`;
@@ -6222,7 +8590,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.
                  */
-                wrap.sync.postRender(() => {
+                sync.postRender(() => {
                     const stack = projection.getStack();
                     if (!stack || !stack.members.length) {
                         this.safeToRemove();
@@ -6302,8 +8670,8 @@ class SVGVisualElement extends DOMVisualElement {
         return props[key];
     }
     readValueFromInstance(instance, key) {
-        if (wrap.transformProps.has(key)) {
-            const defaultType = wrap.getDefaultValueType(key);
+        if (transformProps.has(key)) {
+            const defaultType = getDefaultValueType(key);
             return defaultType ? defaultType.default || 0 : 0;
         }
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
@@ -6398,7 +8766,7 @@ function useForceUpdate() {
      * Defer this to the end of the next animation frame in case there are multiple
      * synchronous calls.
      */
-    const deferredForceRender = React.useCallback(() => wrap.sync.postRender(forceRender), [forceRender]);
+    const deferredForceRender = React.useCallback(() => sync.postRender(forceRender), [forceRender]);
     return [deferredForceRender, forcedRenderCount];
 }
 
@@ -6572,7 +8940,7 @@ function onlyElements(children) {
  * @public
  */
 const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
-    wrap.invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
+    exports.invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
     let [forceRender] = useForceUpdate();
@@ -6800,10 +9168,10 @@ function checkReorder(order, value, offset, velocity) {
         return order;
     const item = order[index];
     const nextLayout = nextItem.layout;
-    const nextItemCenter = wrap.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 wrap.moveItem(order, index, index + nextOffset);
+        return moveItem(order, index, index + nextOffset);
     }
     return order;
 }
@@ -6812,7 +9180,7 @@ function ReorderGroup({ children, as = "ul", axis = "y", onReorder, values, ...p
     const Component = useConstant(() => motion(as));
     const order = [];
     const isReordering = React.useRef(false);
-    wrap.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
     const context = {
         axis,
         registerItem: (value, layout) => {
@@ -6869,7 +9237,7 @@ function compareMin(a, b) {
  * @public
  */
 function useMotionValue(initial) {
-    const value = useConstant(() => wrap.motionValue(initial));
+    const value = useConstant(() => motionValue(initial));
     /**
      * If this motion value is being used in static mode, like on
      * the Framer canvas, force components to rerender when the motion
@@ -6883,6 +9251,24 @@ function useMotionValue(initial) {
     return value;
 }
 
+const isCustomValueType = (v) => {
+    return typeof v === "object" && v.mix;
+};
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
 function useCombineMotionValues(values, combineValues) {
     /**
      * Initialise the returned motion value. This remains the same between renders.
@@ -6905,11 +9291,11 @@ function useCombineMotionValues(values, combineValues) {
      * schedule an update.
      */
     useIsomorphicLayoutEffect(() => {
-        const scheduleUpdate = () => wrap.sync.update(updateValue, false, true);
+        const scheduleUpdate = () => sync.update(updateValue, false, true);
         const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
         return () => {
             subscriptions.forEach((unsubscribe) => unsubscribe());
-            wrap.cancelSync.update(updateValue);
+            cancelSync.update(updateValue);
         };
     });
     return value;
@@ -6918,7 +9304,7 @@ function useCombineMotionValues(values, combineValues) {
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
     const transformer = typeof inputRangeOrTransformer === "function"
         ? inputRangeOrTransformer
-        : wrap.transform(inputRangeOrTransformer, outputRange, options);
+        : transform(inputRangeOrTransformer, outputRange, options);
     return Array.isArray(input)
         ? useListTransform(input, transformer)
         : useListTransform([input], ([latest]) => transformer(latest));
@@ -6936,7 +9322,7 @@ function useListTransform(values, transformer) {
 }
 
 function useDefaultMotionValue(value, defaultValue = 0) {
-    return wrap.isMotionValue(value) ? value : useMotionValue(defaultValue);
+    return isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
 function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
     const Component = useConstant(() => motion(as));
@@ -6947,7 +9333,7 @@ function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout =
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
     const measuredLayout = React.useRef(null);
-    wrap.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
     const { axis, registerItem, updateOrder } = context;
     React.useEffect(() => {
         registerItem(value, measuredLayout.current);
@@ -7019,12 +9405,12 @@ function useMotionTemplate(fragments, ...values) {
             output += fragments[i];
             const value = values[i];
             if (value) {
-                output += wrap.isMotionValue(value) ? value.get() : value;
+                output += isMotionValue(value) ? value.get() : value;
             }
         }
         return output;
     }
-    return useCombineMotionValues(values.filter(wrap.isMotionValue), buildValue);
+    return useCombineMotionValues(values.filter(isMotionValue), buildValue);
 }
 
 /**
@@ -7049,7 +9435,7 @@ function useMotionTemplate(fragments, ...values) {
 function useSpring(source, config = {}) {
     const { isStatic } = React.useContext(MotionConfigContext);
     const activeSpringAnimation = React.useRef(null);
-    const value = useMotionValue(wrap.isMotionValue(source) ? source.get() : source);
+    const value = useMotionValue(isMotionValue(source) ? source.get() : source);
     const stopAnimation = () => {
         if (activeSpringAnimation.current) {
             activeSpringAnimation.current.stop();
@@ -7064,7 +9450,7 @@ function useSpring(source, config = {}) {
             if (isStatic)
                 return set(v);
             stopAnimation();
-            activeSpringAnimation.current = wrap.animateValue({
+            activeSpringAnimation.current = animateValue({
                 keyframes: [value.get(), v],
                 velocity: value.getVelocity(),
                 type: "spring",
@@ -7075,7 +9461,7 @@ function useSpring(source, config = {}) {
         }, stopAnimation);
     }, [JSON.stringify(config)]);
     useIsomorphicLayoutEffect(() => {
-        if (wrap.isMotionValue(source)) {
+        if (isMotionValue(source)) {
             return source.on("change", (v) => value.set(parseFloat(v)));
         }
     }, [value]);
@@ -7103,14 +9489,449 @@ function useVelocity(value) {
     return velocity;
 }
 
+function resolveElements(elements, selectorCache) {
+    var _a;
+    if (typeof elements === "string") {
+        if (selectorCache) {
+            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+            elements = selectorCache[elements];
+        }
+        else {
+            elements = document.querySelectorAll(elements);
+        }
+    }
+    else if (elements instanceof Element) {
+        elements = [elements];
+    }
+    /**
+     * Return an empty array
+     */
+    return Array.from(elements || []);
+}
+
+const resizeHandlers = new WeakMap();
+let observer;
+function getElementSize(target, borderBoxSize) {
+    if (borderBoxSize) {
+        const { inlineSize, blockSize } = borderBoxSize[0];
+        return { width: inlineSize, height: blockSize };
+    }
+    else if (target instanceof SVGElement && "getBBox" in target) {
+        return target.getBBox();
+    }
+    else {
+        return {
+            width: target.offsetWidth,
+            height: target.offsetHeight,
+        };
+    }
+}
+function notifyTarget({ target, contentRect, borderBoxSize, }) {
+    var _a;
+    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+        handler({
+            target,
+            contentSize: contentRect,
+            get size() {
+                return getElementSize(target, borderBoxSize);
+            },
+        });
+    });
+}
+function notifyAll(entries) {
+    entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+    if (typeof ResizeObserver === "undefined")
+        return;
+    observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+    if (!observer)
+        createResizeObserver();
+    const elements = resolveElements(target);
+    elements.forEach((element) => {
+        let elementHandlers = resizeHandlers.get(element);
+        if (!elementHandlers) {
+            elementHandlers = new Set();
+            resizeHandlers.set(element, elementHandlers);
+        }
+        elementHandlers.add(handler);
+        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+    });
+    return () => {
+        elements.forEach((element) => {
+            const elementHandlers = resizeHandlers.get(element);
+            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            }
+        });
+    };
+}
+
+const windowCallbacks = new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+    windowResizeHandler = () => {
+        const size = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const info = {
+            target: window,
+            size,
+            contentSize: size,
+        };
+        windowCallbacks.forEach((callback) => callback(info));
+    };
+    window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+    windowCallbacks.add(callback);
+    if (!windowResizeHandler)
+        createWindowResizeHandler();
+    return () => {
+        windowCallbacks.delete(callback);
+        if (!windowCallbacks.size && windowResizeHandler) {
+            windowResizeHandler = undefined;
+        }
+    };
+}
+
+function resize(a, b) {
+    return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
+
+/**
+ * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
+ */
+const maxElapsed = 50;
+const createAxisInfo = () => ({
+    current: 0,
+    offset: [],
+    progress: 0,
+    scrollLength: 0,
+    targetOffset: 0,
+    targetLength: 0,
+    containerLength: 0,
+    velocity: 0,
+});
+const createScrollInfo = () => ({
+    time: 0,
+    x: createAxisInfo(),
+    y: createAxisInfo(),
+});
+const keys = {
+    x: {
+        length: "Width",
+        position: "Left",
+    },
+    y: {
+        length: "Height",
+        position: "Top",
+    },
+};
+function updateAxisInfo(element, axisName, info, time) {
+    const axis = info[axisName];
+    const { length, position } = keys[axisName];
+    const prev = axis.current;
+    const prevTime = info.time;
+    axis.current = element["scroll" + position];
+    axis.scrollLength = element["scroll" + length] - element["client" + length];
+    axis.offset.length = 0;
+    axis.offset[0] = 0;
+    axis.offset[1] = axis.scrollLength;
+    axis.progress = progress(0, axis.scrollLength, axis.current);
+    const elapsed = time - prevTime;
+    axis.velocity =
+        elapsed > maxElapsed
+            ? 0
+            : velocityPerSecond(axis.current - prev, elapsed);
+}
+function updateScrollInfo(element, info, time) {
+    updateAxisInfo(element, "x", info, time);
+    updateAxisInfo(element, "y", info, time);
+    info.time = time;
+}
+
+function calcInset(element, container) {
+    let inset = { x: 0, y: 0 };
+    let current = element;
+    while (current && current !== container) {
+        if (current instanceof HTMLElement) {
+            inset.x += current.offsetLeft;
+            inset.y += current.offsetTop;
+            current = current.offsetParent;
+        }
+        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
+            const { top, left } = current.getBBox();
+            inset.x += left;
+            inset.y += top;
+            /**
+             * Assign the next parent element as the <svg /> tag.
+             */
+            while (current && current.tagName !== "svg") {
+                current = current.parentNode;
+            }
+        }
+    }
+    return inset;
+}
+
+const ScrollOffset = {
+    Enter: [
+        [0, 1],
+        [1, 1],
+    ],
+    Exit: [
+        [0, 0],
+        [1, 0],
+    ],
+    Any: [
+        [1, 0],
+        [0, 1],
+    ],
+    All: [
+        [0, 0],
+        [1, 1],
+    ],
+};
+
+const namedEdges = {
+    start: 0,
+    center: 0.5,
+    end: 1,
+};
+function resolveEdge(edge, length, inset = 0) {
+    let delta = 0;
+    /**
+     * If we have this edge defined as a preset, replace the definition
+     * with the numerical value.
+     */
+    if (namedEdges[edge] !== undefined) {
+        edge = namedEdges[edge];
+    }
+    /**
+     * Handle unit values
+     */
+    if (typeof edge === "string") {
+        const asNumber = parseFloat(edge);
+        if (edge.endsWith("px")) {
+            delta = asNumber;
+        }
+        else if (edge.endsWith("%")) {
+            edge = asNumber / 100;
+        }
+        else if (edge.endsWith("vw")) {
+            delta = (asNumber / 100) * document.documentElement.clientWidth;
+        }
+        else if (edge.endsWith("vh")) {
+            delta = (asNumber / 100) * document.documentElement.clientHeight;
+        }
+        else {
+            edge = asNumber;
+        }
+    }
+    /**
+     * If the edge is defined as a number, handle as a progress value.
+     */
+    if (typeof edge === "number") {
+        delta = length * edge;
+    }
+    return inset + delta;
+}
+
+const defaultOffset = [0, 0];
+function resolveOffset(offset, containerLength, targetLength, targetInset) {
+    let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+    let targetPoint = 0;
+    let containerPoint = 0;
+    if (typeof offset === "number") {
+        /**
+         * If we're provided offset: [0, 0.5, 1] then each number x should become
+         * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+         * and container etc.
+         */
+        offsetDefinition = [offset, offset];
+    }
+    else if (typeof offset === "string") {
+        offset = offset.trim();
+        if (offset.includes(" ")) {
+            offsetDefinition = offset.split(" ");
+        }
+        else {
+            /**
+             * If we're provided a definition like "100px" then we want to apply
+             * that only to the top of the target point, leaving the container at 0.
+             * Whereas a named offset like "end" should be applied to both.
+             */
+            offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+        }
+    }
+    targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+    containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+    return targetPoint - containerPoint;
+}
+
+const point = { x: 0, y: 0 };
+function resolveOffsets(container, info, options) {
+    let { offset: offsetDefinition = ScrollOffset.All } = options;
+    const { target = container, axis = "y" } = options;
+    const lengthLabel = axis === "y" ? "height" : "width";
+    const inset = target !== container ? calcInset(target, container) : point;
+    /**
+     * Measure the target and container. If they're the same thing then we
+     * use the container's scrollWidth/Height as the target, from there
+     * all other calculations can remain the same.
+     */
+    const targetSize = target === container
+        ? { width: container.scrollWidth, height: container.scrollHeight }
+        : { width: target.clientWidth, height: target.clientHeight };
+    const containerSize = {
+        width: container.clientWidth,
+        height: container.clientHeight,
+    };
+    /**
+     * Reset the length of the resolved offset array rather than creating a new one.
+     * TODO: More reusable data structures for targetSize/containerSize would also be good.
+     */
+    info[axis].offset.length = 0;
+    /**
+     * Populate the offset array by resolving the user's offset definition into
+     * a list of pixel scroll offets.
+     */
+    let hasChanged = !info[axis].interpolate;
+    const numOffsets = offsetDefinition.length;
+    for (let i = 0; i < numOffsets; i++) {
+        const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+        if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+            hasChanged = true;
+        }
+        info[axis].offset[i] = offset;
+    }
+    /**
+     * If the pixel scroll offsets have changed, create a new interpolator function
+     * to map scroll value into a progress.
+     */
+    if (hasChanged) {
+        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition));
+        info[axis].interpolatorOffsets = [...info[axis].offset];
+    }
+    info[axis].progress = info[axis].interpolate(info[axis].current);
+}
+
+function measure(container, target = container, info) {
+    /**
+     * Find inset of target within scrollable container
+     */
+    info.x.targetOffset = 0;
+    info.y.targetOffset = 0;
+    if (target !== container) {
+        let node = target;
+        while (node && node !== container) {
+            info.x.targetOffset += node.offsetLeft;
+            info.y.targetOffset += node.offsetTop;
+            node = node.offsetParent;
+        }
+    }
+    info.x.targetLength =
+        target === container ? target.scrollWidth : target.clientWidth;
+    info.y.targetLength =
+        target === container ? target.scrollHeight : target.clientHeight;
+    info.x.containerLength = container.clientWidth;
+    info.y.containerLength = container.clientHeight;
+}
+function createOnScrollHandler(element, onScroll, info, options = {}) {
+    return {
+        measure: () => measure(element, options.target, info),
+        update: (time) => {
+            updateScrollInfo(element, info, time);
+            if (options.offset || options.target) {
+                resolveOffsets(element, info, options);
+            }
+        },
+        notify: () => onScroll(info),
+    };
+}
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+const getEventTarget = (element) => element === document.documentElement ? window : element;
+function scroll(onScroll, { container = document.documentElement, ...options } = {}) {
+    let containerHandlers = onScrollHandlers.get(container);
+    /**
+     * Get the onScroll handlers for this container.
+     * If one isn't found, create a new one.
+     */
+    if (!containerHandlers) {
+        containerHandlers = new Set();
+        onScrollHandlers.set(container, containerHandlers);
+    }
+    /**
+     * Create a new onScroll handler for the provided callback.
+     */
+    const info = createScrollInfo();
+    const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+    containerHandlers.add(containerHandler);
+    /**
+     * Check if there's a scroll event listener for this container.
+     * If not, create one.
+     */
+    if (!scrollListeners.has(container)) {
+        const listener = () => {
+            const time = performance.now();
+            for (const handler of containerHandlers)
+                handler.measure();
+            for (const handler of containerHandlers)
+                handler.update(time);
+            for (const handler of containerHandlers)
+                handler.notify();
+        };
+        scrollListeners.set(container, listener);
+        const target = getEventTarget(container);
+        window.addEventListener("resize", listener, { passive: true });
+        if (container !== document.documentElement) {
+            resizeListeners.set(container, resize(container, listener));
+        }
+        target.addEventListener("scroll", listener, { passive: true });
+    }
+    const listener = scrollListeners.get(container);
+    const onLoadProcesss = requestAnimationFrame(listener);
+    return () => {
+        var _a;
+        cancelAnimationFrame(onLoadProcesss);
+        /**
+         * Check if we even have any handlers for this container.
+         */
+        const currentHandlers = onScrollHandlers.get(container);
+        if (!currentHandlers)
+            return;
+        currentHandlers.delete(containerHandler);
+        if (currentHandlers.size)
+            return;
+        /**
+         * If no more handlers, remove the scroll listener too.
+         */
+        const scrollListener = scrollListeners.get(container);
+        scrollListeners.delete(container);
+        if (scrollListener) {
+            getEventTarget(container).removeEventListener("scroll", scrollListener);
+            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            window.removeEventListener("resize", scrollListener);
+        }
+    };
+}
+
 function refWarning(name, ref) {
-    wrap.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+    exports.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
 }
 const createScrollMotionValues = () => ({
-    scrollX: wrap.motionValue(0),
-    scrollY: wrap.motionValue(0),
-    scrollXProgress: wrap.motionValue(0),
-    scrollYProgress: wrap.motionValue(0),
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0),
 });
 function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
     const values = useConstant(createScrollMotionValues);
@@ -7120,7 +9941,7 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
     useLifecycleEffect(() => {
         refWarning("target", target);
         refWarning("container", container);
-        return wrap.scroll(({ x, y }) => {
+        return scroll(({ x, y }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
@@ -7139,7 +9960,7 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
  */
 function useElementScroll(ref) {
     if (process.env.NODE_ENV === "development") {
-        wrap.warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
+        warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
     }
     return useScroll({ container: ref });
 }
@@ -7149,7 +9970,7 @@ function useElementScroll(ref) {
  */
 function useViewportScroll() {
     if (process.env.NODE_ENV !== "production") {
-        wrap.warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
+        warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
     }
     return useScroll();
 }
@@ -7165,8 +9986,8 @@ function useAnimationFrame(callback) {
                 initialTimestamp.current = timestamp;
             callback(timestamp - initialTimestamp.current, delta);
         };
-        wrap.sync.update(provideTimeSinceStart, true);
-        return () => wrap.cancelSync.update(provideTimeSinceStart);
+        sync.update(provideTimeSinceStart, true);
+        return () => cancelSync.update(provideTimeSinceStart);
     }, [callback]);
 }
 
@@ -7176,7 +9997,7 @@ function useTime() {
     return time;
 }
 
-class WillChangeMotionValue extends wrap.MotionValue {
+class WillChangeMotionValue extends MotionValue {
     constructor() {
         super(...arguments);
         this.members = [];
@@ -7184,7 +10005,7 @@ class WillChangeMotionValue extends wrap.MotionValue {
     }
     add(name) {
         let memberName;
-        if (wrap.transformProps.has(name)) {
+        if (transformProps.has(name)) {
             this.transforms.add(name);
             memberName = "transform";
         }
@@ -7194,19 +10015,19 @@ class WillChangeMotionValue extends wrap.MotionValue {
             memberName = camelToDash(name);
         }
         if (memberName) {
-            wrap.addUniqueItem(this.members, memberName);
+            addUniqueItem(this.members, memberName);
             this.update();
         }
     }
     remove(name) {
-        if (wrap.transformProps.has(name)) {
+        if (transformProps.has(name)) {
             this.transforms.delete(name);
             if (!this.transforms.size) {
-                wrap.removeItem(this.members, "transform");
+                removeItem(this.members, "transform");
             }
         }
         else {
-            wrap.removeItem(this.members, camelToDash(name));
+            removeItem(this.members, camelToDash(name));
         }
         this.update();
     }
@@ -7261,7 +10082,7 @@ function useReducedMotion() {
     !hasReducedMotionListener.current && initPrefersReducedMotion();
     const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
     if (process.env.NODE_ENV !== "production") {
-        wrap.warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+        warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
     }
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
@@ -7301,7 +10122,7 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            wrap.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            exports.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
             const animations = [];
             subscribers.forEach((visualElement) => {
                 animations.push(animateVisualElement(visualElement, definition, {
@@ -7311,7 +10132,7 @@ function animationControls() {
             return Promise.all(animations);
         },
         set(definition) {
-            wrap.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            exports.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
             return subscribers.forEach((visualElement) => {
                 setValues(visualElement, definition);
             });
@@ -7368,6 +10189,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.
  *
@@ -7400,7 +10226,7 @@ function useCycle(...items) {
     const runCycle = React.useCallback((next) => {
         index.current =
             typeof next !== "number"
-                ? wrap.wrap(0, items.length, index.current + 1)
+                ? wrap(0, items.length, index.current + 1)
                 : next;
         setItem(items[index.current]);
     }, 
@@ -7411,6 +10237,46 @@ function useCycle(...items) {
     return [item, runCycle];
 }
 
+const thresholds = {
+    any: 0,
+    all: 1,
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+    const elements = resolveElements(elementOrSelector);
+    const activeIntersections = new WeakMap();
+    const onIntersectionChange = (entries) => {
+        entries.forEach((entry) => {
+            const onEnd = activeIntersections.get(entry.target);
+            /**
+             * If there's no change to the intersection, we don't need to
+             * do anything here.
+             */
+            if (entry.isIntersecting === Boolean(onEnd))
+                return;
+            if (entry.isIntersecting) {
+                const newOnEnd = onStart(entry);
+                if (typeof newOnEnd === "function") {
+                    activeIntersections.set(entry.target, newOnEnd);
+                }
+                else {
+                    observer.unobserve(entry.target);
+                }
+            }
+            else if (onEnd) {
+                onEnd(entry);
+                activeIntersections.delete(entry.target);
+            }
+        });
+    };
+    const observer = new IntersectionObserver(onIntersectionChange, {
+        root,
+        rootMargin,
+        threshold: typeof amount === "number" ? amount : thresholds[amount],
+    });
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+}
+
 function useInView(ref, { root, margin, amount, once = false } = {}) {
     const [isInView, setInView] = React.useState(false);
     React.useEffect(() => {
@@ -7425,7 +10291,7 @@ function useInView(ref, { root, margin, amount, once = false } = {}) {
             margin,
             amount: amount === "some" ? "any" : amount,
         };
-        return wrap.inView(ref.current, onEnter, options);
+        return inView(ref.current, onEnter, options);
     }, [root, ref, margin, once]);
     return isInView;
 }
@@ -7585,11 +10451,11 @@ function useInstantTransition() {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
-        wrap.sync.postRender(() => wrap.sync.postRender(() => (wrap.instantAnimationState.current = false)));
+        sync.postRender(() => sync.postRender(() => (instantAnimationState.current = false)));
     }, [forcedRenderCount]);
     return (callback) => {
         startInstantLayoutTransition(() => {
-            wrap.instantAnimationState.current = true;
+            instantAnimationState.current = true;
             forceUpdate();
             callback();
         });
@@ -7619,7 +10485,7 @@ function handoffOptimizedAppearAnimation(id, name, value,
  * Framer Motion bundles where it's not needed.
  */
 sync) {
-    const storeId = appearStoreId(id, wrap.transformProps.has(name) ? "transform" : name);
+    const storeId = appearStoreId(id, transformProps.has(name) ? "transform" : name);
     const appearAnimation = appearAnimationStore.get(storeId);
     if (!appearAnimation)
         return 0;
@@ -7687,7 +10553,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
      *
      * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
      */
-    const readyAnimation = wrap.animateStyle(element, name, [keyframes[0], keyframes[0]], 
+    const readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]], 
     /**
      * 10 secs is basically just a super-safe duration to give Chrome
      * long enough to get the animation ready.
@@ -7699,7 +10565,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
     });
     const startAnimation = () => {
         readyAnimation.cancel();
-        const appearAnimation = wrap.animateStyle(element, name, keyframes, options);
+        const appearAnimation = animateStyle(element, name, keyframes, options);
         if (document.timeline) {
             appearAnimation.startTime = document.timeline.currentTime;
         }
@@ -7711,7 +10577,7 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
             onReady(appearAnimation);
     };
     if (readyAnimation.ready) {
-        readyAnimation.ready.then(startAnimation).catch(wrap.noop);
+        readyAnimation.ready.then(startAnimation).catch(noop);
     }
     else {
         startAnimation();
@@ -7806,8 +10672,8 @@ function useInvertedScale(scale) {
     let parentScaleX = useMotionValue(1);
     let parentScaleY = useMotionValue(1);
     const { visualElement } = React.useContext(MotionContext);
-    wrap.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
-    wrap.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
+    exports.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
+    exports.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
     hasWarned = true;
     if (scale) {
         parentScaleX = scale.scaleX || parentScaleX;
@@ -7825,54 +10691,11 @@ function useInvertedScale(scale) {
 let id = 0;
 const AnimateSharedLayout = ({ children }) => {
     React__namespace.useEffect(() => {
-        wrap.invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+        exports.invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
     }, []);
     return (React__namespace.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
 };
 
-exports.MotionValue = wrap.MotionValue;
-exports.animate = wrap.animate;
-exports.animateValue = wrap.animateValue;
-exports.anticipate = wrap.anticipate;
-exports.backIn = wrap.backIn;
-exports.backInOut = wrap.backInOut;
-exports.backOut = wrap.backOut;
-exports.circIn = wrap.circIn;
-exports.circInOut = wrap.circInOut;
-exports.circOut = wrap.circOut;
-exports.clamp = wrap.clamp;
-exports.color = wrap.color;
-exports.complex = wrap.complex;
-exports.cubicBezier = wrap.cubicBezier;
-exports.delay = wrap.delay;
-exports.distance = wrap.distance;
-exports.distance2D = wrap.distance2D;
-exports.easeIn = wrap.easeIn;
-exports.easeInOut = wrap.easeInOut;
-exports.easeOut = wrap.easeOut;
-exports.frameData = wrap.frameData;
-exports.inView = wrap.inView;
-exports.inertia = wrap.inertia;
-exports.interpolate = wrap.interpolate;
-Object.defineProperty(exports, 'invariant', {
-    enumerable: true,
-    get: function () { return wrap.invariant; }
-});
-exports.isMotionValue = wrap.isMotionValue;
-exports.mix = wrap.mix;
-exports.motionValue = wrap.motionValue;
-exports.pipe = wrap.pipe;
-exports.progress = wrap.progress;
-exports.px = wrap.px;
-exports.scroll = wrap.scroll;
-exports.spring = wrap.spring;
-exports.sync = wrap.sync;
-exports.transform = wrap.transform;
-Object.defineProperty(exports, 'warning', {
-    enumerable: true,
-    get: function () { return wrap.warning; }
-});
-exports.wrap = wrap.wrap;
 exports.AnimatePresence = AnimatePresence;
 exports.AnimateSharedLayout = AnimateSharedLayout;
 exports.DragControls = DragControls;
@@ -7883,6 +10706,7 @@ exports.LazyMotion = LazyMotion;
 exports.MotionConfig = MotionConfig;
 exports.MotionConfigContext = MotionConfigContext;
 exports.MotionContext = MotionContext;
+exports.MotionValue = MotionValue;
 exports.PresenceContext = PresenceContext;
 exports.Reorder = Reorder;
 exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
@@ -7890,28 +10714,60 @@ exports.VisualElement = VisualElement;
 exports.addPointerEvent = addPointerEvent;
 exports.addPointerInfo = addPointerInfo;
 exports.addScaleCorrector = addScaleCorrector;
+exports.animate = animate;
+exports.animateValue = animateValue;
 exports.animateVisualElement = animateVisualElement;
 exports.animationControls = animationControls;
 exports.animations = animations;
+exports.anticipate = anticipate;
+exports.backIn = backIn;
+exports.backInOut = backInOut;
+exports.backOut = backOut;
 exports.buildTransform = buildTransform;
 exports.calcLength = calcLength;
 exports.checkTargetForNewValues = checkTargetForNewValues;
+exports.circIn = circIn;
+exports.circInOut = circInOut;
+exports.circOut = circOut;
+exports.clamp = clamp;
+exports.color = color;
+exports.complex = complex;
 exports.createBox = createBox;
 exports.createDomMotionComponent = createDomMotionComponent;
 exports.createMotionComponent = createMotionComponent;
+exports.cubicBezier = cubicBezier;
+exports.delay = delay;
+exports.distance = distance;
+exports.distance2D = distance2D;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
+exports.easeIn = easeIn;
+exports.easeInOut = easeInOut;
+exports.easeOut = easeOut;
 exports.filterProps = filterProps;
+exports.frameData = frameData;
+exports.inertia = inertia;
+exports.interpolate = interpolate;
 exports.isBrowser = isBrowser;
 exports.isDragActive = isDragActive;
 exports.isMotionComponent = isMotionComponent;
+exports.isMotionValue = isMotionValue;
 exports.isValidMotionProp = isValidMotionProp;
 exports.m = m;
 exports.makeUseVisualState = makeUseVisualState;
+exports.mix = mix;
 exports.motion = motion;
+exports.motionValue = motionValue;
 exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
+exports.pipe = pipe;
+exports.progress = progress;
+exports.px = px;
 exports.resolveMotionValue = resolveMotionValue;
+exports.scroll = scroll;
+exports.spring = spring;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
+exports.sync = sync;
+exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimation = useAnimation;
 exports.useAnimationControls = useAnimationControls;
@@ -7943,3 +10799,4 @@ exports.useUnmountEffect = useUnmountEffect;
 exports.useVelocity = useVelocity;
 exports.useViewportScroll = useViewportScroll;
 exports.useWillChange = useWillChange;
+exports.wrap = wrap;