framer-motion 10.3.4 → 10.4.0

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-196fd3c5.js');
+var wrap = require('./wrap-58c66ad3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,9 +44,7 @@ const MotionContext = React.createContext({});
  */
 const PresenceContext = React.createContext(null);
 
-const isBrowser = typeof document !== "undefined";
-
-const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = wrap.isBrowser ? React.useLayoutEffect : React.useEffect;
 
 const LazyContext = React.createContext({ strict: false });
 
@@ -103,11 +101,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
     return visualElement;
 }
 
-function isRefObject(ref) {
-    return (typeof ref === "object" &&
-        Object.prototype.hasOwnProperty.call(ref, "current"));
-}
-
 /**
  * Creates a ref function that, when called, hydrates the provided
  * external ref and VisualElement.
@@ -124,7 +117,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
             if (typeof externalRef === "function") {
                 externalRef(instance);
             }
-            else if (isRefObject(externalRef)) {
+            else if (wrap.isRefObject(externalRef)) {
                 externalRef.current = instance;
             }
         }
@@ -137,44 +130,14 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [visualElement]);
 }
 
-/**
- * Decides if the supplied variable is variant label
- */
-function isVariantLabel(v) {
-    return typeof v === "string" || Array.isArray(v);
-}
-
-function isAnimationControls(v) {
-    return typeof v === "object" && typeof v.start === "function";
-}
-
-const variantPriorityOrder = [
-    "animate",
-    "whileInView",
-    "whileFocus",
-    "whileHover",
-    "whileTap",
-    "whileDrag",
-    "exit",
-];
-const variantProps = ["initial", ...variantPriorityOrder];
-
-function isControllingVariants(props) {
-    return (isAnimationControls(props.animate) ||
-        variantProps.some((name) => isVariantLabel(props[name])));
-}
-function isVariantNode(props) {
-    return Boolean(isControllingVariants(props) || props.variants);
-}
-
 function getCurrentTreeVariants(props, context) {
-    if (isControllingVariants(props)) {
+    if (wrap.isControllingVariants(props)) {
         const { initial, animate } = props;
         return {
-            initial: initial === false || isVariantLabel(initial)
+            initial: initial === false || wrap.isVariantLabel(initial)
                 ? initial
                 : undefined,
-            animate: isVariantLabel(animate) ? animate : undefined,
+            animate: wrap.isVariantLabel(animate) ? animate : undefined,
         };
     }
     return props.inherit !== false ? context : {};
@@ -188,37 +151,10 @@ function variantLabelsAsDependency(prop) {
     return Array.isArray(prop) ? prop.join(" ") : prop;
 }
 
-const featureProps = {
-    animation: [
-        "animate",
-        "variants",
-        "whileHover",
-        "whileTap",
-        "exit",
-        "whileInView",
-        "whileFocus",
-        "whileDrag",
-    ],
-    exit: ["exit"],
-    drag: ["drag", "dragControls"],
-    focus: ["whileFocus"],
-    hover: ["whileHover", "onHoverStart", "onHoverEnd"],
-    tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
-    pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
-    inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
-    layout: ["layout", "layoutId"],
-};
-const featureDefinitions = {};
-for (const key in featureProps) {
-    featureDefinitions[key] = {
-        isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
-    };
-}
-
 function loadFeatures(features) {
     for (const key in features) {
-        featureDefinitions[key] = {
-            ...featureDefinitions[key],
+        wrap.featureDefinitions[key] = {
+            ...wrap.featureDefinitions[key],
             ...features[key],
         };
     }
@@ -312,7 +248,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
          */
         const projectionId = isStatic ? undefined : useProjectionId();
         const visualState = useVisualState(props, isStatic);
-        if (!isStatic && isBrowser) {
+        if (!isStatic && wrap.isBrowser) {
             /**
              * Create a VisualElement for this component. A VisualElement provides a common
              * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
@@ -454,140 +390,6 @@ function isSVGComponent(Component) {
     return false;
 }
 
-const scaleCorrectors = {};
-function addScaleCorrector(correctors) {
-    Object.assign(scaleCorrectors, correctors);
-}
-
-function isForcedMotionValue(key, { layout, layoutId }) {
-    return (wrap.transformProps.has(key) ||
-        key.startsWith("origin") ||
-        ((layout || layoutId !== undefined) &&
-            (!!scaleCorrectors[key] || key === "opacity")));
-}
-
-const translateAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-    transformPerspective: "perspective",
-};
-const numTransforms = wrap.transformPropOrder.length;
-/**
- * Build a CSS transform style from individual x/y/scale etc properties.
- *
- * This outputs with a default order of transforms/scales/rotations, this can be customised by
- * providing a transformTemplate function.
- */
-function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
-    // The transform string we're going to build into.
-    let transformString = "";
-    /**
-     * Loop over all possible transforms in order, adding the ones that
-     * are present to the transform string.
-     */
-    for (let i = 0; i < numTransforms; i++) {
-        const key = wrap.transformPropOrder[i];
-        if (transform[key] !== undefined) {
-            const transformName = translateAlias[key] || key;
-            transformString += `${transformName}(${transform[key]}) `;
-        }
-    }
-    if (enableHardwareAcceleration && !transform.z) {
-        transformString += "translateZ(0)";
-    }
-    transformString = transformString.trim();
-    // If we have a custom `transform` template, pass our transform values and
-    // generated transformString to that before returning
-    if (transformTemplate) {
-        transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
-    }
-    else if (allowTransformNone && transformIsDefault) {
-        transformString = "none";
-    }
-    return transformString;
-}
-
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = checkStringStartsWith("--");
-const isCSSVariableToken = checkStringStartsWith("var(--");
-
-/**
- * Provided a value and a ValueType, returns the value as that value type.
- */
-const getValueAsType = (value, type) => {
-    return type && typeof value === "number"
-        ? type.transform(value)
-        : value;
-};
-
-function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-    const { style, vars, transform, transformOrigin } = state;
-    // Track whether we encounter any transform or transformOrigin values.
-    let hasTransform = false;
-    let hasTransformOrigin = false;
-    // Does the calculated transform essentially equal "none"?
-    let transformIsNone = true;
-    /**
-     * Loop over all our latest animated values and decide whether to handle them
-     * as a style or CSS variable.
-     *
-     * Transforms and transform origins are kept seperately for further processing.
-     */
-    for (const key in latestValues) {
-        const value = latestValues[key];
-        /**
-         * If this is a CSS variable we don't do any further processing.
-         */
-        if (isCSSVariableName(key)) {
-            vars[key] = value;
-            continue;
-        }
-        // Convert the value to its default value type, ie 0 -> "0px"
-        const valueType = wrap.numberValueTypes[key];
-        const valueAsType = getValueAsType(value, valueType);
-        if (wrap.transformProps.has(key)) {
-            // If this is a transform, flag to enable further transform processing
-            hasTransform = true;
-            transform[key] = valueAsType;
-            // If we already know we have a non-default transform, early return
-            if (!transformIsNone)
-                continue;
-            // Otherwise check to see if this is a default transform
-            if (value !== (valueType.default || 0))
-                transformIsNone = false;
-        }
-        else if (key.startsWith("origin")) {
-            // If this is a transform origin, flag and enable further transform-origin processing
-            hasTransformOrigin = true;
-            transformOrigin[key] = valueAsType;
-        }
-        else {
-            style[key] = valueAsType;
-        }
-    }
-    if (!latestValues.transform) {
-        if (hasTransform || transformTemplate) {
-            style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
-        }
-        else if (style.transform) {
-            /**
-             * If we have previously created a transform but currently don't have any,
-             * reset transform style to none.
-             */
-            style.transform = "none";
-        }
-    }
-    /**
-     * Build a transformOrigin style. Uses the same defaults as the browser for
-     * undefined origins.
-     */
-    if (hasTransformOrigin) {
-        const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
-        style.transformOrigin = `${originX} ${originY} ${originZ}`;
-    }
-}
-
 const createHtmlRenderState = () => ({
     style: {},
     transform: {},
@@ -597,7 +399,7 @@ const createHtmlRenderState = () => ({
 
 function copyRawValuesOnly(target, source, props) {
     for (const key in source) {
-        if (!wrap.isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+        if (!wrap.isMotionValue(source[key]) && !wrap.isForcedMotionValue(key, props)) {
             target[key] = source[key];
         }
     }
@@ -605,7 +407,7 @@ function copyRawValuesOnly(target, source, props) {
 function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
     return React.useMemo(() => {
         const state = createHtmlRenderState();
-        buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
+        wrap.buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
         return Object.assign({}, state.vars, state.style);
     }, [visualState]);
 }
@@ -757,106 +559,15 @@ function filterProps(props, isDom, forwardMotionProps) {
     return filteredProps;
 }
 
-function calcOrigin$1(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : wrap.px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
-const dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-const camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
-    // Normalise path length by setting SVG attribute pathLength to 1
-    attrs.pathLength = 1;
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    const keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = wrap.px.transform(-offset);
-    // Build the dash array
-    const pathLength = wrap.px.transform(length);
-    const pathSpacing = wrap.px.transform(spacing);
-    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
-}
-
-/**
- * Build SVG visual attrbutes, like cx and style.transform
- */
-function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
-// This is object creation, which we try to avoid per-frame.
-...latest }, options, isSVGTag, transformTemplate) {
-    buildHTMLStyles(state, latest, options, transformTemplate);
-    /**
-     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
-     * as normal HTML tags.
-     */
-    if (isSVGTag) {
-        if (state.style.viewBox) {
-            state.attrs.viewBox = state.style.viewBox;
-        }
-        return;
-    }
-    state.attrs = state.style;
-    state.style = {};
-    const { attrs, style, dimensions } = state;
-    /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
-     */
-    if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
-        delete attrs.transform;
-    }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
-    }
-    // Treat x/y not as shortcuts but as actual attributes
-    if (attrX !== undefined)
-        attrs.x = attrX;
-    if (attrY !== undefined)
-        attrs.y = attrY;
-    // Build SVG path if one has been defined
-    if (pathLength !== undefined) {
-        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
-    }
-}
-
 const createSvgRenderState = () => ({
     ...createHtmlRenderState(),
     attrs: {},
 });
 
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
 function useSVGProps(props, visualState, _isStatic, Component) {
     const visualProps = React.useMemo(() => {
         const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);
+        wrap.buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, wrap.isSVGTag(Component), props.transformTemplate);
         return {
             ...state.attrs,
             style: { ...state.style },
@@ -900,116 +611,6 @@ function createUseRender(forwardMotionProps = false) {
     return useRender;
 }
 
-/**
- * Convert camelCase to dash-case properties.
- */
-const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
-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])) ||
-            isForcedMotionValue(key, props)) {
-            newValues[key] = style[key];
-        }
-    }
-    return newValues;
-}
-
-function scrapeMotionValuesFromProps(props, prevProps) {
-    const newValues = scrapeMotionValuesFromProps$1(props, prevProps);
-    for (const key in props) {
-        if (wrap.isMotionValue(props[key]) || wrap.isMotionValue(prevProps[key])) {
-            const targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
-            newValues[targetKey] = props[key];
-        }
-    }
-    return newValues;
-}
-
-function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
-    /**
-     * If the variant definition is a function, resolve.
-     */
-    if (typeof definition === "function") {
-        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
-    }
-    /**
-     * If the variant definition is a variant label, or
-     * the function returned a variant label, resolve.
-     */
-    if (typeof definition === "string") {
-        definition = props.variants && props.variants[definition];
-    }
-    /**
-     * At this point we've resolved both functions and variant labels,
-     * but the resolved variant label might itself have been a function.
-     * If so, resolve. This can only have returned a valid target object.
-     */
-    if (typeof definition === "function") {
-        definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
-    }
-    return definition;
-}
-
-const isKeyframesTarget = (v) => {
-    return Array.isArray(v);
-};
-
-const isCustomValue = (v) => {
-    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-const resolveFinalValueInKeyframes = (v) => {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -1017,7 +618,7 @@ const resolveFinalValueInKeyframes = (v) => {
  */
 function resolveMotionValue(value) {
     const unwrappedValue = wrap.isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
+    return wrap.isCustomValue(unwrappedValue)
         ? unwrappedValue.toValue()
         : unwrappedValue;
 }
@@ -1045,11 +646,11 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
     }
     let { initial, animate } = props;
-    const isControllingVariants$1 = isControllingVariants(props);
-    const isVariantNode$1 = isVariantNode(props);
+    const isControllingVariants = wrap.isControllingVariants(props);
+    const isVariantNode = wrap.isVariantNode(props);
     if (context &&
-        isVariantNode$1 &&
-        !isControllingVariants$1 &&
+        isVariantNode &&
+        !isControllingVariants &&
         props.inherit !== false) {
         if (initial === undefined)
             initial = context.initial;
@@ -1063,10 +664,10 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     const variantToSet = isInitialAnimationBlocked ? animate : initial;
     if (variantToSet &&
         typeof variantToSet !== "boolean" &&
-        !isAnimationControls(variantToSet)) {
+        !wrap.isAnimationControls(variantToSet)) {
         const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
         list.forEach((definition) => {
-            const resolved = resolveVariantFromProps(props, definition);
+            const resolved = wrap.resolveVariantFromProps(props, definition);
             if (!resolved)
                 return;
             const { transitionEnd, transition, ...target } = resolved;
@@ -1095,7 +696,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
 
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
-        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        scrapeMotionValuesFromProps: wrap.scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
         onMount: (props, instance, { renderState, latestValues }) => {
             try {
@@ -1114,15 +715,15 @@ const svgMotionConfig = {
                     height: 0,
                 };
             }
-            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
-            renderSVG(instance, renderState);
+            wrap.buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, wrap.isSVGTag(instance.tagName), props.transformTemplate);
+            wrap.renderSVG(instance, renderState);
         },
     }),
 };
 
 const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
-        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
+        scrapeMotionValuesFromProps: wrap.scrapeMotionValuesFromProps$1,
         createRenderState: createHtmlRenderState,
     }),
 };
