unframer 2.25.5 → 2.26.0

package/dist/framer.js

@@ -36,12 +36,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataContext = exports.Data = exports.CycleVariantState = exports.CustomCursorHost = exports.cubicBezierAsString = exports.createBox = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.ConstraintMask = exports.ComponentViewportProvider = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectMotionValues = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelMicrotask = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.AsyncMotionValueAnimation = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.animationMapKey = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.alpha = exports.addPointerInfo = exports.activeAnimations = exports.acceleratedValues = exports.combinedCSSRules = void 0;
-exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.fontStore = exports.FontSourceNames = exports.FlatTree = exports.findValueType = exports.findDimensionValueType = exports.Fetcher = exports.environment = exports.easingDefinitionToFunction = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.DOMKeyframesResolver = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.dimensionValueTypes = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.degrees = exports.defaultValueTypes = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = void 0;
-exports.mixLinearColor = exports.mixComplex = exports.mixColor = exports.mirrorEasing = exports.millisecondsToSeconds = exports.microtask = exports.maxGeneratorDuration = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.KeyframeResolver = exports.JSAnimation = exports.isZeroValueString = exports.isPrimaryPointer = exports.isNumericalString = exports.isNodeOrChild = exports.isMotionValue = exports.isEasingArray = exports.isDragging = exports.isCSSVariableToken = exports.isCSSVariableName = exports.isBrowser = exports.isBezierDefinition = exports.invisibleValues = exports.invariant = exports.InternalID = exports.Image = exports.hsla = exports.hex = exports.GroupAnimationWithThen = exports.GroupAnimation = exports.GracefullyDegradingErrorBoundary = exports.getValueAsType = exports.getDefaultValueType = exports.generateLinearEasing = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = void 0;
-exports.scale = exports.RichText = exports.rgbUnit = exports.rgba = exports.reverseEasing = exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.readTransformValue = exports.RadialGradient = exports.QueryEngine = exports.QueryCache = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.progressPercentage = exports.progress = exports.PresenceContext = exports.positionalKeys = exports.Polygon = exports.pipe = exports.percent = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.numberValueTypes = exports.number = exports.NotFoundError = exports.noop = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.NativeAnimationWrapper = exports.NativeAnimationExtended = exports.NativeAnimation = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mixNumber = void 0;
-exports.withV1StrokeFX = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.WillChangeMotionValue = exports.warning = exports.vw = exports.visualElementStore = exports.VisualElement = exports.ViewTransitionBuilder = exports.vh = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.transformValueTypes = exports.transformProps = exports.transformPropOrder = exports.time = exports.Text = exports.testValueType = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.supportsScrollTimeline = exports.supportsPartialKeyframes = exports.supportsLinearEasing = exports.supportsFlags = exports.supportedWaapiEasing = exports.SubscriptionManager = exports.StyleSheetContext = exports.statsBuffer = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.secondsToMilliseconds = exports.Scroll = void 0;
-exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = void 0;
+exports.CustomCursorHost = exports.cubicBezierAsString = exports.createBox = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.ConstraintMask = exports.ComponentViewportProvider = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectMotionValues = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelMicrotask = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.attrEffect = exports.AsyncMotionValueAnimation = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.animationMapKey = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.alpha = exports.addStyleValue = exports.addPointerInfo = exports.addAttrValue = exports.activeAnimations = exports.acceleratedValues = exports.combinedCSSRules = void 0;
+exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.fontStore = exports.FontSourceNames = exports.FlatTree = exports.findValueType = exports.findDimensionValueType = exports.Fetcher = exports.environment = exports.easingDefinitionToFunction = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.DOMKeyframesResolver = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.dimensionValueTypes = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.degrees = exports.defaultValueTypes = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = void 0;
+exports.millisecondsToSeconds = exports.microtask = exports.maxGeneratorDuration = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.KeyframeResolver = exports.JSAnimation = exports.isZeroValueString = exports.isPrimaryPointer = exports.isNumericalString = exports.isNodeOrChild = exports.isMotionValue = exports.isEasingArray = exports.isDragging = exports.isCSSVariableToken = exports.isCSSVariableName = exports.isBrowser = exports.isBezierDefinition = exports.invisibleValues = exports.invariant = exports.InternalID = exports.Instance = exports.Image = exports.hsla = exports.hex = exports.GroupAnimationWithThen = exports.GroupAnimation = exports.GracefullyDegradingErrorBoundary = exports.getValueAsType = exports.getDefaultValueType = exports.generateLinearEasing = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = void 0;
+exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.readTransformValue = exports.RadialGradient = exports.QueryEngine = exports.QueryCache = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.propEffect = exports.progressPercentage = exports.progress = exports.PresenceContext = exports.positionalKeys = exports.Polygon = exports.pipe = exports.percent = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.numberValueTypes = exports.number = exports.NotFoundError = exports.noop = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.NativeAnimationWrapper = exports.NativeAnimationExtended = exports.NativeAnimation = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mixNumber = exports.mixLinearColor = exports.mixComplex = exports.mixColor = exports.mirrorEasing = void 0;
+exports.WindowContext = exports.WillChangeMotionValue = exports.warning = exports.vw = exports.visualElementStore = exports.VisualElement = exports.ViewTransitionBuilder = exports.vh = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.transformValueTypes = exports.transformProps = exports.transformPropOrder = exports.time = exports.Text = exports.testValueType = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.svgEffect = exports.SVG = exports.supportsScrollTimeline = exports.supportsPartialKeyframes = exports.supportsLinearEasing = exports.supportsFlags = exports.supportedWaapiEasing = exports.SubscriptionManager = exports.StyleSheetContext = exports.styleEffect = exports.statsBuffer = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.secondsToMilliseconds = exports.Scroll = exports.scale = exports.RichText = exports.rgbUnit = exports.rgba = exports.reverseEasing = void 0;
+exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withV1StrokeFX = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = void 0;
 exports._injectRuntime = _injectRuntime;
 exports.addActionControls = addActionControls;
 exports.addFonts = addFonts;
