unframer 2.25.5 → 2.26.0

package/esm/framer.js

@@ -1,5 +1,5 @@
 import { __commonJS, __decorateElement, __decoratorMetadata, __decoratorStart, __export, __privateAdd, __privateGet, __privateMethod, __privateSet, __publicField, __runInitializers, __toESM, } from './framer-chunks/chunk-A2PMVMFI.js';
-// /:https://app.framerstatic.com/chunk-IGW3TQSG.mjs
+// /:https://app.framerstatic.com/chunk-A6RUM2JZ.mjs
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { useCallback, useContext, useId, } from 'react';
@@ -51,251 +51,6 @@ var LayoutGroupContext = createContext({});
 var isBrowser = typeof window !== 'undefined';
 var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 var PresenceContext = /* @__PURE__ */ createContext(null);
-var MotionConfigContext = createContext({
-    transformPagePoint: (p) => p,
-    isStatic: false,
-    reducedMotion: 'never',
-});
-function usePresence(subscribe = true) {
-    const context = useContext(PresenceContext);
-    if (context === null)
-        return [true, null,];
-    const { isPresent: isPresent2, onExitComplete, register, } = context;
-    const id4 = useId();
-    useEffect(() => {
-        if (subscribe) {
-            return register(id4);
-        }
-    }, [subscribe,]);
-    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id4), [id4, onExitComplete, subscribe,]);
-    return !isPresent2 && onExitComplete ? [false, safeToRemove,] : [true,];
-}
-function useIsPresent() {
-    return isPresent(useContext(PresenceContext));
-}
-function isPresent(context) {
-    return context === null ? true : context.isPresent;
-}
-function useConstant(init) {
-    const ref = useRef3(null);
-    if (ref.current === null) {
-        ref.current = init();
-    }
-    return ref.current;
-}
-var PopChildMeasure = class extends React2.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;
-    }
-    /**
-     * Required with getSnapshotBeforeUpdate to stop React complaining.
-     */
-    componentDidUpdate() { }
-    render() {
-        return this.props.children;
-    }
-};
-function PopChild({ children, isPresent: isPresent2, anchorX, }) {
-    const id4 = useId();
-    const ref = useRef3(null);
-    const size = useRef3({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        right: 0,
-    });
-    const { nonce, } = useContext(MotionConfigContext);
-    useInsertionEffect(() => {
-        const { width, height, top, left, right, } = size.current;
-        if (isPresent2 || !ref.current || !width || !height)
-            return;
-        const x = anchorX === 'left' ? `left: ${left}` : `right: ${right}`;
-        ref.current.dataset.motionPopId = id4;
-        const style2 = document.createElement('style');
-        if (nonce)
-            style2.nonce = nonce;
-        document.head.appendChild(style2);
-        if (style2.sheet) {
-            style2.sheet.insertRule(`
-          [data-motion-pop-id="${id4}"] {
-            position: absolute !important;
-            width: ${width}px !important;
-            height: ${height}px !important;
-            ${x}px !important;
-            top: ${top}px !important;
-          }
-        `);
-        }
-        return () => {
-            if (document.head.contains(style2)) {
-                document.head.removeChild(style2);
-            }
-        };
-    }, [isPresent2,]);
-    return jsx3(PopChildMeasure, {
-        isPresent: isPresent2,
-        childRef: ref,
-        sizeRef: size,
-        children: React2.cloneElement(children, {
-            ref,
-        }),
-    });
-}
-var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
-    const presenceChildren = useConstant(newChildrenMap);
-    const id4 = useId();
-    let isReusedContext = true;
-    let context = useMemo2(() => {
-        isReusedContext = false;
-        return {
-            id: id4,
-            initial,
-            isPresent: isPresent2,
-            custom,
-            onExitComplete: (childId) => {
-                presenceChildren.set(childId, true);
-                for (const isComplete of presenceChildren.values()) {
-                    if (!isComplete)
-                        return;
-                }
-                onExitComplete && onExitComplete();
-            },
-            register: (childId) => {
-                presenceChildren.set(childId, false);
-                return () => presenceChildren.delete(childId);
-            },
-        };
-    }, [isPresent2, presenceChildren, onExitComplete,]);
-    if (presenceAffectsLayout && isReusedContext) {
-        context = {
-            ...context,
-        };
-    }
-    useMemo2(() => {
-        presenceChildren.forEach((_, key7) => presenceChildren.set(key7, false));
-    }, [isPresent2,]);
-    React2.useEffect(() => {
-        !isPresent2 && !presenceChildren.size && onExitComplete && onExitComplete();
-    }, [isPresent2,]);
-    if (mode === 'popLayout') {
-        children = jsx3(PopChild, {
-            isPresent: isPresent2,
-            anchorX,
-            children,
-        });
-    }
-    return jsx3(PresenceContext.Provider, {
-        value: context,
-        children,
-    });
-};
-function newChildrenMap() {
-    return /* @__PURE__ */ new Map();
-}
-var getChildKey = (child) => child.key || '';
-function onlyElements(children) {
-    const filtered = [];
-    Children.forEach(children, (child) => {
-        if (isValidElement(child))
-            filtered.push(child);
-    });
-    return filtered;
-}
-var AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = 'sync', propagate = false, anchorX = 'left', }) => {
-    const [isParentPresent, safeToRemove,] = usePresence(propagate);
-    const presentChildren = useMemo2(() => onlyElements(children), [children,]);
-    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
-    const isInitialRender = useRef3(true);
-    const pendingPresentChildren = useRef3(presentChildren);
-    const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
-    const [diffedChildren, setDiffedChildren,] = useState(presentChildren);
-    const [renderedChildren, setRenderedChildren,] = useState(presentChildren);
-    useIsomorphicLayoutEffect(() => {
-        isInitialRender.current = false;
-        pendingPresentChildren.current = presentChildren;
-        for (let i = 0; i < renderedChildren.length; i++) {
-            const key7 = getChildKey(renderedChildren[i]);
-            if (!presentKeys.includes(key7)) {
-                if (exitComplete.get(key7) !== true) {
-                    exitComplete.set(key7, false);
-                }
-            }
-            else {
-                exitComplete.delete(key7);
-            }
-        }
-    }, [renderedChildren, presentKeys.length, presentKeys.join('-'),]);
-    const exitingChildren = [];
-    if (presentChildren !== diffedChildren) {
-        let nextChildren = [...presentChildren,];
-        for (let i = 0; i < renderedChildren.length; i++) {
-            const child = renderedChildren[i];
-            const key7 = getChildKey(child);
-            if (!presentKeys.includes(key7)) {
-                nextChildren.splice(i, 0, child);
-                exitingChildren.push(child);
-            }
-        }
-        if (mode === 'wait' && exitingChildren.length) {
-            nextChildren = exitingChildren;
-        }
-        setRenderedChildren(onlyElements(nextChildren));
-        setDiffedChildren(presentChildren);
-        return null;
-    }
-    if (false) {
-        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.`);
-    }
-    const { forceRender, } = useContext(LayoutGroupContext);
-    return jsx3(Fragment, {
-        children: renderedChildren.map((child) => {
-            const key7 = getChildKey(child);
-            const isPresent2 = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key7);
-            const onExit = () => {
-                if (exitComplete.has(key7)) {
-                    exitComplete.set(key7, true);
-                }
-                else {
-                    return;
-                }
-                let isEveryExitComplete = true;
-                exitComplete.forEach((isExitComplete) => {
-                    if (!isExitComplete)
-                        isEveryExitComplete = false;
-                });
-                if (isEveryExitComplete) {
-                    forceRender == null ? void 0 : forceRender();
-                    setRenderedChildren(pendingPresentChildren.current);
-                    propagate && (safeToRemove == null ? void 0 : safeToRemove());
-                    onExitComplete && onExitComplete();
-                }
-            };
-            return jsx3(PresenceChild, {
-                isPresent: isPresent2,
-                initial: !isInitialRender.current || initial ? void 0 : false,
-                custom,
-                presenceAffectsLayout,
-                mode,
-                onExitComplete: isPresent2 ? void 0 : onExit,
-                anchorX,
-                children: child,
-            }, key7);
-        }),
-    });
-};
-var DeprecatedLayoutGroupContext = createContext(null);
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
         arr.push(item);
@@ -337,6 +92,9 @@ if (false) {
 }
 var MotionGlobalConfig = {};
 var isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
 var isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
 // @__NO_SIDE_EFFECTS__
 function memo(callback) {
@@ -1524,13 +1282,11 @@ var JSAnimation = class extends WithPromise {
         this.currentTime = 0;
         this.holdTime = null;
         this.playbackSpeed = 1;
-        this.stop = (sync2 = true) => {
+        this.stop = () => {
             var _a, _b;
-            if (sync2) {
-                const { motionValue: motionValue2, } = this.options;
-                if (motionValue2 && motionValue2.updatedAt !== time.now()) {
-                    this.tick(time.now());
-                }
+            const { motionValue: motionValue2, } = this.options;
+            if (motionValue2 && motionValue2.updatedAt !== time.now()) {
+                this.tick(time.now());
             }
             this.isStopped = true;
             if (this.state === 'idle')
@@ -2322,14 +2078,17 @@ var NativeAnimationExtended = class extends NativeAnimation {
         sampleAnimation.stop();
     }
 };
-var acceleratedValues = /* @__PURE__ */ new Set(['opacity', '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.
+function isHTMLElement(element) {
+    return isObject(element) && 'offsetHeight' in element;
+}
+var acceleratedValues = /* @__PURE__ */ new Set(['opacity', 'clipPath', 'filter', 'transform', // TODO: Could be re-enabled now we have support for linear() easing
     // "background-color"
 ]);
 var supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, 'animate'));
 function supportsBrowserAnimation(options) {
+    var _a;
     const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type, } = options;
-    if (!motionValue2 || !motionValue2.owner || !(motionValue2.owner.current instanceof HTMLElement)) {
+    if (!isHTMLElement((_a = motionValue2 == null ? void 0 : motionValue2.owner) == null ? void 0 : _a.current)) {
         return false;
     }
     const { onUpdate, transformTemplate: transformTemplate2, } = motionValue2.owner.getProps();
@@ -2950,6 +2709,119 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     }
     return Array.from(elementOrSelector);
 }
+var getValueAsType = (value, type) => {
+    return type && typeof value === 'number' ? type.transform(value) : value;
+};
+function camelToDash(str) {
+    return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+function createSelectorEffect(subjectEffect) {
+    return (subject, values) => {
+        const elements = resolveElements(subject);
+        const subscriptions = [];
+        for (const element of elements) {
+            const remove2 = subjectEffect(element, values);
+            subscriptions.push(remove2);
+        }
+        return () => {
+            for (const remove2 of subscriptions)
+                remove2();
+        };
+    };
+}
+var MotionValueState = class {
+    constructor() {
+        this.latest = {};
+        this.values = /* @__PURE__ */ new Map();
+    }
+    set(name, value, render, computed, useDefaultValueType = true) {
+        const existingValue = this.values.get(name);
+        if (existingValue) {
+            existingValue.onRemove();
+        }
+        const onChange = () => {
+            const v = value.get();
+            if (useDefaultValueType) {
+                this.latest[name] = getValueAsType(v, numberValueTypes[name]);
+            }
+            else {
+                this.latest[name] = v;
+            }
+            render && frame.render(render);
+        };
+        onChange();
+        const cancelOnChange = value.on('change', onChange);
+        computed && value.addDependent(computed);
+        const remove2 = () => {
+            cancelOnChange();
+            render && cancelFrame(render);
+            this.values.delete(name);
+            computed && value.removeDependent(computed);
+        };
+        this.values.set(name, {
+            value,
+            onRemove: remove2,
+        });
+        return remove2;
+    }
+    get(name) {
+        var _a;
+        return (_a = this.values.get(name)) == null ? void 0 : _a.value;
+    }
+    destroy() {
+        for (const value of this.values.values()) {
+            value.onRemove();
+        }
+    }
+};
+function createEffect(addValue) {
+    const stateCache = /* @__PURE__ */ new WeakMap();
+    const subscriptions = [];
+    return (subject, values) => {
+        const state = stateCache.get(subject) ?? new MotionValueState();
+        stateCache.set(subject, state);
+        for (const key7 in values) {
+            const value = values[key7];
+            const remove2 = addValue(subject, state, key7, value);
+            subscriptions.push(remove2);
+        }
+        return () => {
+            for (const cancel of subscriptions)
+                cancel();
+        };
+    };
+}
+function canSetAsProperty(element, name) {
+    if (!(name in element))
+        return false;
+    const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), name) ||
+        Object.getOwnPropertyDescriptor(element, name);
+    return descriptor && typeof descriptor.set === 'function';
+}
+var addAttrValue = (element, state, key7, value) => {
+    const isProp = canSetAsProperty(element, key7);
+    const name = isProp ? key7 : key7.startsWith('data') || key7.startsWith('aria') ? camelToDash(key7) : key7;
+    const render = isProp
+        ? () => {
+            element[name] = state.latest[key7];
+        }
+        : () => {
+            const v = state.latest[key7];
+            if (v === null || v === void 0) {
+                element.removeAttribute(name);
+            }
+            else {
+                element.setAttribute(name, String(v));
+            }
+        };
+    return state.set(key7, value, render);
+};
+var attrEffect = /* @__PURE__ */ createSelectorEffect(/* @__PURE__ */ createEffect(addAttrValue));
+var propEffect = /* @__PURE__ */ createEffect((subject, state, key7, value) => {
+    return state.set(key7, value, () => {
+        subject[key7] = state.latest[key7];
+    }, void 0, false);
+});
 var MAX_VELOCITY_DELTA = 30;
 var isFloat = (value) => {
     return !isNaN(parseFloat(value));
@@ -3240,48 +3112,6 @@ var MotionValue = class {
 function motionValue(init, options) {
     return new MotionValue(init, options);
 }
-var getValueAsType = (value, type) => {
-    return type && typeof value === 'number' ? type.transform(value) : value;
-};
-var MotionValueState = class {
-    constructor() {
-        this.latest = {};
-        this.values = /* @__PURE__ */ 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 remove2 = () => {
-            cancelOnChange();
-            render && cancelFrame(render);
-            this.values.delete(name);
-            computed && value.removeDependent(computed);
-        };
-        this.values.set(name, {
-            value,
-            onRemove: remove2,
-        });
-        return remove2;
-    }
-    get(name) {
-        var _a;
-        return (_a = this.values.get(name)) == null ? void 0 : _a.value;
-    }
-    destroy() {
-        for (const value of this.values.values()) {
-            value.onRemove();
-        }
-    }
-};
 var translateAlias = {
     x: 'translateX',
     y: 'translateY',
@@ -3312,36 +3142,32 @@ function buildTransform(state) {
     }
     return transformIsDefault ? 'none' : transform2.trim();
 }
-var stateMap = /* @__PURE__ */ 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 key7 in values) {
-            const value = values[key7];
-            const remove2 = addValue(element, state, key7, value);
-            subscriptions.push(remove2);
-        }
-    }
-    return () => {
-        for (const cancel of subscriptions)
-            cancel();
-    };
-}
-function addValue(element, state, key7, value) {
+var originProps = /* @__PURE__ */ new Set(['originX', 'originY', 'originZ',]);
+var addStyleValue = (element, state, key7, value) => {
     let render = void 0;
     let computed = void 0;
     if (transformProps.has(key7)) {
         if (!state.get('transform')) {
+            if (!isHTMLElement(element) && !state.get('transformBox')) {
+                addStyleValue(element, state, 'transformBox', new MotionValue('fill-box'));
+            }
             state.set('transform', new MotionValue('none'), () => {
                 element.style.transform = buildTransform(state);
             });
         }
         computed = state.get('transform');
     }
+    else if (originProps.has(key7)) {
+        if (!state.get('transformOrigin')) {
+            state.set('transformOrigin', new MotionValue(''), () => {
+                const originX = state.latest.originX ?? '50%';
+                const originY = state.latest.originY ?? '50%';
+                const originZ = state.latest.originZ ?? 0;
+                element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
+            });
+        }
+        computed = state.get('transformOrigin');
+    }
     else if (isCSSVar(key7)) {
         render = () => {
             element.style.setProperty(key7, state.latest[key7]);
@@ -3353,6 +3179,37 @@ function addValue(element, state, key7, value) {
         };
     }
     return state.set(key7, value, render, computed);
+};
+var styleEffect = /* @__PURE__ */ createSelectorEffect(/* @__PURE__ */ createEffect(addStyleValue));
+var toPx = px.transform;
+function addSVGPathValue(element, state, key7, value) {
+    frame.render(() => element.setAttribute('pathLength', '1'));
+    if (key7 === 'pathOffset') {
+        return state.set(key7, value, () => element.setAttribute('stroke-dashoffset', toPx(-state.latest[key7])));
+    }
+    else {
+        if (!state.get('stroke-dasharray')) {
+            state.set('stroke-dasharray', new MotionValue('1 1'), () => {
+                const { pathLength = 1, pathSpacing, } = state.latest;
+                element.setAttribute('stroke-dasharray', `${toPx(pathLength)} ${toPx(pathSpacing ?? 1 - Number(pathLength))}`);
+            });
+        }
+        return state.set(key7, value, void 0, state.get('stroke-dasharray'));
+    }
+}
+var addSVGValue = (element, state, key7, value) => {
+    if (key7.startsWith('path')) {
+        return addSVGPathValue(element, state, key7, value);
+    }
+    else if (key7.startsWith('attr')) {
+        return addAttrValue(element, state, convertAttrKey(key7), value);
+    }
+    const handler = key7 in element.style ? addStyleValue : addAttrValue;
+    return handler(element, state, key7, value);
+};
+var svgEffect = /* @__PURE__ */ createSelectorEffect(/* @__PURE__ */ createEffect(addSVGValue));
+function convertAttrKey(key7) {
+    return key7.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
 }
 var { schedule: microtask, cancel: cancelMicrotask, } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 var isDragging = {
@@ -3515,7 +3372,7 @@ function press(targetOrSelector, onPressStart, options = {}) {
     targets.forEach((target) => {
         const pointerDownTarget = options.useGlobalTarget ? window : target;
         pointerDownTarget.addEventListener('pointerdown', startPress, eventOptions);
-        if (target instanceof HTMLElement) {
+        if (isHTMLElement(target)) {
             target.addEventListener('focus', (event) => enableKeyboardPress(event, eventOptions));
             if (!isElementKeyboardAccessible(target) && !target.hasAttribute('tabindex')) {
                 target.tabIndex = 0;
@@ -3650,6 +3507,12 @@ function recordStats() {
     frame.postRender(record, true);
     return reportStats;
 }
+function isSVGElement(element) {
+    return isObject(element) && 'ownerSVGElement' in element;
+}
+function isSVGSVGElement(element) {
+    return isSVGElement(element) && element.tagName === 'svg';
+}
 function transform(...args) {
     const useImmediate = !Array.isArray(args[0]);
     const argOffset = useImmediate ? 0 : -1;
@@ -3682,6 +3545,56 @@ function mapValue(inputValue, inputRange, outputRange, options) {
     const map2 = transform(inputRange, outputRange, options);
     return transformValue(() => map2(inputValue.get()));
 }
+var isMotionValue = (value) => Boolean(value && value.getVelocity);
+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, '') : void 0;
+    const stopAnimation2 = () => {
+        if (activeAnimation) {
+            activeAnimation.stop();
+            activeAnimation = null;
+        }
+    };
+    const startAnimation2 = () => {
+        stopAnimation2();
+        activeAnimation = new JSAnimation({
+            keyframes: [asNumber(value.get()), asNumber(latestValue),],
+            velocity: value.getVelocity(),
+            type: 'spring',
+            restDelta: 1e-3,
+            restSpeed: 0.01,
+            ...options,
+            onUpdate: latestSetter,
+        });
+    };
+    value.attach((v, set) => {
+        latestValue = v;
+        latestSetter = (latest) => set(parseValue(latest, unit));
+        frame.postRender(startAnimation2);
+        return value.get();
+    }, stopAnimation2);
+    let unsubscribe = void 0;
+    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(v) {
+    return typeof v === 'number' ? v : parseFloat(v);
+}
 var valueTypes = [...dimensionValueTypes, color, complex,];
 var findValueType = (v) => valueTypes.find(testValueType(v));
 function chooseLayerType(valueName) {
@@ -3962,6 +3875,251 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
+var MotionConfigContext = createContext({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: 'never',
+});
+function usePresence(subscribe = true) {
+    const context = useContext(PresenceContext);
+    if (context === null)
+        return [true, null,];
+    const { isPresent: isPresent2, onExitComplete, register, } = context;
+    const id4 = useId();
+    useEffect(() => {
+        if (subscribe) {
+            return register(id4);
+        }
+    }, [subscribe,]);
+    const safeToRemove = useCallback(() => subscribe && onExitComplete && onExitComplete(id4), [id4, onExitComplete, subscribe,]);
+    return !isPresent2 && onExitComplete ? [false, safeToRemove,] : [true,];
+}
+function useIsPresent() {
+    return isPresent(useContext(PresenceContext));
+}
+function isPresent(context) {
+    return context === null ? true : context.isPresent;
+}
+function useConstant(init) {
+    const ref = useRef3(null);
+    if (ref.current === null) {
+        ref.current = init();
+    }
+    return ref.current;
+}
+var PopChildMeasure = class extends React2.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const parent = element.offsetParent;
+            const parentWidth = isHTMLElement(parent) ? parent.offsetWidth || 0 : 0;
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+            size.right = parentWidth - size.width - size.left;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+};
+function PopChild({ children, isPresent: isPresent2, anchorX, }) {
+    const id4 = useId();
+    const ref = useRef3(null);
+    const size = useRef3({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+    });
+    const { nonce, } = useContext(MotionConfigContext);
+    useInsertionEffect(() => {
+        const { width, height, top, left, right, } = size.current;
+        if (isPresent2 || !ref.current || !width || !height)
+            return;
+        const x = anchorX === 'left' ? `left: ${left}` : `right: ${right}`;
+        ref.current.dataset.motionPopId = id4;
+        const style2 = document.createElement('style');
+        if (nonce)
+            style2.nonce = nonce;
+        document.head.appendChild(style2);
+        if (style2.sheet) {
+            style2.sheet.insertRule(`
+          [data-motion-pop-id="${id4}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            ${x}px !important;
+            top: ${top}px !important;
+          }
+        `);
+        }
+        return () => {
+            if (document.head.contains(style2)) {
+                document.head.removeChild(style2);
+            }
+        };
+    }, [isPresent2,]);
+    return jsx3(PopChildMeasure, {
+        isPresent: isPresent2,
+        childRef: ref,
+        sizeRef: size,
+        children: React2.cloneElement(children, {
+            ref,
+        }),
+    });
+}
+var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id4 = useId();
+    let isReusedContext = true;
+    let context = useMemo2(() => {
+        isReusedContext = false;
+        return {
+            id: id4,
+            initial,
+            isPresent: isPresent2,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return;
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent2, presenceChildren, onExitComplete,]);
+    if (presenceAffectsLayout && isReusedContext) {
+        context = {
+            ...context,
+        };
+    }
+    useMemo2(() => {
+        presenceChildren.forEach((_, key7) => presenceChildren.set(key7, false));
+    }, [isPresent2,]);
+    React2.useEffect(() => {
+        !isPresent2 && !presenceChildren.size && onExitComplete && onExitComplete();
+    }, [isPresent2,]);
+    if (mode === 'popLayout') {
+        children = jsx3(PopChild, {
+            isPresent: isPresent2,
+            anchorX,
+            children,
+        });
+    }
+    return jsx3(PresenceContext.Provider, {
+        value: context,
+        children,
+    });
+};
+function newChildrenMap() {
+    return /* @__PURE__ */ new Map();
+}
+var getChildKey = (child) => child.key || '';
+function onlyElements(children) {
+    const filtered = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+var AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = 'sync', propagate = false, anchorX = 'left', }) => {
+    const [isParentPresent, safeToRemove,] = usePresence(propagate);
+    const presentChildren = useMemo2(() => onlyElements(children), [children,]);
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+    const isInitialRender = useRef3(true);
+    const pendingPresentChildren = useRef3(presentChildren);
+    const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+    const [diffedChildren, setDiffedChildren,] = useState(presentChildren);
+    const [renderedChildren, setRenderedChildren,] = useState(presentChildren);
+    useIsomorphicLayoutEffect(() => {
+        isInitialRender.current = false;
+        pendingPresentChildren.current = presentChildren;
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const key7 = getChildKey(renderedChildren[i]);
+            if (!presentKeys.includes(key7)) {
+                if (exitComplete.get(key7) !== true) {
+                    exitComplete.set(key7, false);
+                }
+            }
+            else {
+                exitComplete.delete(key7);
+            }
+        }
+    }, [renderedChildren, presentKeys.length, presentKeys.join('-'),]);
+    const exitingChildren = [];
+    if (presentChildren !== diffedChildren) {
+        let nextChildren = [...presentChildren,];
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const child = renderedChildren[i];
+            const key7 = getChildKey(child);
+            if (!presentKeys.includes(key7)) {
+                nextChildren.splice(i, 0, child);
+                exitingChildren.push(child);
+            }
+        }
+        if (mode === 'wait' && exitingChildren.length) {
+            nextChildren = exitingChildren;
+        }
+        setRenderedChildren(onlyElements(nextChildren));
+        setDiffedChildren(presentChildren);
+        return null;
+    }
+    if (false) {
+        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.`);
+    }
+    const { forceRender, } = useContext(LayoutGroupContext);
+    return jsx3(Fragment, {
+        children: renderedChildren.map((child) => {
+            const key7 = getChildKey(child);
+            const isPresent2 = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key7);
+            const onExit = () => {
+                if (exitComplete.has(key7)) {
+                    exitComplete.set(key7, true);
+                }
+                else {
+                    return;
+                }
+                let isEveryExitComplete = true;
+                exitComplete.forEach((isExitComplete) => {
+                    if (!isExitComplete)
+                        isEveryExitComplete = false;
+                });
+                if (isEveryExitComplete) {
+                    forceRender == null ? void 0 : forceRender();
+                    setRenderedChildren(pendingPresentChildren.current);
+                    propagate && (safeToRemove == null ? void 0 : safeToRemove());
+                    onExitComplete && onExitComplete();
+                }
+            };
+            return jsx3(PresenceChild, {
+                isPresent: isPresent2,
+                initial: !isInitialRender.current || initial ? void 0 : false,
+                custom,
+                presenceAffectsLayout,
+                mode,
+                onExitComplete: isPresent2 ? void 0 : onExit,
+                anchorX,
+                children: child,
+            }, key7);
+        }),
+    });
+};
+var DeprecatedLayoutGroupContext = createContext(null);
 function useIsMounted() {
     const isMounted = useRef3(false);
     useIsomorphicLayoutEffect(() => {
@@ -4158,9 +4316,9 @@ function MotionConfig({ children, isValidProp, ...config }) {
     });
 }
 var MotionContext = /* @__PURE__ */ createContext({});
-var camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, '$1-$2').toLowerCase();
+var camelToDash2 = (str) => str.replace(/([a-z])([A-Z])/gu, '$1-$2').toLowerCase();
 var optimizedAppearDataId = 'framerAppearId';