@@ -1571,209 +1172,8 @@ function shallowCompare(next, prev) {
     return true;
 }
 
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v);
-
-/**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-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,
-};
-
-/**
- * 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));
-
-/**
- * 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));
-
-/**
- * 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, wrap.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 (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) && wrap.complex.test(targetValue)) {
-            value = wrap.getAnimatableNone(key, targetValue);
-        }
-        visualElement.addValue(key, wrap.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(wrap.isMotionValue(value) && value.add);
-}
-
-const optimizedAppearDataId = "framerAppearId";
-const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
-
-function animateVisualElement(visualElement, definition, options = {}) {
-    visualElement.notify("AnimationStart", definition);
-    let animation;
-    if (Array.isArray(definition)) {
-        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
-        animation = Promise.all(animations);
-    }
-    else if (typeof definition === "string") {
-        animation = animateVariant(visualElement, definition, options);
-    }
-    else {
-        const resolvedDefinition = typeof definition === "function"
-            ? resolveVariant(visualElement, definition, options.custom)
-            : definition;
-        animation = animateTarget(visualElement, resolvedDefinition, options);
-    }
-    return animation.then(() => visualElement.notify("AnimationComplete", definition));
-}
 function animateVariant(visualElement, variant, options = {}) {
-    const resolved = resolveVariant(visualElement, variant, options.custom);
+    const resolved = wrap.resolveVariant(visualElement, variant, options.custom);
     let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
     if (options.transitionOverride) {
         transition = options.transitionOverride;
@@ -1783,7 +1183,7 @@ function animateVariant(visualElement, variant, options = {}) {
      * Otherwise, we resolve a Promise immediately for a composable no-op.
      */
     const getAnimation = resolved
-        ? () => animateTarget(visualElement, resolved, options)
+        ? () => Promise.all(wrap.animateTarget(visualElement, resolved, options))
         : () => Promise.resolve();
     /**
      * If we have children, create a callback that runs all their animations.
@@ -1804,57 +1204,12 @@ function animateVariant(visualElement, variant, options = {}) {
         const [first, last] = when === "beforeChildren"
             ? [getAnimation, getChildAnimations]
             : [getChildAnimations, getAnimation];
-        return first().then(last);
+        return first().then(() => last());
     }
     else {
         return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
     }
 }
-/**
- * @internal
- */
-function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
-    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
-    const willChange = visualElement.getValue("willChange");
-    if (transitionOverride)
-        transition = transitionOverride;
-    const animations = [];
-    const animationTypeState = type &&
-        visualElement.animationState &&
-        visualElement.animationState.getState()[type];
-    for (const key in target) {
-        const value = visualElement.getValue(key);
-        const valueTarget = target[key];
-        if (!value ||
-            valueTarget === undefined ||
-            (animationTypeState &&
-                shouldBlockAnimation(animationTypeState, key))) {
-            continue;
-        }
-        const valueTransition = { delay, elapsed: 0, ...transition };
-        /**
-         * If this is the first time a value is being animated, check
-         * to see if we're handling off from an existing animation.
-         */
-        if (window.HandoffAppearAnimations && !value.hasAnimated) {
-            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
-            if (appearId) {
-                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, wrap.sync);
-            }
-        }
-        let animation = value.start(wrap.createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && wrap.transformProps.has(key)
-            ? { type: false }
-            : valueTransition));
-        if (isWillChangeMotionValue(willChange)) {
-            willChange.add(key);
-            animation = animation.then(() => willChange.remove(key));
-        }
-        animations.push(animation);
-    }
-    return Promise.all(animations).then(() => {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-    });
-}
 function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
     const animations = [];
     const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
@@ -1872,26 +1227,31 @@ function animateChildren(visualElement, variant, delayChildren = 0, staggerChild
     });
     return Promise.all(animations);
 }
-function stopAnimation(visualElement) {
-    visualElement.values.forEach((value) => value.stop());
-}
 function sortByTreeOrder(a, b) {
     return a.sortNodePosition(b);
 }
-/**
- * Decide whether we should block this animation. Previously, we achieved this
- * just by checking whether the key was listed in protectedKeys, but this
- * posed problems if an animation was triggered by afterChildren and protectedKeys
- * had been set to true in the meantime.
- */
-function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
-    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
-    needsAnimating[key] = false;
-    return shouldBlock;
+
+function animateVisualElement(visualElement, definition, options = {}) {
+    visualElement.notify("AnimationStart", definition);
+    let animation;
+    if (Array.isArray(definition)) {
+        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
+        animation = Promise.all(animations);
+    }
+    else if (typeof definition === "string") {
+        animation = animateVariant(visualElement, definition, options);
+    }
+    else {
+        const resolvedDefinition = typeof definition === "function"
+            ? wrap.resolveVariant(visualElement, definition, options.custom)
+            : definition;
+        animation = Promise.all(wrap.animateTarget(visualElement, resolvedDefinition, options));
+    }
+    return animation.then(() => visualElement.notify("AnimationComplete", definition));
 }
 
-const reversePriorityOrder = [...variantPriorityOrder].reverse();
-const numAnimationTypes = variantPriorityOrder.length;
+const reversePriorityOrder = [...wrap.variantPriorityOrder].reverse();
+const numAnimationTypes = wrap.variantPriorityOrder.length;
 function animateList(visualElement) {
     return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
 }