@@ -56,6 +56,7 @@ exports.animateVisualElement = animateVisualElement;
 exports.animationControls = animationControls;
 exports.annotateTypeOnStringify = annotateTypeOnStringify;
 exports.applyPxDefaults = applyPxDefaults;
+exports.attachSpring = attachSpring;
 exports.AutomaticLayoutIds = AutomaticLayoutIds;
 exports.backgroundImageFromProps = backgroundImageFromProps;
 exports.buildTransform = buildTransform2;
@@ -138,7 +139,9 @@ exports.isFramerGamepadKeydownData = isFramerGamepadKeydownData;
 exports.isFramerPageLink = isFramerPageLink;
 exports.isGapEnabled = isGapEnabled;
 exports.isGenerator = isGenerator;
+exports.isHTMLElement = isHTMLElement;
 exports.isMotionComponent = isMotionComponent;
+exports.isObject = isObject;
 exports.isOfAnnotatedType = isOfAnnotatedType;
 exports.isOverride = isOverride;
 exports.isReactDefinition = isReactDefinition;
@@ -146,6 +149,8 @@ exports.isRelativeNumber = isRelativeNumber;
 exports.isShallowEqualArray = isShallowEqualArray;
 exports.isStaticRenderer = isStaticRenderer;
 exports.isStraightCurve = isStraightCurve;
+exports.isSVGElement = isSVGElement;
+exports.isSVGSVGElement = isSVGSVGElement;
 exports.isValidMotionProp = isValidMotionProp;
 exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
 exports.keyframes = keyframes;
@@ -203,12 +208,12 @@ exports.setGlobalRenderEnvironment = setGlobalRenderEnvironment;
 exports.setStyle = setStyle;
 exports.shouldOpenLinkInNewTab = shouldOpenLinkInNewTab;
 exports.spring = spring;
+exports.springValue = springValue;
 exports.stagger = stagger;
 exports.startAnimation = startAnimation;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.startWaapiAnimation = startWaapiAnimation;
 exports.steps = steps;
-exports.styleEffect = styleEffect;
 exports.supportsBrowserAnimation = supportsBrowserAnimation;
 exports.throttle = throttle;
 exports.toFlexDirection = toFlexDirection;
@@ -317,7 +322,7 @@ exports.withShape = withShape;
 exports.yieldToMain = yieldToMain;
 exports.Router = Router;
 const chunk_A2PMVMFI_js_1 = require("./framer-chunks/chunk-A2PMVMFI.js");
-// /:https://app.framerstatic.com/chunk-IGW3TQSG.mjs
+// /:https://app.framerstatic.com/chunk-A6RUM2JZ.mjs
 const react_1 = require("react");
 const react_2 = require("react");
 const react_3 = require("react");
@@ -372,255 +377,6 @@ var useIsomorphicLayoutEffect = isBrowser ? react_2.useLayoutEffect : react_2.us
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 var PresenceContext = /* @__PURE__ */ (0, react_1.createContext)(null);
 exports.PresenceContext = PresenceContext;
