unframer 2.6.1 → 2.6.2

package/dist/framer.js

@@ -48,13 +48,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentViewportProvider = exports.ComponentPresetsProvider = exports.ComponentPresetsConsumer = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectVisualStyleFromProps = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelFrame = exports.callEach = exports.calculateRect = exports.calcLength = exports.buildTransform = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.backgroundImageFromProps = exports.BackgroundImage = exports.AutomaticLayoutIds = exports.AnyInterpolation = exports.anticipate = exports.annotateTypeOnStringify = exports.animations = exports.animationControls = exports.animateVisualElement = exports.animateValue = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.addScaleCorrector = exports.addPropertyControls = exports.addPointerInfo = exports.addPointerEvent = exports.addFonts = exports.addActionControls = exports.AcceleratedAnimation = exports._injectRuntime = exports.combinedCSSRules = void 0;
 exports.environment = exports.EmptyState = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMax = exports.domAnimation = exports.DOM = exports.distance2D = exports.distance = exports.dispatchKeyDownEvent = exports.disableInstantTransitions = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.Device = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.delay = exports.degreesToRadians = exports.defaultDeviceProps = exports.debounce = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.cx = exports.CustomProperties = exports.CustomCursorHost = exports.cubicBezier = exports.cssBackgroundSize = exports.createScopedAnimate = exports.createMotionComponent = exports.createFramerPageLink = exports.createDomMotionComponent = exports.createData = exports.createBox = exports.convertPropsToDeviceOptions = exports.convertPresentationTree = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.constraintsEnabled = exports.ConstraintMask = void 0;
-exports.invariant = exports.interpolate = exports.InternalID = exports.installFlexboxGapWorkaroundIfNeeded = exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = void 0;
-exports.motionValue = exports.MotionValue = exports.MotionSetup = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = exports.inView = void 0;
-exports.setGlobalRenderEnvironment = exports.scrollInfo = exports.scroll = exports.Scroll = exports.roundWithOffset = exports.roundedNumberString = exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.pushLoadMoreHistory = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = void 0;
-exports.useHotkey = exports.useGamepad = exports.useForceUpdate = exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = exports.useDataRecord = exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = exports.sharedSVGManager = exports.Shadow = void 0;
-exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = exports.useRouter = exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = exports.useHydratedBreakpointVariants = void 0;
-exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withInfiniteScroll = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = exports.ValueInterpolation = void 0;
-// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
+exports.interpolate = exports.InternalID = exports.installFlexboxGapWorkaroundIfNeeded = exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.Fetcher = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = void 0;
+exports.MotionSetup = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.markHydrationStart = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = exports.inView = exports.invariant = void 0;
+exports.scroll = exports.Scroll = exports.roundWithOffset = exports.roundedNumberString = exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.pushLoadMoreHistory = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.motionValue = exports.MotionValue = void 0;
+exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = exports.useDataRecord = exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.turnOffReactEventHandling = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = exports.sharedSVGManager = exports.Shadow = exports.setGlobalRenderEnvironment = exports.scrollInfo = void 0;
+exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = exports.useRouter = exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePreloadQuery = exports.usePrefetch = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = exports.useHydratedBreakpointVariants = exports.useHotkey = exports.useGamepad = exports.useForceUpdate = void 0;
+exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPerformanceMarks = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withInfiniteScroll = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = exports.ValueInterpolation = exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = void 0;
+// https :https://app.framerstatic.com/chunk-VBDYROES.js
 const react_1 = require("react");
 const react_2 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -196,9 +196,26 @@ var MotionGlobalConfig = {
     useManualTiming: false,
 };
 exports.MotionGlobalConfig = MotionGlobalConfig;
-var LayoutGroupContext = (0, react_1.createContext)({});
 var SwitchLayoutGroupContext = (0, react_1.createContext)({});
 exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
+var LayoutGroupContext = (0, react_1.createContext)({});
+var noop = (any) => any;
+var warning = noop;
+exports.warning = warning;
+var invariant = noop;
+exports.invariant = invariant;
+if (false) {
+    exports.warning = warning = (check, message) => {
+        if (!check && typeof console !== 'undefined') {
+            console.warn(message);
+        }
+    };
+    exports.invariant = invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
 var LazyContext = (0, react_1.createContext)({
     strict: false,
 });
@@ -353,7 +370,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, } = (0, react_3.useContext)(MotionContext);
     const lazyContext = (0, react_3.useContext)(LazyContext);
     const presenceContext = (0, react_3.useContext)(PresenceContext);