@@ -1904,7 +1264,7 @@ function createAnimationState(visualElement) {
      * each active animation type into an object of resolved values for it.
      */
     const buildResolvedTypeValues = (acc, definition) => {
-        const resolved = resolveVariant(visualElement, definition);
+        const resolved = wrap.resolveVariant(visualElement, definition);
         if (resolved) {
             const { transition, transitionEnd, ...target } = resolved;
             acc = { ...acc, ...target, ...transitionEnd };
@@ -1962,7 +1322,7 @@ function createAnimationState(visualElement) {
             const type = reversePriorityOrder[i];
             const typeState = state[type];
             const prop = props[type] !== undefined ? props[type] : context[type];
-            const propIsVariant = isVariantLabel(prop);
+            const propIsVariant = wrap.isVariantLabel(prop);
             /**
              * If this type has *just* changed isActive status, set activeDelta
              * to that status. Otherwise set to null.
@@ -1997,7 +1357,7 @@ function createAnimationState(visualElement) {
                 // If we didn't and don't have any defined prop for this animation type
                 (!prop && !typeState.prevProp) ||
                 // Or if the prop doesn't define an animation
-                isAnimationControls(prop) ||
+                wrap.isAnimationControls(prop) ||
                 typeof prop === "boolean") {
                 continue;
             }
@@ -2060,7 +1420,7 @@ function createAnimationState(visualElement) {
                      * If both values are keyframes, we need to shallow compare them to
                      * detect whether any value has changed. If it has, we animate it.
                      */
-                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
+                    if (wrap.isKeyframesTarget(next) && wrap.isKeyframesTarget(prev)) {
                         if (!shallowCompare(next, prev) || variantDidChange) {
                             markToAnimate(key);
                         }
@@ -2213,7 +1573,7 @@ class AnimationFeature extends Feature {
     updateAnimationControlsSubscription() {
         const { animate } = this.node.getProps();
         this.unmount();
-        if (isAnimationControls(animate)) {
+        if (wrap.isAnimationControls(animate)) {
             this.unmount = animate.subscribe(this.node);
         }
     }
@@ -2566,212 +1926,10 @@ function resolvePointElastic(dragElastic, label) {
         : dragElastic[label] || 0;
 }
 
-const createAxisDelta = () => ({
-    translate: 0,
-    scale: 1,
-    origin: 0,
-    originPoint: 0,
-});
-const createDelta = () => ({
-    x: createAxisDelta(),
-    y: createAxisDelta(),
-});
-const createAxis = () => ({ min: 0, max: 0 });
-const createBox = () => ({
-    x: createAxis(),
-    y: createAxis(),
-});
-
 function eachAxis(callback) {
     return [callback("x"), callback("y")];
 }
 
-/**
- * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
- * it's easier to consider each axis individually. This function returns a bounding box
- * as a map of single-axis min/max values.
- */
-function convertBoundingBoxToBox({ top, left, right, bottom, }) {
-    return {
-        x: { min: left, max: right },
-        y: { min: top, max: bottom },
-    };
-}
-function convertBoxToBoundingBox({ x, y }) {
-    return { top: y.min, right: x.max, bottom: y.max, left: x.min };
-}
-/**
- * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
- * provided by Framer to allow measured points to be corrected for device scaling. This is used
- * when measuring DOM elements and DOM event points.
- */
-function transformBoxPoints(point, transformPoint) {
-    if (!transformPoint)
-        return point;
-    const topLeft = transformPoint({ x: point.left, y: point.top });
-    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
-    return {
-        top: topLeft.y,
-        left: topLeft.x,
-        bottom: bottomRight.y,
-        right: bottomRight.x,
-    };
-}
-
-function isIdentityScale(scale) {
-    return scale === undefined || scale === 1;
-}
-function hasScale({ scale, scaleX, scaleY }) {
-    return (!isIdentityScale(scale) ||
-        !isIdentityScale(scaleX) ||
-        !isIdentityScale(scaleY));
-}
-function hasTransform(values) {
-    return (hasScale(values) ||
-        has2DTranslate(values) ||
-        values.z ||
-        values.rotate ||
-        values.rotateX ||
-        values.rotateY);
-}
-function has2DTranslate(values) {
-    return is2DTranslate(values.x) || is2DTranslate(values.y);
-}
-function is2DTranslate(value) {
-    return value && value !== "0%";
-}
-
-/**
- * Scales a point based on a factor and an originPoint
- */
-function scalePoint(point, scale, originPoint) {
-    const distanceFromOrigin = point - originPoint;
-    const scaled = scale * distanceFromOrigin;
-    return originPoint + scaled;
-}
-/**
- * Applies a translate/scale delta to a point
- */
-function applyPointDelta(point, translate, scale, originPoint, boxScale) {
-    if (boxScale !== undefined) {
-        point = scalePoint(point, boxScale, originPoint);
-    }
-    return scalePoint(point, scale, originPoint) + translate;
-}
-/**
- * Applies a translate/scale delta to an axis
- */
-function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {
-    axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);
-    axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);
-}
-/**
- * Applies a translate/scale delta to a box
- */
-function applyBoxDelta(box, { x, y }) {
-    applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
-    applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
-}
-/**
- * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
- * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
- *
- * This is the final nested loop within updateLayoutDelta for future refactoring
- */
-function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
-    const treeLength = treePath.length;
-    if (!treeLength)
-        return;
-    // Reset the treeScale
-    treeScale.x = treeScale.y = 1;
-    let node;
-    let delta;
-    for (let i = 0; i < treeLength; i++) {
-        node = treePath[i];
-        delta = node.projectionDelta;
-        /**
-         * TODO: Prefer to remove this, but currently we have motion components with
-         * display: contents in Framer.
-         */
-        const instance = node.instance;
-        if (instance &&
-            instance.style &&
-            instance.style.display === "contents") {
-            continue;
-        }
-        if (isSharedTransition &&
-            node.options.layoutScroll &&
-            node.scroll &&
-            node !== node.root) {
-            transformBox(box, {
-                x: -node.scroll.offset.x,
-                y: -node.scroll.offset.y,
-            });
-        }
-        if (delta) {
-            // Incoporate each ancestor's scale into a culmulative treeScale for this component
-            treeScale.x *= delta.x.scale;
-            treeScale.y *= delta.y.scale;
-            // Apply each ancestor's calculated delta into this component's recorded layout box
-            applyBoxDelta(box, delta);
-        }
-        if (isSharedTransition && hasTransform(node.latestValues)) {
-            transformBox(box, node.latestValues);
-        }
-    }
-    /**
-     * Snap tree scale back to 1 if it's within a non-perceivable threshold.
-     * This will help reduce useless scales getting rendered.
-     */
-    treeScale.x = snapToDefault(treeScale.x);
-    treeScale.y = snapToDefault(treeScale.y);
-}
-function snapToDefault(scale) {
-    if (Number.isInteger(scale))
-        return scale;
-    return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;
-}
-function translateAxis(axis, distance) {
-    axis.min = axis.min + distance;
-    axis.max = axis.max + distance;
-}
-/**
- * Apply a transform to an axis from the latest resolved motion values.
- * This function basically acts as a bridge between a flat motion value map
- * and applyAxisDelta
- */
-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);
-    // Apply the axis delta to the final axis
-    applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
-}
-/**
- * The names of the motion values we want to apply as translation, scale and origin.
- */
-const xKeys$1 = ["x", "scaleX", "originX"];
-const yKeys$1 = ["y", "scaleY", "originY"];
-/**
- * Apply a transform to a box from the latest resolved motion values.
- */
-function transformBox(box, transform) {
-    transformAxis(box.x, transform, xKeys$1);
-    transformAxis(box.y, transform, yKeys$1);
-}
-
-function measureViewportBox(instance, transformPoint) {
-    return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
-}
-function measurePageBox(element, rootProjectionNode, transformPagePoint) {
-    const viewportBox = measureViewportBox(element, transformPagePoint);
-    const { scroll } = rootProjectionNode;
-    if (scroll) {
-        translateAxis(viewportBox.x, scroll.offset.x);
-        translateAxis(viewportBox.y, scroll.offset.y);
-    }
-    return viewportBox;
-}
-
 const elementDragControls = new WeakMap();
 /**
  *
@@ -2794,7 +1952,7 @@ class VisualElementDragControls {
         /**
          * The per-axis resolved elastic values.
          */
-        this.elastic = createBox();
+        this.elastic = wrap.createBox();
         this.visualElement = visualElement;
     }
     start(originEvent, { snapToCursor = false } = {}) {
@@ -2941,7 +2099,7 @@ class VisualElementDragControls {
         const { dragConstraints, dragElastic } = this.getProps();
         const { layout } = this.visualElement.projection || {};
         const prevConstraints = this.constraints;
-        if (dragConstraints && isRefObject(dragConstraints)) {
+        if (dragConstraints && wrap.isRefObject(dragConstraints)) {
             if (!this.constraints) {
                 this.constraints = this.resolveRefConstraints();
             }
@@ -2972,7 +2130,7 @@ class VisualElementDragControls {
     }
     resolveRefConstraints() {
         const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
-        if (!constraints || !isRefObject(constraints))
+        if (!constraints || !wrap.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.");
@@ -2980,17 +2138,17 @@ class VisualElementDragControls {
         // TODO
         if (!projection || !projection.layout)
             return false;
-        const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
+        const constraintsBox = wrap.measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
         let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
         /**
          * If there's an onMeasureDragConstraints listener we call it and
          * if different constraints are returned, set constraints to that
          */
         if (onMeasureDragConstraints) {
-            const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
+            const userConstraints = onMeasureDragConstraints(wrap.convertBoxToBoundingBox(measuredConstraints));
             this.hasMutatedConstraints = !!userConstraints;
             if (userConstraints) {
-                measuredConstraints = convertBoundingBoxToBox(userConstraints);
+                measuredConstraints = wrap.convertBoundingBoxToBox(userConstraints);
             }
         }
         return measuredConstraints;
@@ -3034,7 +2192,7 @@ class VisualElementDragControls {
     }
     startAxisValueAnimation(axis, transition) {
         const axisValue = this.getAxisMotionValue(axis);
-        return axisValue.start(wrap.createMotionValueAnimation(axis, axisValue, 0, transition));
+        return axisValue.start(wrap.animateMotionValue(axis, axisValue, 0, transition));
     }
     stopAnimation() {
         eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -3077,7 +2235,7 @@ class VisualElementDragControls {
             return;
         const { drag, dragConstraints } = this.getProps();
         const { projection } = this.visualElement;
-        if (!isRefObject(dragConstraints) || !projection || !this.constraints)
+        if (!wrap.isRefObject(dragConstraints) || !projection || !this.constraints)
             return;
         /**
          * Stop current animations as there can be visual glitching if we try to do
@@ -3135,7 +2293,7 @@ class VisualElementDragControls {
         });
         const measureDragConstraints = () => {
             const { dragConstraints } = this.getProps();
-            if (isRefObject(dragConstraints)) {
+            if (wrap.isRefObject(dragConstraints)) {
                 this.constraints = this.resolveRefConstraints();
             }
         };
@@ -3381,9 +2539,9 @@ function copyBoxInto(box, originBox) {
  */
 function removePointDelta(point, translate, scale, originPoint, boxScale) {
     point -= translate;
-    point = scalePoint(point, 1 / scale, originPoint);
+    point = wrap.scalePoint(point, 1 / scale, originPoint);
     if (boxScale !== undefined) {
-        point = scalePoint(point, 1 / boxScale, originPoint);
+        point = wrap.scalePoint(point, 1 / boxScale, originPoint);
     }
     return point;
 }
@@ -3795,8 +2953,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         mount(instance, isLayoutDirty = false) {
             if (this.instance)
                 return;
-            this.isSVG =
-                instance instanceof SVGElement && instance.tagName !== "svg";
+            this.isSVG = wrap.isSVGElement(instance);
             this.instance = instance;
             const { layoutId, layout, visualElement } = this.options;
             if (visualElement && !visualElement.current) {
@@ -4054,7 +3211,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
-            this.layoutCorrected = createBox();
+            this.layoutCorrected = wrap.createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
             this.notifyListeners("measure", this.layout.layoutBox);
@@ -4090,7 +3247,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
             if (isResetRequested &&
                 (hasProjection ||
-                    hasTransform(this.latestValues) ||
+                    wrap.hasTransform(this.latestValues) ||
                     transformTemplateHasChanged)) {
                 resetTransform(this.instance, transformTemplateValue);
                 this.shouldResetTransform = false;
@@ -4120,18 +3277,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         measurePageBox() {
             const { visualElement } = this.options;
             if (!visualElement)
-                return createBox();
+                return wrap.createBox();
             const box = visualElement.measureViewportBox();
             // Remove viewport scroll to give page-relative coordinates
             const { scroll } = this.root;
             if (scroll) {
-                translateAxis(box.x, scroll.offset.x);
-                translateAxis(box.y, scroll.offset.y);
+                wrap.translateAxis(box.x, scroll.offset.x);
+                wrap.translateAxis(box.y, scroll.offset.y);
             }
             return box;
         }
         removeElementScroll(box) {
-            const boxWithoutScroll = createBox();
+            const boxWithoutScroll = wrap.createBox();
             copyBoxInto(boxWithoutScroll, box);
             /**
              * Performance TODO: Keep a cumulative scroll offset down the tree
@@ -4153,18 +3310,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                          * to the measured bounding box.
                          */
                         if (rootScroll) {
-                            translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
-                            translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
+                            wrap.translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
+                            wrap.translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
                         }
                     }
-                    translateAxis(boxWithoutScroll.x, scroll.offset.x);
-                    translateAxis(boxWithoutScroll.y, scroll.offset.y);
+                    wrap.translateAxis(boxWithoutScroll.x, scroll.offset.x);
+                    wrap.translateAxis(boxWithoutScroll.y, scroll.offset.y);
                 }
             }
             return boxWithoutScroll;
         }
         applyTransform(box, transformOnly = false) {
-            const withTransforms = createBox();
+            const withTransforms = wrap.createBox();
             copyBoxInto(withTransforms, box);
             for (let i = 0; i < this.path.length; i++) {
                 const node = this.path[i];
@@ -4172,36 +3329,36 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     node.options.layoutScroll &&
                     node.scroll &&
                     node !== node.root) {
-                    transformBox(withTransforms, {
+                    wrap.transformBox(withTransforms, {
                         x: -node.scroll.offset.x,
                         y: -node.scroll.offset.y,
                     });
                 }
-                if (!hasTransform(node.latestValues))
+                if (!wrap.hasTransform(node.latestValues))
                     continue;
-                transformBox(withTransforms, node.latestValues);
+                wrap.transformBox(withTransforms, node.latestValues);
             }
-            if (hasTransform(this.latestValues)) {
-                transformBox(withTransforms, this.latestValues);
+            if (wrap.hasTransform(this.latestValues)) {
+                wrap.transformBox(withTransforms, this.latestValues);
             }
             return withTransforms;
         }
         removeTransform(box) {
-            const boxWithoutTransform = createBox();
+            const boxWithoutTransform = wrap.createBox();
             copyBoxInto(boxWithoutTransform, box);
             for (let i = 0; i < this.path.length; i++) {
                 const node = this.path[i];
                 if (!node.instance)
                     continue;
-                if (!hasTransform(node.latestValues))
+                if (!wrap.hasTransform(node.latestValues))
                     continue;
-                hasScale(node.latestValues) && node.updateSnapshot();
-                const sourceBox = createBox();
+                wrap.hasScale(node.latestValues) && node.updateSnapshot();
+                const sourceBox = wrap.createBox();
                 const nodeBox = node.measurePageBox();
                 copyBoxInto(sourceBox, nodeBox);
                 removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);
             }
-            if (hasTransform(this.latestValues)) {
+            if (wrap.hasTransform(this.latestValues)) {
                 removeBoxTransforms(boxWithoutTransform, this.latestValues);
             }
             return boxWithoutTransform;
@@ -4268,8 +3425,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 const relativeParent = this.getClosestProjectingParent();
                 if (relativeParent && relativeParent.layout) {
                     this.relativeParent = relativeParent;
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
+                    this.relativeTarget = wrap.createBox();
+                    this.relativeTargetOrigin = wrap.createBox();
                     calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
@@ -4287,8 +3444,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Lazy-init target data structure
              */
             if (!this.target) {
-                this.target = createBox();
-                this.targetWithTransforms = createBox();
+                this.target = wrap.createBox();
+                this.targetWithTransforms = wrap.createBox();
             }
             /**
              * If we've got a relative box for this component, resolve it into a target relative to the parent.
@@ -4320,7 +3477,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 else {
                     copyBoxInto(this.target, this.layout.layoutBox);
                 }
-                applyBoxDelta(this.target, this.targetDelta);
+                wrap.applyBoxDelta(this.target, this.targetDelta);
             }
             else {
                 /**
@@ -4340,8 +3497,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     !relativeParent.options.layoutScroll &&
                     relativeParent.target) {
                     this.relativeParent = relativeParent;
-                    this.relativeTarget = createBox();
-                    this.relativeTargetOrigin = createBox();
+                    this.relativeTarget = wrap.createBox();
+                    this.relativeTargetOrigin = wrap.createBox();
                     calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
@@ -4356,8 +3513,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         getClosestProjectingParent() {
             if (!this.parent ||
-                hasScale(this.parent.latestValues) ||
-                has2DTranslate(this.parent.latestValues)) {
+                wrap.hasScale(this.parent.latestValues) ||
+                wrap.has2DTranslate(this.parent.latestValues)) {
                 return undefined;
             }
             if (this.parent.isProjecting()) {
@@ -4424,13 +3581,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * Apply all the parent deltas to this box to produce the corrected box. This
              * is the layout box, as it will appear on screen as a result of the transforms of its parents.
              */
-            applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
+            wrap.applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
             const { target } = lead;
             if (!target)
                 return;
             if (!this.projectionDelta) {
-                this.projectionDelta = createDelta();
-                this.projectionDeltaWithTransform = createDelta();
+                this.projectionDelta = wrap.createDelta();
+                this.projectionDeltaWithTransform = wrap.createDelta();
             }
             const prevTreeScaleX = this.treeScale.x;
             const prevTreeScaleY = this.treeScale.y;
@@ -4482,13 +3639,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 ? snapshot.latestValues
                 : {};
             const mixedValues = { ...this.latestValues };
-            const targetDelta = createDelta();
+            const targetDelta = wrap.createDelta();
             if (!this.relativeParent ||
                 !this.relativeParent.options.layoutRoot) {
                 this.relativeTarget = this.relativeTargetOrigin = undefined;
             }
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
-            const relativeLayout = createBox();
+            const relativeLayout = wrap.createBox();
             const snapshotSource = snapshot ? snapshot.source : undefined;
             const layoutSource = this.layout ? this.layout.source : undefined;
             const isSharedLayoutAnimation = snapshotSource !== layoutSource;
@@ -4521,7 +3678,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                         this.isProjectionDirty = false;
                     }
                     if (!prevRelativeTarget)
-                        prevRelativeTarget = createBox();
+                        prevRelativeTarget = wrap.createBox();
                     copyBoxInto(prevRelativeTarget, this.relativeTarget);
                 }
                 if (isSharedLayoutAnimation) {
@@ -4551,8 +3708,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.pendingAnimation = wrap.sync.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
-                this.currentAnimation = wrap.animate(0, animationTarget, {
+                this.currentAnimation = wrap.animateSingleValue(0, animationTarget, {
                     ...options,
+                    // keyframes: [0, animationTarget],÷
                     onUpdate: (latest) => {
                         this.mixTargetDelta(latest);
                         options.onUpdate && options.onUpdate(latest);
@@ -4602,7 +3760,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.layout &&
                 layout &&
                 shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
-                target = this.target || createBox();
+                target = this.target || wrap.createBox();
                 const xLength = calcLength(this.layout.layoutBox.x);
                 target.x.min = lead.target.x.min;
                 target.x.max = target.x.min + xLength;
@@ -4616,7 +3774,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * This is the final box that we will then project into by calculating a transform delta and
              * applying it to the corrected box.
              */
-            transformBox(targetWithTransforms, latestValues);
+            wrap.transformBox(targetWithTransforms, latestValues);
             /**
              * Update the delta between the corrected box and the final target box, after
              * user-set transforms are applied to it. This will be used by the renderer to
@@ -4753,7 +3911,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                     emptyStyles.pointerEvents =
                         resolveMotionValue(styleProp.pointerEvents) || "";
                 }
-                if (this.hasProjected && !hasTransform(this.latestValues)) {
+                if (this.hasProjected && !wrap.hasTransform(this.latestValues)) {
                     emptyStyles.transform = transformTemplate
                         ? transformTemplate({}, "")
                         : "none";
@@ -4798,10 +3956,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * Apply scale correction
              */
-            for (const key in scaleCorrectors) {
+            for (const key in wrap.scaleCorrectors) {
                 if (valuesToRender[key] === undefined)
                     continue;
-                const { correct, applyTo } = scaleCorrectors[key];
+                const { correct, applyTo } = wrap.scaleCorrectors[key];
                 /**
                  * Only apply scale correction to the value if we have an
                  * active projection transform. Otherwise these values become
@@ -4879,9 +4037,9 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        const layoutDelta = createDelta();
+        const layoutDelta = wrap.createDelta();
         calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
-        const visualDelta = createDelta();
+        const visualDelta = wrap.createDelta();
         if (isShared) {
             calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
         }
@@ -4899,9 +4057,9 @@ function notifyLayoutUpdate(node) {
             if (relativeParent && !relativeParent.resumeFrom) {
                 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                 if (parentSnapshot && parentLayout) {
-                    const relativeSnapshot = createBox();
+                    const relativeSnapshot = wrap.createBox();
                     calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
-                    const relativeLayout = createBox();
+                    const relativeLayout = wrap.createBox();
                     calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
@@ -5140,89 +4298,6 @@ const correctBorderRadius = {
     },
 };
 
-/**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
-function parseCSSVariable(current) {
-    const match = cssVariableRegex.exec(current);
-    if (!match)
-        return [,];
-    const [, token, fallback] = match;
-    return [token, fallback];
-}
-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.`);
-    const [token, fallback] = parseCSSVariable(current);
-    // No CSS variable detected
-    if (!token)
-        return;
-    // Attempt to read this CSS variable off the element
-    const resolved = window.getComputedStyle(element).getPropertyValue(token);
-    if (resolved) {
-        return resolved.trim();
-    }
-    else if (isCSSVariableToken(fallback)) {
-        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
-        return getVariableValue(fallback, element, depth + 1);
-    }
-    else {
-        return fallback;
-    }
-}
-/**
- * Resolve CSS variables from
- *
- * @internal
- */
-function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
-    const element = visualElement.current;
-    if (!(element instanceof Element))
-        return { target, transitionEnd };
-    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
-    // only if they change but I think this reads clearer and this isn't a performance-critical path.
-    if (transitionEnd) {
-        transitionEnd = { ...transitionEnd };
-    }
-    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
-    visualElement.values.forEach((value) => {
-        const current = value.get();
-        if (!isCSSVariableToken(current))
-            return;
-        const resolved = getVariableValue(current, element);
-        if (resolved)
-            value.set(resolved);
-    });
-    // Cycle through every target property and resolve CSS variables. Currently
-    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
-    for (const key in target) {
-        const current = target[key];
-        if (!isCSSVariableToken(current))
-            continue;
-        const resolved = getVariableValue(current, element);
-        if (!resolved)
-            continue;
-        // Clone target if it hasn't already been
-        target[key] = resolved;
-        if (!transitionEnd)
-            transitionEnd = {};
-        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
-        // CSS variable. This will ensure that after the animation the component will reflect
-        // changes in the value of the CSS variable.
-        if (transitionEnd[key] === undefined) {
-            transitionEnd[key] = current;
-        }
-    }
-    return { target, transitionEnd };
-}
-
 const varToken = "_$css";
 const correctBoxShadow = {
     correct: (latest, { treeScale, projectionDelta }) => {
@@ -5233,7 +4308,7 @@ const correctBoxShadow = {
         const containsCSSVariables = latest.includes("var(");
         const cssVariables = [];
         if (containsCSSVariables) {
-            latest = latest.replace(cssVariableRegex, (match) => {
+            latest = latest.replace(wrap.cssVariableRegex, (match) => {
                 cssVariables.push(match);
                 return varToken;
             });
@@ -5275,873 +4350,6 @@ const correctBoxShadow = {
     },
 };
 
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    "x",
-    "y",
-]);
-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 getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-    if (transform === "none" || !transform)
-        return 0;
-    const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
-    }
-    else {
-        const matrix = transform.match(/^matrix\((.+)\)$/);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
-        }
-        else {
-            return 0;
-        }
-    }
-};
-const transformKeys = new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = wrap.transformPropOrder.filter((key) => !transformKeys.has(key));
-function removeNonTranslationalTransform(visualElement) {
-    const removedTransforms = [];
-    nonTranslationalTransformKeys.forEach((key) => {
-        const value = visualElement.getValue(key);
-        if (value !== undefined) {
-            removedTransforms.push([key, value.get()]);
-            value.set(key.startsWith("scale") ? 1 : 0);
-        }
-    });
-    // Apply changes to element before measurement
-    if (removedTransforms.length)
-        visualElement.render();
-    return removedTransforms;
-}
-const positionalValues = {
-    // Dimensions
-    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-    top: (_bbox, { top }) => parseFloat(top),
-    left: (_bbox, { left }) => parseFloat(left),
-    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-    // Transform
-    x: getTranslateFromMatrix(4, 13),
-    y: getTranslateFromMatrix(5, 14),
-};
-const convertChangedValueTypes = (target, visualElement, changedKeys) => {
-    const originBbox = visualElement.measureViewportBox();
-    const element = visualElement.current;
-    const elementComputedStyle = getComputedStyle(element);
-    const { display } = elementComputedStyle;
-    const origin = {};
-    // If the element is currently set to display: "none", make it visible before
-    // measuring the target bounding box
-    if (display === "none") {
-        visualElement.setStaticValue("display", target.display || "block");
-    }
-    /**
-     * Record origins before we render and update styles
-     */
-    changedKeys.forEach((key) => {
-        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
-    });
-    // Apply the latest values (as set in checkAndConvertChangedValueTypes)
-    visualElement.render();
-    const targetBbox = visualElement.measureViewportBox();
-    changedKeys.forEach((key) => {
-        // Restore styles to their **calculated computed style**, not their actual
-        // originally set style. This allows us to animate between equivalent pixel units.
-        const value = visualElement.getValue(key);
-        value && value.jump(origin[key]);
-        target[key] = positionalValues[key](targetBbox, elementComputedStyle);
-    });
-    return target;
-};
-const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
-    target = { ...target };
-    transitionEnd = { ...transitionEnd };
-    const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
-    // We want to remove any transform values that could affect the element's bounding box before
-    // it's measured. We'll reapply these later.
-    let removedTransformValues = [];
-    let hasAttemptedToRemoveTransformValues = false;
-    const changedValueTypeKeys = [];
-    targetPositionalKeys.forEach((key) => {
-        const value = visualElement.getValue(key);
-        if (!visualElement.hasValue(key))
-            return;
-        let from = origin[key];
-        let fromType = findDimensionValueType(from);
-        const to = target[key];
-        let toType;
-        // TODO: The current implementation of this basically throws an error
-        // if you try and do value conversion via keyframes. There's probably
-        // a way of doing this but the performance implications would need greater scrutiny,
-        // as it'd be doing multiple resize-remeasure operations.
-        if (isKeyframesTarget(to)) {
-            const numKeyframes = to.length;
-            const fromIndex = to[0] === null ? 1 : 0;
-            from = to[fromIndex];
-            fromType = findDimensionValueType(from);
-            for (let i = fromIndex; i < numKeyframes; i++) {
-                if (!toType) {
-                    toType = findDimensionValueType(to[i]);
-                    wrap.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");
-                }
-            }
-        }
-        else {
-            toType = findDimensionValueType(to);
-        }
-        if (fromType !== toType) {
-            // If they're both just number or px, convert them both to numbers rather than
-            // relying on resize/remeasure to convert (which is wasteful in this situation)
-            if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
-                const current = value.get();
-                if (typeof current === "string") {
-                    value.set(parseFloat(current));
-                }
-                if (typeof to === "string") {
-                    target[key] = parseFloat(to);
-                }
-                else if (Array.isArray(to) && toType === wrap.px) {
-                    target[key] = to.map(parseFloat);
-                }
-            }
-            else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
-                (toType === null || toType === void 0 ? void 0 : toType.transform) &&
-                (from === 0 || to === 0)) {
-                // If one or the other value is 0, it's safe to coerce it to the
-                // type of the other without measurement
-                if (from === 0) {
-                    value.set(toType.transform(from));
-                }
-                else {
-                    target[key] = fromType.transform(to);
-                }
-            }
-            else {
-                // If we're going to do value conversion via DOM measurements, we first
-                // need to remove non-positional transform values that could affect the bbox measurements.
-                if (!hasAttemptedToRemoveTransformValues) {
-                    removedTransformValues =
-                        removeNonTranslationalTransform(visualElement);
-                    hasAttemptedToRemoveTransformValues = true;
-                }
-                changedValueTypeKeys.push(key);
-                transitionEnd[key] =
-                    transitionEnd[key] !== undefined
-                        ? transitionEnd[key]
-                        : target[key];
-                value.jump(to);
-            }
-        }
-    });
-    if (changedValueTypeKeys.length) {
-        const scrollY = changedValueTypeKeys.indexOf("height") >= 0
-            ? window.pageYOffset
-            : null;
-        const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
-        // If we removed transform values, reapply them before the next render
-        if (removedTransformValues.length) {
-            removedTransformValues.forEach(([key, value]) => {
-                visualElement.getValue(key).set(value);
-            });
-        }
-        // Reapply original values
-        visualElement.render();
-        // Restore scroll position
-        if (isBrowser && scrollY !== null) {
-            window.scrollTo({ top: scrollY });
-        }
-        return { target: convertedTarget, transitionEnd };
-    }
-    else {
-        return { target, transitionEnd };
-    }
-};
-/**
- * Convert value types for x/y/width/height/top/left/bottom/right
- *
- * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
- *
- * @internal
- */
-function unitConversion(visualElement, target, origin, transitionEnd) {
-    return hasPositionalKey(target)
-        ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
-        : { target, transitionEnd };
-}
-
-/**
- * Parse a DOM variant to make it animatable. This involves resolving CSS variables
- * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
- */
-const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
-    const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
-    target = resolved.target;
-    transitionEnd = resolved.transitionEnd;
-    return unitConversion(visualElement, target, origin, transitionEnd);
-};
-
-// Does this device prefer reduced motion? Returns `null` server-side.
-const prefersReducedMotion = { current: null };
-const hasReducedMotionListener = { current: false };
-
-function initPrefersReducedMotion() {
-    hasReducedMotionListener.current = true;
-    if (!isBrowser)
-        return;
-    if (window.matchMedia) {
-        const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
-        const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
-        motionMediaQuery.addListener(setReducedMotionPreferences);
-        setReducedMotionPreferences();
-    }
-    else {
-        prefersReducedMotion.current = false;
-    }
-}
-
-function updateMotionValuesFromProps(element, next, prev) {
-    const { willChange } = next;
-    for (const key in next) {
-        const nextValue = next[key];
-        const prevValue = prev[key];
-        if (wrap.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.
-             */
-            element.addValue(key, nextValue);
-            if (isWillChangeMotionValue(willChange)) {
-                willChange.add(key);
-            }
-            /**
-             * Check the version of the incoming motion value with this version
-             * and warn against mismatches.
-             */
-            if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.3.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.3.4 may not work as expected.`);
-            }
-        }
-        else if (wrap.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 }));
-            if (isWillChangeMotionValue(willChange)) {
-                willChange.remove(key);
-            }
-        }
-        else if (prevValue !== nextValue) {
-            /**
-             * If this is a flat value that has changed, update the motion value
-             * or create one if it doesn't exist. We only want to do this if we're
-             * not handling the value with our animation state.
-             */
-            if (element.hasValue(key)) {
-                const existingValue = element.getValue(key);
-                // TODO: Only update values that aren't being animated or even looked at
-                !existingValue.hasAnimated && existingValue.set(nextValue);
-            }
-            else {
-                const latestValue = element.getStaticValue(key);
-                element.addValue(key, wrap.motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));
-            }
-        }
-    }
-    // Handle removed values
-    for (const key in prev) {
-        if (next[key] === undefined)
-            element.removeValue(key);
-    }
-    return next;
-}
-
-const featureNames = Object.keys(featureDefinitions);
-const numFeatures = featureNames.length;
-const propEventHandlers = [
-    "AnimationStart",
-    "AnimationComplete",
-    "Update",
-    "BeforeLayoutMeasure",
-    "LayoutMeasure",
-    "LayoutAnimationStart",
-    "LayoutAnimationComplete",
-];
-const numVariantProps = variantProps.length;
-/**
- * A VisualElement is an imperative abstraction around UI elements such as
- * HTMLElement, SVGElement, Three.Object3D etc.
- */
-class VisualElement {
-    constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {
-        /**
-         * A reference to the current underlying Instance, e.g. a HTMLElement
-         * or Three.Mesh etc.
-         */
-        this.current = null;
-        /**
-         * A set containing references to this VisualElement's children.
-         */
-        this.children = new Set();
-        /**
-         * Determine what role this visual element should take in the variant tree.
-         */
-        this.isVariantNode = false;
-        this.isControllingVariants = false;
-        /**
-         * Decides whether this VisualElement should animate in reduced motion
-         * mode.
-         *
-         * TODO: This is currently set on every individual VisualElement but feels
-         * like it could be set globally.
-         */
-        this.shouldReduceMotion = null;
-        /**
-         * A map of all motion values attached to this visual element. Motion
-         * values are source of truth for any given animated value. A motion
-         * value might be provided externally by the component via props.
-         */
-        this.values = new Map();
-        /**
-         * Cleanup functions for active features (hover/tap/exit etc)
-         */
-        this.features = {};
-        /**
-         * A map of every subscription that binds the provided or generated
-         * motion values onChange listeners to this visual element.
-         */
-        this.valueSubscriptions = new Map();
-        /**
-         * A reference to the previously-provided motion values as returned
-         * from scrapeMotionValuesFromProps. We use the keys in here to determine
-         * if any motion values need to be removed after props are updated.
-         */
-        this.prevMotionValues = {};
-        /**
-         * An object containing a SubscriptionManager for each active event.
-         */
-        this.events = {};
-        /**
-         * An object containing an unsubscribe function for each prop event subscription.
-         * For example, every "Update" event can have multiple subscribers via
-         * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
-         */
-        this.propEventSubscriptions = {};
-        this.notifyUpdate = () => this.notify("Update", this.latestValues);
-        this.render = () => {
-            if (!this.current)
-                return;
-            this.triggerBuild();
-            this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
-        };
-        this.scheduleRender = () => wrap.sync.render(this.render, false, true);
-        const { latestValues, renderState } = visualState;
-        this.latestValues = latestValues;
-        this.baseTarget = { ...latestValues };
-        this.initialValues = props.initial ? { ...latestValues } : {};
-        this.renderState = renderState;
-        this.parent = parent;
-        this.props = props;
-        this.presenceContext = presenceContext;
-        this.depth = parent ? parent.depth + 1 : 0;
-        this.reducedMotionConfig = reducedMotionConfig;
-        this.options = options;
-        this.isControllingVariants = isControllingVariants(props);
-        this.isVariantNode = isVariantNode(props);
-        if (this.isVariantNode) {
-            this.variantChildren = new Set();
-        }
-        this.manuallyAnimateOnMount = Boolean(parent && parent.current);
-        /**
-         * Any motion values that are provided to the element when created
-         * aren't yet bound to the element, as this would technically be impure.
-         * However, we iterate through the motion values and set them to the
-         * initial values for this component.
-         *
-         * TODO: This is impure and we should look at changing this to run on mount.
-         * Doing so will break some tests but this isn't neccessarily a breaking change,
-         * more a reflection of the test.
-         */
-        const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});
-        for (const key in initialMotionValues) {
-            const value = initialMotionValues[key];
-            if (latestValues[key] !== undefined && wrap.isMotionValue(value)) {
-                value.set(latestValues[key], false);
-                if (isWillChangeMotionValue(willChange)) {
-                    willChange.add(key);
-                }
-            }
-        }
-    }
-    /**
-     * This method takes React props and returns found MotionValues. For example, HTML
-     * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
-     *
-     * This isn't an abstract method as it needs calling in the constructor, but it is
-     * intended to be one.
-     */
-    scrapeMotionValuesFromProps(_props, _prevProps) {
-        return {};
-    }
-    mount(instance) {
-        this.current = instance;
-        if (this.projection) {
-            this.projection.mount(instance);
-        }
-        if (this.parent && this.isVariantNode && !this.isControllingVariants) {
-            this.removeFromVariantTree = this.parent.addVariantChild(this);
-        }
-        this.values.forEach((value, key) => this.bindToMotionValue(key, value));
-        if (!hasReducedMotionListener.current) {
-            initPrefersReducedMotion();
-        }
-        this.shouldReduceMotion =
-            this.reducedMotionConfig === "never"
-                ? false
-                : this.reducedMotionConfig === "always"
-                    ? 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.");
-        }
-        if (this.parent)
-            this.parent.children.add(this);
-        this.update(this.props, this.presenceContext);
-    }
-    unmount() {
-        this.projection && this.projection.unmount();
-        wrap.cancelSync.update(this.notifyUpdate);
-        wrap.cancelSync.render(this.render);
-        this.valueSubscriptions.forEach((remove) => remove());
-        this.removeFromVariantTree && this.removeFromVariantTree();
-        this.parent && this.parent.children.delete(this);
-        for (const key in this.events) {
-            this.events[key].clear();
-        }
-        for (const key in this.features) {
-            this.features[key].unmount();
-        }
-        this.current = null;
-    }
-    bindToMotionValue(key, value) {
-        const valueIsTransform = wrap.transformProps.has(key);
-        const removeOnChange = value.on("change", (latestValue) => {
-            this.latestValues[key] = latestValue;
-            this.props.onUpdate &&
-                wrap.sync.update(this.notifyUpdate, false, true);
-            if (valueIsTransform && this.projection) {
-                this.projection.isTransformDirty = true;
-            }
-        });
-        const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
-        this.valueSubscriptions.set(key, () => {
-            removeOnChange();
-            removeOnRenderRequest();
-        });
-    }
-    sortNodePosition(other) {
-        /**
-         * If these nodes aren't even of the same type we can't compare their depth.
-         */
-        if (!this.current ||
-            !this.sortInstanceNodePosition ||
-            this.type !== other.type) {
-            return 0;
-        }
-        return this.sortInstanceNodePosition(this.current, other.current);
-    }
-    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig) {
-        let ProjectionNodeConstructor;
-        let MeasureLayout;
-        /**
-         * If we're in development mode, check to make sure we're not rendering a motion component
-         * as a child of LazyMotion, as this will break the file-size benefits of using it.
-         */
-        if (process.env.NODE_ENV !== "production" &&
-            preloadedFeatures &&
-            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);
-        }
-        for (let i = 0; i < numFeatures; i++) {
-            const name = featureNames[i];
-            const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
-            if (ProjectionNode)
-                ProjectionNodeConstructor = ProjectionNode;
-            if (isEnabled(renderedProps)) {
-                if (!this.features[name] && FeatureConstructor) {
-                    this.features[name] = new FeatureConstructor(this);
-                }
-                if (MeasureLayoutComponent) {
-                    MeasureLayout = MeasureLayoutComponent;
-                }
-            }
-        }
-        if (!this.projection && ProjectionNodeConstructor) {
-            this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
-            const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
-            this.projection.setOptions({
-                layoutId,
-                layout,
-                alwaysMeasureLayout: Boolean(drag) ||
-                    (dragConstraints && isRefObject(dragConstraints)),
-                visualElement: this,
-                scheduleRender: () => this.scheduleRender(),
-                /**
-                 * TODO: Update options in an effect. This could be tricky as it'll be too late
-                 * to update by the time layout animations run.
-                 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-                 * ensuring it gets called if there's no potential layout animations.
-                 *
-                 */
-                animationType: typeof layout === "string" ? layout : "both",
-                initialPromotionConfig: initialLayoutGroupConfig,
-                layoutScroll,
-                layoutRoot,
-            });
-        }
-        return MeasureLayout;
-    }
-    updateFeatures() {
-        for (const key in this.features) {
-            const feature = this.features[key];
-            if (feature.isMounted) {
-                feature.update(this.props, this.prevProps);
-            }
-            else {
-                feature.mount();
-                feature.isMounted = true;
-            }
-        }
-    }
-    triggerBuild() {
-        this.build(this.renderState, this.latestValues, this.options, this.props);
-    }
-    /**
-     * Measure the current viewport box with or without transforms.
-     * Only measures axis-aligned boxes, rotate and skew must be manually
-     * removed with a re-render to work.
-     */
-    measureViewportBox() {
-        return this.current
-            ? this.measureInstanceViewportBox(this.current, this.props)
-            : createBox();
-    }
-    getStaticValue(key) {
-        return this.latestValues[key];
-    }
-    setStaticValue(key, value) {
-        this.latestValues[key] = value;
-    }
-    /**
-     * Make a target animatable by Popmotion. For instance, if we're
-     * trying to animate width from 100px to 100vw we need to measure 100vw
-     * in pixels to determine what we really need to animate to. This is also
-     * pluggable to support Framer's custom value types like Color,
-     * and CSS variables.
-     */
-    makeTargetAnimatable(target, canMutate = true) {
-        return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);
-    }
-    /**
-     * Update the provided props. Ensure any newly-added motion values are
-     * added to our map, old ones removed, and listeners updated.
-     */
-    update(props, presenceContext) {
-        if (props.transformTemplate || this.props.transformTemplate) {
-            this.scheduleRender();
-        }
-        this.prevProps = this.props;
-        this.props = props;
-        this.prevPresenceContext = this.presenceContext;
-        this.presenceContext = presenceContext;
-        /**
-         * Update prop event handlers ie onAnimationStart, onAnimationComplete
-         */
-        for (let i = 0; i < propEventHandlers.length; i++) {
-            const key = propEventHandlers[i];
-            if (this.propEventSubscriptions[key]) {
-                this.propEventSubscriptions[key]();
-                delete this.propEventSubscriptions[key];
-            }
-            const listener = props["on" + key];
-            if (listener) {
-                this.propEventSubscriptions[key] = this.on(key, listener);
-            }
-        }
-        this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);
-        if (this.handleChildMotionValue) {
-            this.handleChildMotionValue();
-        }
-    }
-    getProps() {
-        return this.props;
-    }
-    /**
-     * Returns the variant definition with a given name.
-     */
-    getVariant(name) {
-        return this.props.variants ? this.props.variants[name] : undefined;
-    }
-    /**
-     * Returns the defined default transition on this component.
-     */
-    getDefaultTransition() {
-        return this.props.transition;
-    }
-    getTransformPagePoint() {
-        return this.props.transformPagePoint;
-    }
-    getClosestVariantNode() {
-        return this.isVariantNode
-            ? this
-            : this.parent
-                ? this.parent.getClosestVariantNode()
-                : undefined;
-    }
-    getVariantContext(startAtParent = false) {
-        if (startAtParent) {
-            return this.parent ? this.parent.getVariantContext() : undefined;
-        }
-        if (!this.isControllingVariants) {
-            const context = this.parent
-                ? this.parent.getVariantContext() || {}
-                : {};
-            if (this.props.initial !== undefined) {
-                context.initial = this.props.initial;
-            }
-            return context;
-        }
-        const context = {};
-        for (let i = 0; i < numVariantProps; i++) {
-            const name = variantProps[i];
-            const prop = this.props[name];
-            if (isVariantLabel(prop) || prop === false) {
-                context[name] = prop;
-            }
-        }
-        return context;
-    }
-    /**
-     * Add a child visual element to our set of children.
-     */
-    addVariantChild(child) {
-        const closestVariantNode = this.getClosestVariantNode();
-        if (closestVariantNode) {
-            closestVariantNode.variantChildren &&
-                closestVariantNode.variantChildren.add(child);
-            return () => closestVariantNode.variantChildren.delete(child);
-        }
-    }
-    /**
-     * Add a motion value and bind it to this visual element.
-     */
-    addValue(key, value) {
-        // Remove existing value if it exists
-        if (value !== this.values.get(key)) {
-            this.removeValue(key);
-            this.bindToMotionValue(key, value);
-        }
-        this.values.set(key, value);
-        this.latestValues[key] = value.get();
-    }
-    /**
-     * Remove a motion value and unbind any active subscriptions.
-     */
-    removeValue(key) {
-        this.values.delete(key);
-        const unsubscribe = this.valueSubscriptions.get(key);
-        if (unsubscribe) {
-            unsubscribe();
-            this.valueSubscriptions.delete(key);
-        }
-        delete this.latestValues[key];
-        this.removeValueFromRenderState(key, this.renderState);
-    }
-    /**
-     * Check whether we have a motion value for this key
-     */
-    hasValue(key) {
-        return this.values.has(key);
-    }
-    getValue(key, defaultValue) {
-        if (this.props.values && this.props.values[key]) {
-            return this.props.values[key];
-        }
-        let value = this.values.get(key);
-        if (value === undefined && defaultValue !== undefined) {
-            value = wrap.motionValue(defaultValue, { owner: this });
-            this.addValue(key, value);
-        }
-        return value;
-    }
-    /**
-     * If we're trying to animate to a previously unencountered value,
-     * we need to check for it in our state and as a last resort read it
-     * directly from the instance (which might have performance implications).
-     */
-    readValue(key) {
-        return this.latestValues[key] !== undefined || !this.current
-            ? this.latestValues[key]
-            : this.readValueFromInstance(this.current, key, this.options);
-    }
-    /**
-     * Set the base target to later animate back to. This is currently
-     * only hydrated on creation and when we first read a value.
-     */
-    setBaseTarget(key, value) {
-        this.baseTarget[key] = value;
-    }
-    /**
-     * Find the base target for a value thats been removed from all animation
-     * props.
-     */
-    getBaseTarget(key) {
-        var _a;
-        const { initial } = this.props;
-        const valueFromInitial = typeof initial === "string" || typeof initial === "object"
-            ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]
-            : undefined;
-        /**
-         * If this value still exists in the current initial variant, read that.
-         */
-        if (initial && valueFromInitial !== undefined) {
-            return valueFromInitial;
-        }
-        /**
-         * Alternatively, if this VisualElement config has defined a getBaseTarget
-         * 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))
-            return target;
-        /**
-         * If the value was initially defined on initial, but it doesn't any more,
-         * return undefined. Otherwise return the value as initially read from the DOM.
-         */
-        return this.initialValues[key] !== undefined &&
-            valueFromInitial === undefined
-            ? undefined
-            : this.baseTarget[key];
-    }
-    on(eventName, callback) {
-        if (!this.events[eventName]) {
-            this.events[eventName] = new wrap.SubscriptionManager();
-        }
-        return this.events[eventName].add(callback);
-    }
-    notify(eventName, ...args) {
-        if (this.events[eventName]) {
-            this.events[eventName].notify(...args);
-        }
-    }
-}
-
-class DOMVisualElement extends VisualElement {
-    sortInstanceNodePosition(a, b) {
-        /**
-         * compareDocumentPosition returns a bitmask, by using the bitwise &
-         * we're returning true if 2 in that bitmask is set to true. 2 is set
-         * to true if b preceeds a.
-         */
-        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
-    }
-    getBaseTargetFromProps(props, key) {
-        return props.style ? props.style[key] : undefined;
-    }
-    removeValueFromRenderState(key, { vars, style }) {
-        delete vars[key];
-        delete style[key];
-    }
-    makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {
-        let origin = getOrigin(target, transition || {}, this);
-        /**
-         * If Framer has provided a function to convert `Color` etc value types, convert them
-         */
-        if (transformValues) {
-            if (transitionEnd)
-                transitionEnd = transformValues(transitionEnd);
-            if (target)
-                target = transformValues(target);
-            if (origin)
-                origin = transformValues(origin);
-        }
-        if (isMounted) {
-            checkTargetForNewValues(this, target, origin);
-            const parsed = parseDomVariant(this, target, origin, transitionEnd);
-            transitionEnd = parsed.transitionEnd;
-            target = parsed.target;
-        }
-        return {
-            transition,
-            transitionEnd,
-            ...target,
-        };
-    }
-}
-
-function getComputedStyle$1(element) {
-    return window.getComputedStyle(element);
-}
-class HTMLVisualElement extends DOMVisualElement {
-    readValueFromInstance(instance, key) {
-        if (wrap.transformProps.has(key)) {
-            const defaultType = wrap.getDefaultValueType(key);
-            return defaultType ? defaultType.default || 0 : 0;
-        }
-        else {
-            const computedStyle = getComputedStyle$1(instance);
-            const value = (isCSSVariableName(key)
-                ? computedStyle.getPropertyValue(key)
-                : computedStyle[key]) || 0;
-            return typeof value === "string" ? value.trim() : value;
-        }
-    }
-    measureInstanceViewportBox(instance, { transformPagePoint }) {
-        return measureViewportBox(instance, transformPagePoint);
-    }
-    build(renderState, latestValues, options, props) {
-        buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
-    }
-    scrapeMotionValuesFromProps(props, prevProps) {
-        return scrapeMotionValuesFromProps$1(props, prevProps);
-    }
-    handleChildMotionValue() {
-        if (this.childSubscription) {
-            this.childSubscription();
-            delete this.childSubscription;
-        }
-        const { children } = this.props;
-        if (wrap.isMotionValue(children)) {
-            this.childSubscription = children.on("change", (latest) => {
-                if (this.current)
-                    this.current.textContent = `${latest}`;
-            });
-        }
-    }
-    renderInstance(instance, renderState, styleProp, projection) {
-        renderHTML(instance, renderState, styleProp, projection);
-    }
-}
-
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.
@@ -6213,7 +4421,7 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
     componentDidMount() {
         const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
         const { projection } = visualElement;
-        addScaleCorrector(defaultScaleCorrectors);
+        wrap.addScaleCorrector(defaultScaleCorrectors);
         if (projection) {
             if (layoutGroup.group)
                 layoutGroup.group.add(projection);
@@ -6333,44 +4541,10 @@ const drag = {
     },
 };
 
-class SVGVisualElement extends DOMVisualElement {
-    constructor() {
-        super(...arguments);
-        this.isSVGTag = false;
-    }
-    getBaseTargetFromProps(props, key) {
-        return props[key];
-    }
-    readValueFromInstance(instance, key) {
-        if (wrap.transformProps.has(key)) {
-            const defaultType = wrap.getDefaultValueType(key);
-            return defaultType ? defaultType.default || 0 : 0;
-        }
-        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-        return instance.getAttribute(key);
-    }
-    measureInstanceViewportBox() {
-        return createBox();
-    }
-    scrapeMotionValuesFromProps(props, prevProps) {
-        return scrapeMotionValuesFromProps(props, prevProps);
-    }
-    build(renderState, latestValues, options, props) {
-        buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
-    }
-    renderInstance(instance, renderState, styleProp, projection) {
-        renderSVG(instance, renderState, styleProp, projection);
-    }
-    mount(instance) {
-        this.isSVGTag = isSVGTag(instance.tagName);
-        super.mount(instance);
-    }
-}
-
 const createDomVisualElement = (Component, options) => {
     return isSVGComponent(Component)
-        ? new SVGVisualElement(options, { enableHardwareAcceleration: false })
-        : new HTMLVisualElement(options, { enableHardwareAcceleration: true });
+        ? new wrap.SVGVisualElement(options, { enableHardwareAcceleration: false })
+        : new wrap.HTMLVisualElement(options, { enableHardwareAcceleration: true });
 };
 
 const layout = {
@@ -7247,9 +5421,9 @@ class WillChangeMotionValue extends wrap.MotionValue {
             memberName = "transform";
         }
         else if (!name.startsWith("origin") &&
-            !isCSSVariableName(name) &&
+            !wrap.isCSSVariableName(name) &&
             name !== "willChange") {
-            memberName = camelToDash(name);
+            memberName = wrap.camelToDash(name);
         }
         if (memberName) {
             wrap.addUniqueItem(this.members, memberName);
@@ -7264,7 +5438,7 @@ class WillChangeMotionValue extends wrap.MotionValue {
             }
         }
         else {
-            wrap.removeItem(this.members, camelToDash(name));
+            wrap.removeItem(this.members, wrap.camelToDash(name));
         }
         this.update();
     }
@@ -7306,8 +5480,8 @@ function useReducedMotion() {
     /**
      * Lazy initialisation of prefersReducedMotion
      */
-    !hasReducedMotionListener.current && initPrefersReducedMotion();
-    const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
+    !wrap.hasReducedMotionListener.current && wrap.initPrefersReducedMotion();
+    const [shouldReduceMotion] = React.useState(wrap.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.");
     }
@@ -7331,6 +5505,9 @@ function useReducedMotionConfig() {
     }
 }
 
+function stopAnimation(visualElement) {
+    visualElement.values.forEach((value) => value.stop());
+}
 /**
  * @public
  */
@@ -7361,7 +5538,7 @@ function animationControls() {
         set(definition) {
             wrap.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);
+                wrap.setValues(visualElement, definition);
             });
         },
         stop() {
@@ -7724,7 +5901,7 @@ sync) {
 }
 
 function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
-    const id = element.dataset[optimizedAppearDataId];
+    const id = element.dataset[wrap.optimizedAppearDataId];
     if (!id)
         return;
     window.HandoffAppearAnimations = handoffOptimizedAppearAnimation;
@@ -7768,10 +5945,10 @@ function startOptimizedAppearAnimation(element, name, keyframes, options, onRead
 }
 
 const createObject = () => ({});
-class StateVisualElement extends VisualElement {
+class StateVisualElement extends wrap.VisualElement {
     build() { }
     measureInstanceViewportBox() {
-        return createBox();
+        return wrap.createBox();
     }
     resetTransform() { }
     restoreTransform() { }
@@ -7790,8 +5967,8 @@ class StateVisualElement extends VisualElement {
         return 0;
     }
     makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }) {
-        const origin = getOrigin(target, transition || {}, this);
-        checkTargetForNewValues(this, target, origin);
+        const origin = wrap.getOrigin(target, transition || {}, this);
+        wrap.checkTargetForNewValues(this, target, origin);
         return { transition, transitionEnd, ...target };
     }
 }
@@ -7880,18 +6057,23 @@ const AnimateSharedLayout = ({ children }) => {
 };
 
 exports.MotionValue = wrap.MotionValue;
+exports.VisualElement = wrap.VisualElement;
+exports.addScaleCorrector = wrap.addScaleCorrector;
 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.buildTransform = wrap.buildTransform;
+exports.checkTargetForNewValues = wrap.checkTargetForNewValues;
 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.createBox = wrap.createBox;
 exports.cubicBezier = wrap.cubicBezier;
 exports.delay = wrap.delay;
 exports.distance = wrap.distance;
@@ -7906,9 +6088,11 @@ Object.defineProperty(exports, 'invariant', {
     enumerable: true,
     get: function () { return wrap.invariant; }
 });
+exports.isBrowser = wrap.isBrowser;
 exports.isMotionValue = wrap.isMotionValue;
 exports.mix = wrap.mix;
 exports.motionValue = wrap.motionValue;
+exports.optimizedAppearDataAttribute = wrap.optimizedAppearDataAttribute;
 exports.pipe = wrap.pipe;
 exports.progress = wrap.progress;
 exports.px = wrap.px;
@@ -7935,30 +6119,23 @@ exports.MotionContext = MotionContext;
 exports.PresenceContext = PresenceContext;
 exports.Reorder = Reorder;
 exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
-exports.VisualElement = VisualElement;
 exports.addPointerEvent = addPointerEvent;
 exports.addPointerInfo = addPointerInfo;
-exports.addScaleCorrector = addScaleCorrector;
 exports.animateVisualElement = animateVisualElement;
 exports.animationControls = animationControls;
 exports.animations = animations;
-exports.buildTransform = buildTransform;
 exports.calcLength = calcLength;
-exports.checkTargetForNewValues = checkTargetForNewValues;
-exports.createBox = createBox;
 exports.createDomMotionComponent = createDomMotionComponent;
 exports.createMotionComponent = createMotionComponent;
 exports.domAnimation = domAnimation;
 exports.domMax = domMax;
 exports.filterProps = filterProps;
-exports.isBrowser = isBrowser;
 exports.isDragActive = isDragActive;
 exports.isMotionComponent = isMotionComponent;
 exports.isValidMotionProp = isValidMotionProp;
 exports.m = m;
 exports.makeUseVisualState = makeUseVisualState;
 exports.motion = motion;
-exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
 exports.resolveMotionValue = resolveMotionValue;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.unwrapMotionComponent = unwrapMotionComponent;