-var MotionConfigContext = (0, react_1.createContext)({
-    transformPagePoint: (p) => p,
-    isStatic: false,
-    reducedMotion: 'never',
-});
-exports.MotionConfigContext = MotionConfigContext;
-function usePresence(subscribe = true) {
-    const context = (0, react_3.useContext)(PresenceContext);
-    if (context === null)
-        return [true, null,];
-    const { isPresent: isPresent2, onExitComplete, register, } = context;
-    const id4 = (0, react_3.useId)();
-    (0, react_2.useEffect)(() => {
-        if (subscribe) {
-            return register(id4);
-        }
-    }, [subscribe,]);
-    const safeToRemove = (0, react_3.useCallback)(() => subscribe && onExitComplete && onExitComplete(id4), [id4, onExitComplete, subscribe,]);
-    return !isPresent2 && onExitComplete ? [false, safeToRemove,] : [true,];
-}
-function useIsPresent() {
-    return isPresent((0, react_3.useContext)(PresenceContext));
-}
-function isPresent(context) {
-    return context === null ? true : context.isPresent;
-}
-function useConstant(init) {
-    const ref = (0, react_4.useRef)(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 = (0, react_3.useId)();
-    const ref = (0, react_4.useRef)(null);
-    const size = (0, react_4.useRef)({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        right: 0,
-    });
-    const { nonce, } = (0, react_3.useContext)(MotionConfigContext);
-    (0, react_5.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 (0, jsx_runtime_1.jsx)(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 = (0, react_3.useId)();
-    let isReusedContext = true;
-    let context = (0, react_4.useMemo)(() => {
-        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,
-        };
-    }
-    (0, react_4.useMemo)(() => {
-        presenceChildren.forEach((_, key7) => presenceChildren.set(key7, false));
-    }, [isPresent2,]);
-    React2.useEffect(() => {
-        !isPresent2 && !presenceChildren.size && onExitComplete && onExitComplete();
-    }, [isPresent2,]);
-    if (mode === 'popLayout') {
-        children = (0, jsx_runtime_1.jsx)(PopChild, {
-            isPresent: isPresent2,
-            anchorX,
-            children,
-        });
-    }
-    return (0, jsx_runtime_1.jsx)(PresenceContext.Provider, {
-        value: context,
-        children,
-    });
-};
-function newChildrenMap() {
-    return /* @__PURE__ */ new Map();
-}
-var getChildKey = (child) => child.key || '';
-function onlyElements(children) {
-    const filtered = [];
-    react_6.Children.forEach(children, (child) => {
-        if ((0, react_6.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 = (0, react_4.useMemo)(() => onlyElements(children), [children,]);
-    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
-    const isInitialRender = (0, react_4.useRef)(true);
-    const pendingPresentChildren = (0, react_4.useRef)(presentChildren);
-    const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
-    const [diffedChildren, setDiffedChildren,] = (0, react_4.useState)(presentChildren);
-    const [renderedChildren, setRenderedChildren,] = (0, react_4.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, } = (0, react_3.useContext)(LayoutGroupContext);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(PresenceChild, {
-                isPresent: isPresent2,
-                initial: !isInitialRender.current || initial ? void 0 : false,
-                custom,
-                presenceAffectsLayout,
-                mode,
-                onExitComplete: isPresent2 ? void 0 : onExit,
-                anchorX,
-                children: child,
-            }, key7);
-        }),
-    });
-};
-exports.AnimatePresence = AnimatePresence;
-var DeprecatedLayoutGroupContext = (0, react_1.createContext)(null);
-exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
-exports.LayoutGroupContext = DeprecatedLayoutGroupContext;
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
         arr.push(item);
@@ -667,6 +423,9 @@ var MotionGlobalConfig = {};
 exports.MotionGlobalConfig = MotionGlobalConfig;
 var isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
 exports.isNumericalString = isNumericalString;
+function isObject(value) {
+    return typeof value === 'object' && value !== null;
+}
 var isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
 exports.isZeroValueString = isZeroValueString;
 // @__NO_SIDE_EFFECTS__
@@ -1908,13 +1667,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')
@@ -2718,14 +2475,17 @@ var NativeAnimationExtended = class extends NativeAnimation {
     }
 };
 exports.NativeAnimationExtended = NativeAnimationExtended;
-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();
@@ -3362,6 +3122,123 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     }
     return Array.from(elementOrSelector);
 }
+var getValueAsType = (value, type) => {
+    return type && typeof value === 'number' ? type.transform(value) : value;
+};
+exports.getValueAsType = getValueAsType;
+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);
+};
+exports.addAttrValue = addAttrValue;
+var attrEffect = /* @__PURE__ */ createSelectorEffect(/* @__PURE__ */ createEffect(addAttrValue));
+exports.attrEffect = attrEffect;
+var propEffect = /* @__PURE__ */ createEffect((subject, state, key7, value) => {
+    return state.set(key7, value, () => {
+        subject[key7] = state.latest[key7];
+    }, void 0, false);
+});
+exports.propEffect = propEffect;
 var MAX_VELOCITY_DELTA = 30;
 var isFloat = (value) => {
     return !isNaN(parseFloat(value));
@@ -3654,49 +3531,6 @@ exports.MotionValue = MotionValue;
 function motionValue(init, options) {
     return new MotionValue(init, options);
 }
-var getValueAsType = (value, type) => {
-    return type && typeof value === 'number' ? type.transform(value) : value;
-};
-exports.getValueAsType = getValueAsType;
-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',
@@ -3727,36 +3561,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]);
@@ -3768,6 +3598,40 @@ function addValue(element, state, key7, value) {
         };
     }
     return state.set(key7, value, render, computed);
+};
+exports.addStyleValue = addStyleValue;
+var styleEffect = /* @__PURE__ */ createSelectorEffect(/* @__PURE__ */ createEffect(addStyleValue));
+exports.styleEffect = styleEffect;
+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));
+exports.svgEffect = svgEffect;
+function convertAttrKey(key7) {
+    return key7.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
 }
 var { schedule: microtask, cancel: cancelMicrotask, } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 exports.microtask = microtask;
@@ -3935,7 +3799,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;
@@ -4070,6 +3934,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;
@@ -4102,6 +3972,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));
 exports.findValueType = findValueType;
