framer-motion 12.12.0 → 12.12.1

package/dist/framer-motion.dev.js

@@ -83,520 +83,145 @@
     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()
-     *
-     *   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;
-        }
-        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
+     * Converts seconds to milliseconds
      *
      * @param seconds - Time in seconds.
      * @return milliseconds - Converted time in milliseconds.
@@ -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();
@@ -4101,1035 +3731,1432 @@
                     this.events.animationCancel.notify();
                 }
             }
-            this.clearAnimation();
-        }
-        /**
-         * Returns `true` if this value is currently animating.
-         *
-         * @public
-         */
-        isAnimating() {
-            return !!this.animation;
-        }
-        clearAnimation() {
-            delete this.animation;
+            this.clearAnimation();
+        }
+        /**
+         * Returns `true` if this value is currently animating.
+         *
+         * @public
+         */
+        isAnimating() {
+            return !!this.animation;
+        }
+        clearAnimation() {
+            delete this.animation;
+        }
+        /**
+         * Destroy and clean up subscribers to this `MotionValue`.
+         *
+         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+         * created a `MotionValue` via the `motionValue` function.
+         *
+         * @public
+         */
+        destroy() {
+            this.dependents?.clear();
+            this.events.destroy?.notify();
+            this.clearListeners();
+            this.stop();
+            if (this.stopPassiveEffect) {
+                this.stopPassiveEffect();
+            }
+        }
+    }
+    function motionValue(init, options) {
+        return new MotionValue(init, options);
+    }
+
+    /**
+     * 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;
+    };
+
+    class MotionValueState {
+        constructor() {
+            this.latest = {};
+            this.values = new Map();
+        }
+        set(name, value, render, computed) {
+            const existingValue = this.values.get(name);
+            if (existingValue) {
+                existingValue.onRemove();
+            }
+            const onChange = () => {
+                this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
+                render && frame.render(render);
+            };
+            onChange();
+            const cancelOnChange = value.on("change", onChange);
+            computed && value.addDependent(computed);
+            const remove = () => {
+                cancelOnChange();
+                render && cancelFrame(render);
+                this.values.delete(name);
+                computed && value.removeDependent(computed);
+            };
+            this.values.set(name, { value, onRemove: remove });
+            return remove;
+        }
+        get(name) {
+            return this.values.get(name)?.value;
+        }
+        destroy() {
+            for (const value of this.values.values()) {
+                value.onRemove();
+            }
+        }
+    }
+
+    const translateAlias$1 = {
+        x: "translateX",
+        y: "translateY",
+        z: "translateZ",
+        transformPerspective: "perspective",
+    };
+    function buildTransform$1(state) {
+        let transform = "";
+        let transformIsDefault = true;
+        /**
+         * Loop over all possible transforms in order, adding the ones that
+         * are present to the transform string.
+         */
+        for (let i = 0; i < transformPropOrder.length; i++) {
+            const key = transformPropOrder[i];
+            const value = state.latest[key];
+            if (value === undefined)
+                continue;
+            let valueIsDefault = true;
+            if (typeof value === "number") {
+                valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+            }
+            else {
+                valueIsDefault = parseFloat(value) === 0;
+            }
+            if (!valueIsDefault) {
+                transformIsDefault = false;
+                const transformName = translateAlias$1[key] || key;
+                const valueToRender = state.latest[key];
+                transform += `${transformName}(${valueToRender}) `;
+            }
+        }
+        return transformIsDefault ? "none" : transform.trim();
+    }
+
+    const stateMap = new WeakMap();
+    function styleEffect(subject, values) {
+        const elements = resolveElements(subject);
+        const subscriptions = [];
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const state = stateMap.get(element) ?? new MotionValueState();
+            stateMap.set(element, state);
+            for (const key in values) {
+                const value = values[key];
+                const remove = addValue(element, state, key, value);
+                subscriptions.push(remove);
+            }
+        }
+        return () => {
+            for (const cancel of subscriptions)
+                cancel();
+        };
+    }
+    function addValue(element, state, key, value) {
+        let render = undefined;
+        let computed = undefined;
+        if (transformProps.has(key)) {
+            if (!state.get("transform")) {
+                state.set("transform", new MotionValue("none"), () => {
+                    element.style.transform = buildTransform$1(state);
+                });
+            }
+            computed = state.get("transform");
+        }
+        else if (isCSSVar(key)) {
+            render = () => {
+                element.style.setProperty(key, state.latest[key]);
+            };
+        }
+        else {
+            render = () => {
+                element.style[key] = state.latest[key];
+            };
+        }
+        return state.set(key, value, render, computed);
+    }
+
+    const { schedule: microtask, cancel: cancelMicrotask } = 
+    /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+
+    const isDragging = {
+        x: false,
+        y: false,
+    };
+    function isDragActive() {
+        return isDragging.x || isDragging.y;
+    }
+
+    function setDragLock(axis) {
+        if (axis === "x" || axis === "y") {
+            if (isDragging[axis]) {
+                return null;
+            }
+            else {
+                isDragging[axis] = true;
+                return () => {
+                    isDragging[axis] = false;
+                };
+            }
         }
-        /**
-         * Destroy and clean up subscribers to this `MotionValue`.
-         *
-         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-         * created a `MotionValue` via the `motionValue` function.
-         *
-         * @public
-         */
-        destroy() {
-            this.dependents?.clear();
-            this.events.destroy?.notify();
-            this.clearListeners();
-            this.stop();
-            if (this.stopPassiveEffect) {
-                this.stopPassiveEffect();
+        else {
+            if (isDragging.x || isDragging.y) {
+                return null;
+            }
+            else {
+                isDragging.x = isDragging.y = true;
+                return () => {
+                    isDragging.x = isDragging.y = false;
+                };
             }
         }
     }
-    function motionValue(init, options) {
-        return new MotionValue(init, options);
+
+    function setupGesture(elementOrSelector, options) {
+        const elements = resolveElements(elementOrSelector);
+        const gestureAbortController = new AbortController();
+        const eventOptions = {
+            passive: true,
+            ...options,
+            signal: gestureAbortController.signal,
+        };
+        const cancel = () => gestureAbortController.abort();
+        return [elements, eventOptions, cancel];
     }
 
+    function isValidHover(event) {
+        return !(event.pointerType === "touch" || isDragActive());
+    }
     /**
-     * Provided a value and a ValueType, returns the value as that value type.
+     * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
+     * in that it has an easier syntax, filters out polyfilled touch events, interoperates
+     * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
+     *
+     * @public
      */
-    const getValueAsType = (value, type) => {
-        return type && typeof value === "number"
-            ? type.transform(value)
-            : value;
+    function hover(elementOrSelector, onHoverStart, options = {}) {
+        const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
+        const onPointerEnter = (enterEvent) => {
+            if (!isValidHover(enterEvent))
+                return;
+            const { target } = enterEvent;
+            const onHoverEnd = onHoverStart(target, enterEvent);
+            if (typeof onHoverEnd !== "function" || !target)
+                return;
+            const onPointerLeave = (leaveEvent) => {
+                if (!isValidHover(leaveEvent))
+                    return;
+                onHoverEnd(leaveEvent);
+                target.removeEventListener("pointerleave", onPointerLeave);
+            };
+            target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+        };
+        elements.forEach((element) => {
+            element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+        });
+        return cancel;
+    }
+
+    /**
+     * Recursively traverse up the tree to check whether the provided child node
+     * is the parent or a descendant of it.
+     *
+     * @param parent - Element to find
+     * @param child - Element to test against parent
+     */
+    const isNodeOrChild = (parent, child) => {
+        if (!child) {
+            return false;
+        }
+        else if (parent === child) {
+            return true;
+        }
+        else {
+            return isNodeOrChild(parent, child.parentElement);
+        }
     };
 
-    class MotionValueState {
-        constructor() {
-            this.latest = {};
-            this.values = new Map();
+    const isPrimaryPointer = (event) => {
+        if (event.pointerType === "mouse") {
+            return typeof event.button !== "number" || event.button <= 0;
         }
-        set(name, value, render, computed) {
-            const existingValue = this.values.get(name);
-            if (existingValue) {
-                existingValue.onRemove();
-            }
-            const onChange = () => {
-                this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
-                render && frame.render(render);
+        else {
+            /**
+             * isPrimary is true for all mice buttons, whereas every touch point
+             * is regarded as its own input. So subsequent concurrent touch points
+             * will be false.
+             *
+             * Specifically match against false here as incomplete versions of
+             * PointerEvents in very old browser might have it set as undefined.
+             */
+            return event.isPrimary !== false;
+        }
+    };
+
+    const focusableElements = new Set([
+        "BUTTON",
+        "INPUT",
+        "SELECT",
+        "TEXTAREA",
+        "A",
+    ]);
+    function isElementKeyboardAccessible(element) {
+        return (focusableElements.has(element.tagName) ||
+            element.tabIndex !== -1);
+    }
+
+    const isPressing = new WeakSet();
+
+    /**
+     * Filter out events that are not "Enter" keys.
+     */
+    function filterEvents(callback) {
+        return (event) => {
+            if (event.key !== "Enter")
+                return;
+            callback(event);
+        };
+    }
+    function firePointerEvent(target, type) {
+        target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+    }
+    const enableKeyboardPress = (focusEvent, eventOptions) => {
+        const element = focusEvent.currentTarget;
+        if (!element)
+            return;
+        const handleKeydown = filterEvents(() => {
+            if (isPressing.has(element))
+                return;
+            firePointerEvent(element, "down");
+            const handleKeyup = filterEvents(() => {
+                firePointerEvent(element, "up");
+            });
+            const handleBlur = () => firePointerEvent(element, "cancel");
+            element.addEventListener("keyup", handleKeyup, eventOptions);
+            element.addEventListener("blur", handleBlur, eventOptions);
+        });
+        element.addEventListener("keydown", handleKeydown, eventOptions);
+        /**
+         * Add an event listener that fires on blur to remove the keydown events.
+         */
+        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+    };
+
+    /**
+     * Filter out events that are not primary pointer events, or are triggering
+     * while a Motion gesture is active.
+     */
+    function isValidPressEvent(event) {
+        return isPrimaryPointer(event) && !isDragActive();
+    }
+    /**
+     * Create a press gesture.
+     *
+     * Press is different to `"pointerdown"`, `"pointerup"` in that it
+     * automatically filters out secondary pointer events like right
+     * click and multitouch.
+     *
+     * It also adds accessibility support for keyboards, where
+     * an element with a press gesture will receive focus and
+     *  trigger on Enter `"keydown"` and `"keyup"` events.
+     *
+     * This is different to a browser's `"click"` event, which does
+     * respond to keyboards but only for the `"click"` itself, rather
+     * than the press start and end/cancel. The element also needs
+     * to be focusable for this to work, whereas a press gesture will
+     * make an element focusable by default.
+     *
+     * @public
+     */
+    function press(targetOrSelector, onPressStart, options = {}) {
+        const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
+        const startPress = (startEvent) => {
+            const target = startEvent.currentTarget;
+            if (!isValidPressEvent(startEvent))
+                return;
+            isPressing.add(target);
+            const onPressEnd = onPressStart(target, startEvent);
+            const onPointerEnd = (endEvent, success) => {
+                window.removeEventListener("pointerup", onPointerUp);
+                window.removeEventListener("pointercancel", onPointerCancel);
+                if (isPressing.has(target)) {
+                    isPressing.delete(target);
+                }
+                if (!isValidPressEvent(endEvent)) {
+                    return;
+                }
+                if (typeof onPressEnd === "function") {
+                    onPressEnd(endEvent, { success });
+                }
             };
-            onChange();
-            const cancelOnChange = value.on("change", onChange);
-            computed && value.addDependent(computed);
-            const remove = () => {
-                cancelOnChange();
-                render && cancelFrame(render);
-                this.values.delete(name);
-                computed && value.removeDependent(computed);
+            const onPointerUp = (upEvent) => {
+                onPointerEnd(upEvent, target === window ||
+                    target === document ||
+                    options.useGlobalTarget ||
+                    isNodeOrChild(target, upEvent.target));
             };
-            this.values.set(name, { value, onRemove: remove });
-            return remove;
-        }
-        get(name) {
-            return this.values.get(name)?.value;
-        }
-        destroy() {
-            for (const value of this.values.values()) {
-                value.onRemove();
+            const onPointerCancel = (cancelEvent) => {
+                onPointerEnd(cancelEvent, false);
+            };
+            window.addEventListener("pointerup", onPointerUp, eventOptions);
+            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+        };
+        targets.forEach((target) => {
+            const pointerDownTarget = options.useGlobalTarget ? window : target;
+            pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
+            if (isHTMLElement(target)) {
+                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
+                if (!isElementKeyboardAccessible(target) &&
+                    !target.hasAttribute("tabindex")) {
+                    target.tabIndex = 0;
+                }
             }
-        }
+        });
+        return cancelEvents;
     }
 
-    const translateAlias$1 = {
-        x: "translateX",
-        y: "translateY",
-        z: "translateZ",
-        transformPerspective: "perspective",
-    };
-    function buildTransform$1(state) {
-        let transform = "";
-        let transformIsDefault = true;
-        /**
-         * Loop over all possible transforms in order, adding the ones that
-         * are present to the transform string.
-         */
-        for (let i = 0; i < transformPropOrder.length; i++) {
-            const key = transformPropOrder[i];
-            const value = state.latest[key];
-            if (value === undefined)
-                continue;
-            let valueIsDefault = true;
-            if (typeof value === "number") {
-                valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
-            }
-            else {
-                valueIsDefault = parseFloat(value) === 0;
-            }
-            if (!valueIsDefault) {
-                transformIsDefault = false;
-                const transformName = translateAlias$1[key] || key;
-                const valueToRender = state.latest[key];
-                transform += `${transformName}(${valueToRender}) `;
-            }
-        }
-        return transformIsDefault ? "none" : transform.trim();
+    function getComputedStyle$2(element, name) {
+        const computedStyle = window.getComputedStyle(element);
+        return isCSSVar(name)
+            ? computedStyle.getPropertyValue(name)
+            : computedStyle[name];
     }
 
-    const stateMap = new WeakMap();
-    function styleEffect(subject, values) {
-        const elements = resolveElements(subject);
-        const subscriptions = [];
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            const state = stateMap.get(element) ?? new MotionValueState();
-            stateMap.set(element, state);
-            for (const key in values) {
-                const value = values[key];
-                const remove = addValue(element, state, key, value);
-                subscriptions.push(remove);
+    function observeTimeline(update, timeline) {
+        let prevProgress;
+        const onFrame = () => {
+            const { currentTime } = timeline;
+            const percentage = currentTime === null ? 0 : currentTime.value;
+            const progress = percentage / 100;
+            if (prevProgress !== progress) {
+                update(progress);
             }
-        }
-        return () => {
-            for (const cancel of subscriptions)
-                cancel();
+            prevProgress = progress;
         };
+        frame.preUpdate(onFrame, true);
+        return () => cancelFrame(onFrame);
     }
-    function addValue(element, state, key, value) {
-        let render = undefined;
-        let computed = undefined;
-        if (transformProps.has(key)) {
-            if (!state.get("transform")) {
-                state.set("transform", new MotionValue("none"), () => {
-                    element.style.transform = buildTransform$1(state);
-                });
-            }
-            computed = state.get("transform");
-        }
-        else if (isCSSVar(key)) {
-            render = () => {
-                element.style.setProperty(key, state.latest[key]);
-            };
+
+    function record() {
+        const { value } = statsBuffer;
+        if (value === null) {
+            cancelFrame(record);
+            return;
         }
-        else {
-            render = () => {
-                element.style[key] = state.latest[key];
+        value.frameloop.rate.push(frameData.delta);
+        value.animations.mainThread.push(activeAnimations.mainThread);
+        value.animations.waapi.push(activeAnimations.waapi);
+        value.animations.layout.push(activeAnimations.layout);
+    }
+    function mean(values) {
+        return values.reduce((acc, value) => acc + value, 0) / values.length;
+    }
+    function summarise(values, calcAverage = mean) {
+        if (values.length === 0) {
+            return {
+                min: 0,
+                max: 0,
+                avg: 0,
             };
         }
-        return state.set(key, value, render, computed);
+        return {
+            min: Math.min(...values),
+            max: Math.max(...values),
+            avg: calcAverage(values),
+        };
     }
-
-    const { schedule: microtask, cancel: cancelMicrotask } = 
-    /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
-
-    const isDragging = {
-        x: false,
-        y: false,
-    };
-    function isDragActive() {
-        return isDragging.x || isDragging.y;
+    const msToFps = (ms) => Math.round(1000 / ms);
+    function clearStatsBuffer() {
+        statsBuffer.value = null;
+        statsBuffer.addProjectionMetrics = null;
     }
-
-    function setDragLock(axis) {
-        if (axis === "x" || axis === "y") {
-            if (isDragging[axis]) {
-                return null;
-            }
-            else {
-                isDragging[axis] = true;
-                return () => {
-                    isDragging[axis] = false;
-                };
-            }
-        }
-        else {
-            if (isDragging.x || isDragging.y) {
-                return null;
-            }
-            else {
-                isDragging.x = isDragging.y = true;
-                return () => {
-                    isDragging.x = isDragging.y = false;
-                };
-            }
+    function reportStats() {
+        const { value } = statsBuffer;
+        if (!value) {
+            throw new Error("Stats are not being measured");
         }
-    }
-
-    function setupGesture(elementOrSelector, options) {
-        const elements = resolveElements(elementOrSelector);
-        const gestureAbortController = new AbortController();
-        const eventOptions = {
-            passive: true,
-            ...options,
-            signal: gestureAbortController.signal,
+        clearStatsBuffer();
+        cancelFrame(record);
+        const summary = {
+            frameloop: {
+                setup: summarise(value.frameloop.setup),
+                rate: summarise(value.frameloop.rate),
+                read: summarise(value.frameloop.read),
+                resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
+                preUpdate: summarise(value.frameloop.preUpdate),
+                update: summarise(value.frameloop.update),
+                preRender: summarise(value.frameloop.preRender),
+                render: summarise(value.frameloop.render),
+                postRender: summarise(value.frameloop.postRender),
+            },
+            animations: {
+                mainThread: summarise(value.animations.mainThread),
+                waapi: summarise(value.animations.waapi),
+                layout: summarise(value.animations.layout),
+            },
+            layoutProjection: {
+                nodes: summarise(value.layoutProjection.nodes),
+                calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
+                calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
+            },
         };
-        const cancel = () => gestureAbortController.abort();
-        return [elements, eventOptions, cancel];
-    }
-
-    function isValidHover(event) {
-        return !(event.pointerType === "touch" || isDragActive());
+        /**
+         * Convert the rate to FPS
+         */
+        const { rate } = summary.frameloop;
+        rate.min = msToFps(rate.min);
+        rate.max = msToFps(rate.max);
+        rate.avg = msToFps(rate.avg);
+        [rate.min, rate.max] = [rate.max, rate.min];
+        return summary;
     }
-    /**
-     * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
-     * in that it has an easier syntax, filters out polyfilled touch events, interoperates
-     * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
-     *
-     * @public
-     */
-    function hover(elementOrSelector, onHoverStart, options = {}) {
-        const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-        const onPointerEnter = (enterEvent) => {
-            if (!isValidHover(enterEvent))
-                return;
-            const { target } = enterEvent;
-            const onHoverEnd = onHoverStart(target, enterEvent);
-            if (typeof onHoverEnd !== "function" || !target)
-                return;
-            const onPointerLeave = (leaveEvent) => {
-                if (!isValidHover(leaveEvent))
-                    return;
-                onHoverEnd(leaveEvent);
-                target.removeEventListener("pointerleave", onPointerLeave);
-            };
-            target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+    function recordStats() {
+        if (statsBuffer.value) {
+            clearStatsBuffer();
+            throw new Error("Stats are already being measured");
+        }
+        const newStatsBuffer = statsBuffer;
+        newStatsBuffer.value = {
+            frameloop: {
+                setup: [],
+                rate: [],
+                read: [],
+                resolveKeyframes: [],
+                preUpdate: [],
+                update: [],
+                preRender: [],
+                render: [],
+                postRender: [],
+            },
+            animations: {
+                mainThread: [],
+                waapi: [],
+                layout: [],
+            },
+            layoutProjection: {
+                nodes: [],
+                calculatedTargetDeltas: [],
+                calculatedProjections: [],
+            },
         };
-        elements.forEach((element) => {
-            element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-        });
-        return cancel;
+        newStatsBuffer.addProjectionMetrics = (metrics) => {
+            const { layoutProjection } = newStatsBuffer.value;
+            layoutProjection.nodes.push(metrics.nodes);
+            layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
+            layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
+        };
+        frame.postRender(record, true);
+        return reportStats;
     }
 
     /**
-     * Recursively traverse up the tree to check whether the provided child node
-     * is the parent or a descendant of it.
-     *
-     * @param parent - Element to find
-     * @param child - Element to test against parent
+     * Checks if an element is an SVG element in a way
+     * that works across iframes
      */
-    const isNodeOrChild = (parent, child) => {
-        if (!child) {
-            return false;
-        }
-        else if (parent === child) {
-            return true;
-        }
-        else {
-            return isNodeOrChild(parent, child.parentElement);
-        }
-    };
-
-    const isPrimaryPointer = (event) => {
-        if (event.pointerType === "mouse") {
-            return typeof event.button !== "number" || event.button <= 0;
-        }
-        else {
-            /**
-             * isPrimary is true for all mice buttons, whereas every touch point
-             * is regarded as its own input. So subsequent concurrent touch points
-             * will be false.
-             *
-             * Specifically match against false here as incomplete versions of
-             * PointerEvents in very old browser might have it set as undefined.
-             */
-            return event.isPrimary !== false;
-        }
-    };
-
-    const focusableElements = new Set([
-        "BUTTON",
-        "INPUT",
-        "SELECT",
-        "TEXTAREA",
-        "A",
-    ]);
-    function isElementKeyboardAccessible(element) {
-        return (focusableElements.has(element.tagName) ||
-            element.tabIndex !== -1);
+    function isSVGElement(element) {
+        return isObject(element) && "ownerSVGElement" in element;
     }
 
-    const isPressing = new WeakSet();
-
     /**
-     * Filter out events that are not "Enter" keys.
+     * Checks if an element is specifically an SVGSVGElement (the root SVG element)
+     * in a way that works across iframes
      */
-    function filterEvents(callback) {
-        return (event) => {
-            if (event.key !== "Enter")
-                return;
-            callback(event);
-        };
+    function isSVGSVGElement(element) {
+        return isSVGElement(element) && element.tagName === "svg";
     }
-    function firePointerEvent(target, type) {
-        target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+
+    function transform(...args) {
+        const useImmediate = !Array.isArray(args[0]);
+        const argOffset = useImmediate ? 0 : -1;
+        const inputValue = args[0 + argOffset];
+        const inputRange = args[1 + argOffset];
+        const outputRange = args[2 + argOffset];
+        const options = args[3 + argOffset];
+        const interpolator = interpolate(inputRange, outputRange, options);
+        return useImmediate ? interpolator(inputValue) : interpolator;
     }
-    const enableKeyboardPress = (focusEvent, eventOptions) => {
-        const element = focusEvent.currentTarget;
-        if (!element)
-            return;
-        const handleKeydown = filterEvents(() => {
-            if (isPressing.has(element))
-                return;
-            firePointerEvent(element, "down");
-            const handleKeyup = filterEvents(() => {
-                firePointerEvent(element, "up");
-            });
-            const handleBlur = () => firePointerEvent(element, "cancel");
-            element.addEventListener("keyup", handleKeyup, eventOptions);
-            element.addEventListener("blur", handleBlur, eventOptions);
+
+    function subscribeValue(inputValues, outputValue, getLatest) {
+        const update = () => outputValue.set(getLatest());
+        const scheduleUpdate = () => frame.preRender(update, false, true);
+        const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
+        outputValue.on("destroy", () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            cancelFrame(update);
         });
-        element.addEventListener("keydown", handleKeydown, eventOptions);
+    }
+
+    /**
+     * Create a `MotionValue` that transforms the output of other `MotionValue`s by
+     * passing their latest values through a transform function.
+     *
+     * Whenever a `MotionValue` referred to in the provided function is updated,
+     * it will be re-evaluated.
+     *
+     * ```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 transformValue(transform) {
+        const collectedValues = [];
         /**
-         * Add an event listener that fires on blur to remove the keydown events.
+         * Open session of collectMotionValues. Any MotionValue that calls get()
+         * inside transform will be saved into this array.
          */
-        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-    };
+        collectMotionValues.current = collectedValues;
+        const initialValue = transform();
+        collectMotionValues.current = undefined;
+        const value = motionValue(initialValue);
+        subscribeValue(collectedValues, value, transform);
+        return value;
+    }
 
     /**
-     * Filter out events that are not primary pointer events, or are triggering
-     * while a Motion gesture is active.
+     * Create a `MotionValue` that maps the output of another `MotionValue` by
+     * mapping it from one range of values into another.
+     *
+     * @remarks
+     *
+     * Given an input range of `[-200, -100, 100, 200]` and an output range of
+     * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+     *
+     * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
+     * - When provided a value between `-100` and `100`, will return `1`.
+     * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
+     *
+     * The input range must be a linear series of numbers. The output range
+     * can be any value type supported by Motion: numbers, colors, shadows, etc.
+     *
+     * Every value in the output range must be of the same type and in the same format.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const xRange = [-200, -100, 100, 200]
+     * const opacityRange = [0, 1, 1, 0]
+     * const opacity = mapValue(x, xRange, opacityRange)
+     * ```
+     *
+     * @param inputValue - `MotionValue`
+     * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+     * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+     * @param options -
+     *
+     *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
+     *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
+     *
+     * @returns `MotionValue`
+     *
+     * @public
      */
-    function isValidPressEvent(event) {
-        return isPrimaryPointer(event) && !isDragActive();
+    function mapValue(inputValue, inputRange, outputRange, options) {
+        const map = transform(inputRange, outputRange, options);
+        return transformValue(() => map(inputValue.get()));
     }
+
+    const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
     /**
-     * Create a press gesture.
-     *
-     * Press is different to `"pointerdown"`, `"pointerup"` in that it
-     * automatically filters out secondary pointer events like right
-     * click and multitouch.
+     * Create a `MotionValue` that animates to its latest value using a spring.
+     * Can either be a value or track another `MotionValue`.
      *
-     * It also adds accessibility support for keyboards, where
-     * an element with a press gesture will receive focus and
-     *  trigger on Enter `"keydown"` and `"keyup"` events.
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = transformValue(() => x.get() * 2) // double x
+     * ```
      *
-     * This is different to a browser's `"click"` event, which does
-     * respond to keyboards but only for the `"click"` itself, rather
-     * than the press start and end/cancel. The element also needs
-     * to be focusable for this to work, whereas a press gesture will
-     * make an element focusable by default.
+     * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+     * @returns `MotionValue`
      *
      * @public
      */
-    function press(targetOrSelector, onPressStart, options = {}) {
-        const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
-        const startPress = (startEvent) => {
-            const target = startEvent.currentTarget;
-            if (!isValidPressEvent(startEvent))
-                return;
-            isPressing.add(target);
-            const onPressEnd = onPressStart(target, startEvent);
-            const onPointerEnd = (endEvent, success) => {
-                window.removeEventListener("pointerup", onPointerUp);
-                window.removeEventListener("pointercancel", onPointerCancel);
-                if (isPressing.has(target)) {
-                    isPressing.delete(target);
-                }
-                if (!isValidPressEvent(endEvent)) {
-                    return;
-                }
-                if (typeof onPressEnd === "function") {
-                    onPressEnd(endEvent, { success });
-                }
-            };
-            const onPointerUp = (upEvent) => {
-                onPointerEnd(upEvent, target === window ||
-                    target === document ||
-                    options.useGlobalTarget ||
-                    isNodeOrChild(target, upEvent.target));
-            };
-            const onPointerCancel = (cancelEvent) => {
-                onPointerEnd(cancelEvent, false);
-            };
-            window.addEventListener("pointerup", onPointerUp, eventOptions);
-            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
-        };
-        targets.forEach((target) => {
-            const pointerDownTarget = options.useGlobalTarget ? window : target;
-            pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-            if (target instanceof HTMLElement) {
-                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
-                if (!isElementKeyboardAccessible(target) &&
-                    !target.hasAttribute("tabindex")) {
-                    target.tabIndex = 0;
-                }
+    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;
             }
-        });
-        return cancelEvents;
+        };
+        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);
     }
 
-    function getComputedStyle$2(element, name) {
-        const computedStyle = window.getComputedStyle(element);
-        return isCSSVar(name)
-            ? computedStyle.getPropertyValue(name)
-            : computedStyle[name];
+    /**
+     * 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));
+
+    function chooseLayerType(valueName) {
+        if (valueName === "layout")
+            return "group";
+        if (valueName === "enter" || valueName === "new")
+            return "new";
+        if (valueName === "exit" || valueName === "old")
+            return "old";
+        return "group";
     }
 
-    function observeTimeline(update, timeline) {
-        let prevProgress;
-        const onFrame = () => {
-            const { currentTime } = timeline;
-            const percentage = currentTime === null ? 0 : currentTime.value;
-            const progress = percentage / 100;
-            if (prevProgress !== progress) {
-                update(progress);
+    let pendingRules = {};
+    let style = null;
+    const css = {
+        set: (selector, values) => {
+            pendingRules[selector] = values;
+        },
+        commit: () => {
+            if (!style) {
+                style = document.createElement("style");
+                style.id = "motion-view";
             }
-            prevProgress = progress;
-        };
-        frame.preUpdate(onFrame, true);
-        return () => cancelFrame(onFrame);
-    }
+            let cssText = "";
+            for (const selector in pendingRules) {
+                const rule = pendingRules[selector];
+                cssText += `${selector} {\n`;
+                for (const [property, value] of Object.entries(rule)) {
+                    cssText += `  ${property}: ${value};\n`;
+                }
+                cssText += "}\n";
+            }
+            style.textContent = cssText;
+            document.head.appendChild(style);
+            pendingRules = {};
+        },
+        remove: () => {
+            if (style && style.parentElement) {
+                style.parentElement.removeChild(style);
+            }
+        },
+    };
 
-    function record() {
-        const { value } = statsBuffer;
-        if (value === null) {
-            cancelFrame(record);
-            return;
-        }
-        value.frameloop.rate.push(frameData.delta);
-        value.animations.mainThread.push(activeAnimations.mainThread);
-        value.animations.waapi.push(activeAnimations.waapi);
-        value.animations.layout.push(activeAnimations.layout);
+    function getLayerName(pseudoElement) {
+        const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
+        if (!match)
+            return null;
+        return { layer: match[2], type: match[1] };
     }
-    function mean(values) {
-        return values.reduce((acc, value) => acc + value, 0) / values.length;
+
+    function filterViewAnimations(animation) {
+        const { effect } = animation;
+        if (!effect)
+            return false;
+        return (effect.target === document.documentElement &&
+            effect.pseudoElement?.startsWith("::view-transition"));
     }
-    function summarise(values, calcAverage = mean) {
-        if (values.length === 0) {
-            return {
-                min: 0,
-                max: 0,
-                avg: 0,
-            };
-        }
-        return {
-            min: Math.min(...values),
-            max: Math.max(...values),
-            avg: calcAverage(values),
-        };
+    function getViewAnimations() {
+        return document.getAnimations().filter(filterViewAnimations);
     }
-    const msToFps = (ms) => Math.round(1000 / ms);
-    function clearStatsBuffer() {
-        statsBuffer.value = null;
-        statsBuffer.addProjectionMetrics = null;
+
+    function hasTarget(target, targets) {
+        return targets.has(target) && Object.keys(targets.get(target)).length > 0;
     }
-    function reportStats() {
-        const { value } = statsBuffer;
-        if (!value) {
-            throw new Error("Stats are not being measured");
+
+    const definitionNames = ["layout", "enter", "exit", "new", "old"];
+    function startViewAnimation(builder) {
+        const { update, targets, options: defaultOptions } = builder;
+        if (!document.startViewTransition) {
+            return new Promise(async (resolve) => {
+                await update();
+                resolve(new GroupAnimation([]));
+            });
         }
-        clearStatsBuffer();
-        cancelFrame(record);
-        const summary = {
-            frameloop: {
-                setup: summarise(value.frameloop.setup),
-                rate: summarise(value.frameloop.rate),
-                read: summarise(value.frameloop.read),
-                resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
-                preUpdate: summarise(value.frameloop.preUpdate),
-                update: summarise(value.frameloop.update),
-                preRender: summarise(value.frameloop.preRender),
-                render: summarise(value.frameloop.render),
-                postRender: summarise(value.frameloop.postRender),
-            },
-            animations: {
-                mainThread: summarise(value.animations.mainThread),
-                waapi: summarise(value.animations.waapi),
-                layout: summarise(value.animations.layout),
-            },
-            layoutProjection: {
-                nodes: summarise(value.layoutProjection.nodes),
-                calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
-                calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
-            },
-        };
+        // TODO: Go over existing targets and ensure they all have ids
         /**
-         * Convert the rate to FPS
+         * If we don't have any animations defined for the root target,
+         * remove it from being captured.
          */
-        const { rate } = summary.frameloop;
-        rate.min = msToFps(rate.min);
-        rate.max = msToFps(rate.max);
-        rate.avg = msToFps(rate.avg);
-        [rate.min, rate.max] = [rate.max, rate.min];
-        return summary;
+        if (!hasTarget("root", targets)) {
+            css.set(":root", {
+                "view-transition-name": "none",
+            });
+        }
+        /**
+         * Set the timing curve to linear for all view transition layers.
+         * This gets baked into the keyframes, which can't be changed
+         * without breaking the generated animation.
+         *
+         * This allows us to set easing via updateTiming - which can be changed.
+         */
+        css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
+        css.commit(); // Write
+        const transition = document.startViewTransition(async () => {
+            await update();
+            // TODO: Go over new targets and ensure they all have ids
+        });
+        transition.finished.finally(() => {
+            css.remove(); // Write
+        });
+        return new Promise((resolve) => {
+            transition.ready.then(() => {
+                const generatedViewAnimations = getViewAnimations();
+                const animations = [];
+                /**
+                 * Create animations for each of our explicitly-defined subjects.
+                 */
+                targets.forEach((definition, target) => {
+                    // TODO: If target is not "root", resolve elements
+                    // and iterate over each
+                    for (const key of definitionNames) {
+                        if (!definition[key])
+                            continue;
+                        const { keyframes, options } = definition[key];
+                        for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
+                            if (!valueKeyframes)
+                                continue;
+                            const valueOptions = {
+                                ...getValueTransition$1(defaultOptions, valueName),
+                                ...getValueTransition$1(options, valueName),
+                            };
+                            const type = chooseLayerType(key);
+                            /**
+                             * If this is an opacity animation, and keyframes are not an array,
+                             * we need to convert them into an array and set an initial value.
+                             */
+                            if (valueName === "opacity" &&
+                                !Array.isArray(valueKeyframes)) {
+                                const initialValue = type === "new" ? 0 : 1;
+                                valueKeyframes = [initialValue, valueKeyframes];
+                            }
+                            /**
+                             * Resolve stagger function if provided.
+                             */
+                            if (typeof valueOptions.delay === "function") {
+                                valueOptions.delay = valueOptions.delay(0, 1);
+                            }
+                            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+                            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+                            const animation = new NativeAnimation({
+                                ...valueOptions,
+                                element: document.documentElement,
+                                name: valueName,
+                                pseudoElement: `::view-transition-${type}(${target})`,
+                                keyframes: valueKeyframes,
+                            });
+                            animations.push(animation);
+                        }
+                    }
+                });
+                /**
+                 * Handle browser generated animations
+                 */
+                for (const animation of generatedViewAnimations) {
+                    if (animation.playState === "finished")
+                        continue;
+                    const { effect } = animation;
+                    if (!effect || !(effect instanceof KeyframeEffect))
+                        continue;
+                    const { pseudoElement } = effect;
+                    if (!pseudoElement)
+                        continue;
+                    const name = getLayerName(pseudoElement);
+                    if (!name)
+                        continue;
+                    const targetDefinition = targets.get(name.layer);
+                    if (!targetDefinition) {
+                        /**
+                         * If transition name is group then update the timing of the animation
+                         * whereas if it's old or new then we could possibly replace it using
+                         * the above method.
+                         */
+                        const transitionName = name.type === "group" ? "layout" : "";
+                        let animationTransition = {
+                            ...getValueTransition$1(defaultOptions, transitionName),
+                        };
+                        animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
+                        animationTransition =
+                            applyGeneratorOptions(animationTransition);
+                        const easing = mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
+                        effect.updateTiming({
+                            delay: secondsToMilliseconds(animationTransition.delay ?? 0),
+                            duration: animationTransition.duration,
+                            easing,
+                        });
+                        animations.push(new NativeAnimationWrapper(animation));
+                    }
+                    else if (hasOpacity(targetDefinition, "enter") &&
+                        hasOpacity(targetDefinition, "exit") &&
+                        effect
+                            .getKeyframes()
+                            .some((keyframe) => keyframe.mixBlendMode)) {
+                        animations.push(new NativeAnimationWrapper(animation));
+                    }
+                    else {
+                        animation.cancel();
+                    }
+                }
+                resolve(new GroupAnimation(animations));
+            });
+        });
     }
-    function recordStats() {
-        if (statsBuffer.value) {
-            clearStatsBuffer();
-            throw new Error("Stats are already being measured");
-        }
-        const newStatsBuffer = statsBuffer;
-        newStatsBuffer.value = {
-            frameloop: {
-                setup: [],
-                rate: [],
-                read: [],
-                resolveKeyframes: [],
-                preUpdate: [],
-                update: [],
-                preRender: [],
-                render: [],
-                postRender: [],
-            },
-            animations: {
-                mainThread: [],
-                waapi: [],
-                layout: [],
-            },
-            layoutProjection: {
-                nodes: [],
-                calculatedTargetDeltas: [],
-                calculatedProjections: [],
-            },
-        };
-        newStatsBuffer.addProjectionMetrics = (metrics) => {
-            const { layoutProjection } = newStatsBuffer.value;
-            layoutProjection.nodes.push(metrics.nodes);
-            layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
-            layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
-        };
-        frame.postRender(record, true);
-        return reportStats;
+    function hasOpacity(target, key) {
+        return target?.[key]?.keyframes.opacity;
     }
 
-    function transform(...args) {
-        const useImmediate = !Array.isArray(args[0]);
-        const argOffset = useImmediate ? 0 : -1;
-        const inputValue = args[0 + argOffset];
-        const inputRange = args[1 + argOffset];
-        const outputRange = args[2 + argOffset];
-        const options = args[3 + argOffset];
-        const interpolator = interpolate(inputRange, outputRange, options);
-        return useImmediate ? interpolator(inputValue) : interpolator;
+    let builders = [];
+    let current = null;
+    function next() {
+        current = null;
+        const [nextBuilder] = builders;
+        if (nextBuilder)
+            start(nextBuilder);
     }
-
-    function subscribeValue(inputValues, outputValue, getLatest) {
-        const update = () => outputValue.set(getLatest());
-        const scheduleUpdate = () => frame.preRender(update, false, true);
-        const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
-        outputValue.on("destroy", () => {
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            cancelFrame(update);
+    function start(builder) {
+        removeItem(builders, builder);
+        current = builder;
+        startViewAnimation(builder).then((animation) => {
+            builder.notifyReady(animation);
+            animation.finished.finally(next);
         });
     }
-
-    /**
-     * Create a `MotionValue` that transforms the output of other `MotionValue`s by
-     * passing their latest values through a transform function.
-     *
-     * Whenever a `MotionValue` referred to in the provided function is updated,
-     * it will be re-evaluated.
-     *
-     * ```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 transformValue(transform) {
-        const collectedValues = [];
+    function processQueue() {
         /**
-         * Open session of collectMotionValues. Any MotionValue that calls get()
-         * inside transform will be saved into this array.
+         * Iterate backwards over the builders array. We can ignore the
+         * "wait" animations. If we have an interrupting animation in the
+         * queue then we need to batch all preceeding animations into it.
+         * Currently this only batches the update functions but will also
+         * need to batch the targets.
          */
-        collectMotionValues.current = collectedValues;
-        const initialValue = transform();
-        collectMotionValues.current = undefined;
-        const value = motionValue(initialValue);
-        subscribeValue(collectedValues, value, transform);
-        return value;
-    }
-
-    /**
-     * Create a `MotionValue` that maps the output of another `MotionValue` by
-     * mapping it from one range of values into another.
-     *
-     * @remarks
-     *
-     * Given an input range of `[-200, -100, 100, 200]` and an output range of
-     * `[0, 1, 1, 0]`, the returned `MotionValue` will:
-     *
-     * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
-     * - When provided a value between `-100` and `100`, will return `1`.
-     * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
-     *
-     * The input range must be a linear series of numbers. The output range
-     * can be any value type supported by Motion: numbers, colors, shadows, etc.
-     *
-     * Every value in the output range must be of the same type and in the same format.
-     *
-     * ```jsx
-     * const x = motionValue(0)
-     * const xRange = [-200, -100, 100, 200]
-     * const opacityRange = [0, 1, 1, 0]
-     * const opacity = mapValue(x, xRange, opacityRange)
-     * ```
-     *
-     * @param inputValue - `MotionValue`
-     * @param inputRange - A linear series of numbers (either all increasing or decreasing)
-     * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
-     * @param options -
-     *
-     *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
-     *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
-     *
-     * @returns `MotionValue`
-     *
-     * @public
-     */
-    function mapValue(inputValue, inputRange, outputRange, options) {
-        const map = transform(inputRange, outputRange, options);
-        return transformValue(() => map(inputValue.get()));
-    }
-
-    const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-    /**
-     * 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;
+        for (let i = builders.length - 1; i >= 0; i--) {
+            const builder = builders[i];
+            const { interrupt } = builder.options;
+            if (interrupt === "immediate") {
+                const batchedUpdates = builders.slice(0, i + 1).map((b) => b.update);
+                const remaining = builders.slice(i + 1);
+                builder.update = () => {
+                    batchedUpdates.forEach((update) => update());
+                };
+                // Put the current builder at the front, followed by any "wait" builders
+                builders = [builder, ...remaining];
+                break;
             }
-        };
-        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;
+        if (!current || builders[0]?.options.interrupt === "immediate") {
+            next();
+        }
     }
-    function parseValue(v, unit) {
-        return unit ? v + unit : v;
+    function addToQueue(builder) {
+        builders.push(builder);
+        microtask.render(processQueue);
     }
-    function asNumber$1(v) {
-        return typeof v === "number" ? v : parseFloat(v);
+
+    class ViewTransitionBuilder {
+        constructor(update, options = {}) {
+            this.currentTarget = "root";
+            this.targets = new Map();
+            this.notifyReady = noop;
+            this.readyPromise = new Promise((resolve) => {
+                this.notifyReady = resolve;
+            });
+            this.update = update;
+            this.options = {
+                interrupt: "wait",
+                ...options,
+            };
+            addToQueue(this);
+        }
+        get(selector) {
+            this.currentTarget = selector;
+            return this;
+        }
+        layout(keyframes, options) {
+            this.updateTarget("layout", keyframes, options);
+            return this;
+        }
+        new(keyframes, options) {
+            this.updateTarget("new", keyframes, options);
+            return this;
+        }
+        old(keyframes, options) {
+            this.updateTarget("old", keyframes, options);
+            return this;
+        }
+        enter(keyframes, options) {
+            this.updateTarget("enter", keyframes, options);
+            return this;
+        }
+        exit(keyframes, options) {
+            this.updateTarget("exit", keyframes, options);
+            return this;
+        }
+        crossfade(options) {
+            this.updateTarget("enter", { opacity: 1 }, options);
+            this.updateTarget("exit", { opacity: 0 }, options);
+            return this;
+        }
+        updateTarget(target, keyframes, options = {}) {
+            const { currentTarget, targets } = this;
+            if (!targets.has(currentTarget)) {
+                targets.set(currentTarget, {});
+            }
+            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);
     }
 
     /**
-     * A list of all ValueTypes
+     * @deprecated
+     *
+     * Import as `frame` instead.
      */
-    const valueTypes = [...dimensionValueTypes, color, complex];
+    const sync = frame;
     /**
-     * Tests a value against the list of ValueTypes
+     * @deprecated
+     *
+     * Use cancelFrame(callback) instead.
      */
-    const findValueType = (v) => valueTypes.find(testValueType(v));
+    const cancelSync = stepsOrder.reduce((acc, key) => {
+        acc[key] = (process) => cancelFrame(process);
+        return acc;
+    }, {});
 
-    function chooseLayerType(valueName) {
-        if (valueName === "layout")
-            return "group";
-        if (valueName === "enter" || valueName === "new")
-            return "new";
-        if (valueName === "exit" || valueName === "old")
-            return "old";
-        return "group";
-    }
+    /**
+     * @public
+     */
+    const MotionConfigContext = React$1.createContext({
+        transformPagePoint: (p) => p,
+        isStatic: false,
+        reducedMotion: "never",
+    });
 
-    let pendingRules = {};
-    let style = null;
-    const css = {
-        set: (selector, values) => {
-            pendingRules[selector] = values;
-        },
-        commit: () => {
-            if (!style) {
-                style = document.createElement("style");
-                style.id = "motion-view";
-            }
-            let cssText = "";
-            for (const selector in pendingRules) {
-                const rule = pendingRules[selector];
-                cssText += `${selector} {\n`;
-                for (const [property, value] of Object.entries(rule)) {
-                    cssText += `  ${property}: ${value};\n`;
-                }
-                cssText += "}\n";
-            }
-            style.textContent = cssText;
-            document.head.appendChild(style);
-            pendingRules = {};
-        },
-        remove: () => {
-            if (style && style.parentElement) {
-                style.parentElement.removeChild(style);
+    /**
+     * 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;
             }
-        },
-    };
-
-    function getLayerName(pseudoElement) {
-        const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
-        if (!match)
             return null;
-        return { layer: match[2], type: match[1] };
-    }
-
-    function filterViewAnimations(animation) {
-        const { effect } = animation;
-        if (!effect)
-            return false;
-        return (effect.target === document.documentElement &&
-            effect.pseudoElement?.startsWith("::view-transition"));
-    }
-    function getViewAnimations() {
-        return document.getAnimations().filter(filterViewAnimations);
-    }
-
-    function hasTarget(target, targets) {
-        return targets.has(target) && Object.keys(targets.get(target)).length > 0;
-    }
-
-    const definitionNames = ["layout", "enter", "exit", "new", "old"];
-    function startViewAnimation(builder) {
-        const { update, targets, options: defaultOptions } = builder;
-        if (!document.startViewTransition) {
-            return new Promise(async (resolve) => {
-                await update();
-                resolve(new GroupAnimation([]));
-            });
         }
-        // TODO: Go over existing targets and ensure they all have ids
         /**
-         * If we don't have any animations defined for the root target,
-         * remove it from being captured.
+         * 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 (!hasTarget("root", targets)) {
-            css.set(":root", {
-                "view-transition-name": "none",
-            });
+        if (presenceAffectsLayout && isReusedContext) {
+            context = { ...context };
         }
+        React$1.useMemo(() => {
+            presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+        }, [isPresent]);
         /**
-         * Set the timing curve to linear for all view transition layers.
-         * This gets baked into the keyframes, which can't be changed
-         * without breaking the generated animation.
-         *
-         * This allows us to set easing via updateTiming - which can be changed.
+         * If there's no `motion` components to fire exit animations, we want to remove this
+         * component immediately.
          */
-        css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
-        css.commit(); // Write
-        const transition = document.startViewTransition(async () => {
-            await update();
-            // TODO: Go over new targets and ensure they all have ids
-        });
-        transition.finished.finally(() => {
-            css.remove(); // Write
-        });
-        return new Promise((resolve) => {
-            transition.ready.then(() => {
-                const generatedViewAnimations = getViewAnimations();
-                const animations = [];
-                /**
-                 * Create animations for each of our explicitly-defined subjects.
-                 */
-                targets.forEach((definition, target) => {
-                    // TODO: If target is not "root", resolve elements
-                    // and iterate over each
-                    for (const key of definitionNames) {
-                        if (!definition[key])
-                            continue;
-                        const { keyframes, options } = definition[key];
-                        for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
-                            if (!valueKeyframes)
-                                continue;
-                            const valueOptions = {
-                                ...getValueTransition$1(defaultOptions, valueName),
-                                ...getValueTransition$1(options, valueName),
-                            };
-                            const type = chooseLayerType(key);
-                            /**
-                             * If this is an opacity animation, and keyframes are not an array,
-                             * we need to convert them into an array and set an initial value.
-                             */
-                            if (valueName === "opacity" &&
-                                !Array.isArray(valueKeyframes)) {
-                                const initialValue = type === "new" ? 0 : 1;
-                                valueKeyframes = [initialValue, valueKeyframes];
-                            }
-                            /**
-                             * Resolve stagger function if provided.
-                             */
-                            if (typeof valueOptions.delay === "function") {
-                                valueOptions.delay = valueOptions.delay(0, 1);
-                            }
-                            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
-                            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-                            const animation = new NativeAnimation({
-                                ...valueOptions,
-                                element: document.documentElement,
-                                name: valueName,
-                                pseudoElement: `::view-transition-${type}(${target})`,
-                                keyframes: valueKeyframes,
-                            });
-                            animations.push(animation);
-                        }
-                    }
-                });
-                /**
-                 * Handle browser generated animations
-                 */
-                for (const animation of generatedViewAnimations) {
-                    if (animation.playState === "finished")
-                        continue;
-                    const { effect } = animation;
-                    if (!effect || !(effect instanceof KeyframeEffect))
-                        continue;
-                    const { pseudoElement } = effect;
-                    if (!pseudoElement)
-                        continue;
-                    const name = getLayerName(pseudoElement);
-                    if (!name)
-                        continue;
-                    const targetDefinition = targets.get(name.layer);
-                    if (!targetDefinition) {
-                        /**
-                         * If transition name is group then update the timing of the animation
-                         * whereas if it's old or new then we could possibly replace it using
-                         * the above method.
-                         */
-                        const transitionName = name.type === "group" ? "layout" : "";
-                        let animationTransition = {
-                            ...getValueTransition$1(defaultOptions, transitionName),
-                        };
-                        animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
-                        animationTransition =
-                            applyGeneratorOptions(animationTransition);
-                        const easing = mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
-                        effect.updateTiming({
-                            delay: secondsToMilliseconds(animationTransition.delay ?? 0),
-                            duration: animationTransition.duration,
-                            easing,
-                        });
-                        animations.push(new NativeAnimationWrapper(animation));
-                    }
-                    else if (hasOpacity(targetDefinition, "enter") &&
-                        hasOpacity(targetDefinition, "exit") &&
-                        effect
-                            .getKeyframes()
-                            .some((keyframe) => keyframe.mixBlendMode)) {
-                        animations.push(new NativeAnimationWrapper(animation));
-                    }
-                    else {
-                        animation.cancel();
-                    }
-                }
-                resolve(new GroupAnimation(animations));
-            });
-        });
-    }
-    function hasOpacity(target, key) {
-        return target?.[key]?.keyframes.opacity;
+        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();
     }
 
-    let builders = [];
-    let current = null;
-    function next() {
-        current = null;
-        const [nextBuilder] = builders;
-        if (nextBuilder)
-            start(nextBuilder);
+    /**
+     * 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];
     }
-    function start(builder) {
-        removeItem(builders, builder);
-        current = builder;
-        startViewAnimation(builder).then((animation) => {
-            builder.notifyReady(animation);
-            animation.finished.finally(next);
+    /**
+     * 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;
     }
-    function processQueue() {
+
+    /**
+     * `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);
         /**
-         * Iterate backwards over the builders array. We can ignore the
-         * "wait" animations. If we have an interrupting animation in the
-         * queue then we need to batch all preceeding animations into it.
-         * Currently this only batches the update functions but will also
-         * need to batch the targets.
+         * Filter any children that aren't ReactElements. We can only track components
+         * between renders with a props.key.
          */
-        for (let i = builders.length - 1; i >= 0; i--) {
-            const builder = builders[i];
-            const { interrupt } = builder.options;
-            if (interrupt === "immediate") {
-                const batchedUpdates = builders.slice(0, i + 1).map((b) => b.update);
-                const remaining = builders.slice(i + 1);
-                builder.update = () => {
-                    batchedUpdates.forEach((update) => update());
-                };
-                // Put the current builder at the front, followed by any "wait" builders
-                builders = [builder, ...remaining];
-                break;
+        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);
+                }
             }
-        }
-        if (!current || builders[0]?.options.interrupt === "immediate") {
-            next();
-        }
-    }
-    function addToQueue(builder) {
-        builders.push(builder);
-        microtask.render(processQueue);
-    }
-
-    class ViewTransitionBuilder {
-        constructor(update, options = {}) {
-            this.currentTarget = "root";
-            this.targets = new Map();
-            this.notifyReady = noop;
-            this.readyPromise = new Promise((resolve) => {
-                this.notifyReady = resolve;
-            });
-            this.update = update;
-            this.options = {
-                interrupt: "wait",
-                ...options,
-            };
-            addToQueue(this);
-        }
-        get(selector) {
-            this.currentTarget = selector;
-            return this;
-        }
-        layout(keyframes, options) {
-            this.updateTarget("layout", keyframes, options);
-            return this;
-        }
-        new(keyframes, options) {
-            this.updateTarget("new", keyframes, options);
-            return this;
-        }
-        old(keyframes, options) {
-            this.updateTarget("old", keyframes, options);
-            return this;
-        }
-        enter(keyframes, options) {
-            this.updateTarget("enter", keyframes, options);
-            return this;
-        }
-        exit(keyframes, options) {
-            this.updateTarget("exit", keyframes, options);
-            return this;
-        }
-        crossfade(options) {
-            this.updateTarget("enter", { opacity: 1 }, options);
-            this.updateTarget("exit", { opacity: 0 }, options);
-            return this;
-        }
-        updateTarget(target, keyframes, options = {}) {
-            const { currentTarget, targets } = this;
-            if (!targets.has(currentTarget)) {
-                targets.set(currentTarget, {});
+        }, [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);
+                }
             }
-            const targetData = targets.get(currentTarget);
-            targetData[target] = { keyframes, options };
+            /**
+             * 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;
@@ -5369,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 {
@@ -6170,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) {
@@ -11959,7 +11982,7 @@
                 latestValues: {},
             },
         };
-        const node = isSVGElement(element)
+        const node = isSVGElement(element) && !isSVGSVGElement(element)
             ? new SVGVisualElement(options)
             : new HTMLVisualElement(options);
         node.mount(element);
@@ -12177,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 {
@@ -12319,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;
@@ -13868,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;