-var optimizedAppearDataAttribute = 'data-' + camelToDash(optimizedAppearDataId);
+var optimizedAppearDataAttribute = 'data-' + camelToDash2(optimizedAppearDataId);
 var SwitchLayoutGroupContext = createContext({});
 function isAnimationControls(v) {
     return v !== null && typeof v === 'object' && typeof v.start === 'function';
@@ -4384,7 +4542,6 @@ function addScaleCorrector(correctors) {
         }
     }
 }
-var isMotionValue = (value) => Boolean(value && value.getVelocity);
 var translateAlias2 = {
     x: 'translateX',
     y: 'translateY',
@@ -4618,59 +4775,6 @@ function useHTMLProps(props, visualState) {
     htmlProps.style = style2;
     return htmlProps;
 }
-var lowercaseSVGElements = [
-    'animate',
-    'circle',
-    'defs',
-    'desc',
-    'ellipse',
-    'g',
-    'image',
-    'line',
-    'filter',
-    'marker',
-    'mask',
-    'metadata',
-    'path',
-    'pattern',
-    'polygon',
-    'polyline',
-    'rect',
-    'stop',
-    'switch',
-    'symbol',
-    'svg',
-    'text',
-    'tspan',
-    'use',
-    'view',
-];
-function isSVGComponent(Component33) {
-    if (
-    /**
-     * If it's not a string, it's a custom React component. Currently we only support
-     * HTML custom React components.
-     */
-    typeof Component33 !== 'string' ||
-        /**
-         * If it contains a dash, the element is a custom HTML webcomponent.
-         */
-        Component33.includes('-')) {
-        return false;
-    }
-    else if (
-    /**
-     * If it's in our list of lowercase SVG tags, it's an SVG component
-     */
-    lowercaseSVGElements.indexOf(Component33) > -1 ||
-        /**
-         * If it contains a capital letter, it's an SVG component
-         */
-        /[A-Z]/u.test(Component33)) {
-        return true;
-    }
-    return false;
-}
 var dashKeys = {
     offset: 'stroke-dashoffset',
     array: 'stroke-dasharray',
@@ -4748,6 +4852,59 @@ function useSVGProps(props, visualState, _isStatic, Component33) {
     }
     return visualProps;
 }
+var lowercaseSVGElements = [
+    'animate',
+    'circle',
+    'defs',
+    'desc',
+    'ellipse',
+    'g',
+    'image',
+    'line',
+    'filter',
+    'marker',
+    'mask',
+    'metadata',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'rect',
+    'stop',
+    'switch',
+    'symbol',
+    'svg',
+    'text',
+    'tspan',
+    'use',
+    'view',
+];
+function isSVGComponent(Component33) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component33 !== 'string' ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component33.includes('-')) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component33) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/u.test(Component33)) {
+        return true;
+    }
+    return false;
+}
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component33, props, ref, { latestValues, }, isStatic) => {
         const useVisualProps = isSVGComponent(Component33) ? useSVGProps : useHTMLProps;
@@ -6911,12 +7068,9 @@ function animateSingleValue(value, keyframes2, options) {
     motionValue$1.start(animateMotionValue('', motionValue$1, keyframes2, options));
     return motionValue$1.animation;
 }
-function isSVGElement(element) {
-    return element instanceof SVGElement && element.tagName !== 'svg';
-}
 var borders = ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',];
 var numBorders = borders.length;
-var asNumber = (value) => typeof value === 'string' ? parseFloat(value) : value;
+var asNumber2 = (value) => typeof value === 'string' ? parseFloat(value) : value;
 var isPx = (value) => typeof value === 'number' || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
     if (shouldCrossfadeOpacity) {
@@ -6936,7 +7090,7 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
         leadRadius || (leadRadius = 0);
         const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);
         if (canMix) {
-            target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
+            target[borderLabel] = Math.max(mixNumber(asNumber2(followRadius), asNumber2(leadRadius), progress2), 0);
             if (percent.test(leadRadius) || percent.test(followRadius)) {
                 target[borderLabel] += '%';
             }
@@ -7277,7 +7431,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         mount(instance) {
             if (this.instance)
                 return;
-            this.isSVG = isSVGElement(instance);
+            this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
             this.instance = instance;
             const { layoutId, layout: layout2, visualElement, } = this.options;
             if (visualElement && !visualElement.current) {
@@ -7321,7 +7475,6 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                             this.resumingFrom = this.resumeFrom;
                             this.resumingFrom.resumingFrom = void 0;
                         }
-                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         const animationOptions = {
                             ...getValueTransition(layoutTransition, 'layout'),
                             onPlay: onLayoutAnimationStart,
@@ -7332,6 +7485,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                             animationOptions.type = false;
                         }
                         this.startAnimation(animationOptions);
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                     }
                     else {
                         if (!hasLayoutChanged) {
@@ -7857,8 +8011,8 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         startAnimation(options) {
             var _a, _b, _c;
             this.notifyListeners('animationStart');
-            (_a = this.currentAnimation) == null ? void 0 : _a.stop(false);
-            (_c = (_b = this.resumingFrom) == null ? void 0 : _b.currentAnimation) == null ? void 0 : _c.stop(false);
+            (_a = this.currentAnimation) == null ? void 0 : _a.stop();
+            (_c = (_b = this.resumingFrom) == null ? void 0 : _b.currentAnimation) == null ? void 0 : _c.stop();
             if (this.pendingAnimation) {
                 cancelFrame(this.pendingAnimation);
                 this.pendingAnimation = void 0;
@@ -7902,7 +8056,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         finishAnimation() {
             if (this.currentAnimation) {
                 this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-                this.currentAnimation.stop(false);
+                this.currentAnimation.stop();
             }
             this.completeAnimation();
         }
@@ -8092,7 +8246,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         resetTree() {
             this.root.nodes.forEach((node) => {
                 var _a;
-                return (_a = node.currentAnimation) == null ? void 0 : _a.stop(false);
+                return (_a = node.currentAnimation) == null ? void 0 : _a.stop();
             });
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
@@ -8590,7 +8744,7 @@ var camelCaseAttributes = /* @__PURE__ */ new Set([
 function renderSVG(element, renderState, _styleProp, projection) {
     renderHTML(element, renderState, void 0, projection);
     for (const key7 in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key7) ? camelToDash(key7) : key7, renderState.attrs[key7]);
+        element.setAttribute(!camelCaseAttributes.has(key7) ? camelToDash2(key7) : key7, renderState.attrs[key7]);
     }
 }
 var SVGVisualElement = class extends DOMVisualElement {
@@ -8608,7 +8762,7 @@ var SVGVisualElement = class extends DOMVisualElement {
             const defaultType = getDefaultValueType(key7);
             return defaultType ? defaultType.default || 0 : 0;
         }
-        key7 = !camelCaseAttributes.has(key7) ? camelToDash(key7) : key7;
+        key7 = !camelCaseAttributes.has(key7) ? camelToDash2(key7) : key7;
         return instance.getAttribute(key7);
     }
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
@@ -8667,7 +8821,7 @@ function getElementSize(target, borderBoxSize) {
             height: blockSize,
         };
     }
-    else if (target instanceof SVGElement && 'getBBox' in target) {
+    else if (isSVGElement(target) && 'getBBox' in target) {
         return target.getBBox();
     }
     else {
@@ -8803,7 +8957,7 @@ function calcInset(element, container) {
     };
     let current2 = element;
     while (current2 && current2 !== container) {
-        if (current2 instanceof HTMLElement) {
+        if (isHTMLElement(current2)) {
             inset2.x += current2.offsetLeft;
             inset2.y += current2.offsetTop;
             current2 = current2.offsetParent;
@@ -8961,8 +9115,8 @@ function measure(container, target = container, info) {
 }
 function createOnScrollHandler(element, onScroll, info, options = {}) {
     return {
-        measure: () => measure(element, options.target, info),
-        update: (time2) => {
+        measure: (time2) => {
+            measure(element, options.target, info);
             updateScrollInfo(element, info, time2);
             if (options.offset || options.target) {
                 resolveOffsets(element, info, options);
@@ -8988,23 +9142,17 @@ function scrollInfo(onScroll, { container = document.scrollingElement, ...option
     containerHandlers.add(containerHandler);
     if (!scrollListeners.has(container)) {
         const measureAll = () => {
-            for (const handler of containerHandlers)
-                handler.measure();
-        };
-        const updateAll = () => {
             for (const handler of containerHandlers) {
-                handler.update(frameData.timestamp);
+                handler.measure(frameData.timestamp);
             }
+            frame.preUpdate(notifyAll2);
         };
         const notifyAll2 = () => {
-            for (const handler of containerHandlers)
+            for (const handler of containerHandlers) {
                 handler.notify();
+            }
         };
-        const listener2 = () => {
-            frame.read(measureAll);
-            frame.read(updateAll);
-            frame.preUpdate(notifyAll2);
-        };
+        const listener2 = () => frame.read(measureAll);
         scrollListeners.set(container, listener2);
         const target = getEventTarget(container);
         window.addEventListener('resize', listener2, {
@@ -9190,74 +9338,6 @@ function useMotionTemplate(fragments, ...values) {
     }
     return useCombineMotionValues(values.filter(isMotionValue), buildValue);
 }
-function useSpring(source, config = {}) {
-    const { isStatic, } = useContext(MotionConfigContext);
-    const activeSpringAnimation = useRef3(null);
-    const initialValue = useConstant(() => isMotionValue(source) ? source.get() : source);
-    const unit = useConstant(() => typeof initialValue === 'string' ? initialValue.replace(/[\d.-]/g, '') : void 0);
-    const value = useMotionValue(initialValue);
-    const latestValue = useRef3(initialValue);
-    const latestSetter = useRef3(noop);
-    const startAnimation2 = () => {
-        stopAnimation2();
-        activeSpringAnimation.current = new JSAnimation({
-            keyframes: [asNumber2(value.get()), asNumber2(latestValue.current),],
-            velocity: value.getVelocity(),
-            type: 'spring',
-            restDelta: 1e-3,
-            restSpeed: 0.01,
-            ...config,
-            onUpdate: latestSetter.current,
-        });
-    };
-    const stopAnimation2 = () => {
-        if (activeSpringAnimation.current) {
-            activeSpringAnimation.current.stop();
-        }
-    };
-    useInsertionEffect(() => {
-        return value.attach((v, set) => {
-            if (isStatic)
-                return set(v);
-            latestValue.current = v;
-            latestSetter.current = (latest) => set(parseValue(latest, unit));
-            frame.postRender(startAnimation2);
-            return value.get();
-        }, stopAnimation2);
-    }, [JSON.stringify(config),]);
-    useIsomorphicLayoutEffect(() => {
-        if (isMotionValue(source)) {
-            return source.on('change', (v) => value.set(parseValue(v, unit)));
-        }
-    }, [value, unit,]);
-    return value;
-}
-function parseValue(v, unit) {
-    return unit ? v + unit : v;
-}
-function asNumber2(v) {
-    return typeof v === 'number' ? v : parseFloat(v);
-}
-function useAnimationFrame(callback) {
-    const initialTimestamp = useRef3(0);
-    const { isStatic, } = useContext(MotionConfigContext);
-    useEffect(() => {
-        if (isStatic)
-            return;
-        const provideTimeSinceStart = ({ timestamp, delta, }) => {
-            if (!initialTimestamp.current)
-                initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current, delta);
-        };
-        frame.update(provideTimeSinceStart, true);
-        return () => cancelFrame(provideTimeSinceStart);
-    }, [callback,]);
-}
-function useTime() {
-    const time2 = useMotionValue(0);
-    useAnimationFrame((t) => time2.set(t));
-    return time2;
-}
 function useComputed(compute) {
     collectMotionValues.current = [];
     compute();
@@ -9285,6 +9365,38 @@ function useListTransform(values, transformer) {
         return transformer(latest);
     });
 }
+function useSpring(source, options = {}) {
+    const { isStatic, } = useContext(MotionConfigContext);
+    const getFromSource = () => isMotionValue(source) ? source.get() : source;
+    if (isStatic) {
+        return useTransform(getFromSource);
+    }
+    const value = useMotionValue(getFromSource());
+    useInsertionEffect(() => {
+        return attachSpring(value, source, options);
+    }, [value, JSON.stringify(options),]);
+    return value;
+}
+function useAnimationFrame(callback) {
+    const initialTimestamp = useRef3(0);
+    const { isStatic, } = useContext(MotionConfigContext);
+    useEffect(() => {
+        if (isStatic)
+            return;
+        const provideTimeSinceStart = ({ timestamp, delta, }) => {
+            if (!initialTimestamp.current)
+                initialTimestamp.current = timestamp;
+            callback(timestamp - initialTimestamp.current, delta);
+        };
+        frame.update(provideTimeSinceStart, true);
+        return () => cancelFrame(provideTimeSinceStart);
+    }, [callback,]);
+}
+function useTime() {
+    const time2 = useMotionValue(0);
+    useAnimationFrame((t) => time2.set(t));
+    return time2;
+}
 function useVelocity(value) {
     const velocity = useMotionValue(value.getVelocity());
     const updateVelocity = () => {
@@ -9686,7 +9798,7 @@ function createDOMVisualElement(element) {
             latestValues: {},
         },
     };
-    const node = isSVGElement(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+    const node = isSVGElement(element) && !isSVGSVGElement(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
     node.mount(element);
     visualElementStore.set(element, node);
 }
@@ -10390,7 +10502,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.7ISJZ3TZ.mjs
+// /:https://app.framerstatic.com/framer.C2MZBAEL.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -10398,6 +10510,7 @@ import { Suspense as Suspense2, } from 'react';
 import { memo as memo2, } from 'react';
 import ReactDOM from 'react-dom';
 import { createRef, } from 'react';
+import { useTransition, } from 'react';
 import { cloneElement as cloneElement32, } from 'react';
 var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = __commonJS({
@@ -11595,10 +11708,10 @@ function useCurrentRouteId() {
 }
 function useOnRouteChange(cb) {
     const currentRoute = useCurrentRoute();
-    const [lastRoute, setLastRoute,] = React4.useState(currentRoute);
-    if (isEqual(lastRoute, currentRoute) || !currentRoute)
+    const lastRoute = React4.useRef(currentRoute);
+    if (isEqual(lastRoute.current, currentRoute) || !currentRoute)
         return;
-    setLastRoute(currentRoute);
+    lastRoute.current = currentRoute;
     cb(currentRoute);
 }
 function useRoute(routeId) {
@@ -11671,7 +11784,7 @@ function isNumber2(value) {
 function isArray(value) {
     return Array.isArray(value);
 }
-function isObject(value) {
+function isObject2(value) {
     return value !== null && typeof value === 'object' && !isArray(value);
 }
 function isUndefined(value) {
@@ -11687,7 +11800,7 @@ function isValidDate(value) {
     return value instanceof Date && !Number.isNaN(value.getTime());
 }
 function isGenerator2(value) {
-    return isObject(value) && isFunction(value.return);
+    return isObject2(value) && isFunction(value.return);
 }
 var noop2 = () => { };
 var isWindow = typeof window !== 'undefined';
@@ -11793,7 +11906,9 @@ function interactionResponse(options) {
         setTimeout(resolve, 100);
         frame.read(() => {
             void schedulerYield(options).then(resolve);
-        });
+        }, false, 
+        // In some cases, interactionResponse might be called in a rAF. This means, we should right away call `schedulerYield`, as the next paint follows immediately.
+        true);
     });
 }
 function schedulerYield(options) {
@@ -12698,7 +12813,7 @@ async function pushRouteState(routeId, route, { currentRoutePath, currentPathVar
 }
 function isHistoryState(data2) {
     const routeIdKey = 'routeId';
-    return isObject(data2) && isString(data2[routeIdKey]);
+    return isObject2(data2) && isString(data2[routeIdKey]);
 }
 function replaceHistoryState(data2, url, ignoreReplaceStateWrapper = false) {
     performance.mark('framer-history-replace');
@@ -12778,7 +12893,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
         if (((_a = window.navigation) == null ? void 0 : _a.transition) &&
             ((_c = (_b = window.navigation) == null ? void 0 : _b.transition) == null ? void 0 : _c.navigationType) !== 'traverse')
             return;
-        if (!isObject(state))
+        if (!isObject2(state))
             return;
         const { routeId, hash: hash2, pathVariables, localeId, } = state;
         if (!isString(routeId))
@@ -12789,7 +12904,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
         const stopMonitoringINPRelatedInputs = monitorINPRelatedInputs();
         void nextRender.promise.finally(stopMonitoringINPRelatedInputs);
         const changeRoute = () => {
-            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject(pathVariables) ? pathVariables : void 0, true, nextRender, false);
+            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false);
         };
         const viewTransition = await startViewTransition2(currentRouteId.current, routeId, changeRoute);
         const navigationTransition = (_d = window.navigation) == null ? void 0 : _d.transition;
@@ -12836,7 +12951,7 @@ function getHashForRoute(hash2, route, hashVariables) {
     if (!resolvedHash)
         return void 0;
     const variables = Object.assign({}, route == null ? void 0 : route.elements, hashVariables);
-    return resolvedHash.replace(pathVariablesRegExp, (m2, p1) => String(variables[p1] ?? m2));
+    return resolvedHash.replace(pathVariablesRegExp, (m2, p1) => variables[p1] ?? m2);
 }
 function getPathForRoute(route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, hashVariables, relative: relative2 = true, preserveQueryParams, onlyHash = false, siteCanonicalURL, }) {
     const resolvedHash = getHashForRoute(hash2, route, hashVariables);
@@ -14234,7 +14349,7 @@ var Interpolation = {
 var NumberInterpolation = {
     interpolate(from, to) {
         [from, to,] = Interpolation.handleUndefined(from, to);
-        const a1 = +from;
+        const a1 = from;
         const b1 = to - a1;
         return (progress2) => {
             const value = a1 + b1 * progress2;
@@ -14910,7 +15025,7 @@ function rgbToHsv(r, g, b) {
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     const d = max - min;
-    let h;
+    let h = 0;
     const s = max === 0 ? 0 : d / max;
     const v = max;
     if (max === min) {
@@ -15473,7 +15588,7 @@ var Color = /* @__PURE__ */ (() => {
         return false;
     };
     Color2.isColorObject = (color2) => {
-        return isObject(color2) && typeof color2.r === 'number' && typeof color2.g === 'number' && typeof color2.b === 'number' &&
+        return isObject2(color2) && typeof color2.r === 'number' && typeof color2.g === 'number' && typeof color2.b === 'number' &&
             typeof color2.h === 'number' && typeof color2.s === 'number' && typeof color2.l === 'number' && typeof color2.a === 'number' &&
             typeof color2.roundA === 'number' && typeof color2.format === 'string';
     };
@@ -19967,7 +20082,7 @@ function injectComponentCSSRules() {
     }
 }
 function isReactComponent(component) {
-    return isObject(component) || isFunction(component);
+    return isObject2(component) || isFunction(component);
 }
 var optionalKey = 'optional';
 function controlIsOptional(control) {
@@ -19998,14 +20113,14 @@ function getControlDefaultValue(control) {
             case 'number':
                 return isNumber2(control.defaultValue) ? control.defaultValue : void 0;
             case 'transition':
-                return isObject(control.defaultValue) ? control.defaultValue : void 0;
+                return isObject2(control.defaultValue) ? control.defaultValue : void 0;
             case 'border':
-                return isObject(control.defaultValue) ? control.defaultValue : void 0;
+                return isObject2(control.defaultValue) ? control.defaultValue : void 0;
             case 'font':
-                return isObject(control.defaultValue) ? control.defaultValue : void 0;
+                return isObject2(control.defaultValue) ? control.defaultValue : void 0;
             case 'object': {
-                const value = isObject(control.defaultValue) ? control.defaultValue : {};
-                if (isObject(control.controls)) {
+                const value = isObject2(control.defaultValue) ? control.defaultValue : {};
+                if (isObject2(control.controls)) {
                     applyControlDefaultsToDefaultProps(value, control.controls);
                 }
                 return value;
@@ -20054,7 +20169,7 @@ function applyControlDefaultsToDefaultProps(defaultProps, controls) {
     }
 }
 function getDefaultProps(component) {
-    if (isObject(component.defaultProps)) {
+    if (isObject2(component.defaultProps)) {
         return component.defaultProps;
     }
     const defaultProps = {};
@@ -22356,7 +22471,7 @@ function unwrapInlinedDisplayContents(element) {
 function useMeasureLayout(props, ref, getChildren = () => [], options = {}) {
     const { id: id3, visible, _needsMeasure, } = props;
     const { skipHook = false, } = options;
-    const inCodeComponent = Boolean(useContext(ComponentContainerContext));
+    const inCodeComponent = useContext(ComponentContainerContext);
     const onCanvas = RenderTarget.current() === RenderTarget.canvas;
     useIsomorphicLayoutEffect2(() => {
         if (!onCanvas || inCodeComponent || skipHook) {
@@ -22656,7 +22771,7 @@ var LinearGradient = {
      * @param value -
      */
     isLinearGradient: (value) => {
-        return isObject(value) && linearGradientKeys.every((key7) => key7 in value) &&
+        return isObject2(value) && linearGradientKeys.every((key7) => key7 in value) &&
             (isSimpleGradient(value) || isMultiStopGradient(value));
     },
     /** @internal */
@@ -22678,7 +22793,7 @@ var RadialGradient = {
      * @public
      */
     isRadialGradient: (value) => {
-        return isObject(value) && radialGradientKeys.every((key7) => key7 in value) &&
+        return isObject2(value) && radialGradientKeys.every((key7) => key7 in value) &&
             (isSimpleGradient(value) || isMultiStopGradient(value));
     },
     /** @internal */
@@ -22907,7 +23022,7 @@ function useStyleAndRect(props) {
     React4.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
-    const inCodeComponent = Boolean(useContext(ComponentContainerContext));
+    const inCodeComponent = useContext(ComponentContainerContext);
     const { style: style2, _initialStyle, __fromCanvasComponent, size, } = props;
     const unwrappedProps = unwrapFrameProps(props);
     const constraintsRect = useConstraints(unwrappedProps);
@@ -23071,7 +23186,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forw
     }
     useMeasureLayout(props, ref);
     const backgroundImage = backgroundImageFromProps(props);
-    const inCodeComponent = Boolean(useContext(ComponentContainerContext));
+    const inCodeComponent = useContext(ComponentContainerContext);
     const parentSize = resolveParentSize(propsWithOverrides, unwrappedProps, rect, inCodeComponent);
     const wrappedContent = useProvideParentSize(
     /* @__PURE__ */ jsxs(Fragment, {
@@ -23267,7 +23382,7 @@ var SharedLayoutRoot = class extends Component2 {
         var _a;
         if (!this.scheduledPromotion || !this.lead || !this.follow)
             return null;
-        const needsReset = !!((_a = this.lead) == null ? void 0 : _a.layoutMaybeMutated) && !this.shouldAnimate;
+        const needsReset = ((_a = this.lead) == null ? void 0 : _a.layoutMaybeMutated) && !this.shouldAnimate;
         this.lead.projectionNodes.forEach((projectionNode) => {
             var _a2;
             projectionNode == null ? void 0 : projectionNode.promote({
@@ -23342,7 +23457,7 @@ function setRef(ref, value) {
     }
 }
 function isMutableRef(ref) {
-    return isObject(ref) && 'current' in ref;
+    return isObject2(ref) && 'current' in ref;
 }
 function refHasValue(ref) {
     return isMutableRef(ref) && ref.current !== null;
@@ -23463,6 +23578,21 @@ var SharedIntersectionObserver = class {
     }
 };
 var SharedIntersectionObserverContext = /* @__PURE__ */ createContext(/* @__PURE__ */ new Map());
+function observeElement(observers2, key7, element, root, callback, rootMargin, threshold) {
+    let observer2 = observers2.get(key7);
+    if (!observer2 || observer2.root !== (root == null ? void 0 : root.current)) {
+        observer2 = new SharedIntersectionObserver({
+            root: root == null ? void 0 : root.current,
+            rootMargin,
+            threshold,
+        });
+        observers2.set(key7, observer2);
+    }
+    observer2.observeElementWithCallback(element, callback);
+    return () => {
+        observer2.unobserve(element);
+    };
+}
 function _useSharedIntersectionObserver(ref, callback, options) {
     const key7 = useConstant2(() => `${options.rootMargin}`);
     const observers2 = useContext(SharedIntersectionObserverContext);
@@ -23472,19 +23602,7 @@ function _useSharedIntersectionObserver(ref, callback, options) {
             return;
         if (element === null)
             return;
-        let observer2 = observers2.get(key7);
-        if (!observer2 || observer2.root !== (root == null ? void 0 : root.current)) {
-            observer2 = new SharedIntersectionObserver({
-                root: root == null ? void 0 : root.current,
-                rootMargin,
-                threshold,
-            });
-            observers2.set(key7, observer2);
-        }
-        observer2.observeElementWithCallback(element, callback);
-        return () => {
-            observer2 == null ? void 0 : observer2.unobserve(element);
-        };
+        return observeElement(observers2, key7, element, root, callback, rootMargin, threshold);
     }, [enabled, callback, root, rootMargin, threshold,]);
 }
 var useSharedIntersectionObserver = typeof IntersectionObserver === 'undefined' ? noop2 : _useSharedIntersectionObserver;
@@ -23559,7 +23677,7 @@ var LayoutTree = class extends Component2 {
         this.isExiting = isExiting;
         if (isLead === void 0)
             return true;
-        const hasBecomeLead = !this.props.isLead && !!isLead;
+        const hasBecomeLead = !this.props.isLead && isLead;
         const hasExitBeenCancelled = this.props.isExiting && !isExiting;
         const shouldPromote = hasBecomeLead || hasExitBeenCancelled;
         const shouldDemote = !!this.props.isLead && !isLead;
@@ -24943,7 +25061,7 @@ function containerContent(item) {
         const position = (_a = item == null ? void 0 : item.transition) == null ? void 0 : _a.position;
         const shouldStretchWidth = !position || position.left !== void 0 && position.right !== void 0;
         const shouldStretchHeight = !position || position.top !== void 0 && position.bottom !== void 0;
-        const canStretchStyle = 'style' in child.props ? isObject(child.props.style) : true;
+        const canStretchStyle = 'style' in child.props ? isObject2(child.props.style) : true;
         if (shouldStretchWidth) {
             const canStretchWidth = 'width' in child.props;
             if (canStretchWidth)
@@ -26106,7 +26224,7 @@ function hasRadius(props) {
 }
 function getRadiusValue(value) {
     let num = Number(value);
-    if (typeof value === 'string' && Number.isNaN(Number(num))) {
+    if (typeof value === 'string' && Number.isNaN(num)) {
         return value;
     }
     else if (isAnimatable2(value)) {
@@ -27225,7 +27343,7 @@ function makePaddingString({ top, left, bottom, right, }) {
 var Stack = /* @__PURE__ */ (() => {
     const StackInner = React4.forwardRef(function StackInner2(stackProps, forwardedRef) {
         const { as = 'div', direction = 'vertical', distribution = 'start', alignment = 'center', gap = 10, wrap: wrap2 = false, useFlexboxGap: externalUseFlexboxGap = true, children, style: styleProp, className: className2, willChangeTransform, __fromCodeComponentNode, parentSize, __contentWrapperStyle, ...containerProps } = stackProps;
-        const useFlexboxGap = Boolean(externalUseFlexboxGap || wrap2);
+        const useFlexboxGap = externalUseFlexboxGap || wrap2;
         const stackRef = React4.useRef(null);
         const flexDirection = toFlexDirection(direction);
         const isReverse = isReverseDirection(flexDirection);
@@ -27635,7 +27753,7 @@ var Page = /* @__PURE__ */ React4.forwardRef(function Page2(props, forwardedRef)
     }
     const updateOnResize = React4.useCallback(() => {
         if (!hasFixedSize)
-            setForceUpdateCount((v) => v + 1);
+            startTransition2(() => setForceUpdateCount((v) => v + 1));
     }, [hasFixedSize,]);
     React4.useEffect(() => {
         if (RenderTarget.current() !== RenderTarget.preview)
@@ -28839,7 +28957,7 @@ var useUpdateChildSize = ({ dragDirection, children, fromCanvasComponent, }) =>
                 : updatedSize;
             return React4.cloneElement(child, update);
         });
-    }, [dragDirection, children,]);
+    }, [dragDirection, children, fromCanvasComponent,]);
 };
 var numberFromOptionalMotionValue = (value) => {
     return typeof value === 'number' ? value : value.get();
@@ -29120,7 +29238,6 @@ var EmulatedScroll = /* @__PURE__ */ React4.forwardRef(function EmulatedScroll2(
             preserve3d: containerProps.preserve3d,
             children: [
                 /* @__PURE__ */ jsx3(EmptyState, {
-                    children,
                     size: {
                         width: isFiniteNumber(containerProps.width) ? containerProps.width : '100%',
                         height: isFiniteNumber(containerProps.height) ? containerProps.height : '100%',
@@ -29128,6 +29245,7 @@ var EmulatedScroll = /* @__PURE__ */ React4.forwardRef(function EmulatedScroll2(
                     insideUserCodeComponent: !containerProps.__fromCodeComponentNode,
                     title: 'Scroll',
                     description: 'Click and drag the connector to any frame on the canvas \u2192',
+                    children,
                 }),
                 useUpdateChildSize({
                     dragDirection: direction,
@@ -30259,8 +30377,8 @@ var AnimationCollector = class {
         const initial = props.__framer__presenceInitial ?? props.initial;
         const animate3 = props.__framer__presenceAnimate ?? props.animate;
         const config = {
-            initial: isObject(initial) ? initial : void 0,
-            animate: isObject(animate3) ? animate3 : void 0,
+            initial: isObject2(initial) ? initial : void 0,
+            animate: isObject2(animate3) ? animate3 : void 0,
             transformTemplate: isString(transformTemplate2) ? transformTemplate2 : void 0,
         };
         for (const variantId of variants)
@@ -30420,6 +30538,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
     const values = useConstant2(makeFXValues);
     const mirrorStateRef = useRef3(false);
     const delay2 = useDelay();
+    const animationPromiseRef = useRef3(null);
     const animateValues = useCallback(async () => {
         if (!loop)
             return;
@@ -30428,10 +30547,10 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
         const to = mirror ? defaultFXValues : loop;
         const from = mirror ? loop : defaultFXValues;
         mirrorStateRef.current = !mirrorStateRef.current;
-        return Promise.all(effectValuesKeys.map((key7) => {
+        animationPromiseRef.current = Promise.all(effectValuesKeys.map((key7) => {
             if (shouldReduceMotion && key7 !== 'opacity')
                 return;
-            values[key7].set(from[key7] ?? defaultFXValues[key7]);
+            values[key7].jump(from[key7] ?? defaultFXValues[key7]);
             return new Promise((resolve) => {
                 const opts = {
                     ...transition,
@@ -30443,6 +30562,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
                 }
             });
         }));
+        return animationPromiseRef.current;
     }, [loop, loopRepeatType, loopTransition, shouldReduceMotion,]);
     const [isRunning, setIsRunning,] = useState(false);
     const shouldRunRef = useRef3(false);
@@ -30451,7 +30571,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
             return;
         await animateValues();
         await delay2(loopRepeatDelay ?? 0);
-        await animateLoop();
+        void animateLoop();
     }, [animateValues, delay2, loopEffectEnabled, loopRepeatDelay,]);
     const start2 = useCallback(() => {
         if (shouldRunRef.current)
@@ -30503,15 +30623,26 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
     }, [start2, stop, loopPauseOffscreen, hasLoop,]);
     useEffect(() => {
         return () => stop();
-    }, []);
+    }, [stop,]);
+    const isIntersectingRef = useRef3(false);
+    const stopAfterAnimationEnds = useCallback(async () => {
+        if (!animationPromiseRef.current)
+            return;
+        await animationPromiseRef.current;
+        if (isIntersectingRef.current)
+            return;
+        stop();
+    }, [stop,]);
     const startAndStopBasedOnIntersection = useCallback((entry) => {
         if (entry.isIntersecting) {
+            isIntersectingRef.current = true;
             start2();
         }
         else {
-            stop();
+            isIntersectingRef.current = false;
+            void stopAfterAnimationEnds();
         }
-    }, [start2, stop,]);
+    }, [start2, stopAfterAnimationEnds,]);
     useSharedIntersectionObserver(ref, startAndStopBasedOnIntersection, {
         enabled: hasLoop && loopPauseOffscreen,
     });
@@ -30573,7 +30704,7 @@ function useParallax(options, ref, visibilityStyle) {
     };
 }
 function getTransition(value) {
-    if (isString(value) || !isObject(value))
+    if (isString(value) || !isObject2(value))
         return void 0;
     return value == null ? void 0 : value.transition;
 }
@@ -30585,7 +30716,7 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, i
                 return resolve();
             const motionValue2 = effect.values[key7];
             motionValue2.stop();
-            let value = !isObject(target) ? defaultFXValues[key7] : (target == null ? void 0 : target[key7]) ?? defaultFXValues[key7];
+            let value = !isObject2(target) ? defaultFXValues[key7] : (target == null ? void 0 : target[key7]) ?? defaultFXValues[key7];
             if (isMotionValue(value))
                 value = value.get();
             if (!isNumber2(value))
@@ -30628,14 +30759,14 @@ function usePresenceAnimation({ initial: motionInitial, animate: motionAnimate,
     });
     const effect = useConstant2(() => {
         const base = initial ?? style2;
-        if (!isObject(base)) {
+        if (!isObject2(base)) {
             return {
                 values: makeFXValues(),
             };
         }
         const defaults = {};
         for (const key7 in base) {
-            const value = isObject(base) ? base[key7] : void 0;
+            const value = isObject2(base) ? base[key7] : void 0;
             if (!isNumber2(value))
                 continue;
             defaults[key7] = value;
@@ -31181,10 +31312,10 @@ var add2 = (values) => values.reduce((sum, value) => sum += value, 0);
 var multiply = (values) => values.reduce((sum, value) => sum = sum * value, 1);
 var reactRefObjectKey = 'current';
 function isReactRefObject(value) {
-    return isObject(value) && reactRefObjectKey in value;
+    return isObject2(value) && reactRefObjectKey in value;
 }
 function addMotionValueStyle(style2, values) {
-    if (!style2 || !isObject(style2))
+    if (!style2 || !isObject2(style2))
         return values;
     for (const key7 in style2) {
         const value = style2[key7];
@@ -31372,7 +31503,7 @@ var SynchronousSuspenseErrorBoundary = class extends Component2 {
         if (!isSuspense426Error(error))
             return;
         const componentStack = errorInfo == null ? void 0 : errorInfo.componentStack;
-        console.error('Caught an error in SynchronousSuspenseErrorBoundary:\n\n', error, '\n\nComponent stack:\n', componentStack, '\n\nThis error indicates a state update wasn\u2019t wrapped with startTransition. Some of the UI might flash as a result. If you are the author of this website, check recently added custom code, and if the issue persists, report it to the Framer team via https://www.framer.community/.');
+        console.error('Caught an error in SynchronousSuspenseErrorBoundary:\n\n', error, '\n\nComponent stack:\n', componentStack, '\n\nThis error indicates a state update wasn\u2019t wrapped with startTransition. Some of the UI might flash as a result. If you are the author of this website, check recently added custom code, and if the issue persists, report it to the Framer team via https://www.framer.com/contact/.');
         const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : void 0;
         sendTrackingEvent('published_site_load_recoverable_error', {
             message: String(error),
@@ -31446,7 +31577,7 @@ function logError(...args) {
 function shouldEnableCodeBoundaries() {
     return RenderTarget.current() !== RenderTarget.canvas;
 }
-function CodeComponentBoundary({ errorMessage, fallback, children, }) {
+function CodeComponentBoundary({ getErrorMessage, fallback, children, }) {
     if (!shouldEnableCodeBoundaries()) {
         return children;
     }
@@ -31454,7 +31585,7 @@ function CodeComponentBoundary({ errorMessage, fallback, children, }) {
         fallback,
         children: /* @__PURE__ */ jsx3(ClientSideErrorBoundary, {
             fallback,
-            errorMessage,
+            getErrorMessage,
             children,
         }),
     });
@@ -31472,7 +31603,7 @@ var ClientSideErrorBoundary = class extends Component2 {
         };
     }
     componentDidCatch(error, errorInfo) {
-        logError(this.props.errorMessage, errorInfo == null ? void 0 : errorInfo.componentStack);
+        logError(this.props.getErrorMessage(), errorInfo == null ? void 0 : errorInfo.componentStack);
         collectErrorToAnalytics(error, errorInfo);
     }
     render() {
@@ -31608,7 +31739,7 @@ function useMaybeWrapComponentWithCodeBoundary(children, scopeId, nodeId, isAuth
     const shouldWrapWithBoundary = shouldWrapComponentWithBoundary(scopeId, nearestExternalComponent == null ? void 0 : nearestExternalComponent.scopeId, nearestExternalComponent == null ? void 0 : nearestExternalComponent.level, isAuthoredByUser ?? false, isModuleExternal ?? false, inComponentSlot ?? false);
     if (shouldWrapWithBoundary) {
         children = /* @__PURE__ */ jsx3(CodeComponentBoundary, {
-            errorMessage: getErrorMessageForComponent(scopeId, nodeId),
+            getErrorMessage: getErrorMessageForComponent.bind(null, scopeId, nodeId),
             fallback: null,
             children,
         });
@@ -32441,7 +32572,7 @@ function useDynamicMotionOrigin(initialPlacement, alignment) {
 function childrenWithOrigin(child, { x, y, }) {
     if (!child || !isReactChild(child) || !isReactElement(child))
         return null;
-    if (!isObject(child.props.style) && !isUndefined(child.props.style))
+    if (!isObject2(child.props.style) && !isUndefined(child.props.style))
         return null;
     const style2 = {
         ...child.props.style,
@@ -32590,6 +32721,14 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         ],
     }), getPortalContainer(portalSelector, inComponent));
 }
+var Instance = /* @__PURE__ */ React4.forwardRef(function Instance2({ Component: Component17, ...props }, ref) {
+    return Component17
+        ? /* @__PURE__ */ jsx3(Component17, {
+            ...props,
+            ref,
+        })
+        : null;
+});
 var GracefullyDegradingErrorBoundary = class extends Component2 {
     constructor() {
         super(...arguments);
@@ -32598,7 +32737,7 @@ var GracefullyDegradingErrorBoundary = class extends Component2 {
         });
         __publicField(this, 'message', 'Made UI non-interactive due to an error');
         __publicField(this, 'messageFatal', 'Fatal error');
-        __publicField(this, 'messageReport', 'If you are the author of this website, please report this issue to the Framer team via https://www.framer.community/');
+        __publicField(this, 'messageReport', 'If you are the author of this website, please report this issue to the Framer team via https://www.framer.com/contact/');
     }
     static getDerivedStateFromError(error) {
         return {
@@ -32614,7 +32753,7 @@ var GracefullyDegradingErrorBoundary = class extends Component2 {
 
 `, error);
         const sampleRate = Math.random();
-        if (sampleRate > 0.25)
+        if (sampleRate > 0.5)
             return;
         const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
         sendTrackingEvent('published_site_load_error', {
@@ -33949,7 +34088,7 @@ async function submitForm(action, data2, projectHash) {
     }
 }
 function responseHasError(response) {
-    return typeof response === 'object' && response !== null && 'error' in response && isObject(response.error) &&
+    return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error) &&
         'message' in response.error && typeof response.error.message === 'string';
 }
 function isSamePage(a, b) {
@@ -34137,7 +34276,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 if (isString(localeOrLocaleId)) {
                     localeId = localeOrLocaleId;
                 }
-                else if (isObject(localeOrLocaleId)) {
+                else if (isObject2(localeOrLocaleId)) {
                     localeId = localeOrLocaleId.id;
                 }
                 const defaultLocale = locales.find(({ id: id3, }) => id3 === defaultLocaleId);
@@ -34161,7 +34300,6 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                     });
                     if (!localeResult)
                         return;
-                    const currentPathVariables2 = currentPathVariablesRef.current;
                     const currentStatePaginationInfo = isHistoryState(window.history.state) ? window.history.state.paginationInfo : void 0;
                     const currentPath = localeResult.path;
                     currentPathVariablesRef.current = localeResult.pathVariables;
@@ -34171,7 +34309,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                             return;
                         return pushHistoryState({
                             routeId: currentRouteId2,
-                            pathVariables: currentPathVariables2,
+                            pathVariables: localeResult.pathVariables,
                             localeId: nextLocale.id,
                             paginationInfo: currentStatePaginationInfo,
                         }, currentPath, ignorePushStateWrapper);
@@ -34851,14 +34989,13 @@ _subscribers2 = /* @__PURE__ */ new WeakMap();
 _results = /* @__PURE__ */ new WeakMap();
 _SSRResults = /* @__PURE__ */ new WeakMap();
 _onlyPrefetched = /* @__PURE__ */ new WeakMap();
-function useFetchRequests(requests, disabled) {
+function useFetchRequestsForChildren(requests, disabled, children) {
     const fetchClient = React2.useContext(FetchClientContext);
     if (!fetchClient) {
         throw new Error('useFetchRequest must be used within a FetchClientProvider');
     }
     const isRestoringCache = React2.useContext(IsRestoringCacheContext);
     const [observer2,] = React2.useState(() => new RequestsObserver(fetchClient, requests));
-    const [result, setResult,] = React2.useState(() => observer2.getServerResults());
     React2.useLayoutEffect(() => {
         if (disabled)
             return;
@@ -34867,19 +35004,16 @@ function useFetchRequests(requests, disabled) {
         });
     }, [requests, observer2, disabled,]);
     React2.useEffect(() => {
+        return () => observer2.unmount();
+    }, [observer2,]);
+    const subscribe = React2.useCallback((onChange) => {
         if (isRestoringCache || disabled)
-            return;
-        const unsubscribe = observer2.subscribe(() => {
-            React2.startTransition(() => {
-                setResult(observer2.getResults());
-            });
-        });
-        return () => {
-            unsubscribe();
-            observer2.unmount();
-        };
-    }, [observer2, disabled, isRestoringCache,]);
-    return result;
+            return noop4;
+        return observer2.subscribe(onChange);
+    }, [disabled, observer2, isRestoringCache,]);
+    const synchronousData = React2.useSyncExternalStore(subscribe, observer2.getResults, observer2.getServerResults);
+    const deferredData = React2.useDeferredValue(synchronousData);
+    return useMemoOne(() => children(deferredData.data, deferredData.status), [deferredData, children,]);
 }
 function usePrefetch() {
     const fetchClient = React2.useContext(FetchClientContext);
@@ -35019,8 +35153,7 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwar
 }));
 var Fetcher = /* @__PURE__ */ React2.forwardRef(function Fetcher2({ requests, disabled, children, ...rest }, ref) {
     const cloneWithPropsAndRef = useCloneChildrenWithPropsAndRef(ref);
-    const { data: data2, status, } = useFetchRequests(requests, disabled);
-    const childrenWithValues = children(data2, status);
+    const childrenWithValues = useFetchRequestsForChildren(requests, disabled, children);
     return cloneWithPropsAndRef(childrenWithValues, rest);
 });
 var callEach = (...fns) => fns.forEach((fn) => fn && fn());
@@ -35052,19 +35185,19 @@ function isAnyCollection(value) {
     return isAnyLegacyCollection(value) || isAnyDatabaseCollection(value);
 }
 function isLegacyCollection(value) {
-    return isArray(value) && value.every(isObject);
+    return isArray(value) && value.every(isObject2);
 }
 function isLegacyLocalizedCollection(value) {
-    return isObject(value) && isFunction(value.read) && isFunction(value.preload);
+    return isObject2(value) && isFunction(value.read) && isFunction(value.preload);
 }
 function isAnyLegacyCollection(value) {
     return isLegacyCollection(value) || isLegacyLocalizedCollection(value);
 }
 function isDatabaseCollection(value) {
-    return isObject(value) && isObject(value.schema);
+    return isObject2(value) && isObject2(value.schema);
 }
 function isLocalizedDatabaseCollection(value) {
-    return isObject(value) && isObject(value.collectionByLocaleId);
+    return isObject2(value) && isObject2(value.collectionByLocaleId);
 }
 function isAnyDatabaseCollection(value) {
     return isDatabaseCollection(value) || isLocalizedDatabaseCollection(value);
@@ -35944,7 +36077,7 @@ function Hash(value) {
     return value;
 }
 function isHashable(value) {
-    return isObject(value) && isFunction(value.getHash);
+    return isObject2(value) && isFunction(value.getHash);
 }
 function calculateHash(name, ...values) {
     const hashes = values.map((value) => {
@@ -39455,7 +39588,7 @@ function getCollectionId(collection) {
     return id3;
 }
 function replaceCollection(_, value) {
-    if (isObject(value) && value.type === 'Collection' && isAnyCollection(value.data)) {
+    if (isObject2(value) && value.type === 'Collection' && isAnyCollection(value.data)) {
         return getCollectionId(value.data);
     }
     return value;
@@ -39693,7 +39826,7 @@ function useDataRecord(collection, variables) {
         const pageRecord = collection.find((record2) => {
             return Object.entries(variables).every(([key7, value,]) => {
                 const recordValue = record2[key7];
-                if (value === void 0 || recordValue === void 0 || isObject(value) || isObject(recordValue)) {
+                if (value === void 0 || recordValue === void 0 || isObject2(value) || isObject2(recordValue)) {
                     return false;
                 }
                 return String(value) === String(recordValue);
@@ -39738,7 +39871,7 @@ function useSiteRefs() {
     }, [path,]);
 }
 function isFramerGamepadKeydownData(value) {
-    return isObject(value) && value.mapping !== void 0;
+    return isObject2(value) && value.mapping !== void 0;
 }
 function gamepadInputsHaveChanged(previous, current2) {
     if (previous.length !== current2.length)
@@ -39995,14 +40128,9 @@ function useOnAppear(callback) {
         default: callback,
     });
 }
-async function setOverflow(blockDocumentScrolling, show, yieldBefore = true) {
+function setOverflow(blockDocumentScrolling, show) {
     if (blockDocumentScrolling === false)
         return;
-    if (yieldBefore) {
-        await yieldToMain({
-            continueAfter: 'paint',
-        });
-    }
     frame.render(() => {
         const htmlStyle = document.documentElement.style;
         if (show) {
@@ -40015,18 +40143,27 @@ async function setOverflow(blockDocumentScrolling, show, yieldBefore = true) {
 }
 function useOverlayState({ blockDocumentScrolling = true, } = {}) {
     const [showOverlay, setShowOverlay,] = React4.useState(false);
-    const callback = React4.useCallback((show) => {
-        setShowOverlay(show);
-        void setOverflow(blockDocumentScrolling, show);
+    const callback = React4.useCallback(async (show) => {
+        await yieldToMain({
+            priority: 'user-blocking',
+            continueAfter: 'paint',
+        });
+        startTransition2(() => setShowOverlay(show));
+        setOverflow(blockDocumentScrolling, show);
     }, [blockDocumentScrolling,]);
     React4.useEffect(() => () => {
-        void setOverflow(blockDocumentScrolling, false, false);
+        void yieldToMain({
+            priority: 'user-blocking',
+            continueAfter: 'paint',
+        }).then(() => {
+            setOverflow(blockDocumentScrolling, false);
+        });
     }, [blockDocumentScrolling,]);
     return [showOverlay, callback,];
 }
 var key4 = 'page';
 function isRoute(route) {
-    return isObject(route) && key4 in route && route.page !== void 0;
+    return isObject2(route) && key4 in route && route.page !== void 0;
 }
 async function componentForRoute(route) {
     if (!isRoute(route))
@@ -40044,7 +40181,7 @@ async function componentForRoute(route) {
 }
 var preloadKey2 = 'preload';
 function withPreload(component) {
-    return !!component && isObject(component) && preloadKey2 in component;
+    return !!component && isObject2(component) && preloadKey2 in component;
 }
 function usePrototypeNavigate({ preload, } = {}) {
     const navigation = useNavigation();
@@ -40162,7 +40299,7 @@ function getWhereExpressionFromPathVariables(pathVariables, collection) {
     const entries = Object.entries(pathVariables ?? {}).filter(([, value,]) => {
         if (isUndefined(value))
             return false;
-        if (isObject(value))
+        if (isObject2(value))
             return false;
         return true;
     });
@@ -40198,65 +40335,45 @@ function getWhereExpressionFromPathVariables(pathVariables, collection) {
     }));
 }
 function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspendedLoadingState = false) {
+    var _a, _b, _c, _d;
+    const [isPending, startLoadingTransition,] = useTransition();
     const totalPages = Math.ceil(totalSize / pageSize);
-    const [paginationInfo, setPaginationInfo,] = useState(() => {
-        var _a, _b, _c, _d;
-        const currentPage = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
-            ? void 0
-            : _b.paginationInfo) == null
-            ? void 0
-            : _c[hash2]) == null
-            ? void 0
-            : _d.currentPage) ?? 1;
+    const [currentPage, setCurrentPage,] = useState(((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
+        ? void 0
+        : _b.paginationInfo) == null
+        ? void 0
+        : _c[hash2]) == null
+        ? void 0
+        : _d.currentPage) ?? 1);
+    const paginationInfo = useMemo2(() => {
         return {
             currentPage,
             totalPages,
-            isLoading: false,
+            isLoading: isPending,
         };
-    });
-    useEffect(() => {
-        startTransition2(() => {
-            setPaginationInfo((current2) => {
-                if (current2.totalPages === totalPages)
-                    return current2;
-                return {
-                    ...current2,
-                    totalPages,
-                };
-            });
-        });
-    }, [totalPages,]);
+    }, [currentPage, totalPages, isPending,]);
     useEffect(() => {
         pushLoadMoreHistory(hash2, paginationInfo);
     }, [hash2, paginationInfo,]);
     const onCanvas = useIsOnFramerCanvas();
-    const loadMore = useCallback(() => {
+    const loadMore = useCallback(async () => {
         if (onCanvas)
             return;
-        if (paginationInfo.currentPage >= paginationInfo.totalPages)
+        if (currentPage >= totalPages)
             return;
-        if (!paginateWithSuspendedLoadingState) {
-            startTransition2(() => {
-                setPaginationInfo((info) => ({
-                    ...info,
-                    currentPage: Math.min(info.currentPage + 1, info.totalPages),
-                    isLoading: false,
-                }));
-            });
-            return;
-        }
-        setPaginationInfo((info) => ({
-            ...info,
-            isLoading: true,
-        }));
-        requestAnimationFrame(() => {
-            setPaginationInfo((info) => ({
-                ...info,
-                currentPage: Math.min(info.currentPage + 1, info.totalPages),
-                isLoading: false,
-            }));
+        await yieldToMain({
+            priority: 'user-blocking',
+            continueAfter: 'paint',
         });
-    }, [onCanvas, paginationInfo.currentPage, paginationInfo.totalPages, paginateWithSuspendedLoadingState,]);
+        const renderNextPage = (startTransition14) => {
+            startTransition14(() => {
+                setCurrentPage((_currentPage) => Math.min(_currentPage + 1, totalPages));
+            });
+        };
+        if (!paginateWithSuspendedLoadingState)
+            return renderNextPage(startTransition2);
+        return renderNextPage(startLoadingTransition);
+    }, [currentPage, totalPages, paginateWithSuspendedLoadingState,]);
     return {
         paginationInfo,
         loadMore,
@@ -40375,15 +40492,16 @@ function useRunCallbackIfPageIsVisible() {
     }, [clean,]);
 }
 function useRunCallbackIfElementIsInView() {
-    const observerRef = useRef3(null);
+    const observerRefCleanup = useRef3();
     const isInViewRef = useRef3(false);
     const callbackRef = useRef3();
+    const observers2 = useContext(SharedIntersectionObserverContext);
     useEffect(() => {
         return () => {
             var _a;
-            (_a = observerRef.current) == null ? void 0 : _a.disconnect();
+            (_a = observerRefCleanup.current) == null ? void 0 : _a.call(observerRefCleanup);
             callbackRef.current = void 0;
-            observerRef.current = null;
+            observerRefCleanup.current = void 0;
         };
     }, []);
     return useCallback((callback, ref) => {
@@ -40392,23 +40510,24 @@ function useRunCallbackIfElementIsInView() {
             return;
         }
         callbackRef.current = callback;
-        if (observerRef.current)
+        if (observerRefCleanup.current)
             return;
-        const observer2 = new IntersectionObserver((entries) => {
-            var _a;
-            let isIntersecting = false;
-            for (let i = 0; i < entries.length; ++i) {
-                const entry = entries[i];
-                isIntersecting = entry.isIntersecting;
-            }
-            isInViewRef.current = isIntersecting;
-            if (!isIntersecting)
+        let queuedMicrotask = false;
+        const observerCallback = (entry) => {
+            isInViewRef.current = entry.isIntersecting;
+            if (queuedMicrotask)
                 return;
-            (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef);
-        });
-        observerRef.current = observer2;
-        observer2.observe(ref.current);
-    }, []);
+            queuedMicrotask = true;
+            queueMicrotask(() => {
+                var _a;
+                if (!isInViewRef.current)
+                    return;
+                queuedMicrotask = false;
+                (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef);
+            });
+        };
+        observerRefCleanup.current = observeElement(observers2, 'undefined', ref.current, null, observerCallback);
+    }, [observers2,]);
 }
 function useUpdateIfVisible(ref) {
     const runUpdateIfPageIsVisible = useRunCallbackIfPageIsVisible();
@@ -40426,20 +40545,27 @@ var globalWaitingForClickPromise;
 var globalWaitingForClickResolve;
 async function getPromiseWithFallback() {
     return new Promise((resolve) => {
-        const resolveFn = () => {
+        let resolveFn = resolve;
+        setTimeout(() => {
+            if (!resolveFn)
+                return;
+            performance.mark('wait-for-click-fallback');
+            resolveFn();
+        }, 150);
+        globalWaitingForClickResolve = () => {
             resolve();
-            clearTimeout(timeout);
+            resolveFn = void 0;
         };
-        const timeout = setTimeout(resolveFn, 150);
-        globalWaitingForClickResolve = resolveFn;
     });
 }
 function globalWaitForClickListener(event) {
     if (event.button === 0) {
+        performance.mark('pointerdown-listener');
         globalWaitingForClickPromise = getPromiseWithFallback();
     }
 }
 function globalClickReceivedListener() {
+    performance.mark('click-received-listener');
     globalWaitingForClickPromise = void 0;
     globalWaitingForClickResolve == null ? void 0 : globalWaitingForClickResolve();
     globalWaitingForClickResolve = void 0;
@@ -40495,13 +40621,17 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         internalState.current.gestureVariant = nextGesture;
         const yieldOnTap = yieldOnTapFeatureOn && internalState.current.isPressedHasUpdated;
         if (yieldOnTap && globalWaitingForClickPromise) {
+            performance.mark('wait-for-tap-start');
             await globalWaitingForClickPromise;
+            performance.measure('wait-for-tap', 'wait-for-tap-start');
         }
         if (yieldOnTap) {
+            performance.mark('yield-on-tap-start');
             await yieldToMain({
                 priority: 'user-blocking',
                 continueAfter: 'paint',
             });
+            performance.measure('yield-on-tap', 'yield-on-tap-start');
         }
         const { isHovered: isHovered2, isPressed: isPressed2, isHoveredHasUpdated, isPressedHasUpdated, } = internalState.current;
         if (isHovered2 || isHoveredHasUpdated || isPressed2 || isPressedHasUpdated) {
@@ -40626,7 +40756,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
         if (shouldWrapWithBoundary) {
             if (appliedOverride.status === 'success') {
                 return /* @__PURE__ */ jsx3(CodeComponentBoundary, {
-                    errorMessage: getErrorMessageForOverride(scopeId, nodeId),
+                    getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId),
                     fallback: /* @__PURE__ */ jsx3(Component17, {
                         ...props,
                         ref,
@@ -40853,7 +40983,7 @@ var withVariantAppearEffect = (Component17) => React4.forwardRef((props, forward
             });
         });
     }, [animateOnce, threshold, targets, props.variant, scrollDirection, exitTarget,]);
-    useScrollDirectionChange(scrollDirection, setVariant, {
+    useScrollDirectionChange(scrollDirection, (variant) => React4.startTransition(() => setVariant(variant)), {
         enabled: variantAppearEffectEnabled,
         repeat: !animateOnce,
     });
@@ -40862,7 +40992,7 @@ var withVariantAppearEffect = (Component17) => React4.forwardRef((props, forward
             return;
         const useObscuredVariant = !options.targets && !options.scrollDirection;
         const target = useObscuredVariant ? options.obscuredVariantId : void 0;
-        React4.startTransition(() => setVariant(target));
+        startTransition2(() => setVariant(target));
     });
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
         return /* @__PURE__ */ jsx3(Component17, {
@@ -42698,10 +42828,10 @@ function loadVariationAxes(source) {
     }
 }
 function isValidVariationAxesData(data2) {
-    return isObject(data2) && Object.values(data2).every(isValidVariationAxes);
+    return isObject2(data2) && Object.values(data2).every(isValidVariationAxes);
 }
 function isVariationAxis2(data2) {
-    return isObject(data2) && isString(data2.tag);
+    return isObject2(data2) && isString(data2.tag);
 }
 function isValidVariationAxes(data2) {
     return Array.isArray(data2) && data2.every(isVariationAxis2);
@@ -42710,10 +42840,13 @@ var FontStore = class {
     constructor() {
         __publicField(this, 'enabled', false);
         __publicField(this, 'bySelector', /* @__PURE__ */ new Map());
+        __publicField(this, 'loadedSelectors', /* @__PURE__ */ new Set());
         __publicField(this, 'getGoogleFontsListPromise');
         __publicField(this, 'getFontshareFontsListPromise');
         __publicField(this, 'getBuiltInFontsListPromise');
-        __publicField(this, 'loadedSelectors', /* @__PURE__ */ new Set());
+        __publicField(this, 'customFontsImportPromise', new Promise((resolve) => {
+            this.resolveCustomFontsImportPromise = resolve;
+        }));
         __publicField(this, 'local');
         __publicField(this, 'google');
         __publicField(this, 'fontshare');
@@ -42790,9 +42923,13 @@ var FontStore = class {
                 this.bySelector.delete(key7);
             }
         });
-        for (const font of this.custom.importFonts(assets)) {
+        const importedFonts = this.custom.importFonts(assets);
+        for (const font of importedFonts) {
             this.addFont(font);
         }
+        if (importedFonts.length > 0) {
+            this.resolveCustomFontsImportPromise();
+        }
     }
     getFontFamily(info) {
         const fontFamily = this[info.source].getFontFamilyByName(info.name);
@@ -42948,6 +43085,12 @@ var FontStore = class {
                 warnOnce2('Failed to load built-in fonts:', error);
             }));
         }
+        const shouldImportCustomFonts = selectors.some((selector) => selector.startsWith(customFontSelectorPrefix));
+        if (shouldImportCustomFonts) {
+            importPromises.push(this.customFontsImportPromise.catch((error) => {
+                warnOnce2('Failed to load custom fonts:', error);
+            }));
+        }
         if (importPromises.length > 0) {
             await Promise.all(importPromises);
         }
@@ -43222,10 +43365,9 @@ var PlainTextInput = /* @__PURE__ */ forwardRef(function FormPlainTextInput(prop
         className: cx(textInputWrapperClassName, inputWrapperClassName, className2),
         ...rest,
         children: type === 'textarea'
-            ? /* @__PURE__ */ createElement(motion.textarea, {
+            ? /* @__PURE__ */ jsx3(motion.textarea, {
                 ...dataProps,
                 ...eventHandlers,
-                key: defaultValue,
                 required,
                 autoFocus,
                 name: inputName,
@@ -43233,11 +43375,10 @@ var PlainTextInput = /* @__PURE__ */ forwardRef(function FormPlainTextInput(prop
                 className: inputClassName,
                 defaultValue,
                 maxLength,
-            })
-            : /* @__PURE__ */ createElement(motion.input, {
+            }, defaultValue)
+            : /* @__PURE__ */ jsx3(motion.input, {
                 ...dataProps,
                 ...eventHandlers,
-                key: defaultValue,
                 type,
                 required,
                 autoFocus,
@@ -43249,7 +43390,7 @@ var PlainTextInput = /* @__PURE__ */ forwardRef(function FormPlainTextInput(prop
                 max,
                 step: step2,
                 maxLength,
-            }),
+            }, defaultValue),
     });
 });
 var iconSize2 = 16;
@@ -44499,7 +44640,7 @@ function extractTextFromReactNode(node) {
 var RichText2 = /* @__PURE__ */ forwardRef(function RichText3({ children, html, htmlFromDesign, ...props }, ref) {
     const content = html || children || htmlFromDesign;
     if (isString(content)) {
-        if (!props.stylesPresetsClassName && isObject(props.stylesPresetsClassNames)) {
+        if (!props.stylesPresetsClassName && isObject2(props.stylesPresetsClassNames)) {
             props.stylesPresetsClassName = Object.values(props.stylesPresetsClassNames).join(' ');
         }
         const contentProp = {
@@ -46537,7 +46678,7 @@ var VectorGroup = /* @__PURE__ */ (() => {
 })();
 var key6 = 'calculatedPaths';
 function withShape(target) {
-    if (!isObject(target))
+    if (!isObject2(target))
         return false;
     return key6 in target;
 }
@@ -46775,7 +46916,7 @@ function inspect(item, max, l) {
     if (item === void 0) {
         return 'undefined';
     }
-    if (isObject(item) && isFunction(item.toInspect)) {
+    if (isObject2(item) && isFunction(item.toInspect)) {
         return item.toInspect();
     }
     if (isString(item)) {
@@ -46788,7 +46929,7 @@ function inspect(item, max, l) {
         let code = item.toString().slice('function '.length).replace(/\n/gu, '').replace(/\s+/gu, ' ');
         const limit = 50;
         if (code.length > limit && l > 0) {
-            code = `${code.slice(0, +limit + 1 || void 0).trim()}\u2026 }`;
+            code = `${code.slice(0, limit + 1).trim()}\u2026 }`;
         }
         return `<Function ${code}>`;
     }
@@ -46798,7 +46939,7 @@ function inspect(item, max, l) {
         }
         return `[${item.map((i) => inspect(i, max, (l || 0) + 1)).join(', ')}]`;
     }
-    if (isObject(item)) {
+    if (isObject2(item)) {
         let objectInfo;
         const objectType = inspectObjectType(item);
         if (/HTML\w+?Element/u.test(objectType)) {
@@ -46877,8 +47018,8 @@ var package_default = {
         '@types/react': '^18.2.67',
         '@types/react-dom': '^18.2.22',
         '@types/yargs': '^17.0.33',
-        '@typescript-eslint/eslint-plugin': '^8.29.1',
-        '@typescript-eslint/parser': '^8.29.1',
+        '@typescript-eslint/eslint-plugin': '^8.32.1',
+        '@typescript-eslint/parser': '^8.32.1',
         chalk: '^4.1.2',
         eslint: '^8.57.1',
         'eslint-plugin-framer-studio': 'workspace:*',
@@ -46894,7 +47035,7 @@ var package_default = {
         yargs: '^17.7.2',
     },
     peerDependencies: {
-        'framer-motion': '12.11.4',
+        'framer-motion': '12.14.0',
         react: '^18.2.0',
         'react-dom': '^18.2.0',
     },
@@ -46912,7 +47053,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop2.start();
 }
-export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
+export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addAttrValue, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, attachSpring, attrEffect, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, Instance, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isHTMLElement, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isObject, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, propEffect, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, springValue, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, svgEffect, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
 //! Credit to Astro | MIT License
 /**
  * @license Emotion v11.0.0