@@ -4386,6 +4306,255 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
+var MotionConfigContext = (0, react_1.createContext)({
+    transformPagePoint: (p) => p,
+    isStatic: false,
+    reducedMotion: 'never',
+});
+exports.MotionConfigContext = MotionConfigContext;
+function usePresence(subscribe = true) {
+    const context = (0, react_3.useContext)(PresenceContext);
+    if (context === null)
+        return [true, null,];
+    const { isPresent: isPresent2, onExitComplete, register, } = context;
+    const id4 = (0, react_3.useId)();
+    (0, react_2.useEffect)(() => {
+        if (subscribe) {
+            return register(id4);
+        }
+    }, [subscribe,]);
+    const safeToRemove = (0, react_3.useCallback)(() => subscribe && onExitComplete && onExitComplete(id4), [id4, onExitComplete, subscribe,]);
+    return !isPresent2 && onExitComplete ? [false, safeToRemove,] : [true,];
+}
+function useIsPresent() {
+    return isPresent((0, react_3.useContext)(PresenceContext));
+}
+function isPresent(context) {
+    return context === null ? true : context.isPresent;
+}
+function useConstant(init) {
+    const ref = (0, react_4.useRef)(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 = (0, react_3.useId)();
+    const ref = (0, react_4.useRef)(null);
+    const size = (0, react_4.useRef)({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+    });
+    const { nonce, } = (0, react_3.useContext)(MotionConfigContext);
+    (0, react_5.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 (0, jsx_runtime_1.jsx)(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 = (0, react_3.useId)();
+    let isReusedContext = true;
+    let context = (0, react_4.useMemo)(() => {
+        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,
+        };
+    }
+    (0, react_4.useMemo)(() => {
+        presenceChildren.forEach((_, key7) => presenceChildren.set(key7, false));
+    }, [isPresent2,]);
+    React2.useEffect(() => {
+        !isPresent2 && !presenceChildren.size && onExitComplete && onExitComplete();
+    }, [isPresent2,]);
+    if (mode === 'popLayout') {
+        children = (0, jsx_runtime_1.jsx)(PopChild, {
+            isPresent: isPresent2,
+            anchorX,
+            children,
+        });
+    }
+    return (0, jsx_runtime_1.jsx)(PresenceContext.Provider, {
+        value: context,
+        children,
+    });
+};
+function newChildrenMap() {
+    return /* @__PURE__ */ new Map();
+}
+var getChildKey = (child) => child.key || '';
+function onlyElements(children) {
+    const filtered = [];
+    react_6.Children.forEach(children, (child) => {
+        if ((0, react_6.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 = (0, react_4.useMemo)(() => onlyElements(children), [children,]);
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+    const isInitialRender = (0, react_4.useRef)(true);
+    const pendingPresentChildren = (0, react_4.useRef)(presentChildren);
+    const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+    const [diffedChildren, setDiffedChildren,] = (0, react_4.useState)(presentChildren);
+    const [renderedChildren, setRenderedChildren,] = (0, react_4.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, } = (0, react_3.useContext)(LayoutGroupContext);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.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 (0, jsx_runtime_1.jsx)(PresenceChild, {
+                isPresent: isPresent2,
+                initial: !isInitialRender.current || initial ? void 0 : false,
+                custom,
+                presenceAffectsLayout,
+                mode,
+                onExitComplete: isPresent2 ? void 0 : onExit,
+                anchorX,
+                children: child,
+            }, key7);
+        }),
+    });
+};
+exports.AnimatePresence = AnimatePresence;
+var DeprecatedLayoutGroupContext = (0, react_1.createContext)(null);
+exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
+exports.LayoutGroupContext = DeprecatedLayoutGroupContext;
 function useIsMounted() {
     const isMounted = (0, react_4.useRef)(false);
     useIsomorphicLayoutEffect(() => {
@@ -4584,9 +4753,9 @@ function MotionConfig({ children, isValidProp, ...config }) {
 }
 var MotionContext = /* @__PURE__ */ (0, react_1.createContext)({});
 exports.MotionContext = MotionContext;
-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);
 exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
 var SwitchLayoutGroupContext = (0, react_1.createContext)({});
 exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
@@ -4812,7 +4981,6 @@ function addScaleCorrector(correctors) {
         }
     }
 }
-var isMotionValue = (value) => Boolean(value && value.getVelocity);
 var translateAlias2 = {
     x: 'translateX',
     y: 'translateY',
@@ -5047,59 +5215,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',
@@ -5177,6 +5292,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;
@@ -7348,12 +7516,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) {
@@ -7373,7 +7538,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] += '%';
             }
@@ -7714,7 +7879,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) {
@@ -7758,7 +7923,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,
@@ -7769,6 +7933,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                             animationOptions.type = false;
                         }
                         this.startAnimation(animationOptions);
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                     }
                     else {
                         if (!hasLayoutChanged) {
@@ -8294,8 +8459,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;
@@ -8339,7 +8504,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         finishAnimation() {
             if (this.currentAnimation) {
                 this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-                this.currentAnimation.stop(false);
+                this.currentAnimation.stop();
             }
             this.completeAnimation();
         }
@@ -8529,7 +8694,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();
@@ -9027,7 +9192,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 {
@@ -9045,7 +9210,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) {
@@ -9108,7 +9273,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 {
@@ -9244,7 +9409,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;
@@ -9402,8 +9567,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);
@@ -9429,23 +9594,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, {
@@ -9631,74 +9790,6 @@ function useMotionTemplate(fragments, ...values) {
     }
     return useCombineMotionValues(values.filter(isMotionValue), buildValue);
 }
-function useSpring(source, config = {}) {
-    const { isStatic, } = (0, react_3.useContext)(MotionConfigContext);
-    const activeSpringAnimation = (0, react_4.useRef)(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 = (0, react_4.useRef)(initialValue);
-    const latestSetter = (0, react_4.useRef)(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();
-        }
-    };
-    (0, react_5.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 = (0, react_4.useRef)(0);
-    const { isStatic, } = (0, react_3.useContext)(MotionConfigContext);
-    (0, react_2.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();
@@ -9726,6 +9817,38 @@ function useListTransform(values, transformer) {
         return transformer(latest);
     });
 }
+function useSpring(source, options = {}) {
+    const { isStatic, } = (0, react_3.useContext)(MotionConfigContext);
+    const getFromSource = () => isMotionValue(source) ? source.get() : source;
+    if (isStatic) {
+        return useTransform(getFromSource);
+    }
+    const value = useMotionValue(getFromSource());
+    (0, react_5.useInsertionEffect)(() => {
+        return attachSpring(value, source, options);
+    }, [value, JSON.stringify(options),]);
+    return value;
+}
+function useAnimationFrame(callback) {
+    const initialTimestamp = (0, react_4.useRef)(0);
+    const { isStatic, } = (0, react_3.useContext)(MotionConfigContext);
+    (0, react_2.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 = () => {
@@ -10128,7 +10251,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);
 }
@@ -10836,7 +10959,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
 const react_10 = require("react");
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -10845,6 +10968,7 @@ const react_14 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const react_15 = require("react");
 const react_16 = require("react");
+const react_17 = require("react");
 var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = (0, chunk_A2PMVMFI_js_1.__commonJS)({
     '../../../node_modules/hsluv/dist/hsluv.cjs'(exports) {
@@ -12041,10 +12165,10 @@ function useCurrentRouteId() {
 }
 function useOnRouteChange(cb) {
     const currentRoute = useCurrentRoute();
-    const [lastRoute, setLastRoute,] = react_11.default.useState(currentRoute);
-    if (isEqual(lastRoute, currentRoute) || !currentRoute)
+    const lastRoute = react_11.default.useRef(currentRoute);
+    if (isEqual(lastRoute.current, currentRoute) || !currentRoute)
         return;
-    setLastRoute(currentRoute);
+    lastRoute.current = currentRoute;
     cb(currentRoute);
 }
 function useRoute(routeId) {
@@ -12117,7 +12241,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) {
@@ -12133,7 +12257,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';
@@ -12239,7 +12363,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) {
@@ -13144,7 +13270,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');
@@ -13224,7 +13350,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))
@@ -13235,7 +13361,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;
@@ -13282,7 +13408,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);
@@ -14684,7 +14810,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;
@@ -15363,7 +15489,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) {
@@ -15926,7 +16052,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';
     };
@@ -20437,7 +20563,7 @@ function injectComponentCSSRules() {
     }
 }
 function isReactComponent(component) {
-    return isObject(component) || isFunction(component);
+    return isObject2(component) || isFunction(component);
 }
 var optionalKey = 'optional';
 function controlIsOptional(control) {
@@ -20468,14 +20594,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;
@@ -20524,7 +20650,7 @@ function applyControlDefaultsToDefaultProps(defaultProps, controls) {
     }
 }
 function getDefaultProps(component) {
-    if (isObject(component.defaultProps)) {
+    if (isObject2(component.defaultProps)) {
         return component.defaultProps;
     }
     const defaultProps = {};
@@ -22834,7 +22960,7 @@ function unwrapInlinedDisplayContents(element) {
 function useMeasureLayout(props, ref, getChildren = () => [], options = {}) {
     const { id: id3, visible, _needsMeasure, } = props;
     const { skipHook = false, } = options;
-    const inCodeComponent = Boolean((0, react_3.useContext)(ComponentContainerContext));
+    const inCodeComponent = (0, react_3.useContext)(ComponentContainerContext);
     const onCanvas = RenderTarget.current() === RenderTarget.canvas;
     useIsomorphicLayoutEffect2(() => {
         if (!onCanvas || inCodeComponent || skipHook) {
@@ -23136,7 +23262,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 */
@@ -23159,7 +23285,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 */
@@ -23389,7 +23515,7 @@ function useStyleAndRect(props) {
     react_11.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
-    const inCodeComponent = Boolean((0, react_3.useContext)(ComponentContainerContext));
+    const inCodeComponent = (0, react_3.useContext)(ComponentContainerContext);
     const { style: style2, _initialStyle, __fromCanvasComponent, size, } = props;
     const unwrappedProps = unwrapFrameProps(props);
     const constraintsRect = useConstraints(unwrappedProps);
@@ -23553,7 +23679,7 @@ var VisibleFrame = /* @__PURE__ */ (0, react_7.forwardRef)(function VisibleFrame
     }
     useMeasureLayout(props, ref);
     const backgroundImage = backgroundImageFromProps(props);
-    const inCodeComponent = Boolean((0, react_3.useContext)(ComponentContainerContext));
+    const inCodeComponent = (0, react_3.useContext)(ComponentContainerContext);
     const parentSize = resolveParentSize(propsWithOverrides, unwrappedProps, rect, inCodeComponent);
     const wrappedContent = useProvideParentSize(
     /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
@@ -23750,7 +23876,7 @@ var SharedLayoutRoot = class extends react_9.Component {
         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({
@@ -23825,7 +23951,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;
@@ -23946,6 +24072,21 @@ var SharedIntersectionObserver = class {
     }
 };
 var SharedIntersectionObserverContext = /* @__PURE__ */ (0, react_1.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 = (0, react_3.useContext)(SharedIntersectionObserverContext);
@@ -23955,19 +24096,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;
@@ -24042,7 +24171,7 @@ var LayoutTree = class extends react_9.Component {
         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;
@@ -25428,7 +25557,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)
@@ -26596,7 +26725,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)) {
@@ -27720,7 +27849,7 @@ function makePaddingString({ top, left, bottom, right, }) {
 var Stack = /* @__PURE__ */ (() => {
     const StackInner = react_11.default.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 = react_11.default.useRef(null);
         const flexDirection = toFlexDirection(direction);
         const isReverse = isReverseDirection(flexDirection);
@@ -28131,7 +28260,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
     }
     const updateOnResize = react_11.default.useCallback(() => {
         if (!hasFixedSize)
-            setForceUpdateCount((v) => v + 1);
+            (0, react_12.startTransition)(() => setForceUpdateCount((v) => v + 1));
     }, [hasFixedSize,]);
     react_11.default.useEffect(() => {
         if (RenderTarget.current() !== RenderTarget.preview)
@@ -29338,7 +29467,7 @@ var useUpdateChildSize = ({ dragDirection, children, fromCanvasComponent, }) =>
                 : updatedSize;
             return react_11.default.cloneElement(child, update);
         });
-    }, [dragDirection, children,]);
+    }, [dragDirection, children, fromCanvasComponent,]);
 };
 var numberFromOptionalMotionValue = (value) => {
     return typeof value === 'number' ? value : value.get();
@@ -29619,7 +29748,6 @@ var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function Emulat
             preserve3d: containerProps.preserve3d,
             children: [
                 /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EmptyState, {
-                    children,
                     size: {
                         width: isFiniteNumber(containerProps.width) ? containerProps.width : '100%',
                         height: isFiniteNumber(containerProps.height) ? containerProps.height : '100%',
@@ -29627,6 +29755,7 @@ var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function Emulat
                     insideUserCodeComponent: !containerProps.__fromCodeComponentNode,
                     title: 'Scroll',
                     description: 'Click and drag the connector to any frame on the canvas \u2192',
+                    children,
                 }),
                 useUpdateChildSize({
                     dragDirection: direction,
@@ -30770,8 +30899,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)
@@ -30937,6 +31066,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
     const values = useConstant2(makeFXValues);
     const mirrorStateRef = (0, react_4.useRef)(false);
     const delay2 = useDelay();
+    const animationPromiseRef = (0, react_4.useRef)(null);
     const animateValues = (0, react_3.useCallback)(async () => {
         if (!loop)
             return;
@@ -30945,10 +31075,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,
@@ -30960,6 +31090,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
                 }
             });
         }));
+        return animationPromiseRef.current;
     }, [loop, loopRepeatType, loopTransition, shouldReduceMotion,]);
     const [isRunning, setIsRunning,] = (0, react_4.useState)(false);
     const shouldRunRef = (0, react_4.useRef)(false);
@@ -30968,7 +31099,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
             return;
         await animateValues();
         await delay2(loopRepeatDelay ?? 0);
-        await animateLoop();
+        void animateLoop();
     }, [animateValues, delay2, loopEffectEnabled, loopRepeatDelay,]);
     const start2 = (0, react_3.useCallback)(() => {
         if (shouldRunRef.current)
@@ -31020,15 +31151,26 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
     }, [start2, stop, loopPauseOffscreen, hasLoop,]);
     (0, react_2.useEffect)(() => {
         return () => stop();
-    }, []);
+    }, [stop,]);
+    const isIntersectingRef = (0, react_4.useRef)(false);
+    const stopAfterAnimationEnds = (0, react_3.useCallback)(async () => {
+        if (!animationPromiseRef.current)
+            return;
+        await animationPromiseRef.current;
+        if (isIntersectingRef.current)
+            return;
+        stop();
+    }, [stop,]);
     const startAndStopBasedOnIntersection = (0, react_3.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,
     });
@@ -31090,7 +31232,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;
 }
@@ -31102,7 +31244,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))
@@ -31145,14 +31287,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;
@@ -31698,10 +31840,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];
@@ -31894,7 +32036,7 @@ var SynchronousSuspenseErrorBoundary = class extends react_9.Component {
         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),