@@ -371,6 +392,11 @@ function useVisualElement(Component33, visualState, props, createVisualElement2)
         });
     }
     const visualElement = visualElementRef.current;
+    const initialLayoutGroupConfig = (0, react_3.useContext)(SwitchLayoutGroupContext);
+    if (visualElement && !visualElement.projection && ProjectionNodeConstructor &&
+        (visualElement.type === 'html' || visualElement.type === 'svg')) {
+        createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+    }
     (0, react_4.useInsertionEffect)(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
@@ -378,6 +404,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();
@@ -386,25 +413,58 @@ function useVisualElement(Component33, visualState, props, createVisualElement2)
     (0, react_2.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 (0, react_5.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') {
@@ -486,14 +546,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 = (0, react_3.useContext)(SwitchLayoutGroupContext);
-            const isStrict = (0, react_3.useContext)(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 (0, jsx_runtime_1.jsxs)(MotionContext.Provider, {
             value: context,
@@ -514,6 +570,26 @@ function useLayoutId({ layoutId, }) {
     const layoutGroupId = (0, react_3.useContext)(LayoutGroupContext).id;
     return layoutGroupId && layoutId !== void 0 ? layoutGroupId + '-' + layoutId : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures2) {
+    const isStrict = (0, react_3.useContext)(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);
@@ -584,6 +660,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,
@@ -758,7 +837,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);
 exports.frame = frame;
 exports.cancelFrame = cancelFrame;
@@ -846,22 +924,6 @@ function isDragActive() {
     return false;
 }
 exports.isDragActive = isDragActive;
-var warning = noop;
-exports.warning = warning;
-var invariant = noop;
-exports.invariant = invariant;
-if (false) {
-    exports.warning = warning = (check, message) => {
-        if (!check && typeof console !== 'undefined') {
-            console.warn(message);
-        }
-    };
-    exports.invariant = invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
 var number = {
     test: (v) => typeof v === 'number',
     parse: parseFloat,
@@ -870,7 +932,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))
@@ -2788,7 +2851,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) => {
@@ -3384,7 +3447,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;
@@ -3535,6 +3598,10 @@ function createAnimationState(visualElement) {
         setActive,
         setAnimateFunction,
         getState: () => state,
+        reset: () => {
+            state = createState();
+            isInitialRender = true;
+        },
     };
 }
 function checkVariantsDidChange(prev, next) {
@@ -3584,9 +3651,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);
         }
     }
     /**
@@ -3602,7 +3668,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 {
@@ -3789,7 +3859,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)) {
@@ -3826,8 +3896,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',
@@ -3838,11 +3906,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
@@ -3934,7 +3997,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);
@@ -3946,7 +4008,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;
     }
@@ -3973,60 +4039,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;
+                }
             }
         }
     }
@@ -5528,7 +5559,7 @@ var VisualElementDragControls = class {
         });
         const measureDragConstraints = () => {
             const { dragConstraints, } = this.getProps();
-            if (isRefObject(dragConstraints)) {
+            if (isRefObject(dragConstraints) && dragConstraints.current) {
                 this.constraints = this.resolveRefConstraints();
             }
         };
@@ -5538,7 +5569,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) {
@@ -6073,7 +6104,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++;
@@ -6100,6 +6131,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) {
@@ -6306,7 +6338,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         didUpdate() {
             if (!this.updateScheduled) {
                 this.updateScheduled = true;
-                microtask.read(() => this.update());
+                microtask.read(this.scheduleUpdate);
             }
         }
         clearAllSnapshots() {
@@ -6376,7 +6408,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;
@@ -7088,7 +7120,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,
@@ -7099,7 +7131,7 @@ var DocumentProjectionNode = createProjectionNode({
 var rootProjectionNode = {
     current: void 0,
 };
-var HTMLProjectionNode = createProjectionNode({
+var HTMLProjectionNode = createProjectionNode2({
     measureScroll: (instance) => ({
         x: instance.scrollLeft,
         y: instance.scrollTop,
@@ -9145,7 +9177,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
-// https :https://app.framerstatic.com/framer.K4XHQ4DX.js
+// https :https://app.framerstatic.com/framer.E3XQPBSV.js
 const react_12 = __importDefault(require("react"));
 const react_13 = require("react");
 const react_14 = require("react");
@@ -9828,16 +9860,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 [];
         };
@@ -11105,25 +11137,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) {
+    (0, react_2.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;
@@ -11516,24 +11570,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();
@@ -11544,7 +11626,7 @@ function useViewTransition() {
             resolveHasPainted.current = void 0;
         }
     });
-    return (0, react_5.useCallback)((currentRouteId, nextRouteId, update) => {
+    return (0, react_5.useCallback)((currentRouteId, nextRouteId, update, yieldBeforeFreezePeriod, signal) => {
         const pageEffect = getPageEffectForRoute(currentRouteId, nextRouteId, sitePageEffects);
         if (pageEffect) {
             const hasPainted = new Promise((resolve) => {
@@ -11554,6 +11636,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 {
@@ -11561,47 +11652,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, }) {
-    react_12.default.useLayoutEffect(() => {
+    (0, react_2.useLayoutEffect)(() => {
         if (disabled)
             return;
+        performance.mark('framer-history-set-initial-state');
         replaceHistoryState({
             routeId,
             pathVariables: initialPathVariables,
@@ -11611,8 +11717,8 @@ function useReplaceInitialState({ disabled, routeId, initialPathVariables, initi
 }
 function usePopStateHandler(currentRouteId, setCurrentRouteId) {
     const startViewTransition2 = useViewTransition();
-    const viewTransitionReady = react_12.default.useRef(void 0);
-    const popStateHandler = react_12.default.useCallback(({ state, }) => {
+    const viewTransitionReady = (0, react_4.useRef)(void 0);
+    const popStateHandler = (0, react_5.useCallback)((_j) => __awaiter(this, [_j], void 0, function* ({ state, }) {
         var _a, _b, _c;
         if (!isObject(state))
             return;
@@ -11622,14 +11728,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 = (0, react_5.useCallback)((event) => {
         if (event.navigationType !== 'traverse')
             return;
@@ -11647,7 +11753,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
             scroll: 'after-transition',
         });
     }, []);
-    react_12.default.useEffect(() => {
+    (0, react_2.useEffect)(() => {
         var _a;
         window.addEventListener('popstate', popStateHandler);
         (_a = window.navigation) === null || _a === void 0 ? void 0 : _a.addEventListener('navigate', traversalHandler);
@@ -11720,9 +11826,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) {
@@ -11730,14 +11836,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;
     });
 }
@@ -11752,16 +11852,194 @@ function pushLoadMoreHistory(hash2, paginationInfo) {
     catch (_j) { }
 }
 exports.pushLoadMoreHistory = pushLoadMoreHistory;
-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 = (0, react_4.useRef)(Promise.resolve());
+    const navigationController = (0, react_4.useRef)();
+    const navigateListener = (0, react_5.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 (0, react_5.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');
 }
+exports.markHydrationStart = markHydrationStart;
+var routerHydrationInsertionEffectStartHasRun = false;
+var routerHydrationLayoutEffectStartHasRun = false;
+var routerHydrationEffectStartHasRun = false;
+function useMarkRouterEffects() {
+    const hydrationMarkPrefix = 'framer-hydration-router';
+    (0, react_4.useInsertionEffect)(() => {
+        if (routerHydrationInsertionEffectStartHasRun || !shouldMark)
+            return;
+        routerHydrationInsertionEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}-insertion-effect`);
+    }, []);
+    (0, react_2.useLayoutEffect)(() => {
+        if (routerHydrationLayoutEffectStartHasRun || !shouldMark)
+            return;
+        routerHydrationLayoutEffectStartHasRun = true;
+        performance.mark(`${hydrationMarkPrefix}-layout-effect`);
+    }, []);
+    (0, react_2.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`;
+    (0, react_4.useInsertionEffect)(() => {
+        if (hydrationInsertionEffectStartHasRun || !shouldMark)
+            return;
+        hydrationInsertionEffectStartHasRun = true;
+        performance.mark(hydrationRenderEnd);
+        measureSafe(`${hydrationMarkPrefix}render`, `${hydrationMarkPrefix}start`, hydrationRenderEnd);
+        performance.mark(`${hydrationMarkPrefix}insertion-effects-start`);
+    }, []);
+    (0, react_2.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);
+        });
+    }, []);
+    (0, react_2.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`;
+    (0, react_4.useInsertionEffect)(() => {
+        if (hydrationInsertionEffectHasRun || !shouldMark)
+            return;
+        hydrationInsertionEffectHasRun = true;
+        performance.mark(hydrationInsertionEffectsEnd);
+        measureSafe(`${hydrationMarkPrefix}insertion-effects`, `${hydrationMarkPrefix}insertion-effects-start`, hydrationInsertionEffectsEnd);
+    }, []);
+    (0, react_2.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);
+        });
+    }, []);
+    (0, react_2.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',
@@ -11799,104 +12077,45 @@ 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;
+    eventsToStop.forEach((event) => document.body.addEventListener(event, stopFn, options));
 }
-function measureSafe(name, start, end) {
-    try {
-        performance.measure(name, start, end);
-    }
-    catch (e) {
-        console.warn(`Could not measure ${name}`, e);
-    }
-}
-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`;
-    (0, react_4.useInsertionEffect)(() => {
-        if (hydrationInsertionEffectHasRun)
+exports.turnOffReactEventHandling = turnOffReactEventHandling;
+function TurnOnReactEventHandling() {
+    useAfterPaintEffect(() => {
+        if (!shouldTurnOnEventHandling || !eventsToStop)
             return;
-        hydrationInsertionEffectHasRun = true;
-        if (addHydrationMarkers) {
-            performance.mark(hydrationRenderEnd);
-            measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd);
-        }
-    }, []);
-    (0, react_2.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);
-        });
-    }, []);
-    (0, react_2.useEffect)(() => {
-        var _a, _b, _c;
-        if (hydrationEffectHasRun)
-            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 react_12.default.useCallback((routeId) => routes[routeId], [routes,]);
 }
@@ -12001,25 +12220,31 @@ function useLocale() {
     return useLocaleCode();
 }
 exports.useLocale = useLocale;
-function useMonitorNextRender(label) {
+function useMonitorNextPaintAfterRender(label) {
     const startLabel = `start-${label}`;
     const endLabel = `end-${label}`;
     const resolveHasPainted = (0, react_4.useRef)(void 0);
-    (0, react_2.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 (0, react_5.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) {
@@ -12033,19 +12258,67 @@ function updateScrollPosition(hash2, smoothScroll, isHistoryTransition) {
     window.scrollTo(0, 0);
 }
 function useScheduleRenderSideEffects(dep) {
-    const actions = react_12.default.useRef([]);
-    react_12.default.useLayoutEffect(() => {
+    const actions = (0, react_4.useRef)([]);
+    (0, react_2.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 react_12.default.useCallback((cb) => {
+    return (0, react_5.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 = (0, react_4.useRef)(void 0);
+    return (0, react_5.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,
@@ -12053,12 +12326,14 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         initialLocaleId,
     });
     const startViewTransition2 = useViewTransition();
-    const monitorNextRender = useMonitorNextRender('route-change');
-    const currentRouteRef = react_12.default.useRef(initialRoute);
-    const currentPathVariablesRef = react_12.default.useRef(initialPathVariables);
-    const currentLocaleIdRef = react_12.default.useRef(initialLocaleId);
+    const [dep, forceUpdate,] = useForceUpdate2();
+    const scheduleSideEffect = useScheduleRenderSideEffects(dep);
+    const startNavigation = useNavigationTransition(enableAsyncURLUpdates);
+    const currentRouteRef = (0, react_4.useRef)(initialRoute);
+    const currentPathVariablesRef = (0, react_4.useRef)(initialPathVariables);
+    const currentLocaleIdRef = (0, react_4.useRef)(initialLocaleId);
     const currentLocaleId = currentLocaleIdRef.current;
-    const activeLocale = react_12.default.useMemo(() => {
+    const activeLocale = (0, react_6.useMemo)(() => {
         var _a;
         return (_a = locales.find(({ id: id3, }) => {
             if (!currentLocaleId)
@@ -12068,8 +12343,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             ? _a
             : null;
     }, [currentLocaleId, locales,]);
-    const [dep, forceUpdate,] = useForceUpdate2();
-    const localeInfo = react_12.default.useMemo(() => {
+    const localeInfo = (0, react_6.useMemo)(() => {
         return {
             activeLocale,
             locales,
@@ -12102,28 +12376,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, () => (0, react_13.startTransition)(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, () => (0, react_13.startTransition)(forceUpdate), enableAsyncURLUpdates);
+                    }, updateURL, false);
                 }
                 catch (_j) { }
             }),
         };
-    }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,]);
-    const scheduleSideEffect = useScheduleRenderSideEffects(dep);
-    const setCurrentRouteId = react_12.default.useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false) => {
+    }, [
+        activeLocale,
+        collectionUtils,
+        enableAsyncURLUpdates,
+        forceUpdate,
+        locales,
+        preserveQueryParams,
+        routes,
+        startNavigation,
+        startViewTransition2,
+    ]);
+    const setCurrentRouteId = (0, react_5.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);
         });
-        (0, react_13.startTransition)(forceUpdate);
-        monitorNextRender();
-    }, [forceUpdate, monitorNextRender, scheduleSideEffect,]);
+        void startNavigation((signal) => {
+            void startViewTransition2(currentRouteId2, routeId, () => (0, react_13.startTransition)(forceUpdate), enableAsyncURLUpdates, signal);
+        }, updateURL);
+    }, [enableAsyncURLUpdates, forceUpdate, scheduleSideEffect, startNavigation, startViewTransition2,]);
     usePopStateHandler(currentRouteRef, setCurrentRouteId);
-    const navigate = react_12.default.useCallback((routeId, hash2, pathVariables, smoothScroll) => {
+    const navigate = (0, react_5.useCallback)((routeId, hash2, pathVariables, smoothScroll) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         const newRoute = routes[routeId];
         if (pathVariables) {
@@ -12139,51 +12440,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 = react_12.default.useMemo(() => ({
+    const api = (0, react_6.useMemo)(() => ({
         navigate,
         getRoute,
         currentRouteId,
@@ -12211,16 +12515,17 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                         notFoundPage,
                         defaultPageStyle,
                         forceUpdateKey: dep,
-                        children: (0, jsx_runtime_1.jsx)(react_12.default.Fragment, {
-                            children: pageExistsInCurrentLocale
-                                ? renderPage(current.page, defaultPageStyle)
-                                : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                        children: (0, jsx_runtime_1.jsxs)(react_8.Fragment, {
+                            children: [
+                                (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.Start, {}),
+                                pageExistsInCurrentLocale
+                                    ? renderPage(current.page, defaultPageStyle)
+                                    : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                            ],
                         }, remountKey),
                     }),
-                    (0, jsx_runtime_1.jsx)(OnHydrationEnd, {
-                        addHydrationMarkers,
-                        turnOffEventHandlerHack: enableImproveInpDuringHydration,
-                    }),
+                    (0, jsx_runtime_1.jsx)(TurnOnReactEventHandling, {}),
+                    (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.End, {}),
                 ],
             }),
         }),
@@ -14410,8 +14715,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);
         },
@@ -17429,6 +17734,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));
         }
@@ -17466,13 +17772,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 */
     `
@@ -17487,13 +17793,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);
         }
@@ -17501,33 +17807,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 */
     `
@@ -18021,8 +18327,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());
@@ -19639,150 +19945,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__ */ react_12.default.createContext(void 0);
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-exports.LibraryFeaturesProvider = LibraryFeaturesProvider;
-var useLibraryFeatures = () => {
-    const context = react_12.default.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,
-};
-exports.environment = environment;
 var mockWithWarning = (message) => {
     return () => {
         warnOnce2(message);
@@ -19917,39 +20079,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,] = react_12.default.useState();
     const imageRef = react_12.default.useRef(null);
-    const libraryFeatures = useLibraryFeatures();
-    react_12.default.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__ */ (0, jsx_runtime_1.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,
@@ -20142,6 +20277,143 @@ 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,
+};
+exports.environment = environment;
 var isChrome2 = /* @__PURE__ */ isChrome();
 function layoutHintDataPropsForCenter(center) {
     const props = {};
@@ -29609,6 +29881,9 @@ var LazyValue = class {
         };
         return promise;
     }
+    waitFor() {
+        return this.resolver();
+    }
     /** Synchronously read the value after calling preload() before. */
     read() {
         const status = this.status;
@@ -29628,6 +29903,13 @@ var LazyValue = class {
     }
 };
 exports.LazyValue = LazyValue;
+var LibraryFeaturesContext = /* @__PURE__ */ react_12.default.createContext(void 0);
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+exports.LibraryFeaturesProvider = LibraryFeaturesProvider;
+var useLibraryFeatures = () => {
+    const context = react_12.default.useContext(LibraryFeaturesContext);
+    return context !== null && context !== void 0 ? context : {};
+};
 function findAnchorElement(target, withinElement) {
     if (target instanceof HTMLAnchorElement) {
         return target;
@@ -29975,7 +30257,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);
     });
@@ -30421,7 +30703,301 @@ 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__ */ (0, jsx_runtime_1.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,]);
+}
+exports.usePrefetch = usePrefetch;
+function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, }) {
+    const { enableAsyncURLUpdates, } = useLibraryFeatures();
     react_12.default.useEffect(() => {
         if (isWebsite)
             return;
@@ -30433,21 +31009,22 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
             children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CustomCursorHost, {
                 children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FormContext.Provider, {
                     value: framerSiteId,
-                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Router, {
-                        initialRoute: routeId,
-                        initialPathVariables: pathVariables,
-                        initialLocaleId: localeId,
-                        routes,
-                        collectionUtils,
-                        notFoundPage,
-                        locales,
-                        defaultPageStyle: {
-                            minHeight: '100vh',
-                            width: 'auto',
-                        },
-                        preserveQueryParams,
-                        enableImproveInpDuringHydration,
-                        addHydrationMarkers,
+                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FetchClientProvider, {
+                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Router, {
+                            initialRoute: routeId,
+                            initialPathVariables: pathVariables,
+                            initialLocaleId: localeId,
+                            routes,
+                            collectionUtils,
+                            notFoundPage,
+                            locales,
+                            defaultPageStyle: {
+                                minHeight: '100vh',
+                                width: 'auto',
+                            },
+                            preserveQueryParams,
+                            enableAsyncURLUpdates,
+                        }),
                     }),
                 }),
             }),
