framer-motion 12.11.4 → 12.12.1

package/dist/framer-motion.dev.js

@@ -83,591 +83,216 @@
     const PresenceContext = 
     /* @__PURE__ */ React$1.createContext(null);
 
+    function addUniqueItem(arr, item) {
+        if (arr.indexOf(item) === -1)
+            arr.push(item);
+    }
+    function removeItem(arr, item) {
+        const index = arr.indexOf(item);
+        if (index > -1)
+            arr.splice(index, 1);
+    }
+    // Adapted from array-move
+    function moveItem([...arr], fromIndex, toIndex) {
+        const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+        if (startIndex >= 0 && startIndex < arr.length) {
+            const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+            const [item] = arr.splice(fromIndex, 1);
+            arr.splice(endIndex, 0, item);
+        }
+        return arr;
+    }
+
+    const clamp = (min, max, v) => {
+        if (v > max)
+            return max;
+        if (v < min)
+            return min;
+        return v;
+    };
+
+    exports.warning = () => { };
+    exports.invariant = () => { };
+    {
+        exports.warning = (check, message) => {
+            if (!check && typeof console !== "undefined") {
+                console.warn(message);
+            }
+        };
+        exports.invariant = (check, message) => {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
+    const MotionGlobalConfig = {};
+
     /**
-     * @public
+     * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
      */
-    const MotionConfigContext = React$1.createContext({
-        transformPagePoint: (p) => p,
-        isStatic: false,
-        reducedMotion: "never",
-    });
+    const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
+
+    function isObject(value) {
+        return typeof value === "object" && value !== null;
+    }
 
     /**
-     * Measurement functionality has to be within a separate component
-     * to leverage snapshot lifecycle.
+     * Check if the value is a zero value string like "0px" or "0%"
      */
-    class PopChildMeasure extends React__namespace.Component {
-        getSnapshotBeforeUpdate(prevProps) {
-            const element = this.props.childRef.current;
-            if (element && prevProps.isPresent && !this.props.isPresent) {
-                const parent = element.offsetParent;
-                const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
-                const size = this.props.sizeRef.current;
-                size.height = element.offsetHeight || 0;
-                size.width = element.offsetWidth || 0;
-                size.top = element.offsetTop;
-                size.left = element.offsetLeft;
-                size.right = parentWidth - size.width - size.left;
-            }
-            return null;
+    const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
+
+    /*#__NO_SIDE_EFFECTS__*/
+    function memo(callback) {
+        let result;
+        return () => {
+            if (result === undefined)
+                result = callback();
+            return result;
+        };
+    }
+
+    /*#__NO_SIDE_EFFECTS__*/
+    const noop = (any) => any;
+
+    /**
+     * Pipe
+     * Compose other transformers to run linearily
+     * pipe(min(20), max(40))
+     * @param  {...functions} transformers
+     * @return {function}
+     */
+    const combineFunctions = (a, b) => (v) => b(a(v));
+    const pipe = (...transformers) => transformers.reduce(combineFunctions);
+
+    /*
+      Progress within given range
+
+      Given a lower limit and an upper limit, we return the progress
+      (expressed as a number 0-1) represented by the given value, and
+      limit that progress to within 0-1.
+
+      @param [number]: Lower limit
+      @param [number]: Upper limit
+      @param [number]: Value to find progress within given range
+      @return [number]: Progress of value within range as expressed 0-1
+    */
+    /*#__NO_SIDE_EFFECTS__*/
+    const progress = (from, to, value) => {
+        const toFromDifference = to - from;
+        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+    };
+
+    class SubscriptionManager {
+        constructor() {
+            this.subscriptions = [];
         }
-        /**
-         * Required with getSnapshotBeforeUpdate to stop React complaining.
-         */
-        componentDidUpdate() { }
-        render() {
-            return this.props.children;
+        add(handler) {
+            addUniqueItem(this.subscriptions, handler);
+            return () => removeItem(this.subscriptions, handler);
         }
-    }
-    function PopChild({ children, isPresent, anchorX }) {
-        const id = React$1.useId();
-        const ref = React$1.useRef(null);
-        const size = React$1.useRef({
-            width: 0,
-            height: 0,
-            top: 0,
-            left: 0,
-            right: 0,
-        });
-        const { nonce } = React$1.useContext(MotionConfigContext);
-        /**
-         * We create and inject a style block so we can apply this explicit
-         * sizing in a non-destructive manner by just deleting the style block.
-         *
-         * We can't apply size via render as the measurement happens
-         * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
-         * styles directly on the DOM node, we might be overwriting
-         * styles set via the style prop.
-         */
-        React$1.useInsertionEffect(() => {
-            const { width, height, top, left, right } = size.current;
-            if (isPresent || !ref.current || !width || !height)
+        notify(a, b, c) {
+            const numSubscriptions = this.subscriptions.length;
+            if (!numSubscriptions)
                 return;
-            const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
-            ref.current.dataset.motionPopId = id;
-            const style = document.createElement("style");
-            if (nonce)
-                style.nonce = nonce;
-            document.head.appendChild(style);
-            if (style.sheet) {
-                style.sheet.insertRule(`
-          [data-motion-pop-id="${id}"] {
-            position: absolute !important;
-            width: ${width}px !important;
-            height: ${height}px !important;
-            ${x}px !important;
-            top: ${top}px !important;
-          }
-        `);
+            if (numSubscriptions === 1) {
+                /**
+                 * If there's only a single handler we can just call it without invoking a loop.
+                 */
+                this.subscriptions[0](a, b, c);
             }
-            return () => {
-                if (document.head.contains(style)) {
-                    document.head.removeChild(style);
+            else {
+                for (let i = 0; i < numSubscriptions; i++) {
+                    /**
+                     * Check whether the handler exists before firing as it's possible
+                     * the subscriptions were modified during this loop running.
+                     */
+                    const handler = this.subscriptions[i];
+                    handler && handler(a, b, c);
                 }
-            };
-        }, [isPresent]);
-        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
-    }
-
-    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
-        const presenceChildren = useConstant(newChildrenMap);
-        const id = React$1.useId();
-        let isReusedContext = true;
-        let context = React$1.useMemo(() => {
-            isReusedContext = false;
-            return {
-                id,
-                initial,
-                isPresent,
-                custom,
-                onExitComplete: (childId) => {
-                    presenceChildren.set(childId, true);
-                    for (const isComplete of presenceChildren.values()) {
-                        if (!isComplete)
-                            return; // can stop searching when any is incomplete
-                    }
-                    onExitComplete && onExitComplete();
-                },
-                register: (childId) => {
-                    presenceChildren.set(childId, false);
-                    return () => presenceChildren.delete(childId);
-                },
-            };
-        }, [isPresent, presenceChildren, onExitComplete]);
-        /**
-         * If the presence of a child affects the layout of the components around it,
-         * we want to make a new context value to ensure they get re-rendered
-         * so they can detect that layout change.
-         */
-        if (presenceAffectsLayout && isReusedContext) {
-            context = { ...context };
+            }
         }
-        React$1.useMemo(() => {
-            presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
-        }, [isPresent]);
-        /**
-         * If there's no `motion` components to fire exit animations, we want to remove this
-         * component immediately.
-         */
-        React__namespace.useEffect(() => {
-            !isPresent &&
-                !presenceChildren.size &&
-                onExitComplete &&
-                onExitComplete();
-        }, [isPresent]);
-        if (mode === "popLayout") {
-            children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
+        getSize() {
+            return this.subscriptions.length;
+        }
+        clear() {
+            this.subscriptions.length = 0;
         }
-        return (jsx(PresenceContext.Provider, { value: context, children: children }));
-    };
-    function newChildrenMap() {
-        return new Map();
     }
 
     /**
-     * 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.
-     *
-     * ```jsx
-     * import { usePresence } from "framer-motion"
-     *
-     * export const Component = () => {
-     *   const [isPresent, safeToRemove] = usePresence()
+     * Converts seconds to milliseconds
      *
-     *   useEffect(() => {
-     *     !isPresent && setTimeout(safeToRemove, 1000)
-     *   }, [isPresent])
-     *
-     *   return <div />
-     * }
-     * ```
-     *
-     * If `isPresent` is `false`, it means that a component has been removed the tree, but
-     * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
-     *
-     * @public
+     * @param seconds - Time in seconds.
+     * @return milliseconds - Converted time in milliseconds.
      */
-    function usePresence(subscribe = true) {
-        const context = React$1.useContext(PresenceContext);
-        if (context === null)
-            return [true, null];
-        const { isPresent, onExitComplete, register } = context;
-        // It's safe to call the following hooks conditionally (after an early return) because the context will always
-        // either be null or non-null for the lifespan of the component.
-        const id = React$1.useId();
-        React$1.useEffect(() => {
-            if (subscribe) {
-                return register(id);
-            }
-        }, [subscribe]);
-        const safeToRemove = React$1.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
-        return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+    /*#__NO_SIDE_EFFECTS__*/
+    const secondsToMilliseconds = (seconds) => seconds * 1000;
+    /*#__NO_SIDE_EFFECTS__*/
+    const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
+
+    /*
+      Convert velocity into velocity per second
+
+      @param [number]: Unit per frame
+      @param [number]: Frame duration in ms
+    */
+    function velocityPerSecond(velocity, frameDuration) {
+        return frameDuration ? velocity * (1000 / frameDuration) : 0;
     }
-    /**
-     * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
-     * There is no `safeToRemove` function.
-     *
-     * ```jsx
-     * import { useIsPresent } from "framer-motion"
-     *
-     * export const Component = () => {
-     *   const isPresent = useIsPresent()
-     *
-     *   useEffect(() => {
-     *     !isPresent && console.log("I've been removed!")
-     *   }, [isPresent])
-     *
-     *   return <div />
-     * }
-     * ```
-     *
-     * @public
-     */
-    function useIsPresent() {
-        return isPresent(React$1.useContext(PresenceContext));
+
+    const warned = new Set();
+    function hasWarned$1(message) {
+        return warned.has(message);
     }
-    function isPresent(context) {
-        return context === null ? true : context.isPresent;
+    function warnOnce(condition, message, element) {
+        if (condition || warned.has(message))
+            return;
+        console.warn(message);
+        if (element)
+            console.warn(element);
+        warned.add(message);
     }
 
-    const getChildKey = (child) => child.key || "";
-    function onlyElements(children) {
-        const filtered = [];
-        // We use forEach here instead of map as map mutates the component key by preprending `.$`
-        React$1.Children.forEach(children, (child) => {
-            if (React$1.isValidElement(child))
-                filtered.push(child);
-        });
-        return filtered;
-    }
+    const wrap = (min, max, v) => {
+        const rangeSize = max - min;
+        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+    };
 
-    /**
-     * `AnimatePresence` enables the animation of components that have been removed from the tree.
-     *
-     * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
-     *
-     * Any `motion` components that have an `exit` property defined will animate out when removed from
-     * the tree.
-     *
-     * ```jsx
-     * import { motion, AnimatePresence } from 'framer-motion'
-     *
-     * export const Items = ({ items }) => (
-     *   <AnimatePresence>
-     *     {items.map(item => (
-     *       <motion.div
-     *         key={item.id}
-     *         initial={{ opacity: 0 }}
-     *         animate={{ opacity: 1 }}
-     *         exit={{ opacity: 0 }}
-     *       />
-     *     ))}
-     *   </AnimatePresence>
-     * )
-     * ```
-     *
-     * You can sequence exit animations throughout a tree using variants.
-     *
-     * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
-     * once all `motion` components have finished animating out. Likewise, any components using
-     * `usePresence` all need to call `safeToRemove`.
-     *
-     * @public
-     */
-    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", }) => {
-        const [isParentPresent, safeToRemove] = usePresence(propagate);
-        /**
-         * Filter any children that aren't ReactElements. We can only track components
-         * between renders with a props.key.
-         */
-        const presentChildren = React$1.useMemo(() => onlyElements(children), [children]);
-        /**
-         * Track the keys of the currently rendered children. This is used to
-         * determine which children are exiting.
-         */
-        const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
-        /**
-         * If `initial={false}` we only want to pass this to components in the first render.
-         */
-        const isInitialRender = React$1.useRef(true);
-        /**
-         * A ref containing the currently present children. When all exit animations
-         * are complete, we use this to re-render the component with the latest children
-         * *committed* rather than the latest children *rendered*.
-         */
-        const pendingPresentChildren = React$1.useRef(presentChildren);
-        /**
-         * Track which exiting children have finished animating out.
-         */
-        const exitComplete = useConstant(() => new Map());
-        /**
-         * Save children to render as React state. To ensure this component is concurrent-safe,
-         * we check for exiting children via an effect.
-         */
-        const [diffedChildren, setDiffedChildren] = React$1.useState(presentChildren);
-        const [renderedChildren, setRenderedChildren] = React$1.useState(presentChildren);
-        useIsomorphicLayoutEffect(() => {
-            isInitialRender.current = false;
-            pendingPresentChildren.current = presentChildren;
-            /**
-             * Update complete status of exiting children.
-             */
-            for (let i = 0; i < renderedChildren.length; i++) {
-                const key = getChildKey(renderedChildren[i]);
-                if (!presentKeys.includes(key)) {
-                    if (exitComplete.get(key) !== true) {
-                        exitComplete.set(key, false);
-                    }
-                }
-                else {
-                    exitComplete.delete(key);
-                }
-            }
-        }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
-        const exitingChildren = [];
-        if (presentChildren !== diffedChildren) {
-            let nextChildren = [...presentChildren];
-            /**
-             * Loop through all the currently rendered components and decide which
-             * are exiting.
-             */
-            for (let i = 0; i < renderedChildren.length; i++) {
-                const child = renderedChildren[i];
-                const key = getChildKey(child);
-                if (!presentKeys.includes(key)) {
-                    nextChildren.splice(i, 0, child);
-                    exitingChildren.push(child);
-                }
+    /*
+      Bezier function generator
+      This has been modified from Gaëtan Renaudeau's BezierEasing
+      https://github.com/gre/bezier-easing/blob/master/src/index.js
+      https://github.com/gre/bezier-easing/blob/master/LICENSE
+      
+      I've removed the newtonRaphsonIterate algo because in benchmarking it
+      wasn't noticiably faster than binarySubdivision, indeed removing it
+      usually improved times, depending on the curve.
+      I also removed the lookup table, as for the added bundle size and loop we're
+      only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+      to 12 to compensate and this still tended to be faster for no perceivable
+      loss in accuracy.
+      Usage
+        const easeOut = cubicBezier(.17,.67,.83,.67);
+        const x = easeOut(0.5); // returns 0.627...
+    */
+    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+    const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+        t;
+    const subdivisionPrecision = 0.0000001;
+    const subdivisionMaxIterations = 12;
+    function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+        let currentX;
+        let currentT;
+        let i = 0;
+        do {
+            currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+            currentX = calcBezier(currentT, mX1, mX2) - x;
+            if (currentX > 0.0) {
+                upperBound = currentT;
             }
-            /**
-             * If we're in "wait" mode, and we have exiting children, we want to
-             * only render these until they've all exited.
-             */
-            if (mode === "wait" && exitingChildren.length) {
-                nextChildren = exitingChildren;
-            }
-            setRenderedChildren(onlyElements(nextChildren));
-            setDiffedChildren(presentChildren);
-            /**
-             * Early return to ensure once we've set state with the latest diffed
-             * children, we can immediately re-render.
-             */
-            return null;
-        }
-        if (mode === "wait" &&
-            renderedChildren.length > 1) {
-            console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-        }
-        /**
-         * If we've been provided a forceRender function by the LayoutGroupContext,
-         * we can use it to force a re-render amongst all surrounding components once
-         * all components have finished animating out.
-         */
-        const { forceRender } = React$1.useContext(LayoutGroupContext);
-        return (jsx(Fragment, { children: renderedChildren.map((child) => {
-                const key = getChildKey(child);
-                const isPresent = propagate && !isParentPresent
-                    ? false
-                    : presentChildren === renderedChildren ||
-                        presentKeys.includes(key);
-                const onExit = () => {
-                    if (exitComplete.has(key)) {
-                        exitComplete.set(key, true);
-                    }
-                    else {
-                        return;
-                    }
-                    let isEveryExitComplete = true;
-                    exitComplete.forEach((isExitComplete) => {
-                        if (!isExitComplete)
-                            isEveryExitComplete = false;
-                    });
-                    if (isEveryExitComplete) {
-                        forceRender?.();
-                        setRenderedChildren(pendingPresentChildren.current);
-                        propagate && safeToRemove?.();
-                        onExitComplete && onExitComplete();
-                    }
-                };
-                return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
-                        ? undefined
-                        : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
-            }) }));
-    };
-
-    /**
-     * Note: Still used by components generated by old versions of Framer
-     *
-     * @deprecated
-     */
-    const DeprecatedLayoutGroupContext = React$1.createContext(null);
-
-    function addUniqueItem(arr, item) {
-        if (arr.indexOf(item) === -1)
-            arr.push(item);
-    }
-    function removeItem(arr, item) {
-        const index = arr.indexOf(item);
-        if (index > -1)
-            arr.splice(index, 1);
-    }
-    // Adapted from array-move
-    function moveItem([...arr], fromIndex, toIndex) {
-        const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
-        if (startIndex >= 0 && startIndex < arr.length) {
-            const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
-            const [item] = arr.splice(fromIndex, 1);
-            arr.splice(endIndex, 0, item);
-        }
-        return arr;
-    }
-
-    const clamp = (min, max, v) => {
-        if (v > max)
-            return max;
-        if (v < min)
-            return min;
-        return v;
-    };
-
-    exports.warning = () => { };
-    exports.invariant = () => { };
-    {
-        exports.warning = (check, message) => {
-            if (!check && typeof console !== "undefined") {
-                console.warn(message);
-            }
-        };
-        exports.invariant = (check, message) => {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
-    const MotionGlobalConfig = {};
-
-    /**
-     * 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+)?|\.\d+)$/u.test(v);
-
-    /**
-     * Check if the value is a zero value string like "0px" or "0%"
-     */
-    const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
-
-    /*#__NO_SIDE_EFFECTS__*/
-    function memo(callback) {
-        let result;
-        return () => {
-            if (result === undefined)
-                result = callback();
-            return result;
-        };
-    }
-
-    /*#__NO_SIDE_EFFECTS__*/
-    const noop = (any) => any;
-
-    /**
-     * Pipe
-     * Compose other transformers to run linearily
-     * pipe(min(20), max(40))
-     * @param  {...functions} transformers
-     * @return {function}
-     */
-    const combineFunctions = (a, b) => (v) => b(a(v));
-    const pipe = (...transformers) => transformers.reduce(combineFunctions);
-
-    /*
-      Progress within given range
-
-      Given a lower limit and an upper limit, we return the progress
-      (expressed as a number 0-1) represented by the given value, and
-      limit that progress to within 0-1.
-
-      @param [number]: Lower limit
-      @param [number]: Upper limit
-      @param [number]: Value to find progress within given range
-      @return [number]: Progress of value within range as expressed 0-1
-    */
-    /*#__NO_SIDE_EFFECTS__*/
-    const progress = (from, to, value) => {
-        const toFromDifference = to - from;
-        return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-    };
-
-    class SubscriptionManager {
-        constructor() {
-            this.subscriptions = [];
-        }
-        add(handler) {
-            addUniqueItem(this.subscriptions, handler);
-            return () => removeItem(this.subscriptions, handler);
-        }
-        notify(a, b, c) {
-            const numSubscriptions = this.subscriptions.length;
-            if (!numSubscriptions)
-                return;
-            if (numSubscriptions === 1) {
-                /**
-                 * If there's only a single handler we can just call it without invoking a loop.
-                 */
-                this.subscriptions[0](a, b, c);
-            }
-            else {
-                for (let i = 0; i < numSubscriptions; i++) {
-                    /**
-                     * Check whether the handler exists before firing as it's possible
-                     * the subscriptions were modified during this loop running.
-                     */
-                    const handler = this.subscriptions[i];
-                    handler && handler(a, b, c);
-                }
-            }
-        }
-        getSize() {
-            return this.subscriptions.length;
-        }
-        clear() {
-            this.subscriptions.length = 0;
-        }
-    }
-
-    /**
-     * Converts seconds to milliseconds
-     *
-     * @param seconds - Time in seconds.
-     * @return milliseconds - Converted time in milliseconds.
-     */
-    /*#__NO_SIDE_EFFECTS__*/
-    const secondsToMilliseconds = (seconds) => seconds * 1000;
-    /*#__NO_SIDE_EFFECTS__*/
-    const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
-    /*
-      Convert velocity into velocity per second
-
-      @param [number]: Unit per frame
-      @param [number]: Frame duration in ms
-    */
-    function velocityPerSecond(velocity, frameDuration) {
-        return frameDuration ? velocity * (1000 / frameDuration) : 0;
-    }
-
-    const warned = new Set();
-    function hasWarned$1(message) {
-        return warned.has(message);
-    }
-    function warnOnce(condition, message, element) {
-        if (condition || warned.has(message))
-            return;
-        console.warn(message);
-        if (element)
-            console.warn(element);
-        warned.add(message);
-    }
-
-    const wrap = (min, max, v) => {
-        const rangeSize = max - min;
-        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-    };
-
-    /*
-      Bezier function generator
-      This has been modified from Gaëtan Renaudeau's BezierEasing
-      https://github.com/gre/bezier-easing/blob/master/src/index.js
-      https://github.com/gre/bezier-easing/blob/master/LICENSE
-      
-      I've removed the newtonRaphsonIterate algo because in benchmarking it
-      wasn't noticiably faster than binarySubdivision, indeed removing it
-      usually improved times, depending on the curve.
-      I also removed the lookup table, as for the added bundle size and loop we're
-      only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-      to 12 to compensate and this still tended to be faster for no perceivable
-      loss in accuracy.
-      Usage
-        const easeOut = cubicBezier(.17,.67,.83,.67);
-        const x = easeOut(0.5); // returns 0.627...
-    */
-    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-    const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-        t;
-    const subdivisionPrecision = 0.0000001;
-    const subdivisionMaxIterations = 12;
-    function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-        let currentX;
-        let currentT;
-        let i = 0;
-        do {
-            currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-            currentX = calcBezier(currentT, mX1, mX2) - x;
-            if (currentX > 0.0) {
-                upperBound = currentT;
-            }
-            else {
-                lowerBound = currentT;
+            else {
+                lowerBound = currentT;
             }
         } while (Math.abs(currentX) > subdivisionPrecision &&
             ++i < subdivisionMaxIterations);
@@ -1883,7 +1508,7 @@
      * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
      * ```
      *
-     * TODO Revist this approach once we've moved to data models for values,
+     * TODO Revisit this approach once we've moved to data models for values,
      * probably not needed to pregenerate mixer functions.
      *
      * @public
@@ -3055,6 +2680,14 @@
             ((type === "spring" || isGenerator(type)) && velocity));
     }
 
+    /**
+     * Checks if an element is an HTML element in a way
+     * that works across iframes
+     */
+    function isHTMLElement(element) {
+        return isObject(element) && "offsetHeight" in element;
+    }
+
     /**
      * A list of values that can be hardware-accelerated.
      */
@@ -3063,16 +2696,13 @@
         "clipPath",
         "filter",
         "transform",
-        // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-        // or until we implement support for linear() easing.
+        // TODO: Could be re-enabled now we have support for linear() easing
         // "background-color"
     ]);
     const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-        if (!motionValue ||
-            !motionValue.owner ||
-            !(motionValue.owner.current instanceof HTMLElement)) {
+        if (!isHTMLElement(motionValue?.owner?.current)) {
             return false;
         }
         const { onUpdate, transformTemplate } = motionValue.owner.getProps();
@@ -4488,7 +4118,7 @@
         targets.forEach((target) => {
             const pointerDownTarget = options.useGlobalTarget ? window : target;
             pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-            if (target instanceof HTMLElement) {
+            if (isHTMLElement(target)) {
                 target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
                 if (!isElementKeyboardAccessible(target) &&
                     !target.hasAttribute("tabindex")) {
@@ -4633,6 +4263,22 @@
         return reportStats;
     }
 
+    /**
+     * Checks if an element is an SVG element in a way
+     * that works across iframes
+     */
+    function isSVGElement(element) {
+        return isObject(element) && "ownerSVGElement" in element;
+    }
+
+    /**
+     * Checks if an element is specifically an SVGSVGElement (the root SVG element)
+     * in a way that works across iframes
+     */
+    function isSVGSVGElement(element) {
+        return isSVGElement(element) && element.tagName === "svg";
+    }
+
     function transform(...args) {
         const useImmediate = !Array.isArray(args[0]);
         const argOffset = useImmediate ? 0 : -1;
@@ -4727,12 +4373,80 @@
         return transformValue(() => map(inputValue.get()));
     }
 
+    const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
     /**
-     * A list of all ValueTypes
-     */
-    const valueTypes = [...dimensionValueTypes, color, complex];
-    /**
-     * Tests a value against the list of ValueTypes
+     * Create a `MotionValue` that animates to its latest value using a spring.
+     * Can either be a value or track another `MotionValue`.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = transformValue(() => x.get() * 2) // double x
+     * ```
+     *
+     * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+     * @returns `MotionValue`
+     *
+     * @public
+     */
+    function springValue(source, options) {
+        const initialValue = isMotionValue(source) ? source.get() : source;
+        const value = motionValue(initialValue);
+        attachSpring(value, source, options);
+        return value;
+    }
+    function attachSpring(value, source, options) {
+        const initialValue = value.get();
+        let activeAnimation = null;
+        let latestValue = initialValue;
+        let latestSetter;
+        const unit = typeof initialValue === "string"
+            ? initialValue.replace(/[\d.-]/g, "")
+            : undefined;
+        const stopAnimation = () => {
+            if (activeAnimation) {
+                activeAnimation.stop();
+                activeAnimation = null;
+            }
+        };
+        const startAnimation = () => {
+            stopAnimation();
+            activeAnimation = new JSAnimation({
+                keyframes: [asNumber$1(value.get()), asNumber$1(latestValue)],
+                velocity: value.getVelocity(),
+                type: "spring",
+                restDelta: 0.001,
+                restSpeed: 0.01,
+                ...options,
+                onUpdate: latestSetter,
+            });
+        };
+        value.attach((v, set) => {
+            latestValue = v;
+            latestSetter = (latest) => set(parseValue(latest, unit));
+            frame.postRender(startAnimation);
+            return value.get();
+        }, stopAnimation);
+        let unsubscribe = undefined;
+        if (isMotionValue(source)) {
+            unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+            value.on("destroy", unsubscribe);
+        }
+        return unsubscribe;
+    }
+    function parseValue(v, unit) {
+        return unit ? v + unit : v;
+    }
+    function asNumber$1(v) {
+        return typeof v === "number" ? v : parseFloat(v);
+    }
+
+    /**
+     * A list of all ValueTypes
+     */
+    const valueTypes = [...dimensionValueTypes, color, complex];
+    /**
+     * Tests a value against the list of ValueTypes
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
@@ -5036,32 +4750,413 @@
             if (!targets.has(currentTarget)) {
                 targets.set(currentTarget, {});
             }
-            const targetData = targets.get(currentTarget);
-            targetData[target] = { keyframes, options };
+            const targetData = targets.get(currentTarget);
+            targetData[target] = { keyframes, options };
+        }
+        then(resolve, reject) {
+            return this.readyPromise.then(resolve, reject);
+        }
+    }
+    function animateView(update, defaultOptions = {}) {
+        return new ViewTransitionBuilder(update, defaultOptions);
+    }
+
+    /**
+     * @deprecated
+     *
+     * Import as `frame` instead.
+     */
+    const sync = frame;
+    /**
+     * @deprecated
+     *
+     * Use cancelFrame(callback) instead.
+     */
+    const cancelSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = (process) => cancelFrame(process);
+        return acc;
+    }, {});
+
+    /**
+     * @public
+     */
+    const MotionConfigContext = React$1.createContext({
+        transformPagePoint: (p) => p,
+        isStatic: false,
+        reducedMotion: "never",
+    });
+
+    /**
+     * Measurement functionality has to be within a separate component
+     * to leverage snapshot lifecycle.
+     */
+    class PopChildMeasure extends React__namespace.Component {
+        getSnapshotBeforeUpdate(prevProps) {
+            const element = this.props.childRef.current;
+            if (element && prevProps.isPresent && !this.props.isPresent) {
+                const parent = element.offsetParent;
+                const parentWidth = isHTMLElement(parent)
+                    ? parent.offsetWidth || 0
+                    : 0;
+                const size = this.props.sizeRef.current;
+                size.height = element.offsetHeight || 0;
+                size.width = element.offsetWidth || 0;
+                size.top = element.offsetTop;
+                size.left = element.offsetLeft;
+                size.right = parentWidth - size.width - size.left;
+            }
+            return null;
+        }
+        /**
+         * Required with getSnapshotBeforeUpdate to stop React complaining.
+         */
+        componentDidUpdate() { }
+        render() {
+            return this.props.children;
+        }
+    }
+    function PopChild({ children, isPresent, anchorX }) {
+        const id = React$1.useId();
+        const ref = React$1.useRef(null);
+        const size = React$1.useRef({
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+        });
+        const { nonce } = React$1.useContext(MotionConfigContext);
+        /**
+         * We create and inject a style block so we can apply this explicit
+         * sizing in a non-destructive manner by just deleting the style block.
+         *
+         * We can't apply size via render as the measurement happens
+         * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+         * styles directly on the DOM node, we might be overwriting
+         * styles set via the style prop.
+         */
+        React$1.useInsertionEffect(() => {
+            const { width, height, top, left, right } = size.current;
+            if (isPresent || !ref.current || !width || !height)
+                return;
+            const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
+            ref.current.dataset.motionPopId = id;
+            const style = document.createElement("style");
+            if (nonce)
+                style.nonce = nonce;
+            document.head.appendChild(style);
+            if (style.sheet) {
+                style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            ${x}px !important;
+            top: ${top}px !important;
+          }
+        `);
+            }
+            return () => {
+                if (document.head.contains(style)) {
+                    document.head.removeChild(style);
+                }
+            };
+        }, [isPresent]);
+        return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
+    }
+
+    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
+        const presenceChildren = useConstant(newChildrenMap);
+        const id = React$1.useId();
+        let isReusedContext = true;
+        let context = React$1.useMemo(() => {
+            isReusedContext = false;
+            return {
+                id,
+                initial,
+                isPresent,
+                custom,
+                onExitComplete: (childId) => {
+                    presenceChildren.set(childId, true);
+                    for (const isComplete of presenceChildren.values()) {
+                        if (!isComplete)
+                            return; // can stop searching when any is incomplete
+                    }
+                    onExitComplete && onExitComplete();
+                },
+                register: (childId) => {
+                    presenceChildren.set(childId, false);
+                    return () => presenceChildren.delete(childId);
+                },
+            };
+        }, [isPresent, presenceChildren, onExitComplete]);
+        /**
+         * If the presence of a child affects the layout of the components around it,
+         * we want to make a new context value to ensure they get re-rendered
+         * so they can detect that layout change.
+         */
+        if (presenceAffectsLayout && isReusedContext) {
+            context = { ...context };
+        }
+        React$1.useMemo(() => {
+            presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+        }, [isPresent]);
+        /**
+         * If there's no `motion` components to fire exit animations, we want to remove this
+         * component immediately.
+         */
+        React__namespace.useEffect(() => {
+            !isPresent &&
+                !presenceChildren.size &&
+                onExitComplete &&
+                onExitComplete();
+        }, [isPresent]);
+        if (mode === "popLayout") {
+            children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
+        }
+        return (jsx(PresenceContext.Provider, { value: context, children: children }));
+    };
+    function newChildrenMap() {
+        return new Map();
+    }
+
+    /**
+     * 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.
+     *
+     * ```jsx
+     * import { usePresence } from "framer-motion"
+     *
+     * export const Component = () => {
+     *   const [isPresent, safeToRemove] = usePresence()
+     *
+     *   useEffect(() => {
+     *     !isPresent && setTimeout(safeToRemove, 1000)
+     *   }, [isPresent])
+     *
+     *   return <div />
+     * }
+     * ```
+     *
+     * If `isPresent` is `false`, it means that a component has been removed the tree, but
+     * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+     *
+     * @public
+     */
+    function usePresence(subscribe = true) {
+        const context = React$1.useContext(PresenceContext);
+        if (context === null)
+            return [true, null];
+        const { isPresent, onExitComplete, register } = context;
+        // It's safe to call the following hooks conditionally (after an early return) because the context will always
+        // either be null or non-null for the lifespan of the component.
+        const id = React$1.useId();
+        React$1.useEffect(() => {
+            if (subscribe) {
+                return register(id);
+            }
+        }, [subscribe]);
+        const safeToRemove = React$1.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
+        return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+    }
+    /**
+     * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
+     * There is no `safeToRemove` function.
+     *
+     * ```jsx
+     * import { useIsPresent } from "framer-motion"
+     *
+     * export const Component = () => {
+     *   const isPresent = useIsPresent()
+     *
+     *   useEffect(() => {
+     *     !isPresent && console.log("I've been removed!")
+     *   }, [isPresent])
+     *
+     *   return <div />
+     * }
+     * ```
+     *
+     * @public
+     */
+    function useIsPresent() {
+        return isPresent(React$1.useContext(PresenceContext));
+    }
+    function isPresent(context) {
+        return context === null ? true : context.isPresent;
+    }
+
+    const getChildKey = (child) => child.key || "";
+    function onlyElements(children) {
+        const filtered = [];
+        // We use forEach here instead of map as map mutates the component key by preprending `.$`
+        React$1.Children.forEach(children, (child) => {
+            if (React$1.isValidElement(child))
+                filtered.push(child);
+        });
+        return filtered;
+    }
+
+    /**
+     * `AnimatePresence` enables the animation of components that have been removed from the tree.
+     *
+     * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+     *
+     * Any `motion` components that have an `exit` property defined will animate out when removed from
+     * the tree.
+     *
+     * ```jsx
+     * import { motion, AnimatePresence } from 'framer-motion'
+     *
+     * export const Items = ({ items }) => (
+     *   <AnimatePresence>
+     *     {items.map(item => (
+     *       <motion.div
+     *         key={item.id}
+     *         initial={{ opacity: 0 }}
+     *         animate={{ opacity: 1 }}
+     *         exit={{ opacity: 0 }}
+     *       />
+     *     ))}
+     *   </AnimatePresence>
+     * )
+     * ```
+     *
+     * You can sequence exit animations throughout a tree using variants.
+     *
+     * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+     * once all `motion` components have finished animating out. Likewise, any components using
+     * `usePresence` all need to call `safeToRemove`.
+     *
+     * @public
+     */
+    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", }) => {
+        const [isParentPresent, safeToRemove] = usePresence(propagate);
+        /**
+         * Filter any children that aren't ReactElements. We can only track components
+         * between renders with a props.key.
+         */
+        const presentChildren = React$1.useMemo(() => onlyElements(children), [children]);
+        /**
+         * Track the keys of the currently rendered children. This is used to
+         * determine which children are exiting.
+         */
+        const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+        /**
+         * If `initial={false}` we only want to pass this to components in the first render.
+         */
+        const isInitialRender = React$1.useRef(true);
+        /**
+         * A ref containing the currently present children. When all exit animations
+         * are complete, we use this to re-render the component with the latest children
+         * *committed* rather than the latest children *rendered*.
+         */
+        const pendingPresentChildren = React$1.useRef(presentChildren);
+        /**
+         * Track which exiting children have finished animating out.
+         */
+        const exitComplete = useConstant(() => new Map());
+        /**
+         * Save children to render as React state. To ensure this component is concurrent-safe,
+         * we check for exiting children via an effect.
+         */
+        const [diffedChildren, setDiffedChildren] = React$1.useState(presentChildren);
+        const [renderedChildren, setRenderedChildren] = React$1.useState(presentChildren);
+        useIsomorphicLayoutEffect(() => {
+            isInitialRender.current = false;
+            pendingPresentChildren.current = presentChildren;
+            /**
+             * Update complete status of exiting children.
+             */
+            for (let i = 0; i < renderedChildren.length; i++) {
+                const key = getChildKey(renderedChildren[i]);
+                if (!presentKeys.includes(key)) {
+                    if (exitComplete.get(key) !== true) {
+                        exitComplete.set(key, false);
+                    }
+                }
+                else {
+                    exitComplete.delete(key);
+                }
+            }
+        }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+        const exitingChildren = [];
+        if (presentChildren !== diffedChildren) {
+            let nextChildren = [...presentChildren];
+            /**
+             * Loop through all the currently rendered components and decide which
+             * are exiting.
+             */
+            for (let i = 0; i < renderedChildren.length; i++) {
+                const child = renderedChildren[i];
+                const key = getChildKey(child);
+                if (!presentKeys.includes(key)) {
+                    nextChildren.splice(i, 0, child);
+                    exitingChildren.push(child);
+                }
+            }
+            /**
+             * If we're in "wait" mode, and we have exiting children, we want to
+             * only render these until they've all exited.
+             */
+            if (mode === "wait" && exitingChildren.length) {
+                nextChildren = exitingChildren;
+            }
+            setRenderedChildren(onlyElements(nextChildren));
+            setDiffedChildren(presentChildren);
+            /**
+             * Early return to ensure once we've set state with the latest diffed
+             * children, we can immediately re-render.
+             */
+            return null;
         }
-        then(resolve, reject) {
-            return this.readyPromise.then(resolve, reject);
+        if (mode === "wait" &&
+            renderedChildren.length > 1) {
+            console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
         }
-    }
-    function animateView(update, defaultOptions = {}) {
-        return new ViewTransitionBuilder(update, defaultOptions);
-    }
+        /**
+         * If we've been provided a forceRender function by the LayoutGroupContext,
+         * we can use it to force a re-render amongst all surrounding components once
+         * all components have finished animating out.
+         */
+        const { forceRender } = React$1.useContext(LayoutGroupContext);
+        return (jsx(Fragment, { children: renderedChildren.map((child) => {
+                const key = getChildKey(child);
+                const isPresent = propagate && !isParentPresent
+                    ? false
+                    : presentChildren === renderedChildren ||
+                        presentKeys.includes(key);
+                const onExit = () => {
+                    if (exitComplete.has(key)) {
+                        exitComplete.set(key, true);
+                    }
+                    else {
+                        return;
+                    }
+                    let isEveryExitComplete = true;
+                    exitComplete.forEach((isExitComplete) => {
+                        if (!isExitComplete)
+                            isEveryExitComplete = false;
+                    });
+                    if (isEveryExitComplete) {
+                        forceRender?.();
+                        setRenderedChildren(pendingPresentChildren.current);
+                        propagate && safeToRemove?.();
+                        onExitComplete && onExitComplete();
+                    }
+                };
+                return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
+                        ? undefined
+                        : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+            }) }));
+    };
 
     /**
-     * @deprecated
+     * Note: Still used by components generated by old versions of Framer
      *
-     * Import as `frame` instead.
-     */
-    const sync = frame;
-    /**
      * @deprecated
-     *
-     * Use cancelFrame(callback) instead.
      */
-    const cancelSync = stepsOrder.reduce((acc, key) => {
-        acc[key] = (process) => cancelFrame(process);
-        return acc;
-    }, {});
+    const DeprecatedLayoutGroupContext = React$1.createContext(null);
 
     const SCALE_PRECISION = 0.0001;
     const SCALE_MIN = 1 - SCALE_PRECISION;
@@ -5135,8 +5230,6 @@
         };
     }
 
-    const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
     const isNotNull = (value) => value !== null;
     function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
         const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -5303,10 +5396,6 @@
         return visualElement.props[optimizedAppearDataAttribute];
     }
 
-    function isSVGElement(element) {
-        return element instanceof SVGElement && element.tagName !== "svg";
-    }
-
     const compareByDepth = (a, b) => a.depth - b.depth;
 
     class FlatTree {
@@ -5356,7 +5445,7 @@
 
     const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
     const numBorders = borders.length;
-    const asNumber$1 = (value) => typeof value === "string" ? parseFloat(value) : value;
+    const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
     const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         if (shouldCrossfadeOpacity) {
@@ -5381,7 +5470,7 @@
                 leadRadius === 0 ||
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
-                target[borderLabel] = Math.max(mixNumber$1(asNumber$1(followRadius), asNumber$1(leadRadius), progress), 0);
+                target[borderLabel] = Math.max(mixNumber$1(asNumber(followRadius), asNumber(leadRadius), progress), 0);
                 if (percent.test(leadRadius) || percent.test(followRadius)) {
                     target[borderLabel] += "%";
                 }
@@ -6104,7 +6193,7 @@
             mount(instance) {
                 if (this.instance)
                     return;
-                this.isSVG = isSVGElement(instance);
+                this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
                 this.instance = instance;
                 const { layoutId, layout, visualElement } = this.options;
                 if (visualElement && !visualElement.current) {
@@ -10927,65 +11016,6 @@
         return htmlProps;
     }
 
-    /**
-     * We keep these listed separately as we use the lowercase tag names as part
-     * of the runtime bundle to detect SVG components
-     */
-    const lowercaseSVGElements = [
-        "animate",
-        "circle",
-        "defs",
-        "desc",
-        "ellipse",
-        "g",
-        "image",
-        "line",
-        "filter",
-        "marker",
-        "mask",
-        "metadata",
-        "path",
-        "pattern",
-        "polygon",
-        "polyline",
-        "rect",
-        "stop",
-        "switch",
-        "symbol",
-        "svg",
-        "text",
-        "tspan",
-        "use",
-        "view",
-    ];
-
-    function isSVGComponent(Component) {
-        if (
-        /**
-         * If it's not a string, it's a custom React component. Currently we only support
-         * HTML custom React components.
-         */
-        typeof Component !== "string" ||
-            /**
-             * If it contains a dash, the element is a custom HTML webcomponent.
-             */
-            Component.includes("-")) {
-            return false;
-        }
-        else if (
-        /**
-         * If it's in our list of lowercase SVG tags, it's an SVG component
-         */
-        lowercaseSVGElements.indexOf(Component) > -1 ||
-            /**
-             * If it contains a capital letter, it's an SVG component
-             */
-            /[A-Z]/u.test(Component)) {
-            return true;
-        }
-        return false;
-    }
-
     const dashKeys = {
         offset: "stroke-dashoffset",
         array: "stroke-dasharray",
@@ -11092,6 +11122,65 @@
         return visualProps;
     }
 
+    /**
+     * We keep these listed separately as we use the lowercase tag names as part
+     * of the runtime bundle to detect SVG components
+     */
+    const lowercaseSVGElements = [
+        "animate",
+        "circle",
+        "defs",
+        "desc",
+        "ellipse",
+        "g",
+        "image",
+        "line",
+        "filter",
+        "marker",
+        "mask",
+        "metadata",
+        "path",
+        "pattern",
+        "polygon",
+        "polyline",
+        "rect",
+        "stop",
+        "switch",
+        "symbol",
+        "svg",
+        "text",
+        "tspan",
+        "use",
+        "view",
+    ];
+
+    function isSVGComponent(Component) {
+        if (
+        /**
+         * If it's not a string, it's a custom React component. Currently we only support
+         * HTML custom React components.
+         */
+        typeof Component !== "string" ||
+            /**
+             * If it contains a dash, the element is a custom HTML webcomponent.
+             */
+            Component.includes("-")) {
+            return false;
+        }
+        else if (
+        /**
+         * If it's in our list of lowercase SVG tags, it's an SVG component
+         */
+        lowercaseSVGElements.indexOf(Component) > -1 ||
+            /**
+             * If it contains a capital letter, it's an SVG component
+             */
+            /[A-Z]/u.test(Component)) {
+            return true;
+        }
+        return false;
+    }
+
     function createUseRender(forwardMotionProps = false) {
         const useRender = (Component, props, ref, { latestValues }, isStatic) => {
             const useVisualProps = isSVGComponent(Component)
@@ -11893,7 +11982,7 @@
                 latestValues: {},
             },
         };
-        const node = isSVGElement(element)
+        const node = isSVGElement(element) && !isSVGSVGElement(element)
             ? new SVGVisualElement(options)
             : new HTMLVisualElement(options);
         node.mount(element);
@@ -12111,7 +12200,7 @@
             const { inlineSize, blockSize } = borderBoxSize[0];
             return { width: inlineSize, height: blockSize };
         }
-        else if (target instanceof SVGElement && "getBBox" in target) {
+        else if (isSVGElement(target) && "getBBox" in target) {
             return target.getBBox();
         }
         else {
@@ -12253,7 +12342,7 @@
         const inset = { x: 0, y: 0 };
         let current = element;
         while (current && current !== container) {
-            if (current instanceof HTMLElement) {
+            if (isHTMLElement(current)) {
                 inset.x += current.offsetLeft;
                 inset.y += current.offsetTop;
                 current = current.offsetParent;
@@ -12829,56 +12918,19 @@
         return useCombineMotionValues(values.filter(isMotionValue), buildValue);
     }
 
-    function useSpring(source, config = {}) {
+    function useSpring(source, options = {}) {
         const { isStatic } = React$1.useContext(MotionConfigContext);
-        const activeSpringAnimation = React$1.useRef(null);
-        const initialValue = useConstant(() => isMotionValue(source) ? source.get() : source);
-        const unit = useConstant(() => typeof initialValue === "string"
-            ? initialValue.replace(/[\d.-]/g, "")
-            : undefined);
-        const value = useMotionValue(initialValue);
-        const latestValue = React$1.useRef(initialValue);
-        const latestSetter = React$1.useRef(noop);
-        const startAnimation = () => {
-            stopAnimation();
-            activeSpringAnimation.current = new JSAnimation({
-                keyframes: [asNumber(value.get()), asNumber(latestValue.current)],
-                velocity: value.getVelocity(),
-                type: "spring",
-                restDelta: 0.001,
-                restSpeed: 0.01,
-                ...config,
-                onUpdate: latestSetter.current,
-            });
-        };
-        const stopAnimation = () => {
-            if (activeSpringAnimation.current) {
-                activeSpringAnimation.current.stop();
-            }
-        };
+        const getFromSource = () => (isMotionValue(source) ? source.get() : source);
+        // isStatic will never change, allowing early hooks return
+        if (isStatic) {
+            return useTransform(getFromSource);
+        }
+        const value = useMotionValue(getFromSource());
         React$1.useInsertionEffect(() => {
-            return value.attach((v, set) => {
-                if (isStatic)
-                    return set(v);
-                latestValue.current = v;
-                latestSetter.current = (latest) => set(parseValue(latest, unit));
-                frame.postRender(startAnimation);
-                return value.get();
-            }, stopAnimation);
-        }, [JSON.stringify(config)]);
-        useIsomorphicLayoutEffect(() => {
-            if (isMotionValue(source)) {
-                return source.on("change", (v) => value.set(parseValue(v, unit)));
-            }
-        }, [value, unit]);
+            return attachSpring(value, source, options);
+        }, [value, JSON.stringify(options)]);
         return value;
     }
-    function parseValue(v, unit) {
-        return unit ? v + unit : v;
-    }
-    function asNumber(v) {
-        return typeof v === "number" ? v : parseFloat(v);
-    }
 
     function useAnimationFrame(callback) {
         const initialTimestamp = React$1.useRef(0);
@@ -13761,6 +13813,7 @@
     exports.animations = animations;
     exports.anticipate = anticipate;
     exports.applyPxDefaults = applyPxDefaults;
+    exports.attachSpring = attachSpring;
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
@@ -13838,11 +13891,15 @@
     exports.isDragging = isDragging;
     exports.isEasingArray = isEasingArray;
     exports.isGenerator = isGenerator;
+    exports.isHTMLElement = isHTMLElement;
     exports.isMotionComponent = isMotionComponent;
     exports.isMotionValue = isMotionValue;
     exports.isNodeOrChild = isNodeOrChild;
     exports.isNumericalString = isNumericalString;
+    exports.isObject = isObject;
     exports.isPrimaryPointer = isPrimaryPointer;
+    exports.isSVGElement = isSVGElement;
+    exports.isSVGSVGElement = isSVGSVGElement;
     exports.isValidMotionProp = isValidMotionProp;
     exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
     exports.isZeroValueString = isZeroValueString;
@@ -13897,6 +13954,7 @@
     exports.setDragLock = setDragLock;
     exports.setStyle = setStyle;
     exports.spring = spring;
+    exports.springValue = springValue;
     exports.stagger = stagger;
     exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
     exports.startWaapiAnimation = startWaapiAnimation;