@@ -31968,7 +32110,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;
     }
@@ -31976,7 +32118,7 @@ function CodeComponentBoundary({ errorMessage, fallback, children, }) {
         fallback,
         children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ClientSideErrorBoundary, {
             fallback,
-            errorMessage,
+            getErrorMessage,
             children,
         }),
     });
@@ -31994,7 +32136,7 @@ var ClientSideErrorBoundary = class extends react_9.Component {
         };
     }
     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() {
@@ -32130,7 +32272,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__ */ (0, jsx_runtime_1.jsx)(CodeComponentBoundary, {
-            errorMessage: getErrorMessageForComponent(scopeId, nodeId),
+            getErrorMessage: getErrorMessageForComponent.bind(null, scopeId, nodeId),
             fallback: null,
             children,
         });
@@ -32967,7 +33109,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,
@@ -33116,6 +33258,15 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         ],
     }), getPortalContainer(portalSelector, inComponent));
 }
+var Instance = /* @__PURE__ */ react_11.default.forwardRef(function Instance2({ Component: Component17, ...props }, ref) {
+    return Component17
+        ? /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+            ...props,
+            ref,
+        })
+        : null;
+});
+exports.Instance = Instance;
 var GracefullyDegradingErrorBoundary = class extends react_9.Component {
     constructor() {
         super(...arguments);
@@ -33124,7 +33275,7 @@ var GracefullyDegradingErrorBoundary = class extends react_9.Component {
         });
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'message', 'Made UI non-interactive due to an error');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'messageFatal', 'Fatal error');
-        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'messageReport', 'If you are the author of this website, please report this issue to the Framer team via https://www.framer.community/');
+        (0, chunk_A2PMVMFI_js_1.__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 {
@@ -33140,7 +33291,7 @@ var GracefullyDegradingErrorBoundary = class extends react_9.Component {
 
 `, 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', {
@@ -34484,7 +34635,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) {
@@ -34672,7 +34823,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);
@@ -34696,7 +34847,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;
@@ -34706,7 +34856,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                             return;
                         return pushHistoryState({
                             routeId: currentRouteId2,
-                            pathVariables: currentPathVariables2,
+                            pathVariables: localeResult.pathVariables,
                             localeId: nextLocale.id,
                             paginationInfo: currentStatePaginationInfo,
                         }, currentPath, ignorePushStateWrapper);
@@ -35387,14 +35537,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;
@@ -35403,19 +35552,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);
@@ -35556,8 +35702,7 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, re
 exports.ResolveLinks = ResolveLinks;
 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);
 });
 exports.Fetcher = Fetcher;
@@ -35591,19 +35736,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);
@@ -36483,7 +36628,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) => {
@@ -39996,7 +40141,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;
@@ -40234,7 +40379,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);
@@ -40279,7 +40424,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)
@@ -40537,14 +40682,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) {
@@ -40557,18 +40697,27 @@ async function setOverflow(blockDocumentScrolling, show, yieldBefore = true) {
 }
 function useOverlayState({ blockDocumentScrolling = true, } = {}) {
     const [showOverlay, setShowOverlay,] = react_11.default.useState(false);
-    const callback = react_11.default.useCallback((show) => {
-        setShowOverlay(show);
-        void setOverflow(blockDocumentScrolling, show);
+    const callback = react_11.default.useCallback(async (show) => {
+        await yieldToMain({
+            priority: 'user-blocking',
+            continueAfter: 'paint',
+        });
+        (0, react_12.startTransition)(() => setShowOverlay(show));
+        setOverflow(blockDocumentScrolling, show);
     }, [blockDocumentScrolling,]);
     react_11.default.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))
@@ -40586,7 +40735,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();
@@ -40704,7 +40853,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;
     });
@@ -40740,65 +40889,45 @@ function getWhereExpressionFromPathVariables(pathVariables, collection) {
     }));
 }
 function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspendedLoadingState = false) {
+    var _a, _b, _c, _d;
+    const [isPending, startLoadingTransition,] = (0, react_16.useTransition)();
     const totalPages = Math.ceil(totalSize / pageSize);
-    const [paginationInfo, setPaginationInfo,] = (0, react_4.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,] = (0, react_4.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 = (0, react_4.useMemo)(() => {
         return {
             currentPage,
             totalPages,
-            isLoading: false,
+            isLoading: isPending,
         };
-    });
-    (0, react_2.useEffect)(() => {
-        (0, react_12.startTransition)(() => {
-            setPaginationInfo((current2) => {
-                if (current2.totalPages === totalPages)
-                    return current2;
-                return {
-                    ...current2,
-                    totalPages,
-                };
-            });
-        });
-    }, [totalPages,]);
+    }, [currentPage, totalPages, isPending,]);
     (0, react_2.useEffect)(() => {
         pushLoadMoreHistory(hash2, paginationInfo);
     }, [hash2, paginationInfo,]);
     const onCanvas = useIsOnFramerCanvas();
-    const loadMore = (0, react_3.useCallback)(() => {
+    const loadMore = (0, react_3.useCallback)(async () => {
         if (onCanvas)
             return;
-        if (paginationInfo.currentPage >= paginationInfo.totalPages)
+        if (currentPage >= totalPages)
             return;
-        if (!paginateWithSuspendedLoadingState) {
-            (0, react_12.startTransition)(() => {
-                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(react_12.startTransition);
+        return renderNextPage(startLoadingTransition);
+    }, [currentPage, totalPages, paginateWithSuspendedLoadingState,]);
     return {
         paginationInfo,
         loadMore,
@@ -40919,15 +41048,16 @@ function useRunCallbackIfPageIsVisible() {
     }, [clean,]);
 }
 function useRunCallbackIfElementIsInView() {
-    const observerRef = (0, react_4.useRef)(null);
+    const observerRefCleanup = (0, react_4.useRef)();
     const isInViewRef = (0, react_4.useRef)(false);
     const callbackRef = (0, react_4.useRef)();
+    const observers2 = (0, react_3.useContext)(SharedIntersectionObserverContext);
     (0, react_2.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 (0, react_3.useCallback)((callback, ref) => {
@@ -40936,23 +41066,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();
@@ -40970,20 +41101,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;
@@ -41039,13 +41177,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) {
@@ -41170,7 +41312,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
         if (shouldWrapWithBoundary) {
             if (appliedOverride.status === 'success') {
                 return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CodeComponentBoundary, {
-                    errorMessage: getErrorMessageForOverride(scopeId, nodeId),
+                    getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId),
                     fallback: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
                         ...props,
                         ref,
@@ -41398,7 +41540,7 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
             });
         });
     }, [animateOnce, threshold, targets, props.variant, scrollDirection, exitTarget,]);
-    useScrollDirectionChange(scrollDirection, setVariant, {
+    useScrollDirectionChange(scrollDirection, (variant) => react_11.default.startTransition(() => setVariant(variant)), {
         enabled: variantAppearEffectEnabled,
         repeat: !animateOnce,
     });
@@ -41407,7 +41549,7 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
             return;
         const useObscuredVariant = !options.targets && !options.scrollDirection;
         const target = useObscuredVariant ? options.obscuredVariantId : void 0;
-        react_11.default.startTransition(() => setVariant(target));
+        (0, react_12.startTransition)(() => setVariant(target));
     });
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
@@ -43251,10 +43393,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);
@@ -43263,10 +43405,13 @@ var FontStore = class {
     constructor() {
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'enabled', false);
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'bySelector', /* @__PURE__ */ new Map());
+        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'loadedSelectors', /* @__PURE__ */ new Set());
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'getGoogleFontsListPromise');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'getFontshareFontsListPromise');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'getBuiltInFontsListPromise');
-        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'loadedSelectors', /* @__PURE__ */ new Set());
+        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'customFontsImportPromise', new Promise((resolve) => {
+            this.resolveCustomFontsImportPromise = resolve;
+        }));
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'local');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'google');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'fontshare');
@@ -43343,9 +43488,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);
@@ -43501,6 +43650,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);
         }
@@ -43777,10 +43932,9 @@ var PlainTextInput = /* @__PURE__ */ (0, react_7.forwardRef)(function FormPlainT
         className: cx(textInputWrapperClassName, inputWrapperClassName, className2),
         ...rest,
         children: type === 'textarea'
-            ? /* @__PURE__ */ (0, react_8.createElement)(motion.textarea, {
+            ? /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.textarea, {
                 ...dataProps,
                 ...eventHandlers,
-                key: defaultValue,
                 required,
                 autoFocus,
                 name: inputName,
@@ -43788,11 +43942,10 @@ var PlainTextInput = /* @__PURE__ */ (0, react_7.forwardRef)(function FormPlainT
                 className: inputClassName,
                 defaultValue,
                 maxLength,
-            })
-            : /* @__PURE__ */ (0, react_8.createElement)(motion.input, {
+            }, defaultValue)
+            : /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.input, {
                 ...dataProps,
                 ...eventHandlers,
-                key: defaultValue,
                 type,
                 required,
                 autoFocus,
@@ -43804,7 +43957,7 @@ var PlainTextInput = /* @__PURE__ */ (0, react_7.forwardRef)(function FormPlainT
                 max,
                 step: step2,
                 maxLength,
-            }),
+            }, defaultValue),
     });
 });
 var iconSize2 = 16;
@@ -45031,7 +45184,7 @@ function processRichTextChildren(element, stylesPresetsClassNames, plainText, an
             children = [anchorLink,];
         }
     }
-    return (0, react_16.cloneElement)(element, props, ...children);
+    return (0, react_17.cloneElement)(element, props, ...children);
 }
 function generateHeadingSlug(children, slugCounters) {
     const headingText = children.map(extractTextFromReactNode).join('');
@@ -45058,7 +45211,7 @@ function extractTextFromReactNode(node) {
 var RichText2 = /* @__PURE__ */ (0, react_7.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 = {
@@ -47109,7 +47262,7 @@ var VectorGroup = /* @__PURE__ */ (() => {
 exports.VectorGroup = VectorGroup;
 var key6 = 'calculatedPaths';
 function withShape(target) {
-    if (!isObject(target))
+    if (!isObject2(target))
         return false;
     return key6 in target;
 }
@@ -47348,7 +47501,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)) {
@@ -47361,7 +47514,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}>`;
     }
@@ -47371,7 +47524,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)) {
@@ -47450,8 +47603,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:*',
@@ -47467,7 +47620,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',
     },