@@ -30682,6 +31259,85 @@ var ResolveLinks = /* @__PURE__ */ React2.forwardRef(function ResolveLinksInner(
     return cloneWithPropsAndRef(childrenWithLinks, rest);
 });
 exports.ResolveLinks = ResolveLinks;
+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);
+});
+exports.Fetcher = Fetcher;
 var callEach = (...fns) => fns.forEach((fn) => fn && fn());
 exports.callEach = callEach;
 var import_archy = __toESM(require_archy(), 1);
@@ -30762,7 +31418,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))
@@ -32317,10 +32973,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.');
@@ -32355,14 +33011,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;
     }
@@ -32635,7 +33291,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') {
@@ -33498,6 +34154,13 @@ function useQueryCount(query) {
     const collection = useQueryData(countQuery);
     return collection.length;
 }
+function usePreloadQuery() {
+    const { activeLocale, } = useLocaleInfo();
+    return (0, react_5.useCallback)((query) => __awaiter(this, void 0, void 0, function* () {
+        return queryCache.get(query, activeLocale).waitFor();
+    }), [activeLocale,]);
+}
+exports.usePreloadQuery = usePreloadQuery;
 function getWhereExpressionFromPathVariables(pathVariables) {
     const entries = Object.entries(pathVariables).filter(([, value,]) => {
         if (isUndefined(value))
@@ -33618,8 +34281,10 @@ var VariantSelector = /* @__PURE__ */ ((VariantSelector2) => {
     return VariantSelector2;
 })(VariantSelector || {});
 exports.VariantSelector = 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)
@@ -33642,6 +34307,7 @@ var CycleVariantState = /* @__PURE__ */ Symbol('cycle');
 exports.CycleVariantState = CycleVariantState;
 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 = react_12.default.useRef({
         isHovered: false,
@@ -33650,6 +34316,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.
@@ -33661,11 +34328,11 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
     const resolveNextVariant = react_12.default.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 = react_12.default.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
+    const setGestureState = react_12.default.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, isLoading, }) => {
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -33690,6 +34357,11 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
+    const clearLoadingGesture = react_12.default.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;
@@ -33698,14 +34370,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 react_12.default.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({
@@ -33731,24 +34407,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,
     ]);
 }
@@ -38679,6 +39359,15 @@ 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);
+}
+exports.withPerformanceMarks = withPerformanceMarks;
 function loadJSON(url) {
     return fetch(url, {
         mode: 'cors',
@@ -38856,7 +39545,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',
     },