unframer 2.6.1 → 2.6.2

package/esm/framer.js

@@ -18,7 +18,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
+// https :https://app.framerstatic.com/chunk-VBDYROES.js
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { jsx, jsxs, } from 'react/jsx-runtime';
@@ -153,8 +153,23 @@ var MotionGlobalConfig = {
     skipAnimations: false,
     useManualTiming: false,
 };
-var LayoutGroupContext = createContext({});
 var SwitchLayoutGroupContext = createContext({});
+var LayoutGroupContext = createContext({});
+var noop = (any) => any;
+var warning = noop;
+var invariant = noop;
+if (false) {
+    warning = (check, message) => {
+        if (!check && typeof console !== 'undefined') {
+            console.warn(message);
+        }
+    };
+    invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
 var LazyContext = createContext({
     strict: false,
 });
@@ -309,7 +324,11 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
 }
 var { schedule: microtask, cancel: cancelMicrotask, } = createRenderBatcher(queueMicrotask, false);
-function useVisualElement(Component33, visualState, props, createVisualElement2) {
+function isRefObject(ref) {
+    return ref && typeof ref === 'object' && Object.prototype.hasOwnProperty.call(ref, 'current');
+}
+var scheduleHandoffComplete = false;
+function useVisualElement(Component33, visualState, props, createVisualElement2, ProjectionNodeConstructor) {
     const { visualElement: parent, } = useContext3(MotionContext);
     const lazyContext = useContext3(LazyContext);
     const presenceContext = useContext3(PresenceContext);
@@ -327,6 +346,11 @@ function useVisualElement(Component33, visualState, props, createVisualElement2)
         });
     }
     const visualElement = visualElementRef.current;
+    const initialLayoutGroupConfig = useContext3(SwitchLayoutGroupContext);
+    if (visualElement && !visualElement.projection && ProjectionNodeConstructor &&
+        (visualElement.type === 'html' || visualElement.type === 'svg')) {
+        createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+    }
     useInsertionEffect(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
@@ -334,6 +358,7 @@ function useVisualElement(Component33, visualState, props, createVisualElement2)
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
+        visualElement.updateFeatures();
         microtask.render(visualElement.render);
         if (wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
@@ -342,25 +367,58 @@ function useVisualElement(Component33, visualState, props, createVisualElement2)
     useEffect(() => {
         if (!visualElement)
             return;
-        visualElement.updateFeatures();
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
         if (wantsHandoff.current) {
             wantsHandoff.current = false;
-            window.HandoffComplete = true;
+            if (!scheduleHandoffComplete) {
+                scheduleHandoffComplete = true;
+                queueMicrotask(completeHandoff);
+            }
         }
     });
     return visualElement;
 }
-function isRefObject(ref) {
-    return ref && typeof ref === 'object' && Object.prototype.hasOwnProperty.call(ref, 'current');
+function completeHandoff() {
+    window.HandoffComplete = true;
+}
+function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
+    const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, } = props;
+    visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props['data-framer-portal-id'] ? void 0 : getClosestProjectingNode(visualElement.parent));
+    visualElement.projection.setOptions({
+        layoutId,
+        layout: layout2,
+        alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
+        visualElement,
+        scheduleRender: () => visualElement.scheduleRender(),
+        /**
+         * TODO: Update options in an effect. This could be tricky as it'll be too late
+         * to update by the time layout animations run.
+         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+         * ensuring it gets called if there's no potential layout animations.
+         */
+        animationType: typeof layout2 === 'string' ? layout2 : 'both',
+        initialPromotionConfig,
+        layoutScroll,
+        layoutRoot,
+    });
+}
+function getClosestProjectingNode(visualElement) {
+    if (!visualElement)
+        return void 0;
+    return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
 function useMotionRef(visualState, visualElement, externalRef) {
     return useCallback((instance) => {
         instance && visualState.mount && visualState.mount(instance);
         if (visualElement) {
-            instance ? visualElement.mount(instance) : visualElement.unmount();
+            if (instance) {
+                visualElement.mount(instance);
+            }
+            else {
+                visualElement.unmount();
+            }
         }
         if (externalRef) {
             if (typeof externalRef === 'function') {
@@ -442,14 +500,10 @@ function createMotionComponent({ preloadedFeatures: preloadedFeatures2, createVi
         const context = useCreateMotionContext(props);
         const visualState = useVisualState2(props, isStatic);
         if (!isStatic && isBrowser) {
-            context.visualElement = useVisualElement(Component33, visualState, configAndProps, createVisualElement2);
-            const initialLayoutGroupConfig = useContext3(SwitchLayoutGroupContext);
-            const isStrict = useContext3(LazyContext).strict;
-            if (context.visualElement) {
-                MeasureLayout2 = context.visualElement.loadFeatures(
-                // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, isStrict, preloadedFeatures2, initialLayoutGroupConfig);
-            }
+            useStrictMode(configAndProps, preloadedFeatures2);
+            const layoutProjection = getProjectionFunctionality(configAndProps);
+            MeasureLayout2 = layoutProjection.MeasureLayout;
+            context.visualElement = useVisualElement(Component33, visualState, configAndProps, createVisualElement2, layoutProjection.ProjectionNode);
         }
         return jsxs(MotionContext.Provider, {
             value: context,
@@ -469,6 +523,26 @@ function useLayoutId({ layoutId, }) {
     const layoutGroupId = useContext3(LayoutGroupContext).id;
     return layoutGroupId && layoutId !== void 0 ? layoutGroupId + '-' + layoutId : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures2) {
+    const isStrict = useContext3(LazyContext).strict;
+    if (false) {
+        const strictMessage = 'You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.';
+        configAndProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
+    }
+}
+function getProjectionFunctionality(props) {
+    const { drag: drag2, layout: layout2, } = featureDefinitions;
+    if (!drag2 && !layout2)
+        return {};
+    const combined = Object.assign(Object.assign({}, drag2), layout2);
+    return {
+        MeasureLayout: (drag2 === null || drag2 === void 0 ? void 0 : drag2.isEnabled(props)) ||
+            (layout2 === null || layout2 === void 0 ? void 0 : layout2.isEnabled(props))
+            ? combined.MeasureLayout
+            : void 0,
+        ProjectionNode: combined.ProjectionNode,
+    };
+}
 var scaleCorrectors = {};
 function addScaleCorrector(correctors) {
     Object.assign(scaleCorrectors, correctors);
@@ -536,6 +610,9 @@ var singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}
 function isString(v) {
     return typeof v === 'string';
 }
+function isNullish(v) {
+    return v == null;
+}
 var createUnitType = (unit) => ({
     test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,
     parse: parseFloat,
@@ -705,7 +782,6 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     }
     return values;
 }
-var noop = (any) => any;
 var { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : noop, true);
 var isPrimaryPointer = (event) => {
     if (event.pointerType === 'mouse') {
@@ -785,20 +861,6 @@ function isDragActive() {
     openGestureLock();
     return false;
 }
-var warning = noop;
-var invariant = noop;
-if (false) {
-    warning = (check, message) => {
-        if (!check && typeof console !== 'undefined') {
-            console.warn(message);
-        }
-    };
-    invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
 var number = {
     test: (v) => typeof v === 'number',
     parse: parseFloat,
@@ -807,7 +869,8 @@ var number = {
 var alpha = Object.assign(Object.assign({}, number), { transform: (v) => clamp(0, 1, v) });
 var scale = Object.assign(Object.assign({}, number), { default: 1 });
 var isColorString = (type, testProp) => (v) => {
-    return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
+    return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) ||
+        testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp));
 };
 var splitColor = (aName, bName, cName) => (v) => {
     if (!isString(v))
@@ -2704,7 +2767,7 @@ var MotionValue = class {
      * @internal
      */
     constructor(init, options = {}) {
-        this.version = '11.2.10';
+        this.version = '11.2.13';
         this.canTrackVelocity = null;
         this.events = {};
         this.updateAndNotify = (v, render = true) => {
@@ -3297,7 +3360,7 @@ function animateList(visualElement) {
 }
 function createAnimationState(visualElement) {
     let animate22 = animateList(visualElement);
-    const state = createState();
+    let state = createState();
     let isInitialRender = true;
     const buildResolvedTypeValues = (type) => (acc, definition) => {
         var _a;
@@ -3448,6 +3511,10 @@ function createAnimationState(visualElement) {
         setActive,
         setAnimateFunction,
         getState: () => state,
+        reset: () => {
+            state = createState();
+            isInitialRender = true;
+        },
     };
 }
 function checkVariantsDidChange(prev, next) {
@@ -3497,9 +3564,8 @@ var AnimationFeature = class extends Feature {
     }
     updateAnimationControlsSubscription() {
         const { animate: animate22, } = this.node.getProps();
-        this.unmount();
         if (isAnimationControls(animate22)) {
-            this.unmount = animate22.subscribe(this.node);
+            this.unmountControls = animate22.subscribe(this.node);
         }
     }
     /**
@@ -3515,7 +3581,11 @@ var AnimationFeature = class extends Feature {
             this.updateAnimationControlsSubscription();
         }
     }
-    unmount() { }
+    unmount() {
+        var _a;
+        this.node.animationState.reset();
+        (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
 };
 var id = 0;
 var ExitAnimationFeature = class extends Feature {
@@ -3692,7 +3762,7 @@ function updateMotionValuesFromProps(element, next, prev) {
                 willChange.add(key7);
             }
             if (false) {
-                warnOnce(nextValue.version === '11.2.10', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.10 may not work as expected.`);
+                warnOnce(nextValue.version === '11.2.13', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.13 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3729,8 +3799,6 @@ function updateMotionValuesFromProps(element, next, prev) {
 }
 var valueTypes = [...dimensionValueTypes, color, complex,];
 var findValueType = (v) => valueTypes.find(testValueType(v));
-var featureNames = Object.keys(featureDefinitions);
-var numFeatures = featureNames.length;
 var propEventHandlers = [
     'AnimationStart',
     'AnimationComplete',
@@ -3741,11 +3809,6 @@ var propEventHandlers = [
     'LayoutAnimationComplete',
 ];
 var numVariantProps = variantProps.length;
-function getClosestProjectingNode(visualElement) {
-    if (!visualElement)
-        return void 0;
-    return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
-}
 var VisualElement = class {
     /**
      * This method takes React props and returns found MotionValues. For example, HTML
@@ -3837,7 +3900,6 @@ var VisualElement = class {
         this.update(this.props, this.presenceContext);
     }
     unmount() {
-        var _a;
         visualElementStore.delete(this.current);
         this.projection && this.projection.unmount();
         cancelFrame(this.notifyUpdate);
@@ -3849,7 +3911,11 @@ var VisualElement = class {
             this.events[key7].clear();
         }
         for (const key7 in this.features) {
-            (_a = this.features[key7]) === null || _a === void 0 ? void 0 : _a.unmount();
+            const feature = this.features[key7];
+            if (feature) {
+                feature.unmount();
+                feature.isMounted = false;
+            }
         }
         this.current = null;
     }
@@ -3876,60 +3942,25 @@ var VisualElement = class {
         }
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures(_j, isStrict, preloadedFeatures2, initialLayoutGroupConfig) {
-        var { children } = _j, renderedProps = __rest(_j, ["children"]);
-        let ProjectionNodeConstructor;
-        let MeasureLayout2;
-        if (false) {
-            const strictMessage = 'You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.';
-            renderedProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
-        }
-        for (let i = 0; i < numFeatures; i++) {
-            const name = featureNames[i];
-            const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];
-            if (ProjectionNode)
-                ProjectionNodeConstructor = ProjectionNode;
-            if (isEnabled(renderedProps)) {
-                if (!this.features[name] && FeatureConstructor) {
-                    this.features[name] = new FeatureConstructor(this);
-                }
-                if (MeasureLayoutComponent) {
-                    MeasureLayout2 = MeasureLayoutComponent;
-                }
-            }
-        }
-        if ((this.type === 'html' || this.type === 'svg') && !this.projection && ProjectionNodeConstructor) {
-            const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
-            this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps['data-framer-portal-id'] ? void 0 : getClosestProjectingNode(this.parent));
-            this.projection.setOptions({
-                layoutId,
-                layout: layout2,
-                alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
-                visualElement: this,
-                scheduleRender: () => this.scheduleRender(),
-                /**
-                 * TODO: Update options in an effect. This could be tricky as it'll be too late
-                 * to update by the time layout animations run.
-                 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-                 * ensuring it gets called if there's no potential layout animations.
-                 */
-                animationType: typeof layout2 === 'string' ? layout2 : 'both',
-                initialPromotionConfig: initialLayoutGroupConfig,
-                layoutScroll,
-                layoutRoot,
-            });
-        }
-        return MeasureLayout2;
-    }
     updateFeatures() {
-        for (const key7 in this.features) {
-            const feature = this.features[key7];
-            if (feature.isMounted) {
-                feature.update();
+        let key7 = 'animation';
+        for (key7 in featureDefinitions) {
+            const featureDefinition = featureDefinitions[key7];
+            if (!featureDefinition)
+                continue;
+            const { isEnabled, Feature: FeatureConstructor, } = featureDefinition;
+            if (!this.features[key7] && FeatureConstructor && isEnabled(this.props)) {
+                this.features[key7] = new FeatureConstructor(this);
             }
-            else {
-                feature.mount();
-                feature.isMounted = true;
+            if (this.features[key7]) {
+                const feature = this.features[key7];
+                if (feature.isMounted) {
+                    feature.update();
+                }
+                else {
+                    feature.mount();
+                    feature.isMounted = true;
+                }
             }
         }
     }
@@ -5430,7 +5461,7 @@ var VisualElementDragControls = class {
         });
         const measureDragConstraints = () => {
             const { dragConstraints, } = this.getProps();
-            if (isRefObject(dragConstraints)) {
+            if (isRefObject(dragConstraints) && dragConstraints.current) {
                 this.constraints = this.resolveRefConstraints();
             }
         };
@@ -5440,7 +5471,7 @@ var VisualElementDragControls = class {
             projection.root && projection.root.updateScroll();
             projection.updateLayout();
         }
-        measureDragConstraints();
+        frame.read(measureDragConstraints);
         const stopResizeListener = addDomEvent(window, 'resize', () => this.scalePositionWithinConstraints());
         const stopLayoutUpdateListener = projection.addEventListener('didUpdate', ({ delta, hasLayoutChanged, }) => {
             if (this.isDragging && hasLayoutChanged) {
@@ -5975,7 +6006,7 @@ function isOptimisedAppearTree(projectionNode) {
         return false;
     }
 }
-function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+function createProjectionNode2({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             this.id = id2++;
@@ -6002,6 +6033,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.eventHandlers = /* @__PURE__ */ new Map();
             this.hasTreeAnimated = false;
             this.updateScheduled = false;
+            this.scheduleUpdate = () => this.update();
             this.projectionUpdateScheduled = false;
             this.checkUpdateFailed = () => {
                 if (this.isUpdating) {
@@ -6208,7 +6240,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         didUpdate() {
             if (!this.updateScheduled) {
                 this.updateScheduled = true;
-                microtask.read(() => this.update());
+                microtask.read(this.scheduleUpdate);
             }
         }
         clearAllSnapshots() {
@@ -6278,7 +6310,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         resetTransform() {
             if (!resetTransform)
                 return;
-            const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+            const isResetRequested = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout;
             const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
             const transformTemplate2 = this.getTransformTemplate();
             const transformTemplateValue = transformTemplate2 ? transformTemplate2(this.latestValues, '') : void 0;
@@ -6990,7 +7022,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
     return animationType === 'position' ||
         animationType === 'preserve-aspect' && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
 }
-var DocumentProjectionNode = createProjectionNode({
+var DocumentProjectionNode = createProjectionNode2({
     attachResizeListener: (ref, notify2) => addDomEvent(ref, 'resize', notify2),
     measureScroll: () => ({
         x: document.documentElement.scrollLeft || document.body.scrollLeft,
@@ -7001,7 +7033,7 @@ var DocumentProjectionNode = createProjectionNode({
 var rootProjectionNode = {
     current: void 0,
 };
-var HTMLProjectionNode = createProjectionNode({
+var HTMLProjectionNode = createProjectionNode2({
     measureScroll: (instance) => ({
         x: instance.scrollLeft,
         y: instance.scrollTop,
@@ -8990,7 +9022,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.K4XHQ4DX.js
+// https :https://app.framerstatic.com/framer.E3XQPBSV.js
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
@@ -9673,16 +9705,16 @@ var require_browser = __commonJS({
         process5.argv = [];
         process5.version = '';
         process5.versions = {};
-        function noop2() { }
-        process5.on = noop2;
-        process5.addListener = noop2;
-        process5.once = noop2;
-        process5.off = noop2;
-        process5.removeListener = noop2;
-        process5.removeAllListeners = noop2;
-        process5.emit = noop2;
-        process5.prependListener = noop2;
-        process5.prependOnceListener = noop2;
+        function noop3() { }
+        process5.on = noop3;
+        process5.addListener = noop3;
+        process5.once = noop3;
+        process5.off = noop3;
+        process5.removeListener = noop3;
+        process5.removeAllListeners = noop3;
+        process5.emit = noop3;
+        process5.prependListener = noop3;
+        process5.prependOnceListener = noop3;
         process5.listeners = function (name) {
             return [];
         };
@@ -10948,25 +10980,47 @@ function getRouteElementId(route, hash2) {
     return void 0;
 }
 function isBot(userAgent) {
-    return /bot|Mediapartners-Google|Google-PageRenderer|yandex|ia_archiver/iu.test(userAgent);
+    return /bot|-google|google-|yandex|ia_archiver/iu.test(userAgent);
 }
-function yieldToMain(isHighPriority) {
+function yieldToMain(options) {
     if ('scheduler' in window) {
-        const options = {
-            priority: isHighPriority ? 'user-blocking' : 'user-visible',
-        };
         if ('yield' in scheduler)
             return scheduler.yield(options);
         if ('postTask' in scheduler)
             return scheduler.postTask(() => { }, options);
     }
-    if (isHighPriority) {
+    if ((options === null || options === void 0 ? void 0 : options.priority) === 'user-blocking') {
         return Promise.resolve();
     }
     return new Promise((resolve) => {
-        setTimeout(resolve, 0);
+        setTimeout(resolve);
+    });
+}
+function yieldBefore(fn, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield yieldToMain(options);
+        return fn();
     });
 }
+function interactionResponse(options, fallback = true) {
+    return new Promise((resolve) => {
+        if (fallback)
+            setTimeout(resolve, 100);
+        requestAnimationFrame(() => {
+            void yieldBefore(resolve, options);
+        });
+    });
+}
+function useAfterPaintEffect(fn, deps, options) {
+    useLayoutEffect(() => {
+        const runAfterPaint = () => __awaiter(this, void 0, void 0, function* () {
+            yield interactionResponse(options, false);
+            fn();
+        });
+        void runAfterPaint();
+    }, deps);
+}
+var noop2 = () => { };
 function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
@@ -11357,24 +11411,52 @@ function createViewTransitionStylesheet({ exit = defaultPageTransition, enter, }
     document.head.appendChild(styleElement);
 }
 function removeViewTransitionStylesheet() {
-    frame.render(() => {
-        const element = document.getElementById(VIEW_TRANSITION_STYLES_ID);
-        if (element) {
-            document.head.removeChild(element);
-        }
+    requestIdleCallback(() => {
+        frame.render(() => {
+            performance.mark('framer-vt-remove');
+            const element = document.getElementById(VIEW_TRANSITION_STYLES_ID);
+            if (element) {
+                document.head.removeChild(element);
+            }
+        });
     });
 }
 function supportsViewTransitions() {
     return Boolean(document.startViewTransition);
 }
-function startViewTransition(updateView, effect) {
-    if (!supportsViewTransitions()) {
-        return void updateView();
-    }
-    createViewTransitionStylesheet(effect);
-    const transition = document.startViewTransition(updateView);
-    Promise.all([transition.ready, transition.finished,]).then(removeViewTransitionStylesheet).catch(() => { });
-    return transition;
+function addVTStylesheetAfterInRender(effect) {
+    return new Promise((resolve) => {
+        frame.render(() => {
+            performance.mark('framer-vt-style');
+            createViewTransitionStylesheet(effect);
+            resolve();
+        });
+    });
+}
+function startViewTransition(updateView, effect, signal) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!supportsViewTransitions()) {
+            void updateView();
+            return;
+        }
+        yield addVTStylesheetAfterInRender(effect);
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+            return;
+        performance.mark('framer-vt');
+        const transition = document.startViewTransition(() => {
+            performance.mark('framer-vt-freeze');
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+                return;
+            else
+                signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', () => transition.skipTransition());
+            void updateView();
+        });
+        Promise.all([transition.ready, transition.finished,]).then(() => {
+            performance.mark('framer-vt-unfreeze');
+            removeViewTransitionStylesheet();
+        }).catch(() => { });
+        return transition;
+    });
 }
 function useViewTransition() {
     const sitePageEffects = usePageEffects();
@@ -11385,7 +11467,7 @@ function useViewTransition() {
             resolveHasPainted.current = void 0;
         }
     });
-    return useCallback((currentRouteId, nextRouteId, update) => {
+    return useCallback((currentRouteId, nextRouteId, update, yieldBeforeFreezePeriod, signal) => {
         const pageEffect = getPageEffectForRoute(currentRouteId, nextRouteId, sitePageEffects);
         if (pageEffect) {
             const hasPainted = new Promise((resolve) => {
@@ -11395,6 +11477,15 @@ function useViewTransition() {
                 update();
                 yield hasPainted;
             });
+            const yieldBeforeViewTransition = () => __awaiter(this, void 0, void 0, function* () {
+                yield interactionResponse({
+                    priority: 'user-blocking',
+                    signal,
+                }, false).catch(noop2);
+                return startViewTransition(asyncUpdate, pageEffect, signal);
+            });
+            if (yieldBeforeFreezePeriod)
+                return yieldBeforeViewTransition();
             return startViewTransition(asyncUpdate, pageEffect);
         }
         else {
@@ -11402,47 +11493,62 @@ function useViewTransition() {
         }
     }, [sitePageEffects,]);
 }
-function pushRouteState(routeId, route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, localeId, preserveQueryParams, }) {
-    const { path, } = route;
-    if (!path)
-        return;
-    try {
-        const newPath = getPathForRoute(route, {
-            currentRoutePath,
-            currentPathVariables,
-            hash: hash2,
-            pathVariables,
-            preserveQueryParams,
-        });
-        pushHistoryState({
-            routeId,
-            hash: hash2,
-            pathVariables,
-            localeId,
-        }, newPath);
-    }
-    catch (_j) { }
+function pushRouteState(routeId_1, route_1, _j) {
+    return __awaiter(this, arguments, void 0, function* (routeId, route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, localeId, preserveQueryParams, }, enableAsyncURLUpdate = false, ignorePushStateWrapper = false) {
+        const { path, } = route;
+        if (!path)
+            return;
+        try {
+            const newPath = getPathForRoute(route, {
+                currentRoutePath,
+                currentPathVariables,
+                hash: hash2,
+                pathVariables,
+                preserveQueryParams,
+            });
+            const urlUpdatePromise = pushHistoryState({
+                routeId,
+                hash: hash2,
+                pathVariables,
+                localeId,
+            }, newPath, enableAsyncURLUpdate, ignorePushStateWrapper);
+            if (!enableAsyncURLUpdate)
+                yield urlUpdatePromise;
+        }
+        catch (_k) { }
+    });
 }
 function isHistoryState(data2) {
     const routeIdKey = 'routeId';
     return isObject(data2) && isString2(data2[routeIdKey]);
 }
 function replaceHistoryState(data2, url) {
+    performance.mark('framer-history-replace');
     window.history.replaceState(data2, 
     // Second arg is unused and exists for historical purposes only
     // https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState#unused
     '', url);
 }
-function pushHistoryState(data2, url) {
-    window.history.pushState(data2, 
-    // Second arg is unused and exists for historical purposes only
-    // https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#unused
-    '', url);
+function pushHistoryState(data2_1, url_1) {
+    return __awaiter(this, arguments, void 0, function* (data2, url, awaitPaintBeforeUpdate = false, ignorePushStateWrapper = false) {
+        if (awaitPaintBeforeUpdate) {
+            yield interactionResponse({
+                priority: 'user-blocking',
+            });
+        }
+        performance.mark('framer-history-push');
+        const pushState = ignorePushStateWrapper ? window.history.__proto__.pushState : window.history.pushState;
+        pushState.call(window.history, data2, 
+        // Second arg is unused and exists for historical purposes only
+        // https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#unused
+        '', url);
+    });
 }
 function useReplaceInitialState({ disabled, routeId, initialPathVariables, initialLocaleId, }) {
-    React4.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         if (disabled)
             return;
+        performance.mark('framer-history-set-initial-state');
         replaceHistoryState({
             routeId,
             pathVariables: initialPathVariables,
@@ -11452,8 +11558,8 @@ function useReplaceInitialState({ disabled, routeId, initialPathVariables, initi
 }
 function usePopStateHandler(currentRouteId, setCurrentRouteId) {
     const startViewTransition2 = useViewTransition();
-    const viewTransitionReady = React4.useRef(void 0);
-    const popStateHandler = React4.useCallback(({ state, }) => {
+    const viewTransitionReady = useRef(void 0);
+    const popStateHandler = useCallback((_j) => __awaiter(this, [_j], void 0, function* ({ state, }) {
         var _a, _b, _c;
         if (!isObject(state))
             return;
@@ -11463,14 +11569,14 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
         const changeRoute = () => {
             setCurrentRouteId(routeId, isString2(localeId) ? localeId : void 0, isString2(hash2) ? hash2 : void 0, isObject(pathVariables) ? pathVariables : void 0, false, true);
         };
-        const transition = startViewTransition2(currentRouteId.current, routeId, changeRoute);
+        const transition = yield startViewTransition2(currentRouteId.current, routeId, changeRoute, false);
         if (transition) {
             void transition.updateCallbackDone.then((_a = viewTransitionReady.current) === null || _a === void 0 ? void 0 : _a.resolve).catch((_b = viewTransitionReady.current) === null || _b === void 0 ? void 0 : _b.reject);
         }
         else {
             (_c = viewTransitionReady.current) === null || _c === void 0 ? void 0 : _c.resolve();
         }
-    }, [currentRouteId, setCurrentRouteId, startViewTransition2,]);
+    }), [currentRouteId, setCurrentRouteId, startViewTransition2,]);
     const traversalHandler = useCallback((event) => {
         if (event.navigationType !== 'traverse')
             return;
@@ -11488,7 +11594,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
             scroll: 'after-transition',
         });
     }, []);
-    React4.useEffect(() => {
+    useEffect(() => {
         var _a;
         window.addEventListener('popstate', popStateHandler);
         (_a = window.navigation) === null || _a === void 0 ? void 0 : _a.addEventListener('navigate', traversalHandler);
@@ -11561,9 +11667,9 @@ function switchLocale(options) {
         try {
             localStorage.setItem('preferredLocale', options.nextLocale.code);
         }
-        catch (error) { }
+        catch (_j) { }
         try {
-            if (typeof result.path !== 'string') {
+            if (!isString2(result.path)) {
                 throw new Error('Expected result.path to be a string');
             }
             if (result.isMissingInLocale) {
@@ -11571,14 +11677,8 @@ function switchLocale(options) {
                 if (hasRedirect)
                     return;
             }
-            pushHistoryState({
-                routeId: options.routeId,
-                pathVariables: result.pathVariables,
-                localeId: options.nextLocale.id,
-                paginationInfo: window.history.state.paginationInfo,
-            }, result.path);
         }
-        catch (_j) { }
+        catch (_k) { }
         return result;
     });
 }
@@ -11592,16 +11692,193 @@ function pushLoadMoreHistory(hash2, paginationInfo) {
     }
     catch (_j) { }
 }
-function isSamePage(a, b) {
-    if (a.routeId !== b.routeId)
-        return false;
-    if (a.pathVariables === b.pathVariables)
-        return true;
-    const aPathVariables = a.pathVariables || {};
-    const bPathVariables = b.pathVariables || {};
-    return aPathVariables.length === bPathVariables.length &&
-        Object.keys(aPathVariables).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
+function useNativeLoadingSpinner() {
+    const navigationPromise = useRef(Promise.resolve());
+    const navigationController = useRef();
+    const navigateListener = useCallback((navigateEvent) => {
+        if (
+        // we want to intercept non-user triggered replaceState and pushState while the navigation is on-going
+        // but we don't want to intercept e.g. 'traverse' (= browser back/forward) events, as we do this in the usePopStateHandler listener.
+        navigateEvent.userInitiated)
+            return;
+        const controller = navigationController.current;
+        controller === null || controller === void 0 ? void 0 : controller.signal.addEventListener('abort', () => {
+            controller.abort('user aborted');
+        });
+        navigateEvent.intercept({
+            handler: () => navigationPromise.current,
+        });
+    }, []);
+    return useCallback((promise, updateURL, controller) => {
+        if (!window.navigation) {
+            void updateURL();
+            return;
+        }
+        navigationPromise.current = promise;
+        navigationController.current = controller;
+        window.navigation.addEventListener('navigate', navigateListener);
+        void updateURL(true);
+        promise.catch(noop2).finally(() => {
+            window.navigation.removeEventListener('navigate', navigateListener);
+        });
+    }, [navigateListener,]);
+}
+function measureSafe(name, start, end) {
+    try {
+        performance.measure(name, start, end);
+    }
+    catch (e) {
+        console.warn(`Could not measure ${name}`, e);
+    }
 }
+var shouldMark = false;
+function markHydrationStart() {
+    shouldMark = true;
+    performance.mark('framer-hydration-start');
+}
+var routerHydrationInsertionEffectStartHasRun = false;
+var routerHydrationLayoutEffectStartHasRun = false;
+var routerHydrationEffectStartHasRun = false;
+function useMarkRouterEffects() {
+    const hydrationMarkPrefix = 'framer-hydration-router';
+    useInsertionEffect(() => {
+        if (routerHydrationInsertionEffectStartHasRun || !shouldMark)
+            return;
+        routerHydrationInsertionEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}-insertion-effect`);
+    }, []);
+    useLayoutEffect(() => {
+        if (routerHydrationLayoutEffectStartHasRun || !shouldMark)
+            return;
+        routerHydrationLayoutEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}-layout-effect`);
+    }, []);
+    useEffect(() => {
+        if (routerHydrationEffectStartHasRun || !shouldMark)
+            return;
+        routerHydrationEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}-effect`);
+    }, []);
+}
+var hydrationInsertionEffectStartHasRun = false;
+var hydrationLayoutEffectStartHasRun = false;
+var hydrationEffectStartHasRun = false;
+function useMarkSuspenseEffectsStart() {
+    const hydrationMarkPrefix = 'framer-hydration-';
+    const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
+    const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
+    const hydrationBrowserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+    const hydrationRenderEnd = `${hydrationMarkPrefix}render-end`;
+    useInsertionEffect(() => {
+        if (hydrationInsertionEffectStartHasRun || !shouldMark)
+            return;
+        hydrationInsertionEffectStartHasRun = true;
+        performance.mark(hydrationRenderEnd);
+        measureSafe(`${hydrationMarkPrefix}render`, `${hydrationMarkPrefix}start`, hydrationRenderEnd);
+        performance.mark(`${hydrationMarkPrefix}insertion-effects-start`);
+    }, []);
+    useLayoutEffect(() => {
+        if (hydrationLayoutEffectStartHasRun || !shouldMark)
+            return;
+        hydrationLayoutEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}layout-effects-start`);
+        requestAnimationFrame(() => {
+            var _a, _b, _c;
+            performance.mark(hydrationBrowserRenderStart);
+            measureSafe(`${hydrationMarkPrefix}uho`, (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
+                _b !== void 0
+                ? _b
+                : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd)[0]) === null || _c === void 0
+                    ? void 0
+                    : _c.name, hydrationBrowserRenderStart);
+        });
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (hydrationEffectStartHasRun || !shouldMark)
+            return;
+        hydrationEffectStartHasRun = true;
+        const hydrationEffectsStart = `${hydrationMarkPrefix}effects-start`;
+        performance.mark(hydrationEffectsStart);
+        const hasPaintStarted = (_a = performance.getEntriesByName(hydrationBrowserRenderStart)[0]) === null || _a === void 0
+            ? void 0
+            : _a.name;
+        if (!hasPaintStarted) {
+            measureSafe(`${hydrationMarkPrefix}commit`, hydrationLayoutEffectsEnd, hydrationEffectsStart);
+            performance.mark(`${hydrationMarkPrefix}effects-sync`);
+        }
+    }, []);
+    return null;
+}
+var hydrationInsertionEffectHasRun = false;
+var hydrationLayoutEffectHasRun = false;
+var hydrationEffectHasRun = false;
+var hydrationPaintEffectHasRun = false;
+function useMarkSuspenseEffectEnd() {
+    const hydrationMarkPrefix = 'framer-hydration-';
+    const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
+    const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
+    const hydrationBrowserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+    const hydrationStart = `${hydrationMarkPrefix}start`;
+    const hydrationInsertionEffectsEnd = `${hydrationMarkPrefix}insertion-effects-end`;
+    const hydrationFP = `${hydrationMarkPrefix}first-paint`;
+    const hydrationAnimationFrameEnd = `${hydrationMarkPrefix}browser-raf-end`;
+    useInsertionEffect(() => {
+        if (hydrationInsertionEffectHasRun || !shouldMark)
+            return;
+        hydrationInsertionEffectHasRun = true;
+        performance.mark(hydrationInsertionEffectsEnd);
+        measureSafe(`${hydrationMarkPrefix}insertion-effects`, `${hydrationMarkPrefix}insertion-effects-start`, hydrationInsertionEffectsEnd);
+    }, []);
+    useLayoutEffect(() => {
+        if (hydrationLayoutEffectHasRun || !shouldMark)
+            return;
+        hydrationLayoutEffectHasRun = true;
+        performance.mark(hydrationLayoutEffectsEnd);
+        measureSafe(`${hydrationMarkPrefix}layout-effects`, `${hydrationMarkPrefix}layout-effects-start`, hydrationLayoutEffectsEnd);
+        requestAnimationFrame(() => {
+            performance.mark(hydrationAnimationFrameEnd);
+            measureSafe(`${hydrationMarkPrefix}raf`, hydrationBrowserRenderStart, hydrationAnimationFrameEnd);
+        });
+    }, []);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (hydrationEffectHasRun || !shouldMark)
+            return;
+        hydrationEffectHasRun = true;
+        performance.mark(hydrationEffectsEnd);
+        measureSafe(`${hydrationMarkPrefix}effects`, (_b = (_a = performance.getEntriesByName(hydrationFP)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0
+            ? _b
+            : (_c = performance.getEntriesByName(`${hydrationMarkPrefix}effects-start`)[0]) === null || _c === void 0
+                ? void 0
+                : _c.name, hydrationEffectsEnd);
+    }, []);
+    useAfterPaintEffect(() => {
+        if (hydrationPaintEffectHasRun || !shouldMark)
+            return;
+        hydrationPaintEffectHasRun = true;
+        performance.mark(hydrationFP);
+        measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP);
+        measureSafe(`${hydrationMarkPrefix}browser-render`, hydrationAnimationFrameEnd, hydrationFP);
+    }, [], 
+    // user-blocking ensures we get the correct timings here. Other priorites might delay this effect a little bit.
+    {
+        priority: 'user-blocking',
+    });
+    return null;
+}
+function MarkSuspenseEffectsStart() {
+    useMarkSuspenseEffectsStart();
+    return null;
+}
+function MarkSuspenseEffectsEnd() {
+    useMarkSuspenseEffectEnd();
+    return null;
+}
+var MarkSuspenseEffects = {
+    Start: MarkSuspenseEffectsStart,
+    End: MarkSuspenseEffectsEnd,
+};
 var eventsToStop = [
     'mousedown',
     'mouseup',
@@ -11639,104 +11916,44 @@ var stopFn = (event) => {
     event.stopPropagation();
     performance.mark('framer-react-event-handling-prevented');
 };
-if (typeof window !== 'undefined') {
-    window.__FRAMER_TURN_OFF_REACT_EVENT_HANDLING__ = function () {
-        if (!eventsToStop)
-            return;
-        const options = {
-            capture: true,
-        };
-        eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options));
-        window.__FRAMER_TURN_OFF_REACT_EVENT_HANDLING__ = void 0;
-    };
-}
-function turnOnReactEventHandling() {
+var shouldTurnOnEventHandling = false;
+function turnOffReactEventHandling() {
     if (!eventsToStop)
         return;
+    shouldTurnOnEventHandling = true;
+    performance.mark('framer-react-event-handling-start');
     const options = {
         capture: true,
     };
-    eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options));
-    eventsToStop = void 0;
-}
-function measureSafe(name, start, end) {
-    try {
-        performance.measure(name, start, end);
-    }
-    catch (e) {
-        console.warn(`Could not measure ${name}`, e);
-    }
+    eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options));
 }
-var hydrationEffectHasRun = false;
-var hydrationInsertionEffectHasRun = false;
-var hydrationLayoutEffectHasRun = false;
-function OnHydrationEnd({ addHydrationMarkers, turnOffEventHandlerHack, }) {
-    const hydrationMarkPrefix = 'framer-hydration-';
-    const hydrationStart = `${hydrationMarkPrefix}start`;
-    const hydrationRenderEnd = `${hydrationMarkPrefix}render-end`;
-    const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
-    const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
-    const hydrationFP = `${hydrationMarkPrefix}first-paint`;
-    useInsertionEffect(() => {
-        if (hydrationInsertionEffectHasRun)
-            return;
-        hydrationInsertionEffectHasRun = true;
-        if (addHydrationMarkers) {
-            performance.mark(hydrationRenderEnd);
-            measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd);
-        }
-    }, []);
-    useLayoutEffect(() => {
-        if (hydrationLayoutEffectHasRun)
-            return;
-        hydrationLayoutEffectHasRun = true;
-        if (addHydrationMarkers) {
-            performance.mark(hydrationLayoutEffectsEnd);
-            measureSafe(`${hydrationMarkPrefix}layout-effects`, hydrationRenderEnd, hydrationLayoutEffectsEnd);
-        }
-        requestAnimationFrame(() => {
-            var _a, _b, _c;
-            const browserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
-            if (addHydrationMarkers) {
-                performance.mark(browserRenderStart);
-                measureSafe(`${hydrationMarkPrefix}uho`, (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
-                    _b !== void 0
-                    ? _b
-                    : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd)[0]) === null || _c === void 0
-                        ? void 0
-                        : _c.name, browserRenderStart);
-            }
-            setTimeout(() => {
-                if (turnOffEventHandlerHack) {
-                    turnOnReactEventHandling();
-                }
-                if (addHydrationMarkers) {
-                    performance.mark(hydrationFP);
-                    measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP);
-                    measureSafe(`${hydrationMarkPrefix}browser-render`, browserRenderStart, hydrationFP);
-                }
-            }, 0);
-        });
-    }, []);
-    useEffect(() => {
-        var _a, _b, _c;
-        if (hydrationEffectHasRun)
+function TurnOnReactEventHandling() {
+    useAfterPaintEffect(() => {
+        if (!shouldTurnOnEventHandling || !eventsToStop)
             return;
-        hydrationEffectHasRun = true;
-        if (turnOffEventHandlerHack) {
-            turnOnReactEventHandling();
-        }
-        if (addHydrationMarkers) {
-            performance.mark(hydrationEffectsEnd);
-            measureSafe(`${hydrationMarkPrefix}effects`, (_b = (_a = performance.getEntriesByName(hydrationFP)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0
-                ? _b
-                : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd)[0]) === null || _c === void 0
-                    ? void 0
-                    : _c.name, hydrationEffectsEnd);
-        }
-    }, []);
+        const options = {
+            capture: true,
+        };
+        eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options));
+        eventsToStop = void 0;
+        performance.mark('framer-react-event-handling-end');
+    }, [], 
+    // user-blocking ensures this runs right after the paint, so users can interact asap.
+    {
+        priority: 'user-blocking',
+    });
     return null;
 }
+function isSamePage(a, b) {
+    if (a.routeId !== b.routeId)
+        return false;
+    if (a.pathVariables === b.pathVariables)
+        return true;
+    const aPathVariables = a.pathVariables || {};
+    const bPathVariables = b.pathVariables || {};
+    return aPathVariables.length === bPathVariables.length &&
+        Object.keys(aPathVariables).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
+}
 function useGetRouteCallback(routes) {
     return React4.useCallback((routeId) => routes[routeId], [routes,]);
 }
@@ -11836,25 +12053,31 @@ function useLocaleCode() {
 function useLocale() {
     return useLocaleCode();
 }
-function useMonitorNextRender(label) {
+function useMonitorNextPaintAfterRender(label) {
     const startLabel = `start-${label}`;
     const endLabel = `end-${label}`;
     const resolveHasPainted = useRef(void 0);
-    useEffect(() => {
+    useAfterPaintEffect(() => {
         if (resolveHasPainted.current) {
             resolveHasPainted.current();
             resolveHasPainted.current = void 0;
         }
+    }, void 0, 
+    // user-blocking ensures we get the correct timings here. Other priorites might delay this effect a little bit.
+    {
+        priority: 'user-blocking',
     });
     return useCallback(() => {
         const hasPainted = new Promise((resolve) => {
             resolveHasPainted.current = resolve;
         });
         performance.mark(startLabel);
-        hasPainted.then(() => {
+        return hasPainted.finally(() => {
             performance.mark(endLabel);
             performance.measure(label, startLabel, endLabel);
-        }).catch(() => { });
+        }).catch((e) => {
+            console.error(e);
+        });
     }, [label, startLabel, endLabel,]);
 }
 function updateScrollPosition(hash2, smoothScroll, isHistoryTransition) {
@@ -11868,19 +12091,67 @@ function updateScrollPosition(hash2, smoothScroll, isHistoryTransition) {
     window.scrollTo(0, 0);
 }
 function useScheduleRenderSideEffects(dep) {
-    const actions = React4.useRef([]);
-    React4.useLayoutEffect(() => {
+    const actions = useRef([]);
+    useLayoutEffect(() => {
         var _a;
         if (!((_a = actions.current) === null || _a === void 0 ? void 0 : _a.length))
             return;
         actions.current.forEach((action) => action());
         actions.current = [];
     }, [dep,]);
-    return React4.useCallback((cb) => {
+    return useCallback((cb) => {
         actions.current.push(cb);
     }, []);
 }
-function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = [], preserveQueryParams = false, enableImproveInpDuringHydration = false, addHydrationMarkers = false, }) {
+function useNavigationTransition(enableAsyncURLUpdates) {
+    const startNativeSpinner = useNativeLoadingSpinner();
+    const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender('route-change');
+    const navigationController = useRef(void 0);
+    return useCallback((transitionFn_1, updateURL_1, ...args_1) => __awaiter(this, [transitionFn_1, updateURL_1, ...args_1], void 0, function* (transitionFn, updateURL, isAbortable = true) {
+        var _a;
+        if (!enableAsyncURLUpdates) {
+            yield (updateURL === null || updateURL === void 0 ? void 0 : updateURL());
+            transitionFn();
+            void monitorNextPaintAfterRender();
+            return new Promise((resolve) => {
+                resolve();
+            });
+        }
+        (_a = navigationController.current) === null || _a === void 0 ? void 0 : _a.abort();
+        const controller = isAbortable ? new AbortController() : void 0;
+        navigationController.current = controller;
+        const signal = controller === null || controller === void 0 ? void 0 : controller.signal;
+        const nextRender = monitorNextPaintAfterRender();
+        if (!updateURL) {
+            navigationController.current = void 0;
+            transitionFn(signal);
+            return nextRender;
+        }
+        transitionFn(signal);
+        yield interactionResponse({
+            priority: 'user-visible',
+            signal,
+        }).catch(noop2);
+        yield interactionResponse({
+            priority: 'user-visible',
+            signal,
+        }).catch(noop2);
+        let resolveNavigationPromise;
+        const navigationPromise = new Promise((resolve, reject) => {
+            resolveNavigationPromise = resolve;
+            if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+                reject();
+            else
+                signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', reject);
+        });
+        startNativeSpinner(navigationPromise, updateURL, controller);
+        return nextRender.then(() => {
+            resolveNavigationPromise();
+        });
+    }), [enableAsyncURLUpdates, monitorNextPaintAfterRender, startNativeSpinner,]);
+}
+function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = [], preserveQueryParams = false, enableAsyncURLUpdates = false, }) {
+    useMarkRouterEffects();
     useReplaceInitialState({
         disabled: disableHistory,
         routeId: initialRoute,
@@ -11888,12 +12159,14 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         initialLocaleId,
     });
     const startViewTransition2 = useViewTransition();
-    const monitorNextRender = useMonitorNextRender('route-change');
-    const currentRouteRef = React4.useRef(initialRoute);
-    const currentPathVariablesRef = React4.useRef(initialPathVariables);
-    const currentLocaleIdRef = React4.useRef(initialLocaleId);
+    const [dep, forceUpdate,] = useForceUpdate2();
+    const scheduleSideEffect = useScheduleRenderSideEffects(dep);
+    const startNavigation = useNavigationTransition(enableAsyncURLUpdates);
+    const currentRouteRef = useRef(initialRoute);
+    const currentPathVariablesRef = useRef(initialPathVariables);
+    const currentLocaleIdRef = useRef(initialLocaleId);
     const currentLocaleId = currentLocaleIdRef.current;
-    const activeLocale = React4.useMemo(() => {
+    const activeLocale = useMemo(() => {
         var _a;
         return (_a = locales.find(({ id: id3, }) => {
             if (!currentLocaleId)
@@ -11903,8 +12176,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             ? _a
             : null;
     }, [currentLocaleId, locales,]);
-    const [dep, forceUpdate,] = useForceUpdate2();
-    const localeInfo = React4.useMemo(() => {
+    const localeInfo = useMemo(() => {
         return {
             activeLocale,
             locales,
@@ -11937,28 +12209,55 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                     });
                     if (!localeResult)
                         return;
+                    const currentPathVariables2 = currentPathVariablesRef.current;
+                    const currentStatePaginationInfo = window.history.state.paginationInfo;
+                    const currentPath = localeResult.path;
                     currentPathVariablesRef.current = localeResult.pathVariables;
                     currentLocaleIdRef.current = nextLocale.id;
-                    startViewTransition2(currentRouteRef.current, currentRouteId2, () => startTransition2(forceUpdate));
-                    monitorNextRender();
+                    const updateURL = (...args_1) => __awaiter(this, [...args_1], void 0, function* (ignorePushStateWrapper = false) {
+                        if (!currentPath)
+                            return;
+                        return pushHistoryState({
+                            routeId: currentRouteId2,
+                            pathVariables: currentPathVariables2,
+                            localeId: nextLocale.id,
+                            paginationInfo: currentStatePaginationInfo,
+                        }, currentPath, 
+                        // we yield in startNavigation before updating the URL, so yielding again is not needed.
+                        false, ignorePushStateWrapper);
+                    });
+                    void startNavigation(() => {
+                        void startViewTransition2(currentRouteId2, currentRouteId2, () => startTransition2(forceUpdate), enableAsyncURLUpdates);
+                    }, updateURL, false);
                 }
                 catch (_j) { }
             }),
         };
-    }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,]);
-    const scheduleSideEffect = useScheduleRenderSideEffects(dep);
-    const setCurrentRouteId = React4.useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false) => {
+    }, [
+        activeLocale,
+        collectionUtils,
+        enableAsyncURLUpdates,
+        forceUpdate,
+        locales,
+        preserveQueryParams,
+        routes,
+        startNavigation,
+        startViewTransition2,
+    ]);
+    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false, updateURL) => {
+        const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
         currentLocaleIdRef.current = localeId;
         scheduleSideEffect(() => {
             updateScrollPosition(hash2, smoothScroll, isHistoryTransition);
         });
-        startTransition2(forceUpdate);
-        monitorNextRender();
-    }, [forceUpdate, monitorNextRender, scheduleSideEffect,]);
+        void startNavigation((signal) => {
+            void startViewTransition2(currentRouteId2, routeId, () => startTransition2(forceUpdate), enableAsyncURLUpdates, signal);
+        }, updateURL);
+    }, [enableAsyncURLUpdates, forceUpdate, scheduleSideEffect, startNavigation, startViewTransition2,]);
     usePopStateHandler(currentRouteRef, setCurrentRouteId);
-    const navigate = React4.useCallback((routeId, hash2, pathVariables, smoothScroll) => {
+    const navigate = useCallback((routeId, hash2, pathVariables, smoothScroll) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         const newRoute = routes[routeId];
         if (pathVariables) {
@@ -11974,51 +12273,54 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             pathVariables = Object.fromEntries(Object.entries(pathVariables).filter(([key7,]) => inUse.has(key7)));
         }
         const routeElementId = getRouteElementId(newRoute, hash2);
+        const currentPathVariables2 = currentPathVariablesRef.current;
+        const currentRouteLocaleId = currentLocaleIdRef.current;
         if (isSamePage({
             routeId: currentRouteRef.current,
-            pathVariables: currentPathVariablesRef.current,
+            pathVariables: currentPathVariables2,
         }, {
             routeId,
             pathVariables,
         })) {
-            if (((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.hash) !== hash2) {
-                if (!disableHistory) {
-                    const route = routes[routeId];
-                    if (route) {
-                        pushRouteState(routeId, route, {
-                            currentRoutePath: route.path,
-                            currentPathVariables: currentPathVariablesRef.current,
-                            pathVariables,
-                            hash: hash2,
-                            localeId: currentLocaleIdRef.current,
-                            preserveQueryParams,
-                        });
-                    }
-                }
-            }
             updateScrollPosition(routeElementId, smoothScroll, false);
+            const route = routes[routeId];
+            if (((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.hash) === hash2 || disableHistory || !route)
+                return;
+            const updateURLPromise = pushRouteState(routeId, route, {
+                currentRoutePath: route.path,
+                currentPathVariables: currentPathVariables2,
+                pathVariables,
+                hash: hash2,
+                localeId: currentRouteLocaleId,
+                preserveQueryParams,
+            }, 
+            // we want to yield as this is called synchronusly from an user interaction.
+            enableAsyncURLUpdates);
+            if (!enableAsyncURLUpdates)
+                return yield updateURLPromise;
             return;
         }
         if (!newRoute)
             return;
-        if (!disableHistory) {
-            const currentRoute = routes[currentRouteRef.current];
-            pushRouteState(routeId, newRoute, {
+        const currentRoute = routes[currentRouteRef.current];
+        const updateURL = (...args_1) => __awaiter(this, [...args_1], void 0, function* (ignorePushStateWrapper = false) {
+            return pushRouteState(routeId, newRoute, {
                 currentRoutePath: currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.path,
-                currentPathVariables: currentPathVariablesRef.current,
+                currentPathVariables: currentPathVariables2,
                 hash: hash2,
                 pathVariables,
-                localeId: currentLocaleIdRef.current,
+                localeId: currentRouteLocaleId,
                 preserveQueryParams,
-            });
-        }
-        const changeRoute = () => setCurrentRouteId(routeId, currentLocaleIdRef.current, routeElementId, pathVariables, smoothScroll, false);
-        startViewTransition2(currentRouteRef.current, routeId, changeRoute);
-    }, [routes, disableHistory, setCurrentRouteId, startViewTransition2, preserveQueryParams,]);
+            }, 
+            // we yield in startNavigation before updating the URL, so yielding again is not needed.
+            false, ignorePushStateWrapper);
+        });
+        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathVariables, smoothScroll, false, disableHistory ? void 0 : updateURL);
+    }), [routes, setCurrentRouteId, disableHistory, preserveQueryParams, enableAsyncURLUpdates,]);
     const getRoute = useGetRouteCallback(routes);
     const currentRouteId = currentRouteRef.current;
     const currentPathVariables = currentPathVariablesRef.current;
-    const api = React4.useMemo(() => ({
+    const api = useMemo(() => ({
         navigate,
         getRoute,
         currentRouteId,
@@ -12046,16 +12348,17 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                         notFoundPage,
                         defaultPageStyle,
                         forceUpdateKey: dep,
-                        children: jsx(React4.Fragment, {
-                            children: pageExistsInCurrentLocale
-                                ? renderPage(current.page, defaultPageStyle)
-                                : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                        children: jsxs(Fragment, {
+                            children: [
+                                jsx(MarkSuspenseEffects.Start, {}),
+                                pageExistsInCurrentLocale
+                                    ? renderPage(current.page, defaultPageStyle)
+                                    : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                            ],
                         }, remountKey),
                     }),
-                    jsx(OnHydrationEnd, {
-                        addHydrationMarkers,
-                        turnOffEventHandlerHack: enableImproveInpDuringHydration,
-                    }),
+                    jsx(TurnOnReactEventHandling, {}),
+                    jsx(MarkSuspenseEffects.End, {}),
                 ],
             }),
         }),
@@ -14226,8 +14529,8 @@ var ObjectInterpolation = (valueInterpolation) => {
         difference(from, to) {
             let sum = 0;
             for (const key7 in from) {
-                const difference = valueInterpolation.difference(from[key7], to[key7]);
-                sum += Math.pow(difference, 2);
+                const difference2 = valueInterpolation.difference(from[key7], to[key7]);
+                sum += Math.pow(difference2, 2);
             }
             return Math.sqrt(sum);
         },
@@ -17212,6 +17515,7 @@ var richTextCSSRules = [
         h6.framer-text:not(:first-child),
         ol.framer-text:not(:first-child),
         ul.framer-text:not(:first-child),
+        blockquote.framer-text:not(:first-child),
         .framer-image.framer-text:not(:first-child) {
             margin-top: var(--framer-blockquote-paragraph-spacing, var(--framer-paragraph-spacing, 0));
         }
@@ -17249,13 +17553,13 @@ var richTextCSSRules = [
     `
         code.framer-text,
         code.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-code-text-color, var(--framer-text-color, #000));
-            font-size: calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1));
-            letter-spacing: var(--framer-letter-spacing, 0);
-            line-height: var(--framer-line-height, 1.2em);
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0));
+            line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em));
         }
     `, /* css */
     `
@@ -17270,13 +17574,13 @@ var richTextCSSRules = [
     `
         a.framer-text,
         a.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-link-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-link-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-text-color, var(--framer-text-color, #000));
-            font-size: calc(var(--framer-link-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
-            text-transform: var(--framer-link-text-transform, var(--framer-text-transform, none));
-            text-decoration: var(--framer-link-text-decoration, var(--framer-text-decoration, none));
+            font-family: var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
+            text-decoration: var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
         }
@@ -17284,33 +17588,33 @@ var richTextCSSRules = [
     `
         code.framer-text a.framer-text,
         code.framer-text a.framer-text span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)));
-            font-size: calc(var(--framer-link-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
         }
     `, /* css */
     `
         a.framer-text:hover,
         a.framer-text:hover span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-link-hover-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
-            font-style: var(--framer-link-hover-font-style, var(--framer-link-font-style, var(--framer-font-style, normal)));
-            font-weight: var(--framer-link-hover-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)));
-            color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
-            font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
-            text-transform: var(--framer-link-hover-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
-            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none)));
+            font-family: var(--framer-link-hover-font-family, var(--framer-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))));
+            font-style: var(--framer-link-hover-font-style, var(--framer-blockquote-font-style, var(--framer-link-font-style, var(--framer-font-style, normal))));
+            font-weight: var(--framer-link-hover-font-weight, var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))));
+            color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
+            font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
+            text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            text-decoration: var(--framer-link-hover-text-decoration, var(--framer-blockquote-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration, none))));
         }
     `, /* css */
     `
         code.framer-text a.framer-text:hover,
         code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
-            font-style: var(--framer-code-font-style, var(--framer-font-style, normal));
-            font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
-            color: var(--framer-link-hover-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))));
-            font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
+            font-family: var(--framer-blockquote-font-family, var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)));
+            font-style: var(--framer-blockquote-font-style, var(--framer-code-font-style, var(--framer-font-style, normal)));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-code-font-weight, var(--framer-font-weight, 400)));
+            color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))));
+            font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
         }
     `, /* css */
     `
@@ -17802,8 +18106,8 @@ function isUndefined(value) {
 function isNull(value) {
     return value === null;
 }
-function isNullish(value) {
-    return isUndefined(value) || isNull(value);
+function isNullish2(value) {
+    return value == null;
 }
 function isValidDate(value) {
     return value instanceof Date && !isNaN(value.getTime());
@@ -19413,148 +19717,6 @@ var reactPropsRegex = /^(?:children|dangerouslySetInnerHTML|key|ref|autoFocus|de
 var isPropValid = /* @__PURE__ */ memoize((prop) => reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91
 /* Z+1 */
 );
-var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0);
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-var useLibraryFeatures = () => {
-    const context = React4.useContext(LibraryFeaturesContext);
-    return context !== null && context !== void 0 ? context : {};
-};
-var import_process = __toESM(require_browser(), 1);
-var safeNavigator = typeof navigator !== 'undefined' ? navigator : void 0;
-var isBrowser2 = () => typeof document === 'object';
-var isWebKit = () => {
-    var _a;
-    return ((_a = safeNavigator) == null ? void 0 : _a.userAgent.includes('AppleWebKit/')) && !isChrome() && !isEdge();
-};
-var webkitVersion = () => {
-    let version2 = -1;
-    const regexp = /AppleWebKit\/([\d.]+)/;
-    const result = safeNavigator && regexp.exec(safeNavigator.userAgent);
-    if (result && result[1]) {
-        version2 = parseFloat(result[1]);
-    }
-    return version2;
-};
-var safariVersion = () => {
-    let version2 = -1;
-    const regexp = /Version\/([\d.]+)/;
-    const result = safeNavigator && regexp.exec(safeNavigator.userAgent);
-    if (result && result[1]) {
-        version2 = parseFloat(result[1]);
-    }
-    return version2;
-};
-var isChrome = () => safeNavigator && /Chrome/.test(safeNavigator.userAgent) && /Google Inc/.test(safeNavigator.vendor) && !isEdge();
-var isSafari = () => safeNavigator && /Safari/.test(safeNavigator.userAgent) && /Apple Computer/.test(safeNavigator.vendor);
-var isFirefox = () => safeNavigator && /Firefox\/\d+\.\d+$/.test(safeNavigator.userAgent);
-var isFramerX = () => safeNavigator && /FramerX/.test(safeNavigator.userAgent);
-var isEdge = () => safeNavigator && /Edg\//.test(safeNavigator.userAgent);
-var isAndroid = () => safeNavigator && /android/i.test(safeNavigator.userAgent);
-var isIOS = () => safeNavigator && /iPhone|iPod|iPad/i.test(safeNavigator.platform);
-var isMacOS = () => safeNavigator && /Mac/.test(safeNavigator.platform);
-var isWindows = () => safeNavigator && /Win/.test(safeNavigator.platform);
-var isTouch = () => safeWindow.ontouchstart === null && safeWindow.ontouchmove === null && safeWindow.ontouchend === null;
-var isDesktop = () => deviceType() === 'desktop';
-var isPhone = () => deviceType() === 'phone';
-var isTablet = () => deviceType() === 'tablet';
-var isMobile = () => isPhone() || isTablet();
-var isFileUrl = (url) => url.startsWith('file://');
-var isDataUrl = (url) => url.startsWith('data:');
-var isTest = () => import_process.default.env.NODE_ENV === 'test';
-var isRelativeUrl = (url) => !/^[a-z]{1,8}:\/\/.*$/i.test(url);
-var isLocalServerUrl = (url) => /[a-z]{1,8}:\/\/127\.0\.0\.1/i.test(url) || /[a-zA-Z]{1,8}:\/\/localhost/.test(url);
-var isLocalUrl = (url) => {
-    if (isFileUrl(url))
-        return true;
-    if (isLocalServerUrl(url))
-        return true;
-    return false;
-};
-var isLocalAssetUrl = (url, baseUrl) => {
-    if (baseUrl === null)
-        baseUrl = safeWindow.location.href;
-    if (isDataUrl(url))
-        return false;
-    if (isLocalUrl(url))
-        return true;
-    if (isRelativeUrl(url) && isLocalUrl(baseUrl))
-        return true;
-    return false;
-};
-var devicePixelRatio2 = () => safeWindow.devicePixelRatio;
-var isJP2Supported = function () {
-    if (isFirefox())
-        return false;
-    return isWebKit();
-};
-var isWebPSupported = () => isChrome();
-var deviceType = () => {
-    if (safeNavigator && /tablet|iPad|Nexus 9/i.test(safeNavigator.userAgent))
-        return 'tablet';
-    if (safeNavigator && /mobi/i.test(safeNavigator.userAgent))
-        return 'phone';
-    return 'desktop';
-};
-var deviceOS = () => {
-    if (isMacOS())
-        return 'macos';
-    if (isIOS())
-        return 'ios';
-    if (isAndroid())
-        return 'android';
-    if (isWindows())
-        return 'windows';
-};
-var deviceFont = (os) => {
-    if (!os) {
-        os = deviceOS();
-    }
-    const fonts = {
-        apple: '-apple-system, BlinkMacSystemFont, SF Pro Text, SF UI Text, Helvetica Neue',
-        google: 'Roboto, Helvetica Neue',
-        microsoft: 'Segoe UI, Helvetica Neue',
-    };
-    if (os === 'macos')
-        return fonts.apple;
-    if (os === 'ios')
-        return fonts.apple;
-    if (os === 'android')
-        return fonts.google;
-    if (os === 'windows')
-        return fonts.microsoft;
-    return fonts.apple;
-};
-var environment = {
-    isWebKit,
-    webkitVersion,
-    isChrome,
-    isSafari,
-    isFirefox,
-    isFramerX,
-    isEdge,
-    isAndroid,
-    isIOS,
-    isMacOS,
-    isWindows,
-    isTouch,
-    isDesktop,
-    isPhone,
-    isTablet,
-    isMobile,
-    isFileUrl,
-    isDataUrl,
-    isRelativeUrl,
-    isLocalServerUrl,
-    isLocalUrl,
-    isLocalAssetUrl,
-    devicePixelRatio: devicePixelRatio2,
-    isJP2Supported,
-    isWebPSupported,
-    deviceType,
-    deviceOS,
-    deviceFont,
-    safariVersion,
-};
 var mockWithWarning = (message) => {
     return () => {
         warnOnce2(message);
@@ -19688,39 +19850,12 @@ function getImageStyle(image, containerSize) {
 function StaticImage({ image, containerSize, nodeId, alt, }) {
     const source = runtime.useImageSource(image, containerSize, nodeId);
     const imageStyle = getImageStyle(image, containerSize);
-    const [measuredSizes, setMeasuredSizes,] = React4.useState();
     const imageRef = React4.useRef(null);
-    const libraryFeatures = useLibraryFeatures();
-    React4.useEffect(() => {
-        if (!libraryFeatures.imgSizesWorkaroundEnabled)
-            return;
-        const imageElement = imageRef.current;
-        if (!imageElement)
-            return;
-        if (isTest())
-            return;
-        if (!image.sizes)
-            return;
-        const smartComponentParent = imageElement.closest('[data-framer-name]');
-        if (!smartComponentParent)
-            return;
-        const imageNodeWidth = imageElement.clientWidth;
-        const currentSizes = Number(image.sizes.replace('px', ''));
-        if (
-        // If we successfully parsed `sizes`, and...
-        !isNaN(currentSizes) &&
-            // ...if the image node is smaller than the currently set `sizes`
-            // attribute,..
-            imageNodeWidth < currentSizes) {
-            return;
-        }
-        setMeasuredSizes(imageNodeWidth + 'px');
-    }, [image.sizes,]);
     return /* @__PURE__ */ jsx('img', {
         ref: imageRef,
         decoding: 'async',
         loading: image.loading,
-        sizes: measuredSizes !== null && measuredSizes !== void 0 ? measuredSizes : image.sizes,
+        sizes: image.sizes,
         srcSet: image.srcSet,
         src: source,
         alt: alt !== null && alt !== void 0 ? alt : image.alt,
@@ -19911,6 +20046,142 @@ function Border(props) {
 function htmlElementAsMotionComponent(asElem) {
     return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
+var import_process = __toESM(require_browser(), 1);
+var safeNavigator = typeof navigator !== 'undefined' ? navigator : void 0;
+var isBrowser2 = () => typeof document === 'object';
+var isWebKit = () => {
+    var _a;
+    return ((_a = safeNavigator) == null ? void 0 : _a.userAgent.includes('AppleWebKit/')) && !isChrome() && !isEdge();
+};
+var webkitVersion = () => {
+    let version2 = -1;
+    const regexp = /AppleWebKit\/([\d.]+)/;
+    const result = safeNavigator && regexp.exec(safeNavigator.userAgent);
+    if (result && result[1]) {
+        version2 = parseFloat(result[1]);
+    }
+    return version2;
+};
+var safariVersion = () => {
+    let version2 = -1;
+    const regexp = /Version\/([\d.]+)/;
+    const result = safeNavigator && regexp.exec(safeNavigator.userAgent);
+    if (result && result[1]) {
+        version2 = parseFloat(result[1]);
+    }
+    return version2;
+};
+var isChrome = () => safeNavigator && /Chrome/.test(safeNavigator.userAgent) && /Google Inc/.test(safeNavigator.vendor) && !isEdge();
+var isSafari = () => safeNavigator && /Safari/.test(safeNavigator.userAgent) && /Apple Computer/.test(safeNavigator.vendor);
+var isFirefox = () => safeNavigator && /Firefox\/\d+\.\d+$/.test(safeNavigator.userAgent);
+var isFramerX = () => safeNavigator && /FramerX/.test(safeNavigator.userAgent);
+var isEdge = () => safeNavigator && /Edg\//.test(safeNavigator.userAgent);
+var isAndroid = () => safeNavigator && /android/i.test(safeNavigator.userAgent);
+var isIOS = () => safeNavigator && /iPhone|iPod|iPad/i.test(safeNavigator.platform);
+var isMacOS = () => safeNavigator && /Mac/.test(safeNavigator.platform);
+var isWindows = () => safeNavigator && /Win/.test(safeNavigator.platform);
+var isTouch = () => safeWindow.ontouchstart === null && safeWindow.ontouchmove === null && safeWindow.ontouchend === null;
+var isDesktop = () => deviceType() === 'desktop';
+var isPhone = () => deviceType() === 'phone';
+var isTablet = () => deviceType() === 'tablet';
+var isMobile = () => isPhone() || isTablet();
+var isFileUrl = (url) => url.startsWith('file://');
+var isDataUrl = (url) => url.startsWith('data:');
+var isTest = () => import_process.default.env.NODE_ENV === 'test';
+var isRelativeUrl = (url) => !/^[a-z]{1,8}:\/\/.*$/i.test(url);
+var isLocalServerUrl = (url) => /[a-z]{1,8}:\/\/127\.0\.0\.1/i.test(url) || /[a-zA-Z]{1,8}:\/\/localhost/.test(url);
+var isLocalUrl = (url) => {
+    if (isFileUrl(url))
+        return true;
+    if (isLocalServerUrl(url))
+        return true;
+    return false;
+};
+var isLocalAssetUrl = (url, baseUrl) => {
+    if (baseUrl === null)
+        baseUrl = safeWindow.location.href;
+    if (isDataUrl(url))
+        return false;
+    if (isLocalUrl(url))
+        return true;
+    if (isRelativeUrl(url) && isLocalUrl(baseUrl))
+        return true;
+    return false;
+};
+var devicePixelRatio2 = () => safeWindow.devicePixelRatio;
+var isJP2Supported = function () {
+    if (isFirefox())
+        return false;
+    return isWebKit();
+};
+var isWebPSupported = () => isChrome();
+var deviceType = () => {
+    if (safeNavigator && /tablet|iPad|Nexus 9/i.test(safeNavigator.userAgent))
+        return 'tablet';
+    if (safeNavigator && /mobi/i.test(safeNavigator.userAgent))
+        return 'phone';
+    return 'desktop';
+};
+var deviceOS = () => {
+    if (isMacOS())
+        return 'macos';
+    if (isIOS())
+        return 'ios';
+    if (isAndroid())
+        return 'android';
+    if (isWindows())
+        return 'windows';
+};
+var deviceFont = (os) => {
+    if (!os) {
+        os = deviceOS();
+    }
+    const fonts = {
+        apple: '-apple-system, BlinkMacSystemFont, SF Pro Text, SF UI Text, Helvetica Neue',
+        google: 'Roboto, Helvetica Neue',
+        microsoft: 'Segoe UI, Helvetica Neue',
+    };
+    if (os === 'macos')
+        return fonts.apple;
+    if (os === 'ios')
+        return fonts.apple;
+    if (os === 'android')
+        return fonts.google;
+    if (os === 'windows')
+        return fonts.microsoft;
+    return fonts.apple;
+};
+var environment = {
+    isWebKit,
+    webkitVersion,
+    isChrome,
+    isSafari,
+    isFirefox,
+    isFramerX,
+    isEdge,
+    isAndroid,
+    isIOS,
+    isMacOS,
+    isWindows,
+    isTouch,
+    isDesktop,
+    isPhone,
+    isTablet,
+    isMobile,
+    isFileUrl,
+    isDataUrl,
+    isRelativeUrl,
+    isLocalServerUrl,
+    isLocalUrl,
+    isLocalAssetUrl,
+    devicePixelRatio: devicePixelRatio2,
+    isJP2Supported,
+    isWebPSupported,
+    deviceType,
+    deviceOS,
+    deviceFont,
+    safariVersion,
+};
 var isChrome2 = /* @__PURE__ */ isChrome();
 function layoutHintDataPropsForCenter(center) {
     const props = {};
@@ -29303,6 +29574,9 @@ var LazyValue = class {
         };
         return promise;
     }
+    waitFor() {
+        return this.resolver();
+    }
     /** Synchronously read the value after calling preload() before. */
     read() {
         const status = this.status;
@@ -29321,6 +29595,12 @@ var LazyValue = class {
         }
     }
 };
+var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0);
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+var useLibraryFeatures = () => {
+    const context = React4.useContext(LibraryFeaturesContext);
+    return context !== null && context !== void 0 ? context : {};
+};
 function findAnchorElement(target, withinElement) {
     if (target instanceof HTMLAnchorElement) {
         return target;
@@ -29661,7 +29941,7 @@ function createOnClickLinkHandler(router, routeId, elementId, combinedPathVariab
         event.preventDefault();
         const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, routeId);
         if (route && isLazyComponentType(route == null ? void 0 : route.page)) {
-            yield route.page.preload();
+            void route.page.preload();
         }
         (_b = router.navigate) == null ? void 0 : _b.call(router, routeId, elementId, combinedPathVariables, smoothScroll);
     });
@@ -30103,7 +30383,300 @@ function responseHasError(response) {
     return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error) &&
         'message' in response.error && typeof response.error.message === 'string';
 }
-function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, enableImproveInpDuringHydration, addHydrationMarkers = false, }) {
+var loadingFetchResult = {
+    status: 'loading',
+    data: void 0,
+};
+function isValidURL2(href) {
+    try {
+        const url = new URL(href);
+        return Boolean(url.protocol);
+    }
+    catch (_j) { }
+}
+function isCacheExpired(insertionTimestamp, cacheDuration) {
+    const cacheDurationMs = cacheDuration * 1e3;
+    const currentTimestamp = Date.now();
+    const expirationTimestamp = insertionTimestamp + cacheDurationMs;
+    return currentTimestamp >= expirationTimestamp;
+}
+var noop22 = () => { };
+var _responseValues;
+var _subscribers;
+var _cacheDurations;
+var _cachedAt;
+var _staleQueriesInterval;
+var _FetchClient = class {
+    constructor() {
+        __privateAdd(this, _responseValues, /* @__PURE__ */ new Map());
+        __privateAdd(this, _subscribers, /* @__PURE__ */ new Map());
+        __privateAdd(this, _cacheDurations, /* @__PURE__ */ new Map());
+        __privateAdd(this, _cachedAt, /* @__PURE__ */ new Map());
+        __privateAdd(this, _staleQueriesInterval, void 0);
+        __publicField(this, 'checkForStaleQueries', () => {
+            const activeURLS = __privateGet(this, _subscribers).keys();
+            for (const url of activeURLS) {
+                const cachedAt = __privateGet(this, _cachedAt).get(url);
+                const cacheDuration = __privateGet(this, _cacheDurations).get(url);
+                if (!cacheDuration || !cachedAt)
+                    continue;
+                void this.fetchWithCache(url, cacheDuration);
+            }
+        });
+        __publicField(this, 'persistCache', debounce(() => {
+            const data2 = {};
+            for (const [url, responseValue,] of __privateGet(this, _responseValues)) {
+                if (!responseValue)
+                    continue;
+                if (responseValue.status !== 'success')
+                    continue;
+                const cacheConfig = __privateGet(this, _cacheDurations).get(url);
+                if (!cacheConfig || cacheConfig === 0)
+                    continue;
+                const storedAt = __privateGet(this, _cachedAt).get(url);
+                if (!storedAt)
+                    continue;
+                if (storedAt && isCacheExpired(storedAt, cacheConfig)) {
+                    continue;
+                }
+                data2[url] = [storedAt, cacheConfig, responseValue.data,];
+            }
+            localStorage.setItem(_FetchClient.cacheKey, JSON.stringify(data2));
+        }, 500));
+        this.hydrateCache();
+    }
+    hydrateCache() {
+        try {
+            const rawData = localStorage.getItem(_FetchClient.cacheKey);
+            if (!rawData)
+                return;
+            const data2 = JSON.parse(rawData);
+            if (typeof data2 !== 'object')
+                throw new Error('Invalid cache data');
+            for (const url in data2) {
+                const cached = data2[url];
+                if (!Array.isArray(cached) || cached.length !== 3)
+                    throw new Error('Invalid cache data');
+                const [storedAt, cacheDuration, cachedData,] = cached;
+                if (isCacheExpired(storedAt, cacheDuration))
+                    continue;
+                __privateGet(this, _cachedAt).set(url, storedAt);
+                __privateGet(this, _cacheDurations).set(url, cacheDuration);
+                __privateGet(this, _responseValues).set(url, {
+                    status: 'success',
+                    data: cachedData,
+                });
+            }
+        }
+        catch (error) {
+            localStorage.removeItem(_FetchClient.cacheKey);
+        }
+    }
+    setResponseValue(url, value) {
+        __privateGet(this, _responseValues).set(url, value);
+        this.persistCache();
+        const subscribers = __privateGet(this, _subscribers).get(url);
+        if (!subscribers)
+            return;
+        for (const subscriber of subscribers) {
+            subscriber();
+        }
+    }
+    prefetch(url, cacheDuration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!isValidURL2(url))
+                return;
+            return this.fetchWithCache(url, cacheDuration);
+        });
+    }
+    fetchWithCache(url, cacheDuration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const cachedAt = __privateGet(this, _cachedAt).get(url);
+                const hasExpiredCache = cachedAt && isCacheExpired(cachedAt, cacheDuration);
+                if (__privateGet(this, _responseValues).has(url) && !hasExpiredCache) {
+                    return;
+                }
+                const currentValue = __privateGet(this, _responseValues).get(url);
+                if (!currentValue) {
+                    this.setResponseValue(url, loadingFetchResult);
+                }
+                const response = yield fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        // Default to JSON always or no?
+                        'Content-Type': 'application/json',
+                    },
+                });
+                if (!response.ok) {
+                    this.setResponseValue(url, {
+                        status: 'error',
+                        error: new Error('Invalid Response Status'),
+                        data: void 0,
+                    });
+                    return;
+                }
+                const value = yield response.json();
+                this.setResponseValue(url, {
+                    status: 'success',
+                    data: value,
+                });
+                __privateGet(this, _cachedAt).set(url, Date.now());
+            }
+            catch (error) {
+                this.setResponseValue(url, {
+                    status: 'error',
+                    error,
+                    data: void 0,
+                });
+            }
+        });
+    }
+    getValue(url) {
+        return __privateGet(this, _responseValues).get(url);
+    }
+    subscribe(url, callback, cacheDuration) {
+        var _j;
+        if (!isValidURL2(url))
+            return noop22;
+        const cacheDurationForUrl = __privateGet(this, _cacheDurations).get(url);
+        if (!cacheDurationForUrl || cacheDuration < cacheDurationForUrl) {
+            __privateGet(this, _cacheDurations).set(url, cacheDuration);
+        }
+        if (!__privateGet(this, _staleQueriesInterval)) {
+            __privateSet(this, _staleQueriesInterval, safeWindow.setInterval(this.checkForStaleQueries, 5e3));
+        }
+        void this.fetchWithCache(url, cacheDuration);
+        const subscribers = (_j = __privateGet(this, _subscribers).get(url)) !== null && _j !== void 0 ? _j : new Set();
+        subscribers.add(callback);
+        __privateGet(this, _subscribers).set(url, subscribers);
+        return () => {
+            const nextSubscribers = __privateGet(this, _subscribers).get(url);
+            if (!nextSubscribers)
+                return;
+            nextSubscribers.delete(callback);
+            if (nextSubscribers.size === 0) {
+                __privateGet(this, _subscribers).delete(url);
+            }
+            if (__privateGet(this, _subscribers).size === 0) {
+                safeWindow.clearInterval(__privateGet(this, _staleQueriesInterval));
+                __privateSet(this, _staleQueriesInterval, void 0);
+            }
+        };
+    }
+};
+var FetchClient = _FetchClient;
+_responseValues = /* @__PURE__ */ new WeakMap();
+_subscribers = /* @__PURE__ */ new WeakMap();
+_cacheDurations = /* @__PURE__ */ new WeakMap();
+_cachedAt = /* @__PURE__ */ new WeakMap();
+_staleQueriesInterval = /* @__PURE__ */ new WeakMap();
+__publicField(FetchClient, 'cacheKey', 'framer-fetch-cache');
+var FetchClientContext = React2.createContext(void 0);
+var FetchClientProvider = ({ children, }) => {
+    const [client,] = React2.useState(() => new FetchClient());
+    return /* @__PURE__ */ jsx(FetchClientContext.Provider, {
+        value: client,
+        children,
+    });
+};
+function difference(array1, array2) {
+    return array1.filter((x) => !array2.includes(x));
+}
+var _subscriptions;
+var _subscribers2;
+var _cachedResults;
+var _queryResult;
+var RequestsObserver = class {
+    constructor(client) {
+        this.client = client;
+        __privateAdd(this, _subscriptions, /* @__PURE__ */ new Map());
+        __privateAdd(this, _subscribers2, /* @__PURE__ */ new Set());
+        __privateAdd(this, _cachedResults, /* @__PURE__ */ new WeakSet());
+        __privateAdd(this, _queryResult, /* @__PURE__ */ new Map());
+        __publicField(this, 'onFetchResultUpdate', () => {
+            const results = /* @__PURE__ */ new Map();
+            let hasChange = false;
+            const subscribedUrls = __privateGet(this, _subscriptions).keys();
+            for (const url of subscribedUrls) {
+                const result = this.client.getValue(url);
+                if (!result)
+                    return;
+                results.set(url, result);
+                if (!__privateGet(this, _cachedResults).has(result)) {
+                    __privateGet(this, _cachedResults).add(result);
+                    hasChange = true;
+                }
+            }
+            if (!hasChange) {
+                return;
+            }
+            __privateSet(this, _queryResult, results);
+            for (const subscriber of __privateGet(this, _subscribers2)) {
+                subscriber();
+            }
+        });
+        __publicField(this, 'subscribe', (callback) => {
+            __privateGet(this, _subscribers2).add(callback);
+            return () => {
+                __privateGet(this, _subscribers2).delete(callback);
+            };
+        });
+        __publicField(this, 'getResults', () => {
+            return __privateGet(this, _queryResult);
+        });
+    }
+    setRequests(requests) {
+        var _j;
+        var _a;
+        const requestsByURL = new Map(requests.map((query) => [query.url, query,]));
+        const nextSubscribedURLs = Array.from(requestsByURL.keys());
+        const hasSubscriptionChange = nextSubscribedURLs.some((url) => !__privateGet(this, _subscriptions).has(url));
+        if (nextSubscribedURLs.length !== __privateGet(this, _subscriptions).size && !hasSubscriptionChange) {
+            return;
+        }
+        const currentSubscribedURLs = Array.from(__privateGet(this, _subscriptions).keys());
+        const unsubscribeURLs = difference(currentSubscribedURLs, nextSubscribedURLs);
+        for (const url of unsubscribeURLs) {
+            (_a = __privateGet(this, _subscriptions).get(url)) == null ? void 0 : _a();
+            __privateGet(this, _subscriptions).delete(url);
+        }
+        const toSubscribeURLs = difference(nextSubscribedURLs, currentSubscribedURLs);
+        for (const url of toSubscribeURLs) {
+            const requestConfig = requestsByURL.get(url);
+            const unsubscribe = this.client.subscribe(url, this.onFetchResultUpdate, (_j = (requestConfig == null ? void 0 : requestConfig.cacheDuration)) !== null && _j !== void 0 ? _j : 0);
+            __privateGet(this, _subscriptions).set(url, unsubscribe);
+        }
+        __privateSet(this, _cachedResults, /* @__PURE__ */ new WeakSet());
+        this.onFetchResultUpdate();
+    }
+};
+_subscriptions = /* @__PURE__ */ new WeakMap();
+_subscribers2 = /* @__PURE__ */ new WeakMap();
+_cachedResults = /* @__PURE__ */ new WeakMap();
+_queryResult = /* @__PURE__ */ new WeakMap();
+function useFetchRequests(requests, disabled) {
+    const fetchClient = React2.useContext(FetchClientContext);
+    if (!fetchClient) {
+        throw new Error('useFetchRequest must be used within a FetchClientProvider');
+    }
+    const [observer2,] = React2.useState(() => new RequestsObserver(fetchClient));
+    React2.useLayoutEffect(() => {
+        if (disabled)
+            return;
+        observer2.setRequests(requests);
+    }, [requests, observer2, disabled,]);
+    return React2.useSyncExternalStore(observer2.subscribe, observer2.getResults, observer2.getResults);
+}
+function usePrefetch() {
+    const fetchClient = React2.useContext(FetchClientContext);
+    if (!fetchClient) {
+        throw new Error('useFetchRequest must be used within a FetchClientProvider');
+    }
+    return React2.useCallback((url, cacheDuration) => fetchClient.prefetch(url, cacheDuration), [fetchClient,]);
+}
+function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, }) {
+    const { enableAsyncURLUpdates, } = useLibraryFeatures();
     React4.useEffect(() => {
         if (isWebsite)
             return;
@@ -30115,21 +30688,22 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
             children: /* @__PURE__ */ jsx(CustomCursorHost, {
                 children: /* @__PURE__ */ jsx(FormContext.Provider, {
                     value: framerSiteId,
-                    children: /* @__PURE__ */ jsx(Router, {
-                        initialRoute: routeId,
-                        initialPathVariables: pathVariables,
-                        initialLocaleId: localeId,
-                        routes,
-                        collectionUtils,
-                        notFoundPage,
-                        locales,
-                        defaultPageStyle: {
-                            minHeight: '100vh',
-                            width: 'auto',
-                        },
-                        preserveQueryParams,
-                        enableImproveInpDuringHydration,
-                        addHydrationMarkers,
+                    children: /* @__PURE__ */ jsx(FetchClientProvider, {
+                        children: /* @__PURE__ */ jsx(Router, {
+                            initialRoute: routeId,
+                            initialPathVariables: pathVariables,
+                            initialLocaleId: localeId,
+                            routes,
+                            collectionUtils,
+                            notFoundPage,
+                            locales,
+                            defaultPageStyle: {
+                                minHeight: '100vh',
+                                width: 'auto',
+                            },
+                            preserveQueryParams,
+                            enableAsyncURLUpdates,
+                        }),
                     }),
                 }),
             }),
@@ -30360,6 +30934,84 @@ var ResolveLinks = /* @__PURE__ */ React2.forwardRef(function ResolveLinksInner(
     const childrenWithLinks = children(resolvedLinks);
     return cloneWithPropsAndRef(childrenWithLinks, rest);
 });
+function isObjectOrArray(value) {
+    return typeof value === 'object' && value !== null;
+}
+function getPropertyByPath(input, keyPath) {
+    if (keyPath === '') {
+        return input;
+    }
+    const keyParts = keyPath.split(/[.[\]]+/u).filter((part) => part.length > 0);
+    let current = input;
+    for (const part of keyParts) {
+        if (!isObjectOrArray(current)) {
+            return void 0;
+        }
+        current = current[part];
+    }
+    return current;
+}
+function isValidFetchDataValueResult(type, value) {
+    switch (type) {
+        case 'string':
+            return isString22(value) || isNumber2(value);
+        case 'boolean':
+            return isBoolean(value);
+        case 'number':
+            return isNumber2(value);
+        default: {
+            const _ = type;
+            return false;
+        }
+    }
+}
+function resolveFetchDataValue(result, request) {
+    if (result.status === 'loading') {
+        return request.fallbackValue;
+    }
+    if (result.status === 'error') {
+        return request.fallbackValue;
+    }
+    const resolvedValue = getPropertyByPath(result.data, request.resultKeyPath);
+    if (!isValidFetchDataValueResult(request.resultOutputType, resolvedValue)) {
+        return request.fallbackValue;
+    }
+    return resolvedValue;
+}
+function useFetchDataValues(requests, disabled) {
+    const fetchResults = useFetchRequests(requests, disabled);
+    const data2 = React2.useMemo(() => {
+        return requests.map((request) => {
+            const fetchResult = fetchResults.get(request.url);
+            if (!fetchResult) {
+                return request.fallbackValue;
+            }
+            return resolveFetchDataValue(fetchResult, request);
+        });
+    }, [fetchResults, requests,]);
+    const status = React2.useMemo(() => {
+        const statuses = /* @__PURE__ */ new Set();
+        for (const fetchResult of fetchResults.values()) {
+            statuses.add(fetchResult.status);
+        }
+        if (statuses.has('error'))
+            return 'error';
+        if (statuses.has('loading'))
+            return 'loading';
+        return 'success';
+    }, [fetchResults,]);
+    return {
+        status,
+        data: data2,
+    };
+}
+var Fetcher = /* @__PURE__ */ React2.forwardRef(function Fetcher2(_j, ref) {
+    var { requests, disabled, children } = _j, rest = __rest(_j, ["requests", "disabled", "children"]);
+    const cloneWithPropsAndRef = useCloneChildrenWithPropsAndRef(ref);
+    const { data: data2, status, } = useFetchDataValues(requests, disabled);
+    const childrenWithValues = children(data2, status);
+    return cloneWithPropsAndRef(childrenWithValues, rest);
+});
 var callEach = (...fns) => fns.forEach((fn) => fn && fn());
 var import_archy = __toESM(require_archy(), 1);
 function getLogger(name) {
@@ -30439,7 +31091,7 @@ var CompatibilityDatabaseCollection = class {
         const data2 = {};
         for (const key7 in this.schema) {
             const value = item[key7];
-            if (isNullish(value))
+            if (isNullish2(value))
                 continue;
             const definition = this.schema[key7];
             if (isUndefined(definition))
@@ -31994,10 +32646,10 @@ var SortItemsPlan = class extends QueryPlan {
                     if (DatabaseValue.equal(left, right, collation)) {
                         continue;
                     }
-                    if (DatabaseValue.lessThan(left, right, collation) || isNullish(left)) {
+                    if (DatabaseValue.lessThan(left, right, collation) || isNullish2(left)) {
                         return isAscending ? -1 : 1;
                     }
-                    if (DatabaseValue.greaterThan(left, right, collation) || isNullish(right)) {
+                    if (DatabaseValue.greaterThan(left, right, collation) || isNullish2(right)) {
                         return isAscending ? 1 : -1;
                     }
                     throw new Error('Invalid comparison result.');
@@ -32032,14 +32684,14 @@ var SliceItemsPlan = class extends QueryPlan {
     getOffset() {
         var _a;
         const value = (_a = this.offsetExpression) == null ? void 0 : _a.evaluate();
-        if (isNullish(value) || value.type !== 'number')
+        if (isNullish2(value) || value.type !== 'number')
             return;
         return value.value;
     }
     getLimit() {
         var _a;
         const value = (_a = this.limitExpression) == null ? void 0 : _a.evaluate();
-        if (isNullish(value) || value.type !== 'number')
+        if (isNullish2(value) || value.type !== 'number')
             return;
         return value.value;
     }
@@ -32311,7 +32963,7 @@ function getSelectKey(expression) {
 }
 function resolveValue(richTextResolver, value) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (isNullish(value)) {
+        if (isNullish2(value)) {
             return null;
         }
         if (value.type === 'richtext') {
@@ -33148,6 +33800,12 @@ function useQueryCount(query) {
     const collection = useQueryData(countQuery);
     return collection.length;
 }
+function usePreloadQuery() {
+    const { activeLocale, } = useLocaleInfo();
+    return useCallback((query) => __awaiter(this, void 0, void 0, function* () {
+        return queryCache.get(query, activeLocale).waitFor();
+    }), [activeLocale,]);
+}
 function getWhereExpressionFromPathVariables(pathVariables) {
     const entries = Object.entries(pathVariables).filter(([, value,]) => {
         if (isUndefined(value))
@@ -33265,8 +33923,10 @@ var VariantSelector = /* @__PURE__ */ ((VariantSelector2) => {
     VariantSelector2['Variant'] = 'v';
     return VariantSelector2;
 })(VariantSelector || {});
-function getGesture(enabledGestures, isHovered, isPressed) {
-    const { hover, pressed, } = enabledGestures || {};
+function getGesture(enabledGestures, isHovered, isPressed, isLoading) {
+    const { hover, pressed, loading, } = enabledGestures || {};
+    if (loading && isLoading)
+        return 'loading';
     if (pressed && isPressed)
         return 'pressed';
     if (hover && isHovered)
@@ -33288,6 +33948,7 @@ function safeBaseVariant(targetVariant, fallbackVariant, validBaseVariants) {
 var CycleVariantState = /* @__PURE__ */ Symbol('cycle');
 function useVariantState({ variant, defaultVariant: externalDefaultVariant, transitions: externalTransitions, enabledGestures: externalEnabledGestures, cycleOrder: externalCycleOrder = [], variantProps: variantProps2 = {}, variantClassNames = {}, }) {
     const forceUpdate = useForceUpdate3();
+    const isCanvas = useIsOnFramerCanvas();
     const validBaseVariants = useConstant2(() => new Set(externalCycleOrder));
     const internalState = React4.useRef({
         isHovered: false,
@@ -33296,6 +33957,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants),
         lastVariant: variant,
         gestureVariant: void 0,
+        loadedBaseVariant: {},
         // When used in generated components, these are static values defined
         // outside of the component function that also need to not result in
         // memoized values being recalculated, so we dump them into the ref.
@@ -33307,11 +33969,11 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
     const resolveNextVariant = React4.useCallback((targetBaseVariant) => {
         const { isHovered: isHovered2, isPressed: isPressed2, enabledGestures: enabledGestures2, defaultVariant: defaultVariant2, } = internalState.current;
         const nextBaseVariant = safeBaseVariant(targetBaseVariant, defaultVariant2, validBaseVariants);
-        const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2);
+        const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2, false);
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
     }, [validBaseVariants,]);
-    const setGestureState = React4.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
+    const setGestureState = React4.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, isLoading, }) => {
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -33336,6 +33998,11 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
+    const clearLoadingGesture = React4.useCallback(() => {
+        const { baseVariant: baseVariant2, } = internalState.current;
+        internalState.current.loadedBaseVariant[baseVariant2] = true;
+        forceUpdate();
+    }, [forceUpdate,]);
     if (variant !== internalState.current.lastVariant) {
         const [nextBase, nextGesture,] = resolveNextVariant(variant);
         internalState.current.lastVariant = nextBase;
@@ -33344,14 +34011,18 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             internalState.current.gestureVariant = nextGesture;
         }
     }
-    const { baseVariant, gestureVariant, defaultVariant, enabledGestures, isHovered, isPressed, } = internalState.current;
+    const { baseVariant, gestureVariant, defaultVariant, enabledGestures, isHovered, isPressed, loadedBaseVariant, } = internalState.current;
     const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2);
     return React4.useMemo(() => {
+        var _a;
         const variants = [];
         if (baseVariant !== defaultVariant)
             variants.push(baseVariant);
-        if (gestureVariant)
-            variants.push(gestureVariant);
+        const hasLoadingVariant = (_a = enabledGestures == null ? void 0 : enabledGestures[baseVariant]) == null ? void 0 : _a.loading;
+        const isLoading = !isCanvas && !!hasLoadingVariant && !loadedBaseVariant[baseVariant];
+        const gesture = isLoading ? createGestureVariant(baseVariant, 'loading') : gestureVariant;
+        if (gesture)
+            variants.push(gesture);
         const gestures = enabledGestures == null ? void 0 : enabledGestures[baseVariant];
         const gestureHandlers = {
             onMouseEnter: () => setGestureState({
@@ -33377,24 +34048,28 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         return {
             variants,
             baseVariant,
-            gestureVariant,
+            gestureVariant: gesture,
+            isLoading,
             transition: activeTransition(internalState.current.transitions, baseVariant),
             setVariant,
             setGestureState,
+            clearLoadingGesture,
             addVariantProps,
             gestureHandlers,
-            classNames: cx(createVariantClassName(baseVariant, variantClassNames), getGesture(gestures, isHovered, isPressed)),
+            classNames: cx(createVariantClassName(baseVariant, variantClassNames), getGesture(gestures, isHovered, isPressed, isLoading)),
         };
     }, [
         baseVariant,
         gestureVariant,
         isHovered,
         isPressed,
+        loadedBaseVariant,
         addVariantProps,
         setVariant,
         defaultVariant,
         enabledGestures,
         setGestureState,
+        clearLoadingGesture,
         variantClassNames,
     ]);
 }
@@ -38272,6 +38947,14 @@ function upgradeComponentFontV1(font) {
     }
     return Object.assign(Object.assign({}, font), { source });
 }
+function withPerformanceMarks(prefix2, callback) {
+    const markStart = `${prefix2}-start`;
+    performance.mark(markStart);
+    callback();
+    const markEnd = `${prefix2}-end`;
+    performance.mark(markEnd);
+    performance.measure(prefix2, markStart, markEnd);
+}
 function loadJSON(url) {
     return fetch(url, {
         mode: 'cors',
@@ -38446,7 +39129,7 @@ var package_default = {
         yargs: '^17.6.2',
     },
     peerDependencies: {
-        'framer-motion': '11.2.10',
+        'framer-motion': '11.2.13',
         react: '^18.2.0',
         'react-dom': '^18.2.0',
     },
@@ -38477,7 +39160,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop.start();
 }
-export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
+export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, markHydrationStart, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
 /**
  * @license Emotion v11.0.0
  * MIT License