unframer 2.5.1 → 2.5.3

package/esm/framer.js

@@ -18,7 +18,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// https :https://app.framerstatic.com/chunk-AJGVEDRA.js
+// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { jsx, jsxs, } from 'react/jsx-runtime';
@@ -1220,6 +1220,9 @@ function hslaToRgba({ hue, saturation, lightness, alpha: alpha2, }) {
         alpha: alpha2,
     };
 }
+function mixImmediate(a, b) {
+    return (p) => p > 0 ? b : a;
+}
 var mixLinearColor = (from, to, v) => {
     const fromExpo = from * from;
     const expo = v * (to * to - fromExpo) + fromExpo;
@@ -1229,7 +1232,9 @@ var colorTypes = [hex, rgba, hsla,];
 var getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color2) {
     const type = getColorType(color2);
-    invariant(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
+    warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
+    if (!Boolean(type))
+        return false;
     let model = type.parse(color2);
     if (type === hsla) {
         model = hslaToRgba(model);
@@ -1239,6 +1244,9 @@ function asRGBA(color2) {
 var mixColor = (from, to) => {
     const fromRGBA = asRGBA(from);
     const toRGBA = asRGBA(to);
+    if (!fromRGBA || !toRGBA) {
+        return mixImmediate(from, to);
+    }
     const blended = Object.assign({}, fromRGBA);
     return (v) => {
         blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
@@ -1267,9 +1275,6 @@ function mixVisibility(origin, target) {
         return (p) => p >= 1 ? target : origin;
     }
 }
-function mixImmediate(a, b) {
-    return (p) => p > 0 ? b : a;
-}
 function mixNumber2(a, b) {
     return (p) => mixNumber(a, b, p);
 }
@@ -2290,14 +2295,17 @@ var DOMKeyframesResolver = class extends KeyframeResolver {
             return;
         super.readKeyframes();
         for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            const keyframe = unresolvedKeyframes[i];
-            if (typeof keyframe === 'string' && isCSSVariableToken(keyframe)) {
-                const resolved = getVariableValue(keyframe, element.current);
-                if (resolved !== void 0) {
-                    unresolvedKeyframes[i] = resolved;
-                }
-                if (i === unresolvedKeyframes.length - 1) {
-                    this.finalKeyframe = keyframe;
+            let keyframe = unresolvedKeyframes[i];
+            if (typeof keyframe === 'string') {
+                keyframe = keyframe.trim();
+                if (isCSSVariableToken(keyframe)) {
+                    const resolved = getVariableValue(keyframe, element.current);
+                    if (resolved !== void 0) {
+                        unresolvedKeyframes[i] = resolved;
+                    }
+                    if (i === unresolvedKeyframes.length - 1) {
+                        this.finalKeyframe = keyframe;
+                    }
                 }
             }
         }
@@ -2696,7 +2704,7 @@ var MotionValue = class {
      * @internal
      */
     constructor(init, options = {}) {
-        this.version = '11.2.6';
+        this.version = '11.2.10';
         this.canTrackVelocity = null;
         this.events = {};
         this.updateAndNotify = (v, render = true) => {
@@ -2993,6 +3001,95 @@ function isTransitionDefined(_f) {
 function getValueTransition(transition, key7) {
     return transition[key7] || transition['default'] || transition;
 }
+function observeTimeline(update, timeline) {
+    let prevProgress;
+    const onFrame = () => {
+        const { currentTime, } = timeline;
+        const percentage = currentTime === null ? 0 : currentTime.value;
+        const progress2 = percentage / 100;
+        if (prevProgress !== progress2) {
+            update(progress2);
+        }
+        prevProgress = progress2;
+    };
+    frame.update(onFrame, true);
+    return () => cancelFrame(onFrame);
+}
+var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
+var GroupPlaybackControls = class {
+    constructor(animations2) {
+        this.stop = () => this.runAll('stop');
+        this.animations = animations2.filter(Boolean);
+    }
+    then(onResolve, onReject) {
+        return Promise.all(this.animations).then(onResolve).catch(onReject);
+    }
+    /**
+     * TODO: Filter out cancelled or stopped animations before returning
+     */
+    getAll(propName) {
+        return this.animations[0][propName];
+    }
+    setAll(propName, newValue) {
+        for (let i = 0; i < this.animations.length; i++) {
+            this.animations[i][propName] = newValue;
+        }
+    }
+    attachTimeline(timeline) {
+        const cancelAll = this.animations.map((animation) => {
+            if (supportsScrollTimeline() && animation.attachTimeline) {
+                animation.attachTimeline(timeline);
+            }
+            else {
+                animation.pause();
+                return observeTimeline((progress2) => {
+                    animation.time = animation.duration * progress2;
+                }, timeline);
+            }
+        });
+        return () => {
+            cancelAll.forEach((cancelTimeline, i) => {
+                if (cancelTimeline)
+                    cancelTimeline();
+                this.animations[i].stop();
+            });
+        };
+    }
+    get time() {
+        return this.getAll('time');
+    }
+    set time(time2) {
+        this.setAll('time', time2);
+    }
+    get speed() {
+        return this.getAll('speed');
+    }
+    set speed(speed) {
+        this.setAll('speed', speed);
+    }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    play() {
+        this.runAll('play');
+    }
+    pause() {
+        this.runAll('pause');
+    }
+    cancel() {
+        this.runAll('cancel');
+    }
+    complete() {
+        this.runAll('complete');
+    }
+};
 var animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
     const valueTransition = getValueTransition(transition, name) || {};
     const delay2 = valueTransition.delay || transition.delay || 0;
@@ -3036,7 +3133,7 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
-            return;
+            return new GroupPlaybackControls([]);
         }
     }
     if (!isHandoff && AcceleratedAnimation.supports(options)) {
@@ -3066,6 +3163,9 @@ function setTarget(visualElement, definition) {
         setMotionValue(visualElement, key7, value);
     }
 }
+function getOptimisedAppearId(visualElement) {
+    return visualElement.getProps()[optimizedAppearDataAttribute];
+}
 function shouldBlockAnimation({ protectedKeys, needsAnimating, }, key7) {
     const shouldBlock = protectedKeys.hasOwnProperty(key7) && needsAnimating[key7] !== true;
     needsAnimating[key7] = false;
@@ -3088,8 +3188,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         const valueTransition = Object.assign({ delay: delay2, elapsed: 0 }, getValueTransition(transition || {}, key7));
         let isHandoff = false;
         if (window.HandoffAppearAnimations) {
-            const props = visualElement.getProps();
-            const appearId = props[optimizedAppearDataAttribute];
+            const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
                 const elapsed = window.HandoffAppearAnimations(appearId, key7, value, frame);
                 if (elapsed !== null) {
@@ -3593,7 +3692,7 @@ function updateMotionValuesFromProps(element, next, prev) {
                 willChange.add(key7);
             }
             if (false) {
-                warnOnce(nextValue.version === '11.2.6', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.6 may not work as expected.`);
+                warnOnce(nextValue.version === '11.2.10', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5858,6 +5957,24 @@ function resetDistortingTransform(key7, visualElement, values, sharedAnimationVa
         }
     }
 }
+function isOptimisedAppearTree(projectionNode) {
+    projectionNode.hasCheckedOptimisedAppear = true;
+    if (projectionNode.root === projectionNode)
+        return false;
+    const { visualElement, } = projectionNode.options;
+    if (!visualElement) {
+        return false;
+    }
+    else if (getOptimisedAppearId(visualElement)) {
+        return true;
+    }
+    else if (projectionNode.parent && !projectionNode.parent.hasCheckedOptimisedAppear) {
+        return isOptimisedAppearTree(projectionNode.parent);
+    }
+    else {
+        return false;
+    }
+}
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
         constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -5877,6 +5994,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.isSVG = false;
             this.needsReset = false;
             this.shouldResetTransform = false;
+            this.hasCheckedOptimisedAppear = false;
             this.treeScale = {
                 x: 1,
                 y: 1,
@@ -6025,9 +6143,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.isUpdateBlocked())
                 return;
             this.isUpdating = true;
-            if (window.HandoffCancelAllAnimations) {
-                window.HandoffCancelAllAnimations();
-            }
             this.nodes && this.nodes.forEach(resetSkewAndRotation);
             this.animationId++;
         }
@@ -6041,6 +6156,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.options.onExitComplete && this.options.onExitComplete();
                 return;
             }
+            if (window.HandoffCancelAllAnimations && isOptimisedAppearTree(this)) {
+                window.HandoffCancelAllAnimations();
+            }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
                 return;
@@ -6630,16 +6748,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.isVisible) {
                 return hiddenVisibility;
             }
-            const styles = {
+            const styles2 = {
                 visibility: '',
             };
             const transformTemplate2 = this.getTransformTemplate();
             if (this.needsReset) {
                 this.needsReset = false;
-                styles.opacity = '';
-                styles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || '';
-                styles.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '') : 'none';
-                return styles;
+                styles2.opacity = '';
+                styles2.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || '';
+                styles2.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '') : 'none';
+                return styles2;
             }
             const lead = this.getLead();
             if (!this.projectionDelta || !this.layout || !lead.target) {
@@ -6657,14 +6775,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const valuesToRender = lead.animationValues || lead.latestValues;
             this.applyTransformsToTarget();
-            styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+            styles2.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
             if (transformTemplate2) {
-                styles.transform = transformTemplate2(valuesToRender, styles.transform);
+                styles2.transform = transformTemplate2(valuesToRender, styles2.transform);
             }
             const { x, y, } = this.projectionDelta;
-            styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+            styles2.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
             if (lead.animationValues) {
-                styles.opacity = lead === this
+                styles2.opacity = lead === this
                     ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0
                         ? _b
                         : 1
@@ -6673,7 +6791,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                         : valuesToRender.opacityExit;
             }
             else {
-                styles.opacity = lead === this
+                styles2.opacity = lead === this
                     ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : ''
                     : valuesToRender.opacityExit !== void 0
                         ? valuesToRender.opacityExit
@@ -6683,23 +6801,23 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 if (valuesToRender[key7] === void 0)
                     continue;
                 const { correct, applyTo, } = scaleCorrectors[key7];
-                const corrected = styles.transform === 'none' ? valuesToRender[key7] : correct(valuesToRender[key7], lead);
+                const corrected = styles2.transform === 'none' ? valuesToRender[key7] : correct(valuesToRender[key7], lead);
                 if (applyTo) {
                     const num = applyTo.length;
                     for (let i = 0; i < num; i++) {
-                        styles[applyTo[i]] = corrected;
+                        styles2[applyTo[i]] = corrected;
                     }
                 }
                 else {
-                    styles[key7] = corrected;
+                    styles2[key7] = corrected;
                 }
             }
             if (this.options.layoutId) {
-                styles.pointerEvents = lead === this
+                styles2.pointerEvents = lead === this
                     ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ''
                     : 'none';
             }
-            return styles;
+            return styles2;
         }
         clearSnapshot() {
             this.resumeFrom = this.snapshot = void 0;
@@ -8175,97 +8293,6 @@ var wrap = (min, max, v) => {
     const rangeSize = max - min;
     return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
-function observeTimeline(update, timeline) {
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime, } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress2 = percentage / 100;
-        if (prevProgress !== progress2) {
-            update(progress2);
-        }
-        prevProgress = progress2;
-    };
-    frame.update(onFrame, true);
-    return () => cancelFrame(onFrame);
-}
-var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-var GroupPlaybackControls = class {
-    constructor(animations2) {
-        this.animations = animations2.filter(Boolean);
-    }
-    then(onResolve, onReject) {
-        return Promise.all(this.animations).then(onResolve).catch(onReject);
-    }
-    /**
-     * TODO: Filter out cancelled or stopped animations before returning
-     */
-    getAll(propName) {
-        return this.animations[0][propName];
-    }
-    setAll(propName, newValue) {
-        for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i][propName] = newValue;
-        }
-    }
-    attachTimeline(timeline) {
-        const cancelAll = this.animations.map((animation) => {
-            if (supportsScrollTimeline() && animation.attachTimeline) {
-                animation.attachTimeline(timeline);
-            }
-            else {
-                animation.pause();
-                return observeTimeline((progress2) => {
-                    animation.time = animation.duration * progress2;
-                }, timeline);
-            }
-        });
-        return () => {
-            cancelAll.forEach((cancelTimeline, i) => {
-                if (cancelTimeline)
-                    cancelTimeline();
-                this.animations[i].stop();
-            });
-        };
-    }
-    get time() {
-        return this.getAll('time');
-    }
-    set time(time2) {
-        this.setAll('time', time2);
-    }
-    get speed() {
-        return this.getAll('speed');
-    }
-    set speed(speed) {
-        this.setAll('speed', speed);
-    }
-    get duration() {
-        let max = 0;
-        for (let i = 0; i < this.animations.length; i++) {
-            max = Math.max(max, this.animations[i].duration);
-        }
-        return max;
-    }
-    runAll(methodName) {
-        this.animations.forEach((controls) => controls[methodName]());
-    }
-    play() {
-        this.runAll('play');
-    }
-    pause() {
-        this.runAll('pause');
-    }
-    stop() {
-        this.runAll('stop');
-    }
-    cancel() {
-        this.runAll('cancel');
-    }
-    complete() {
-        this.runAll('complete');
-    }
-};
 function isDOMKeyframes(keyframes2) {
     return typeof keyframes2 === 'object' && !Array.isArray(keyframes2);
 }
@@ -8963,7 +8990,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.W4GEXVYP.js
+// https :https://app.framerstatic.com/framer.IBCXHSKM.js
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
@@ -10094,11 +10121,11 @@ var require_resize_observer_umd = __commonJS({
                 };
                 return Scheduler2;
             }();
-            var scheduler = new Scheduler();
+            var scheduler2 = new Scheduler();
             var updateCount = function (n) {
-                !watching && n > 0 && scheduler.start();
+                !watching && n > 0 && scheduler2.start();
                 watching += n;
-                !watching && scheduler.stop();
+                !watching && scheduler2.stop();
             };
             var skipNotifyOnElement = function (target) {
                 return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === 'inline';
@@ -10156,7 +10183,7 @@ var require_resize_observer_umd = __commonJS({
                         firstObservation && resizeObservers.push(detail);
                         detail.observationTargets.push(new ResizeObservation(target, options && options.box));
                         updateCount(1);
-                        scheduler.schedule();
+                        scheduler2.schedule();
                     }
                 };
                 ResizeObserverController2.unobserve = function (resizeObserver, target) {
@@ -10895,11 +10922,8 @@ function lazy(factory) {
     let factoryPromise;
     let LoadedComponent;
     const Component15 = React4.forwardRef(function LazyWithPreload(props, ref) {
-        return React4.createElement(LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent, Object.assign(ref
-            ? {
-                ref,
-            }
-            : {}, props));
+        return React4.createElement(LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent, ref
+            ? Object.assign({ ref }, props) : props);
     });
     Component15.preload = () => {
         if (!factoryPromise) {
@@ -10924,7 +10948,24 @@ function getRouteElementId(route, hash2) {
     return void 0;
 }
 function isBot(userAgent) {
-    return /bot|Mediapartners-Google|Google-PageRenderer|yandex|ia_archiver/i.test(userAgent);
+    return /bot|Mediapartners-Google|Google-PageRenderer|yandex|ia_archiver/iu.test(userAgent);
+}
+function yieldToMain(isHighPriority) {
+    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) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        setTimeout(resolve, 0);
+    });
 }
 function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -11534,19 +11575,20 @@ function switchLocale(options) {
                 routeId: options.routeId,
                 pathVariables: result.pathVariables,
                 localeId: options.nextLocale.id,
-                paginationInfo: options.paginationInfo,
+                paginationInfo: window.history.state.paginationInfo,
             }, result.path);
         }
         catch (_f) { }
         return result;
     });
 }
-function pushLoadMoreHistory(paginationInfo) {
+function pushLoadMoreHistory(hash2, paginationInfo) {
     try {
         const currentHistoryState = window.history.state;
         if (!isHistoryState(currentHistoryState))
             return;
-        replaceHistoryState(Object.assign(Object.assign({}, currentHistoryState), { paginationInfo }));
+        const newPaginationInfo = Object.assign(Object.assign({}, currentHistoryState.paginationInfo), { [hash2]: paginationInfo });
+        replaceHistoryState(Object.assign(Object.assign({}, currentHistoryState), { paginationInfo: newPaginationInfo }));
     }
     catch (_f) { }
 }
@@ -11617,17 +11659,80 @@ function turnOnReactEventHandling() {
     eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options));
     eventsToStop = void 0;
 }
-var hydrated = false;
-function OnHydrationEnd({ addHydrationEndMarker, turnOffEventHandlerHack, }) {
+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`;
+    useInsertionEffect(() => {
+        if (hydrationInsertionEffectHasRun)
+            return;
+        hydrationInsertionEffectHasRun = true;
+        if (addHydrationMarkers) {
+            performance.mark(hydrationRenderEnd);
+            measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd);
+        }
+    }, []);
     useLayoutEffect(() => {
-        if (hydrated)
+        if (hydrationLayoutEffectHasRun)
+            return;
+        hydrationLayoutEffectHasRun = true;
+        if (addHydrationMarkers) {
+            performance.mark(hydrationLayoutEffectsEnd);
+            measureSafe(`${hydrationMarkPrefix}layout-effects`, hydrationRenderEnd, hydrationLayoutEffectsEnd);
+        }
+        requestAnimationFrame(() => {
+            var _a, _b, _c;
+            const browserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+            if (addHydrationMarkers) {
+                performance.mark(browserRenderStart);
+                measureSafe(`${hydrationMarkPrefix}uho`, (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
+                    _b !== void 0
+                    ? _b
+                    : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd)[0]) === null || _c === void 0
+                        ? void 0
+                        : _c.name, browserRenderStart);
+            }
+            setTimeout(() => {
+                if (turnOffEventHandlerHack) {
+                    turnOnReactEventHandling();
+                }
+                if (addHydrationMarkers) {
+                    performance.mark(hydrationFP);
+                    measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP);
+                    measureSafe(`${hydrationMarkPrefix}browser-render`, browserRenderStart, hydrationFP);
+                }
+            }, 0);
+        });
+    }, []);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (hydrationEffectHasRun)
             return;
-        hydrated = true;
-        if (turnOffEventHandlerHack)
+        hydrationEffectHasRun = true;
+        if (turnOffEventHandlerHack) {
             turnOnReactEventHandling();
-        if (addHydrationEndMarker) {
-            performance.mark('framer-hydration-end');
-            performance.measure('framer-hydration', 'framer-hydration-start', 'framer-hydration-end');
+        }
+        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);
         }
     }, []);
     return null;
@@ -11702,25 +11807,15 @@ function SuspenseThatPreservesDom({ children, }) {
     });
 }
 var defaultLocaleId = 'default';
-var noopAsync = () => __awaiter(void 0, void 0, void 0, function* () { });
-var defaultCollectionListPaginationInfo = {
-    paginationInfo: void 0,
-    setPaginationInfo: noopAsync,
-    loadMore: noopAsync,
-};
-var CollectionListPaginationInfoContext = /* @__PURE__ */ React4.createContext(defaultCollectionListPaginationInfo);
-function useCollectionListPaginationInfo() {
-    return React4.useContext(CollectionListPaginationInfoContext);
-}
 function useForceUpdate2() {
     const [_, setForcedRenderCount,] = React4.useState(0);
     return [_, React4.useCallback(() => setForcedRenderCount((v) => v + 1), []),];
 }
-var noopAsync2 = () => __awaiter(void 0, void 0, void 0, function* () { });
+var noopAsync = () => __awaiter(void 0, void 0, void 0, function* () { });
 var defaultLocaleInfo = {
     activeLocale: null,
     locales: [],
-    setLocale: noopAsync2,
+    setLocale: noopAsync,
 };
 var LocaleInfoContext = /* @__PURE__ */ React4.createContext(defaultLocaleInfo);
 function useLocaleInfo() {
@@ -11785,8 +11880,7 @@ function useScheduleRenderSideEffects(dep) {
         actions.current.push(cb);
     }, []);
 }
-function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = [], preserveQueryParams = false, enableImproveInpDuringHydration = false, shouldMarkHydrationEnd = false, }) {
-    var _a, _b;
+function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = [], preserveQueryParams = false, enableImproveInpDuringHydration = false, addHydrationMarkers = false, }) {
     useReplaceInitialState({
         disabled: disableHistory,
         routeId: initialRoute,
@@ -11800,41 +11894,16 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const currentLocaleIdRef = React4.useRef(initialLocaleId);
     const currentLocaleId = currentLocaleIdRef.current;
     const activeLocale = React4.useMemo(() => {
-        var _a2;
-        return (_a2 = locales.find(({ id: id3, }) => {
+        var _a;
+        return (_a = locales.find(({ id: id3, }) => {
             if (!currentLocaleId)
                 return id3 === defaultLocaleId;
             return id3 === currentLocaleId;
-        })) !== null && _a2 !== void 0
-            ? _a2
+        })) !== null && _a !== void 0
+            ? _a
             : null;
     }, [currentLocaleId, locales,]);
     const [dep, forceUpdate,] = useForceUpdate2();
-    const [paginationInfo, setPaginationInfo,] = React4.useState(typeof window !== 'undefined'
-        ? (_b = (_a = window === null || window === void 0 ? void 0 : window.history) === null || _a === void 0 ? void 0 : _a.state) ===
-            null || _b === void 0
-            ? void 0
-            : _b.pagination
-        : void 0);
-    const collectionListPaginationInfo = React4.useMemo(() => {
-        return {
-            paginationInfo,
-            setPaginationInfo: (newPaginationInfo) => __awaiter(this, void 0, void 0, function* () {
-                startTransition2(() => {
-                    setPaginationInfo(newPaginationInfo);
-                });
-            }),
-            loadMore: () => __awaiter(this, void 0, void 0, function* () {
-                if ((paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.type) !== 'loadMore')
-                    return;
-                const newPaginationInfo = Object.assign(Object.assign({}, paginationInfo), { currentPage: paginationInfo.currentPage + 1 });
-                pushLoadMoreHistory(newPaginationInfo);
-                startTransition2(() => {
-                    setPaginationInfo(newPaginationInfo);
-                });
-            }),
-        };
-    }, [paginationInfo,]);
     const localeInfo = React4.useMemo(() => {
         return {
             activeLocale,
@@ -11865,7 +11934,6 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                         pathVariables: currentPathVariablesRef.current,
                         collectionUtils,
                         preserveQueryParams,
-                        paginationInfo,
                     });
                     if (!localeResult)
                         return;
@@ -11877,17 +11945,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 catch (_f) { }
             }),
         };
-    }, [
-        activeLocale,
-        collectionUtils,
-        forceUpdate,
-        locales,
-        monitorNextRender,
-        paginationInfo,
-        preserveQueryParams,
-        routes,
-        startViewTransition2,
-    ]);
+    }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,]);
     const scheduleSideEffect = useScheduleRenderSideEffects(dep);
     const setCurrentRouteId = React4.useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false) => {
         currentRouteRef.current = routeId;
@@ -11901,11 +11959,11 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     }, [forceUpdate, monitorNextRender, scheduleSideEffect,]);
     usePopStateHandler(currentRouteRef, setCurrentRouteId);
     const navigate = React4.useCallback((routeId, hash2, pathVariables, smoothScroll) => {
-        var _a2, _b2;
+        var _a, _b;
         const newRoute = routes[routeId];
         if (pathVariables) {
             const inUse = /* @__PURE__ */ new Set();
-            const path = (_a2 = newRoute === null || newRoute === void 0 ? void 0 : newRoute.path) !== null && _a2 !== void 0 ? _a2 : '/';
+            const path = (_a = newRoute === null || newRoute === void 0 ? void 0 : newRoute.path) !== null && _a !== void 0 ? _a : '/';
             for (const match of path.matchAll(pathVariablesRegExp)) {
                 const usedVariable = match[1];
                 if (usedVariable === void 0) {
@@ -11923,7 +11981,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             routeId,
             pathVariables,
         })) {
-            if (((_b2 = window.history.state) === null || _b2 === void 0 ? void 0 : _b2.hash) !== hash2) {
+            if (((_b = window.history.state) === null || _b === void 0 ? void 0 : _b.hash) !== hash2) {
                 if (!disableHistory) {
                     const route = routes[routeId];
                     if (route) {
@@ -11982,26 +12040,23 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         api,
         children: jsx(LocaleInfoContext.Provider, {
             value: localeInfo,
-            children: jsx(CollectionListPaginationInfoContext.Provider, {
-                value: collectionListPaginationInfo,
-                children: jsxs(SuspenseThatPreservesDom, {
-                    children: [
-                        jsx(ErrorBoundary, {
-                            notFoundPage,
-                            defaultPageStyle,
-                            forceUpdateKey: dep,
-                            children: jsx(React4.Fragment, {
-                                children: pageExistsInCurrentLocale
-                                    ? renderPage(current.page, defaultPageStyle)
-                                    : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
-                            }, remountKey),
-                        }),
-                        jsx(OnHydrationEnd, {
-                            addHydrationEndMarker: shouldMarkHydrationEnd,
-                            turnOffEventHandlerHack: enableImproveInpDuringHydration,
-                        }),
-                    ],
-                }),
+            children: jsxs(SuspenseThatPreservesDom, {
+                children: [
+                    jsx(ErrorBoundary, {
+                        notFoundPage,
+                        defaultPageStyle,
+                        forceUpdateKey: dep,
+                        children: jsx(React4.Fragment, {
+                            children: pageExistsInCurrentLocale
+                                ? renderPage(current.page, defaultPageStyle)
+                                : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                        }, remountKey),
+                    }),
+                    jsx(OnHydrationEnd, {
+                        addHydrationMarkers,
+                        turnOffEventHandlerHack: enableImproveInpDuringHydration,
+                    }),
+                ],
             }),
         }),
     });
@@ -12187,22 +12242,30 @@ function useRoute(routeId) {
 var shouldPreloadBasedOnUA = /* @__PURE__ */ (() => typeof window !== 'undefined' && !isBot(navigator.userAgent))();
 function useRoutePreloader(routeIds, enabled = true) {
     const { getRoute, } = useRouter();
-    React4.useEffect(() => {
+    useEffect(() => {
         if (!getRoute || !enabled || !shouldPreloadBasedOnUA)
             return;
         for (const routeId of routeIds) {
-            const route = getRoute(routeId);
-            if (route === null || route === void 0 ? void 0 : route.page)
-                preloadComponent(route.page);
+            void preloadRoute(getRoute(routeId));
         }
     }, [routeIds, getRoute, enabled,]);
 }
-function preloadComponent(component) {
-    if (!shouldPreloadBasedOnUA)
-        return;
-    if (isLazyComponentType(component)) {
-        void component.preload();
-    }
+function preloadRoute(route) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!shouldPreloadBasedOnUA || !route)
+            return;
+        const component = route.page;
+        if (!component || !isLazyComponentType(component))
+            return;
+        yield yieldToMain();
+        try {
+            yield component.preload();
+        }
+        catch (e) {
+            if (false)
+                console.warn('Preload failed', route, e);
+        }
+    });
 }
 function useRouteAnchor(routeId, { elementId, hash: linkHash, } = {}) {
     const { navigate, currentPathVariables, preserveQueryParams, } = useRouter();
@@ -17697,8 +17760,8 @@ function injectComponentCSSRules() {
     if (didInject)
         return;
     didInject = true;
-    const styles = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
-    for (const rule of styles) {
+    const styles2 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
+    for (const rule of styles2) {
         injectCSSRule(rule, void 0, void 0);
     }
 }
@@ -19769,26 +19832,26 @@ function backgroundImageFromProps(props) {
     return applyForwardOverrides(backgroundImage, props);
 }
 function collectBorderStyleForProps(props, style, collapseEqualBorders = true) {
-    const { borderWidth, borderStyle, borderColor, } = props;
-    if (!borderWidth) {
+    const { borderWidth: borderWidth2, borderStyle, borderColor, } = props;
+    if (!borderWidth2) {
         return;
     }
     let borderTop;
     let borderBottom;
     let borderLeft;
     let borderRight;
-    if (typeof borderWidth === 'number') {
+    if (typeof borderWidth2 === 'number') {
         borderTop =
             borderBottom =
                 borderLeft =
                     borderRight =
-                        borderWidth;
+                        borderWidth2;
     }
     else {
-        borderTop = borderWidth.top || 0;
-        borderBottom = borderWidth.bottom || 0;
-        borderLeft = borderWidth.left || 0;
-        borderRight = borderWidth.right || 0;
+        borderTop = borderWidth2.top || 0;
+        borderBottom = borderWidth2.bottom || 0;
+        borderLeft = borderWidth2.left || 0;
+        borderRight = borderWidth2.right || 0;
     }
     if (borderTop === 0 && borderBottom === 0 && borderLeft === 0 && borderRight === 0) {
         return;
@@ -19832,7 +19895,7 @@ function Border(props) {
     });
 }
 function htmlElementAsMotionComponent(asElem) {
-    return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion(asElem) : motion['div'];
+    return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
 var isChrome2 = /* @__PURE__ */ isChrome();
 function layoutHintDataPropsForCenter(center) {
@@ -19869,23 +19932,7 @@ function processOverrideForwarding(props, children) {
             };
         }
     }
-    let _forwardedOverrides = props._forwardedOverrides;
-    const extractions = props._overrideForwardingDescription;
-    if (extractions) {
-        _forwardedOverrides = void 0;
-        for (const key7 in extractions) {
-            const propName = extractions[key7];
-            const value = props[propName];
-            if (value !== void 0) {
-                if (!_forwardedOverrides) {
-                    _forwardedOverrides = {};
-                    props = Object.assign({}, props);
-                }
-                _forwardedOverrides[key7] = props[propName];
-                delete props[propName];
-            }
-        }
-    }
+    const _forwardedOverrides = props._forwardedOverrides;
     if (!_forwardedOverrides) {
         return {
             props,
@@ -23017,7 +23064,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
         }
         render() {
             countNodeRender();
-            const { visible, id: id3, className, } = this.props;
+            const { visible, id: id3, className: className2, } = this.props;
             if (!visible) {
                 return null;
             }
@@ -23031,7 +23078,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
                 id: id3,
                 style,
                 ref: this.setElement,
-                className,
+                className: className2,
                 children: [
                     /* @__PURE__ */ jsx(ProvideParentSize, {
                         parentSize,
@@ -23042,19 +23089,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
             });
         }
         layoutChildren() {
-            let _forwardedOverrides = this.props._forwardedOverrides;
-            const extractions = this.props._overrideForwardingDescription;
-            if (extractions) {
-                let added = false;
-                _forwardedOverrides = {};
-                for (const [key7, value,] of Object.entries(extractions)) {
-                    added = true;
-                    _forwardedOverrides[key7] = asRecord(this.props)[value];
-                }
-                if (!added) {
-                    _forwardedOverrides = void 0;
-                }
-            }
+            const _forwardedOverrides = this.props._forwardedOverrides;
             let children = React4.Children.map(this.props.children, (child) => {
                 if (isConstraintSupportingChild(child)) {
                     return React4.cloneElement(child, {
@@ -24483,17 +24518,14 @@ function backdropTapAction(transition, goBackAction) {
     if (transition.goBackOnTapOutside !== false)
         return goBackAction;
 }
-function NavigationStyleSheet() {
-    React4.useInsertionEffect(() => {
-        injectComponentCSSRules();
-    }, []);
-    return null;
-}
 function NavigationWrapper(props) {
     const resetProjection = useResetProjection();
     const skipLayoutAnimation = useInstantLayoutTransition();
-    return /* @__PURE__ */ jsxs(Navigation, Object.assign(Object.assign({}, props), { resetProjection,
-        skipLayoutAnimation, children: [props.children, /* @__PURE__ */ jsx(NavigationStyleSheet, {}),] }));
+    React4.useInsertionEffect(() => {
+        injectComponentCSSRules();
+    }, []);
+    return /* @__PURE__ */ jsx(Navigation, Object.assign(Object.assign({}, props), { resetProjection,
+        skipLayoutAnimation, children: props.children }));
 }
 var import_hoist_non_react_statics3 = __toESM(require_hoist_non_react_statics_cjs(), 1);
 var NavigateTo = /* @__PURE__ */ ((NavigateTo2) => {
@@ -24584,6 +24616,40 @@ function transitionDirectionToSide(direction) {
 }
 var AnimateSharedLayout = (props) => props.children;
 var Draggable = /* @__PURE__ */ WithDragging(DeprecatedFrameWithEvents);
+function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', threshold, paginationInfo, }) {
+    const callback = React4.useCallback((entries) => {
+        const entry = entries[0];
+        const isIntersecting = entry == null ? void 0 : entry.isIntersecting;
+        if (isIntersecting)
+            loadMore();
+    }, [loadMore,]);
+    React4.useEffect(() => {
+        if (!elementRef.current)
+            return;
+        const observer2 = new IntersectionObserver(callback, {
+            rootMargin,
+            threshold,
+        });
+        observer2.observe(elementRef.current);
+        return () => {
+            observer2.disconnect();
+        };
+    }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,]);
+}
+function withInfiniteScroll(Component15) {
+    return React4.forwardRef((_f, ref) => {
+        var { __paginationInfo, __loadMore } = _f, props = __rest(_f, ["__paginationInfo", "__loadMore"]);
+        const backupRef = React4.useRef(null);
+        const infiniteScrollRef = ref !== null && ref !== void 0 ? ref : backupRef;
+        useInfiniteScroll({
+            rootMargin: '500px',
+            loadMore: __loadMore,
+            ref: infiniteScrollRef,
+            paginationInfo: __paginationInfo,
+        });
+        return /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({}, props), { ref: infiniteScrollRef }));
+    });
+}
 var import_process2 = __toESM(require_browser(), 1);
 function debounce(fn, time2) {
     let timeout;
@@ -24739,7 +24805,7 @@ function useSafariGapFix(gap, ref, display) {
 var Stack = /* @__PURE__ */ (() => {
     const StackInner = React4.forwardRef(function StackInner2(stackProps, forwardedRef) {
         var _f, _j;
-        const { as = 'div', direction = 'vertical', distribution = 'start', alignment = 'center', gap = 10, wrap: wrap2 = false, useFlexboxGap: externalUseFlexboxGap = true, children, style: styleProp, className, willChangeTransform, __fromCodeComponentNode, parentSize, __contentWrapperStyle } = stackProps, containerProps = __rest(stackProps, ["as", "direction", "distribution", "alignment", "gap", "wrap", "useFlexboxGap", "children", "style", "className", "willChangeTransform", "__fromCodeComponentNode", "parentSize", "__contentWrapperStyle"]);
+        const { as = 'div', direction = 'vertical', distribution = 'start', alignment = 'center', gap = 10, wrap: wrap2 = false, useFlexboxGap: externalUseFlexboxGap = true, children, style: styleProp, className: className2, willChangeTransform, __fromCodeComponentNode, parentSize, __contentWrapperStyle } = stackProps, containerProps = __rest(stackProps, ["as", "direction", "distribution", "alignment", "gap", "wrap", "useFlexboxGap", "children", "style", "className", "willChangeTransform", "__fromCodeComponentNode", "parentSize", "__contentWrapperStyle"]);
         const useFlexboxGap = Boolean(externalUseFlexboxGap || wrap2);
         const stackRef = React4.useRef(null);
         const onBeforeLayoutMeasure = useSafariGapFix(gap, stackRef, 'flex');
@@ -24798,8 +24864,7 @@ var Stack = /* @__PURE__ */ (() => {
             if (styleProp == null ? void 0 : styleProp.height)
                 contentWrapperStyle.height = styleProp == null ? void 0 : styleProp.height;
         }
-        return /* @__PURE__ */ jsx(FrameWithMotion, Object.assign(Object.assign(Object.assign(Object.assign({ as, background: fromCanvasComponent ? void 0 : 'none' }, props), { layoutId, ref: useForwardedRef(forwardedRef, stackRef) }), attributes), { style,
-            className, layoutScroll: true, children: /* @__PURE__ */ jsx(motion.div, {
+        return /* @__PURE__ */ jsx(FrameWithMotion, Object.assign(Object.assign(Object.assign(Object.assign({ as, background: fromCanvasComponent ? void 0 : 'none' }, props), { layoutId, ref: useForwardedRef(forwardedRef, stackRef) }), attributes), { style, className: className2, layoutScroll: true, children: /* @__PURE__ */ jsx(motion.div, {
                 'data-framer-stack-content-wrapper': true,
                 'data-framer-stack-direction-reverse': isReverse,
                 'data-framer-stack-gap-enabled': gapEnabled,
@@ -26957,7 +27022,7 @@ function useUpdateScrollOffset(ref, side, offset, cancelEmulatedTouchScrollAnima
     [offset,]);
 }
 var NativeScroll = /* @__PURE__ */ React4.forwardRef(function NativeScroll2(props, forwardedRef) {
-    const { direction = 'vertical', scrollBarVisible = false, dragEnabled = true, contentOffsetX = 0, contentOffsetY = 0, contentWidth: _contentWidth, contentHeight: _contentHeight, children, resetOffset, onScroll, className, 
+    const { direction = 'vertical', scrollBarVisible = false, dragEnabled = true, contentOffsetX = 0, contentOffsetY = 0, contentWidth: _contentWidth, contentHeight: _contentHeight, children, resetOffset, onScroll, className: className2, 
     // Not (yet) supported
     directionLock: _directionLock = false, wheelEnabled: _wheelEnabled = true, scrollAnimate: _scrollAnimate, dragTransition: _dragTransition, dragMomentum: _dragMomentum, dragElastic: _dragElastic, overdragEnabled: _overdragEnabled = true, onScrollStart: _onScrollStart, onScrollEnd: _onScrollEnd, onDragStart: _onDragStart, onDrag: _onDrag, onDragEnd: _onDragEnd, onUpdate: _onUpdate, onDirectionLock: _onDirectionLock, layoutId: specificLayoutId, native: _native } = props, 
     // Rest
@@ -27004,7 +27069,7 @@ var NativeScroll = /* @__PURE__ */ React4.forwardRef(function NativeScroll2(prop
         }
         : {};
     return /* @__PURE__ */ jsxs(FrameWithMotion, Object.assign(Object.assign(Object.assign({ ref, 'data-framer-component-type': 'NativeScroll', background: 'none' }, containerProps), size), { onScroll,
-        layoutId, onBeforeLayoutMeasure: updateScrollOffsetHandler, layoutScroll: true, className: cx(className, `direction-${direction}`, !scrollBarVisible && 'scrollbar-hidden'), children: [
+        layoutId, onBeforeLayoutMeasure: updateScrollOffsetHandler, layoutScroll: true, className: cx(className2, `direction-${direction}`, !scrollBarVisible && 'scrollbar-hidden'), children: [
             /* @__PURE__ */ jsx(EmptyState, {
                 children,
                 size: {
@@ -28134,6 +28199,31 @@ function ComponentPresetsConsumer({ componentIdentifier, children, }) {
     const presetProps = (_f = componentPresets[componentIdentifier]) !== null && _f !== void 0 ? _f : {};
     return children(presetProps);
 }
+function setRef(ref, value) {
+    if (isFunction(ref)) {
+        ref(value);
+    }
+    else if (isMutableRef(ref)) {
+        ref.current = value;
+    }
+}
+function isMutableRef(ref) {
+    return isObject2(ref) && 'current' in ref;
+}
+function createRefWithCallback(ref, callback) {
+    return {
+        get current() {
+            return ref.current;
+        },
+        set current(value) {
+            ref.current = value;
+            callback(value);
+        },
+    };
+}
+function mergeRefs(...refs) {
+    return (value) => refs.forEach((ref) => setRef(ref, value));
+}
 function useCloneChildrenWithPropsAndRef(forwardedRef) {
     const hook = useConstant2(() => createHook(forwardedRef));
     hook.useSetup(forwardedRef);
@@ -28216,17 +28306,6 @@ function createRefFunction(state) {
         setRef(prevForwardedRef, value);
     };
 }
-function setRef(ref, value) {
-    if (isFunction(ref)) {
-        ref(value);
-    }
-    else if (isMutableRef(ref)) {
-        ref.current = value;
-    }
-}
-function isMutableRef(ref) {
-    return isObject2(ref) && 'current' in ref;
-}
 var ComponentViewportContext = /* @__PURE__ */ React4.createContext({});
 function useComponentViewport() {
     return React4.useContext(ComponentViewportContext);
@@ -28323,8 +28402,8 @@ var withCSS = (Component15, escapedCSS, componentSerializationId) => React4.forw
     React4.useInsertionEffect(() => {
         if (componentSerializationId && componentsWithServerRenderedStyles.has(componentSerializationId))
             return;
-        const css = Array.isArray(escapedCSS) ? escapedCSS : escapedCSS.split('\n');
-        css.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2));
+        const css2 = Array.isArray(escapedCSS) ? escapedCSS : escapedCSS.split('\n');
+        css2.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2));
     }, []);
     return /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({}, props), { ref }));
 });
@@ -29074,7 +29153,7 @@ function childrenWithOrigin(child, { x, y, }) {
 }
 function Floating(_f) {
     var _j;
-    var { alignment, placement, safeArea, offsetX, offsetY, anchorRef, className, children, portalSelector, zIndex, collisionDetection = false, collisionDetectionPadding, onDismiss } = _f, rest = __rest(_f, ["alignment", "placement", "safeArea", "offsetX", "offsetY", "anchorRef", "className", "children", "portalSelector", "zIndex", "collisionDetection", "collisionDetectionPadding", "onDismiss"]);
+    var { alignment, placement, safeArea, offsetX, offsetY, anchorRef, className: className2, children, portalSelector, zIndex, collisionDetection = false, collisionDetectionPadding, onDismiss } = _f, rest = __rest(_f, ["alignment", "placement", "safeArea", "offsetX", "offsetY", "anchorRef", "className", "children", "portalSelector", "zIndex", "collisionDetection", "collisionDetectionPadding", "onDismiss"]);
     const floatingPositionRef = React4.useRef(null);
     const safeAreaRef = React4.useRef(null);
     const contentRef = React4.useRef(null);
@@ -29144,7 +29223,7 @@ function Floating(_f) {
         onDismiss,
     });
     return ReactDOM.createPortal(
-    /* @__PURE__ */ jsxs('div', Object.assign(Object.assign({ ref: floatingPositionRef, className, style: {
+    /* @__PURE__ */ jsxs('div', Object.assign(Object.assign({ ref: floatingPositionRef, className: className2, style: {
             // Initially rendered as hidden, but the layout effect will set
             // to visible when the position is calculated.
             visibility: 'hidden',
@@ -29329,6 +29408,102 @@ function navigateFromAttributes(navigate, element, implicitPathVariables) {
     navigate(routeId, elementId, Object.assign({}, implicitPathVariables, pathVariables), smoothScroll);
     return true;
 }
+var PRELOAD_AFTER_MS = 500;
+var OBSERVER_THRESHOLD = 0.9;
+var LOW_MEMORY_THRESHOLD = 1.7;
+var MAX_CONCURRENT_PRELOADS_SLOW_NETWORK = 4;
+var MAX_CONCURRENT_PRELOADS_FAST_NETWORK = Infinity;
+var nodeToRoute = /* @__PURE__ */ new WeakMap();
+var preloadedRoutes = /* @__PURE__ */ new Set();
+var routeToNodesInViewport = /* @__PURE__ */ new Map();
+function getObserveRouteForPreloadingFn() {
+    var _a;
+    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};
+    const lowDeviceMemory = navigator.deviceMemory && navigator.deviceMemory > LOW_MEMORY_THRESHOLD;
+    let effectiveType, preloadDisabled, maxPreloadAmount;
+    function updateConnection() {
+        effectiveType = connection.effectiveType || '';
+        preloadDisabled = connection.saveData || effectiveType.includes('2g');
+        maxPreloadAmount = effectiveType === '3g' || lowDeviceMemory
+            ? MAX_CONCURRENT_PRELOADS_SLOW_NETWORK
+            : MAX_CONCURRENT_PRELOADS_FAST_NETWORK;
+    }
+    (_a = connection.addEventListener) == null ? void 0 : _a.call(connection, 'change', updateConnection);
+    updateConnection();
+    const observer2 = new IntersectionObserver(onPreloadIntersectionChange, {
+        threshold: OBSERVER_THRESHOLD,
+    });
+    let activePreloadsAmount = 0;
+    function preloadTimeout(route, target) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (preloadDisabled)
+                return;
+            const nodesInViewport = routeToNodesInViewport.get(route);
+            if (!(nodesInViewport == null ? void 0 : nodesInViewport.size) || preloadedRoutes.has(route))
+                return;
+            ++activePreloadsAmount;
+            preloadedRoutes.add(route);
+            const preloadDone = preloadRoute(route).catch(() => {
+                if (false) {
+                    throw new Error('Error in preloadRoute during preloadTimeout. This should never happen as it introduces bugs. Please make sure preloadRoute does not throw.');
+                }
+            });
+            observer2.unobserve(target);
+            nodeToRoute.delete(target);
+            for (const node of nodesInViewport) {
+                observer2.unobserve(node);
+                nodeToRoute.delete(node);
+            }
+            nodesInViewport.clear();
+            routeToNodesInViewport.delete(route);
+            yield preloadDone;
+            --activePreloadsAmount;
+        });
+    }
+    function onPreloadIntersectionChange(entries) {
+        var _f;
+        var _a2;
+        for (const entry of entries) {
+            const target = entry.target;
+            const route = nodeToRoute.get(target);
+            if (!route || preloadedRoutes.has(route)) {
+                observer2.unobserve(target);
+                nodeToRoute.delete(target);
+                continue;
+            }
+            const nodes = routeToNodesInViewport.get(route);
+            const amountOfNodesInViewport = (_f = ((_a2 = routeToNodesInViewport.get(route)) == null ? void 0 : _a2.size)) !== null && _f !== void 0 ? _f : 0;
+            if (entry.isIntersecting) {
+                if (activePreloadsAmount >= maxPreloadAmount)
+                    continue;
+                if (nodes)
+                    nodes.add(target);
+                else
+                    routeToNodesInViewport.set(route, /* @__PURE__ */ new Set([target,]));
+                setTimeout(preloadTimeout.bind(void 0, route, target), PRELOAD_AFTER_MS);
+            }
+            else {
+                if (nodes)
+                    nodes.delete(target);
+                if (amountOfNodesInViewport <= 1)
+                    routeToNodesInViewport.delete(route);
+            }
+        }
+    }
+    return (route, node) => {
+        if (preloadedRoutes.has(route))
+            return;
+        nodeToRoute.set(node, route);
+        observer2.observe(node);
+        return () => {
+            nodeToRoute.delete(node);
+            observer2.unobserve(node);
+        };
+    };
+}
+var observeRouteForPreloading = 
+// this also guards `window`
+!shouldPreloadBasedOnUA || typeof IntersectionObserver === 'undefined' ? null : /* @__PURE__ */ getObserveRouteForPreloadingFn();
 var noLocale = {};
 var resolveSlugCache = /* @__PURE__ */ new WeakMap();
 function resolveSlug(unresolvedSlug, utilsByCollectionId, activeLocale) {
@@ -29395,10 +29570,10 @@ function linkFromFramerPageLink(link) {
     };
 }
 var pathVariablesRegExp2 = /:([a-z]\w*)/gi;
-var PathVariablesContext = /* @__PURE__ */ React4.createContext(void 0);
+var PathVariablesContext = /* @__PURE__ */ createContext(void 0);
 function useImplicitPathVariables() {
     var _a;
-    const contextPathVariables = React4.useContext(PathVariablesContext);
+    const contextPathVariables = useContext3(PathVariablesContext);
     const currentPathVariables = (_a = useCurrentRoute()) == null ? void 0 : _a.pathVariables;
     const pathVariables = contextPathVariables || currentPathVariables;
     return pathVariables;
@@ -29422,7 +29597,7 @@ function linkMatchesRoute(route, { webPageId, hash: hash2, pathVariables, }, imp
 }
 function useLinkMatchesRoute(link) {
     const route = useCurrentRoute();
-    const contextPathVariables = React4.useContext(PathVariablesContext);
+    const contextPathVariables = useContext3(PathVariablesContext);
     if (!route)
         return false;
     const pageLink = isString22(link) ? linkFromFramerPageLink(link) : link;
@@ -29479,41 +29654,6 @@ function createOnClickLinkHandler(router, routeId, elementId, combinedPathVariab
         (_b = router.navigate) == null ? void 0 : _b.call(router, routeId, elementId, combinedPathVariables, smoothScroll);
     });
 }
-function propsForRoutePath(href, openInNewTab, router, currentRoute, implicitPathVariables, smoothScroll) {
-    const isInternal = isInternalURL(href);
-    if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
-        return propsForLink(href, openInNewTab);
-    }
-    try {
-        const [pathnameWithQueryParams, hash2,] = href.split('#', 2);
-        assert(pathnameWithQueryParams !== void 0, 'A href must have a defined pathname.');
-        const [pathname,] = pathnameWithQueryParams.split('?', 2);
-        assert(pathname !== void 0, 'A href must have a defined pathname.');
-        const { routeId, pathVariables, } = inferInitialRouteFromPath(router.routes, pathname);
-        const route = router.getRoute(routeId);
-        if (route) {
-            preloadComponent(route.page);
-            const combinedPathVariables = Object.assign({}, implicitPathVariables, pathVariables);
-            const path = getPathForRoute(route, {
-                currentRoutePath: currentRoute.path,
-                currentPathVariables: currentRoute.pathVariables,
-                // The hash value is already fully resolved so we don't need to
-                // provide any hashVariables.
-                hash: hash2 || void 0,
-                pathVariables: combinedPathVariables,
-                preserveQueryParams: router.preserveQueryParams,
-            });
-            const anchorTarget = getTargetAttrValue(openInNewTab, true);
-            return {
-                href: path,
-                target: anchorTarget,
-                onClick: createOnClickLinkHandler(router, routeId, hash2 || void 0, combinedPathVariables, smoothScroll),
-            };
-        }
-    }
-    catch (_f) { }
-    return propsForLink(href, openInNewTab);
-}
 function resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, collectionUtils, activeLocale) {
     return __awaiter(this, void 0, void 0, function* () {
         function handleSlugs(unresolvedSlugs) {
@@ -29573,14 +29713,92 @@ function resolveSlugsWithSuspense(unresolvedPathSlugs, unresolvedHashSlugs, coll
     }
     return result;
 }
-var Link = /* @__PURE__ */ React4.forwardRef((_f, forwardedRef) => {
+function propsForRoutePath(href, openInNewTab, router, currentRoute, implicitPathVariables, smoothScroll) {
+    const isInternal = isInternalURL(href);
+    if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
+        return propsForLink(href, openInNewTab);
+    }
+    try {
+        const [pathnameWithQueryParams, hash2,] = href.split('#', 2);
+        assert(pathnameWithQueryParams !== void 0, 'A href must have a defined pathname.');
+        const [pathname,] = pathnameWithQueryParams.split('?', 2);
+        assert(pathname !== void 0, 'A href must have a defined pathname.');
+        const { routeId, pathVariables, } = inferInitialRouteFromPath(router.routes, pathname);
+        const route = router.getRoute(routeId);
+        if (route) {
+            const combinedPathVariables = Object.assign({}, implicitPathVariables, pathVariables);
+            const path = getPathForRoute(route, {
+                currentRoutePath: currentRoute.path,
+                currentPathVariables: currentRoute.pathVariables,
+                // The hash value is already fully resolved so we don't need to
+                // provide any hashVariables.
+                hash: hash2 || void 0,
+                pathVariables: combinedPathVariables,
+                preserveQueryParams: router.preserveQueryParams,
+            });
+            const anchorTarget = getTargetAttrValue(openInNewTab, true);
+            return {
+                href: path,
+                target: anchorTarget,
+                onClick: createOnClickLinkHandler(router, routeId, hash2 || void 0, combinedPathVariables, smoothScroll),
+            };
+        }
+    }
+    catch (_f) { }
+    return propsForLink(href, openInNewTab);
+}
+function getRouteFromPageLink(pageLink, router, currentRoute) {
+    var _a;
+    if (isString22(pageLink)) {
+        const isInternal = isInternalURL(pageLink);
+        if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
+            return;
+        }
+        const [pathnameWithQueryParams,] = pageLink.split('#', 2);
+        if (pathnameWithQueryParams === void 0)
+            return;
+        const [pathname,] = pathnameWithQueryParams.split('?', 2);
+        if (pathname === void 0)
+            return;
+        const { routeId, } = inferInitialRouteFromPath(router.routes, pathname);
+        return router.getRoute(routeId);
+    }
+    const { webPageId, } = pageLink;
+    return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId);
+}
+var Link = /* @__PURE__ */ forwardRef((_f, forwardedRef) => {
     var { children, href, openInNewTab, smoothScroll } = _f, restProps = __rest(_f, ["children", "href", "openInNewTab", "smoothScroll"]);
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
     const { activeLocale, } = useLocaleInfo();
+    const fallbackRef = useRef(null);
+    const stableObserverChildRef = useMemo(() => {
+        let cleanupFn;
+        const observerCallback = (node) => {
+            var _a;
+            if (node === null) {
+                cleanupFn == null ? void 0 : cleanupFn();
+                cleanupFn = void 0;
+                return;
+            }
+            const pageLink = isLinkToWebPage(href) ? href : linkFromFramerPageLink(href);
+            if (!pageLink)
+                return;
+            const route = getRouteFromPageLink(pageLink, router, currentRoute);
+            if (!route)
+                return;
+            cleanupFn = (_a = observeRouteForPreloading) == null ? void 0 : _a(route, node);
+        };
+        const hasRef = isValidElement(children) && 'ref' in children;
+        if (hasRef && isMutableRef(children.ref))
+            return createRefWithCallback(children.ref, observerCallback);
+        if (hasRef && isFunction(children.ref))
+            return mergeRefs(children.ref, observerCallback);
+        return createRefWithCallback(fallbackRef, observerCallback);
+    }, [href, router, currentRoute, children,]);
     const clone = useCloneChildrenWithPropsAndRef(forwardedRef);
-    const props = React4.useMemo(() => {
+    const props = useMemo(() => {
         var _a;
         if (!href)
             return {};
@@ -29591,13 +29809,11 @@ var Link = /* @__PURE__ */ React4.forwardRef((_f, forwardedRef) => {
             return propsForRoutePath(pageLink, openInNewTab, router, currentRoute, implicitPathVariables, smoothScroll);
         }
         const { webPageId, hash: hash2, pathVariables, hashVariables, unresolvedHashSlugs, unresolvedPathSlugs, } = pageLink;
-        const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId);
         const resolvedSlugs = resolveSlugsWithSuspense(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale);
-        if (route)
-            preloadComponent(route.page);
-        const combinedPathVariable = Object.assign({}, implicitPathVariables, pathVariables, resolvedSlugs == null ? void 0 : resolvedSlugs.path);
-        const combinedHashVariable = Object.assign({}, implicitPathVariables, hashVariables, resolvedSlugs == null ? void 0 : resolvedSlugs.hash);
+        const combinedPathVariable = Object.assign(Object.assign(Object.assign({}, implicitPathVariables), pathVariables), (resolvedSlugs == null ? void 0 : resolvedSlugs.path));
+        const combinedHashVariable = Object.assign(Object.assign(Object.assign({}, implicitPathVariables), hashVariables), (resolvedSlugs == null ? void 0 : resolvedSlugs.hash));
         const anchorTarget = getTargetAttrValue(openInNewTab, true);
+        const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId);
         const resolvedHref = getPathForRoute(route, {
             currentRoutePath: currentRoute == null ? void 0 : currentRoute.path,
             currentPathVariables: currentRoute == null ? void 0 : currentRoute.pathVariables,
@@ -29614,7 +29830,7 @@ var Link = /* @__PURE__ */ React4.forwardRef((_f, forwardedRef) => {
             'data-framer-page-link-current': currentRoute && linkMatchesRoute(currentRoute, pageLink, implicitPathVariables) || void 0,
         };
     }, [href, router, activeLocale, implicitPathVariables, openInNewTab, currentRoute, smoothScroll,]);
-    return clone(children, Object.assign(Object.assign({}, restProps), props));
+    return clone(children, Object.assign(Object.assign(Object.assign({}, restProps), props), { ref: stableObserverChildRef }));
 });
 function resolveLink(href, router, implicitPathVariables) {
     return resolveLinkInternal(href, router, implicitPathVariables);
@@ -29656,7 +29872,7 @@ function resolvePageScope(pageLink, router) {
         preserveQueryParams: false,
     });
 }
-function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, enableImproveInpDuringHydration, shouldMarkHydrationEnd = false, }) {
+function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, enableImproveInpDuringHydration, addHydrationMarkers = false, }) {
     React4.useEffect(() => {
         if (isWebsite)
             return;
@@ -29680,7 +29896,7 @@ function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, co
                     },
                     preserveQueryParams,
                     enableImproveInpDuringHydration,
-                    shouldMarkHydrationEnd,
+                    addHydrationMarkers,
                 }),
             }),
         });
@@ -32694,7 +32910,8 @@ function useQueryData(query) {
     return cached.read();
 }
 function useQueryCount(query) {
-    const collection = useQueryData(query);
+    const countQuery = Object.assign(Object.assign({}, query), { select: [] });
+    const collection = useQueryData(countQuery);
     return collection.length;
 }
 function getWhereExpressionFromPathVariables(pathVariables) {
@@ -32735,25 +32952,30 @@ function getWhereExpressionFromPathVariables(pathVariables) {
         right: expression,
     }));
 }
-function useLoadMorePaginatedQuery(query, pageSize) {
-    const { paginationInfo, setPaginationInfo, } = useCollectionListPaginationInfo();
+function useLoadMorePaginatedQuery(query, pageSize, hash2) {
     const count = useQueryCount(query);
-    const initialPaginationInfo = useMemo(() => {
+    const [paginationInfo, setPaginationInfo,] = useState(() => {
+        var _f;
+        var _a, _b, _c, _d;
         const totalPages = Math.ceil(count / pageSize);
+        const currentPage = (_f = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
+            ? void 0
+            : _b.paginationInfo) == null
+            ? void 0
+            : _c[hash2]) == null
+            ? void 0
+            : _d.currentPage)) !== null && _f !== void 0 ? _f : 1;
         return {
-            currentPage: 1,
+            currentPage,
             totalPages,
-            type: 'loadMore',
+            isLoading: false,
         };
-    }, [count, pageSize,]);
+    });
     useEffect(() => {
-        if (!paginationInfo) {
-            setPaginationInfo(initialPaginationInfo);
-        }
-    }, [count, initialPaginationInfo, paginationInfo, setPaginationInfo,]);
+        pushLoadMoreHistory(hash2, paginationInfo);
+    }, [hash2, paginationInfo,]);
     const paginatedQuery = useMemo(() => {
-        const currentPaginationInfo = paginationInfo !== null && paginationInfo !== void 0 ? paginationInfo : initialPaginationInfo;
-        let limit = pageSize * currentPaginationInfo.currentPage;
+        let limit = pageSize * paginationInfo.currentPage;
         if (query.limit) {
             if (query.limit.type !== 'LiteralValue' || typeof query.limit.value !== 'number') {
                 throw new Error('Unexpected type for query limit');
@@ -32764,8 +32986,23 @@ function useLoadMorePaginatedQuery(query, pageSize) {
                 type: 'LiteralValue',
                 value: limit,
             } });
-    }, [initialPaginationInfo, query, pageSize, paginationInfo,]);
-    return paginatedQuery;
+    }, [query, pageSize, paginationInfo,]);
+    const onCanvas = useIsOnFramerCanvas();
+    const loadMore = useCallback(() => {
+        if (onCanvas)
+            return;
+        if (paginationInfo.currentPage >= paginationInfo.totalPages)
+            return;
+        setPaginationInfo((info) => (Object.assign(Object.assign({}, info), { isLoading: true })));
+        requestAnimationFrame(() => {
+            setPaginationInfo((info) => (Object.assign(Object.assign({}, info), { currentPage: Math.min(info.currentPage + 1, info.totalPages), isLoading: false })));
+        });
+    }, [onCanvas, paginationInfo.currentPage, paginationInfo.totalPages,]);
+    return {
+        paginatedQuery,
+        paginationInfo,
+        loadMore,
+    };
 }
 function createGestureVariant(variant, type) {
     return `${variant}-${type}`;
@@ -32818,9 +33055,10 @@ var CycleVariantState = /* @__PURE__ */ Symbol('cycle');
 function useVariantState({ variant, defaultVariant: externalDefaultVariant, transitions: externalTransitions, enabledGestures: externalEnabledGestures, cycleOrder: externalCycleOrder = [], variantProps: variantProps2 = {}, variantClassNames = {}, }) {
     const forceUpdate = useForceUpdate3();
     const validBaseVariants = useConstant2(() => new Set(externalCycleOrder));
-    const internalState = useRef({
+    const internalState = React4.useRef({
         isHovered: false,
         isPressed: false,
+        hasPressedVariants: true,
         baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants),
         lastVariant: variant,
         gestureVariant: void 0,
@@ -32832,14 +33070,14 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         cycleOrder: externalCycleOrder,
         transitions: externalTransitions,
     });
-    const resolveNextVariant = useCallback((targetBaseVariant) => {
+    const resolveNextVariant = React4.useCallback((targetBaseVariant) => {
         const { isHovered: isHovered2, isPressed: isPressed2, enabledGestures: enabledGestures2, defaultVariant: defaultVariant2, } = internalState.current;
         const nextBaseVariant = safeBaseVariant(targetBaseVariant, defaultVariant2, validBaseVariants);
         const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2);
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
     }, [validBaseVariants,]);
-    const setGestureState = useCallback(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
+    const setGestureState = React4.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -32849,10 +33087,10 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
             internalState.current.baseVariant = nextBase || defaultVariant2;
             internalState.current.gestureVariant = nextGesture;
-            startTransition2(forceUpdate);
+            forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
-    const setVariant = useCallback((proposedVariant) => {
+    const setVariant = React4.useCallback((proposedVariant) => {
         const { defaultVariant: defaultVariant2, cycleOrder, baseVariant: baseVariant2, gestureVariant: gestureVariant2, } = internalState.current;
         const nextBaseVariant = proposedVariant === CycleVariantState
             ? nextVariant(cycleOrder || [], baseVariant2 || defaultVariant2)
@@ -32861,7 +33099,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
             internalState.current.baseVariant = nextBase || defaultVariant2;
             internalState.current.gestureVariant = nextGesture;
-            startTransition2(forceUpdate);
+            forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
     if (variant !== internalState.current.lastVariant) {
@@ -32874,12 +33112,37 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
     }
     const { baseVariant, gestureVariant, defaultVariant, enabledGestures, isHovered, isPressed, } = internalState.current;
     const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2);
-    return useMemo(() => {
+    return React4.useMemo(() => {
         const variants = [];
         if (baseVariant !== defaultVariant)
             variants.push(baseVariant);
         if (gestureVariant)
             variants.push(gestureVariant);
+        const gestures = enabledGestures == null ? void 0 : enabledGestures[baseVariant];
+        const gestureHandlers = {};
+        if (gestures == null ? void 0 : gestures.hover) {
+            Object.assign(gestureHandlers, {
+                onMouseEnter: () => setGestureState({
+                    isHovered: true,
+                }),
+                onMouseLeave: () => setGestureState({
+                    isHovered: false,
+                }),
+            });
+        }
+        if (gestures == null ? void 0 : gestures.pressed) {
+            Object.assign(gestureHandlers, {
+                onTapStart: () => setGestureState({
+                    isPressed: true,
+                }),
+                onTapCancel: () => setGestureState({
+                    isPressed: false,
+                }),
+                onTap: () => setGestureState({
+                    isPressed: false,
+                }),
+            });
+        }
         return {
             variants,
             baseVariant,
@@ -32888,7 +33151,8 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             setVariant,
             setGestureState,
             addVariantProps,
-            classNames: cx(createVariantClassName(baseVariant, variantClassNames), getGesture(enabledGestures == null ? void 0 : enabledGestures[baseVariant], isHovered, isPressed)),
+            gestureHandlers,
+            classNames: cx(createVariantClassName(baseVariant, variantClassNames), getGesture(gestures, isHovered, isPressed)),
         };
     }, [
         baseVariant,
@@ -33727,8 +33991,8 @@ var LocalFontSource = class {
         };
         const aliases = /* @__PURE__ */ new Map();
         const weights = [400, 100, 200, 300, 500, 600, 700, 800, 900,];
-        const styles = ['normal', 'italic',];
-        for (const style of styles) {
+        const styles2 = ['normal', 'italic',];
+        for (const style of styles2) {
             for (const weight of weights) {
                 const variant = createVariantName(weight, style);
                 const alias = `__SystemDefault-${weight}-${style}__`;
@@ -34637,13 +34901,10 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
                 },
             });
         }
-        renderErrorPlaceholder(file, error) {
+        renderErrorPlaceholder(error) {
             const { RenderPlaceholder, } = runtime;
             return /* @__PURE__ */ jsx(FrameWithMotion, Object.assign(Object.assign({}, this.props), { background: null, children: /* @__PURE__ */ jsx(RenderPlaceholder, {
-                    error: {
-                        error,
-                        file,
-                    },
+                    error,
                 }) }));
         }
         render() {
@@ -34656,13 +34917,23 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
             if (noChildren) {
                 const errorComponent = runtime.componentLoader.errorForIdentifier(componentIdentifier);
                 if (errorComponent) {
-                    return this.renderErrorPlaceholder(errorComponent.file, errorComponent.error);
+                    const title = `Error in ${errorComponent.file}`;
+                    const message = errorComponent.error;
+                    return this.renderErrorPlaceholder({
+                        title,
+                        message,
+                    });
                 }
             }
             if (error && error.children === children) {
                 const component = runtime.componentLoader.componentForIdentifier(componentIdentifier);
                 const file = component ? component.file : '???';
-                return this.renderErrorPlaceholder(file, error.message);
+                const title = `Error in ${file}`;
+                const message = error.message;
+                return this.renderErrorPlaceholder({
+                    title,
+                    message,
+                });
             }
             (_b = (_a2 = asRecord(safeWindow))['__checkComponentBudget__']) == null ? void 0 : _b.call(_a2);
             let frameProps = this.props;
@@ -34813,8 +35084,8 @@ function formReducer(_state, { type, }) {
 function preventDefault(e) {
     e.preventDefault();
 }
-var FormContainer = (_f) => {
-    var { action, formId, disabled, children, redirectUrl } = _f, props = __rest(_f, ["action", "formId", "disabled", "children", "redirectUrl"]);
+var FormContainer = /* @__PURE__ */ React4.forwardRef((_f, ref) => {
+    var { action, formId, disabled, children, redirectUrl, onSuccess, onError } = _f, props = __rest(_f, ["action", "formId", "disabled", "children", "redirectUrl", "onSuccess", "onError"]);
     const [state, dispatch,] = React4.useReducer(formReducer, {
         state: disabled ? 'disabled' : void 0,
     });
@@ -34860,6 +35131,7 @@ var FormContainer = (_f) => {
             dispatch({
                 type: 'success',
             });
+            onSuccess == null ? void 0 : onSuccess();
             if (redirectUrl) {
                 yield redirectTo(redirectUrl);
             }
@@ -34868,6 +35140,7 @@ var FormContainer = (_f) => {
             dispatch({
                 type: 'error',
             });
+            onError == null ? void 0 : onError();
         }
     });
     const handleKeyDown = (event) => {
@@ -34880,8 +35153,8 @@ var FormContainer = (_f) => {
             void handleSubmit(event);
         }
     };
-    return /* @__PURE__ */ jsx(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: isSubmitEnabled ? handleSubmit : preventDefault, onKeyDown: handleKeyDown, children: children(state) }));
-};
+    return /* @__PURE__ */ jsx(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: isSubmitEnabled ? handleSubmit : preventDefault, onKeyDown: handleKeyDown, ref, children: children(state) }));
+});
 function submitForm(action, data2) {
     return __awaiter(this, void 0, void 0, function* () {
         const proofOfWork = yield calculateProofOfWork();
@@ -34935,21 +35208,56 @@ var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2
     FormInputStyleVariableNames2['FontLineHeight'] = '--framer-input-font-line-height';
     FormInputStyleVariableNames2['PlaceholderColor'] = '--framer-input-placeholder-color';
     FormInputStyleVariableNames2['BoxShadow'] = '--framer-input-box-shadow';
-    FormInputStyleVariableNames2['ZIndex'] = '--framer-input-z-index';
     FormInputStyleVariableNames2['FocusedBorderColor'] = '--framer-input-focused-border-color';
     FormInputStyleVariableNames2['FocusedBorderWidth'] = '--framer-input-focused-border-width';
     FormInputStyleVariableNames2['FocusedBorderStyle'] = '--framer-input-focused-border-style';
     FormInputStyleVariableNames2['FocusedBackground'] = '--framer-input-focused-background';
     FormInputStyleVariableNames2['FocusedBoxShadow'] = '--framer-input-focused-box-shadow';
     FormInputStyleVariableNames2['FocusedTransition'] = '--framer-input-focused-transition';
+    FormInputStyleVariableNames2['BooleanCheckedIconURL'] = '--framer-input-boolean-icon';
+    FormInputStyleVariableNames2['BooleanCheckedBackground'] = '--framer-input-boolean-checked-background';
+    FormInputStyleVariableNames2['BooleanCheckedBorderColor'] = '--framer-input-boolean-checked-border-color';
+    FormInputStyleVariableNames2['BooleanCheckedBorderWidth'] = '--framer-input-boolean-checked-border-width';
+    FormInputStyleVariableNames2['BooleanCheckedBorderStyle'] = '--framer-input-boolean-checked-border-style';
+    FormInputStyleVariableNames2['BooleanCheckedBoxShadow'] = '--framer-input-boolean-checked-box-shadow';
+    FormInputStyleVariableNames2['BooleanCheckedTransition'] = '--framer-input-boolean-checked-transition';
+    FormInputStyleVariableNames2['InvalidTextColor'] = '--framer-input-invalid-text-color';
     return FormInputStyleVariableNames2;
 })(FormInputStyleVariableNames || {});
 var Var = FormInputStyleVariableNames;
-var inputClassName = 'framer-form-input';
-var inputWrapperClassName = 'framer-form-input-wrapper';
-function cssVar(a, b) {
-    return `var(${a}, var(${b}))`;
+var inputClassName = /* @__PURE__ */ (() => 'framer-form-input')();
+var inputWrapperClassName = /* @__PURE__ */ (() => 'framer-form-input-wrapper')();
+var emptyValueClassName = /* @__PURE__ */ (() => 'framer-form-input-empty')();
+var forcedFocusClassName = /* @__PURE__ */ (() => 'framer-form-input-forced-focus')();
+var forcedCheckedClassName = /* @__PURE__ */ (() => 'framer-form-input-forced-checked')();
+function cssValue(value) {
+    if (typeof value === 'number')
+        return value;
+    if (value.startsWith('--'))
+        return css.variable(value);
+    if (value === '')
+        return '""';
+    return value;
+}
+function css(selector, declaration) {
+    let output = ' ';
+    for (const key7 in declaration) {
+        output += `${key7.replace(/([A-Z])/gu, '-$1').toLowerCase()}: ${cssValue(declaration[key7])}; `;
+    }
+    return selector + ' {' + output + '}';
 }
+((css2) => {
+    function variable(...variables) {
+        const lastItem = variables[variables.length - 1];
+        let value = lastItem.startsWith('--') ? `var(${lastItem})` : lastItem;
+        for (let index = variables.length - 2; index >= 0; index--) {
+            const element = variables[index];
+            value = `var(${element}, ${value})`;
+        }
+        return value;
+    }
+    css2.variable = variable;
+})(css || (css = {}));
 var sharedInputCSS = [`.${inputClassName} {
         padding: var(${Var.Padding});
         background: var(${Var.Background});
@@ -34968,28 +35276,28 @@ var sharedInputCSS = [`.${inputClassName} {
         border-top-right-radius: var(${Var.BorderRadiusTopRight});
         border-bottom-right-radius: var(${Var.BorderRadiusBottomRight});
         border-bottom-left-radius: var(${Var.BorderRadiusBottomLeft});
-        z-index: var(${Var.ZIndex});
         letter-spacing: var(${Var.FontLetterSpacing});
         text-align: var(${Var.FontTextAlignment});
         line-height: var(${Var.FontLineHeight});
         transition: var(${Var.FocusedTransition});
         transition-property: background, box-shadow;
     }`,];
-var focusInputCSS = [
+var focusInputCSS = 
+/* @__PURE__ */ (() => [
     `.${inputClassName}:focus-visible { outline: none; }`,
-    `.${inputClassName}:focus {
-        background: ${cssVar(Var.FocusedBackground, Var.Background)};
-        box-shadow: ${cssVar(Var.FocusedBoxShadow, Var.BoxShadow)};
+    `.${inputClassName}:focus, .${inputClassName}.${forcedFocusClassName} {
+        background: ${css.variable(Var.FocusedBackground, Var.Background)};
+        box-shadow: ${css.variable(Var.FocusedBoxShadow, Var.BoxShadow)};
     }`,
-    `.${inputWrapperClassName}:focus-within::after {
-        border-color: ${cssVar(Var.FocusedBorderColor, Var.BorderColor)};
-        border-style: ${cssVar(Var.FocusedBorderStyle, Var.BorderStyle)};
-        border-top-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderTopWidth)};
-        border-right-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderRightWidth)};
-        border-bottom-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderBottomWidth)};
-        border-left-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderLeftWidth)};
+    `.${inputWrapperClassName}:focus-within::after, .${inputWrapperClassName}.${forcedFocusClassName}::after {
+        border-color: ${css.variable(Var.FocusedBorderColor, Var.BorderColor)};
+        border-style: ${css.variable(Var.FocusedBorderStyle, Var.BorderStyle)};
+        border-top-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderTopWidth)};
+        border-right-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderRightWidth)};
+        border-bottom-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderBottomWidth)};
+        border-left-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderLeftWidth)};
     }`,
-];
+])();
 var inputBorderCSS = [
     `.${inputWrapperClassName} {
         position: relative;
@@ -35022,13 +35330,26 @@ var passwordManagerIgnoreDataProps = {
     'data-1p-ignore': true,
     // LastPass
     'data-lpignore': true,
-};
-var sensibleInputDefaults = {
+    // Dashlane
+    // https://support.dashlane.com/hc/en-us/articles/4420122792594-Optimize-your-web-forms-for-Dashlane-Autofill
+    'data-form-type': 'other',
+    // autocomplete="off" is a generic property that disables autofilling. It
+    // is not always respected by some browsers or password managers.
     autocomplete: 'off',
 };
 var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput(props, ref) {
-    const { style, inputName, type, required, autoFocus, placeholder, value, min, max, step: step2 } = props, rest = __rest(props, ["style", "inputName", "type", "required", "autoFocus", "placeholder", "value", "min", "max", "step"]);
-    const dataProps = Object.assign(Object.assign({}, sensibleInputDefaults), passwordManagerIgnoreDataProps);
+    const { autoFocus, className: className2, inputName, max, min, onBlur, onFocus, onInvalid, placeholder, required, step: step2, style, type, value, autofillEnabled, canvasPreviewClassName } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "max", "min", "onBlur", "onFocus", "onInvalid", "placeholder", "required", "step", "style", "type", "value", "autofillEnabled", "canvasPreviewClassName"]);
+    const [hasValue, setHasValue,] = React4.useState(!!value);
+    const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
+    const eventProps = {
+        onBlur,
+        onFocus,
+        onInvalid,
+    };
+    const onChange = React4.useCallback((e) => {
+        const newValue = e.target.value;
+        setHasValue(!!newValue);
+    }, []);
     switch (type) {
         case 'hidden':
             return /* @__PURE__ */ jsx(motion.input, {
@@ -35038,17 +35359,24 @@ var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInp
             });
         case 'textarea':
             return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref,
-                style }, rest), { className: cx(inputWrapperClassName, props.className), children: /* @__PURE__ */ jsx(motion.textarea, Object.assign(Object.assign({ id: inputName }, dataProps), { required,
-                    autoFocus, name: inputName, placeholder, className: inputClassName, value })) }));
+                style, className: cx(inputWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.textarea, Object.assign(Object.assign(Object.assign({ id: inputName }, dataProps), eventProps), { required,
+                    autoFocus, name: inputName, placeholder, className: cx(inputClassName, canvasPreviewClassName), value })) }));
         default:
             return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref,
-                style }, rest), { className: cx(inputWrapperClassName, props.className), children: /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign({ id: inputName }, dataProps), { type,
+                style, className: cx(inputWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign(Object.assign({ id: inputName }, dataProps), eventProps), { type,
                     required,
-                    autoFocus, name: inputName, placeholder, className: inputClassName, value,
+                    autoFocus, name: inputName, placeholder, className: cx(inputClassName, canvasPreviewClassName, !hasValue && emptyValueClassName), onChange,
+                    value,
                     min,
                     max, step: step2 })) }));
     }
 });
+var iconSpacing = /* @__PURE__ */ (() => 10)();
+var iconSize = /* @__PURE__ */ (() => 14)();
+var defaultDateIcon = 
+/* @__PURE__ */ (() => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H2Z' fill='currentColor' opacity='.3'/%3E%3Cpath d='M2.25 4.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2ZM2 5.75h9.5' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3C/svg%3E`)();
+var defaultTimeIcon = 
+/* @__PURE__ */ (() => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M1.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3Cpath d='M6.75 7.25v-3m0 3h2' fill='transparent' stroke-width='1.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E`)();
 var FormPlainTextInput2 = 
 /* @__PURE__ */ (() => withCSS(PlainTextInput, [
     ...sharedInputCSS,
@@ -35061,20 +35389,166 @@ var FormPlainTextInput2 =
             resize: var(${'--framer-textarea-resize'});
             min-height: var(${'--framer-textarea-min-height'});
         }`,
+    `.${inputClassName}.${emptyValueClassName}::-webkit-datetime-edit {
+            color:var(${'--framer-input-placeholder-color'});
+            -webkit-text-fill-color: var(${'--framer-input-placeholder-color'});
+        }`,
+    `.${inputClassName}[type="date"]::before, .${inputClassName}[type="time"]::before {
+            content: "";
+            display: block;
+            position: absolute;
+            padding: var(${'--framer-input-padding'});
+            padding-left: ${iconSpacing}px;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: ${iconSize}px;
+            box-sizing: content-box;
+
+            pointer-events: none;
+            mask-repeat: no-repeat;
+            mask-position: ${iconSpacing}px center;
+            border: none;
+            background-color: #999;
+        }`,
+    `.${inputClassName}[type="date"]::before {
+            mask-image: url("${defaultDateIcon}");
+        }`,
+    `.${inputClassName}[type="time"]::before {
+            mask-image: url("${defaultTimeIcon}");
+        }`,
+    // Hide the native date picker icon, but still allow the user to click it.
+    `.${inputClassName}::-webkit-calendar-picker-indicator {
+            opacity: 0;
+            padding: var(${'--framer-input-padding'});
+            padding-right: 0;
+            padding-left: ${iconSpacing}px;
+            width: ${iconSize}px;
+            height: ${iconSize}px;
+        }`,
 ]))();
+var className = 'framer-form-boolean-input';
+var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput3(props, ref) {
+    const { inputName, type = 'checkbox', defaultChecked, canvasPreviewClassName } = props, rest = __rest(props, ["inputName", "type", "defaultChecked", "canvasPreviewClassName"]);
+    const isCanvas = useIsOnFramerCanvas();
+    const attributes = isCanvas
+        ? {
+            checked: defaultChecked,
+        }
+        : {
+            defaultChecked,
+        };
+    return /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign(Object.assign({}, rest), attributes), { readOnly: isCanvas, ref, id: inputName, type, name: inputName, className: cx(className, props.className, canvasPreviewClassName) }));
+});
+var defaultCheckedIcon = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M 4 8 L 6.5 10.5 L 11.5 5.5" fill="transparent" stroke-width="2" stroke="rgb(255, 255, 255)" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var borderWidth = `var(${'--framer-input-border-top-width'}) var(${'--framer-input-border-right-width'}) var(${'--framer-input-border-bottom-width'}) var(${'--framer-input-border-left-width'})`;
+var borderRadius = `var(${'--framer-input-border-radius-top-left'}) var(${'--framer-input-border-radius-top-right'}) var(${'--framer-input-border-radius-bottom-right'}) var(${'--framer-input-border-radius-bottom-left'})`;
+var styles = /* @__PURE__ */ (() => [
+    css(`.${className}`, {
+        '-webkit-appearance': 'none',
+        // background-color: #fff; fixes a bug on iOS where the checkbox shows
+        // through the appearance: none;
+        alignItems: 'center',
+        appearance: 'none',
+        backgroundColor: '#fff',
+        background: '--framer-input-background',
+        borderRadius,
+        boxShadow: '--framer-input-box-shadow',
+        display: 'flex',
+        justifyContent: 'center',
+        margin: 0,
+        overflow: 'hidden',
+        position: 'relative',
+        transition: '--framer-input-boolean-checked-transition',
+        transitionProperty: 'box-shadow, background',
+    }),
+    // The after element styles the border of the checkbox to conform to
+    // framer's inset border model.
+    css(`.${className}::after`, {
+        background: 'transparent',
+        borderColor: css.variable('--framer-input-border-color', 'transparent'),
+        borderRadius,
+        borderStyle: '--framer-input-border-style',
+        borderWidth,
+        boxSizing: 'border-box',
+        content: '',
+        display: 'block',
+        inset: 0,
+        position: 'absolute',
+        transition: '--framer-input-boolean-checked-transition',
+        transitionProperty: 'border-color, border-width, border-style',
+    }),
+    // The before element is used to display the check mark icon. It is
+    // faded in when the input is checked.
+    css(`.${className}::before`, {
+        // Use the icon url if it's provided, falling back to a default check
+        // mark. Radio inputs will be code-generated with a "none" value for the
+        // variable if an image isn't provided which will prevent this fallback
+        // in those cases.
+        backgroundImage: css.variable('--framer-input-boolean-icon', `url('${defaultCheckedIcon}')`),
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'contain',
+        content: '',
+        display: 'block',
+        height: '100%',
+        opacity: 0,
+        transition: '--framer-input-boolean-checked-transition',
+        transitionProperty: 'opacity',
+        width: '100%',
+    }),
+    css(`.${className}:checked, .${className}.${forcedCheckedClassName}`, {
+        // When not set, the styles when checked shouldn't clear the default
+        // styles.
+        backgroundColor: css.variable('--framer-input-boolean-checked-background', '--framer-input-background'),
+        boxShadow: css.variable('--framer-input-boolean-checked-box-shadow', '--framer-input-box-shadow'),
+    }),
+    css(`.${className}:checked::before, .${className}.${forcedCheckedClassName}::before`, {
+        opacity: 1,
+    }),
+    css(`.${className}:checked::after, .${className}.${forcedCheckedClassName}::after`, {
+        // When not set, the styles when checked shouldn't clear the default
+        // styles.
+        borderColor: css.variable('--framer-input-boolean-checked-border-color', '--framer-input-border-color', 'transparent'),
+        borderStyle: css.variable('--framer-input-boolean-checked-border-style', '--framer-input-border-style', 'solid'),
+        borderWidth: css.variable('--framer-input-boolean-checked-border-width', borderWidth),
+    }),
+    css(`.${className}:focus, .${className}.${forcedFocusClassName}`, {
+        backgroundColor: css.variable('--framer-input-focused-background', '--framer-input-background'),
+        boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow'),
+    }),
+    css(`.${className}:focus-visible`, {
+        outline: 'none',
+    }),
+    css(`.${className}:focus::after, .${className}.${forcedFocusClassName}::after`, {
+        // When not set, the styles when focused shouldn't clear the checked
+        // styles.
+        borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color', 'transparent'),
+        borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style', 'solid'),
+        borderWidth: css.variable('--framer-input-focused-border-width', borderWidth),
+    }),
+    css(`.${className}:focus:checked`, {
+        backgroundColor: css.variable('--framer-input-focused-background', '--framer-input-boolean-checked-background', '--framer-input-background'),
+        boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-boolean-checked-box-shadow', '--framer-input-box-shadow'),
+    }),
+    css(`.${className}:focus:checked::after`, {
+        borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-boolean-checked-border-style', '--framer-input-border-style', 'solid'),
+        borderWidth: css.variable('--framer-input-focused-border-width', '--framer-input-boolean-checked-border-width', borderWidth),
+    }),
+])();
+var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles);
 var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRef) {
-    const { style, inputName, required, autoFocus, selectOptions, selectDefaultValue, } = props;
-    return /* @__PURE__ */ jsx(motion.div, {
-        ref: measureRef,
-        style,
-        className: cx(inputWrapperClassName, selectWrapperClassName, props.className),
-        children: /* @__PURE__ */ jsx(motion.select, {
+    const { autoFocus, className: className2, inputName, onBlur, onFocus, onInvalid, required, selectDefaultValue, selectOptions, style, canvasPreviewClassName } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "onBlur", "onFocus", "onInvalid", "required", "selectDefaultValue", "selectOptions", "style", "canvasPreviewClassName"]);
+    return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.select, {
             id: inputName,
             name: inputName,
             autoFocus,
             required,
-            className: inputClassName,
+            className: cx(inputClassName, canvasPreviewClassName),
             defaultValue: selectDefaultValue,
+            onBlur,
+            onFocus,
+            onInvalid,
             children: selectOptions == null ? void 0 : selectOptions.map((option, index) => {
                 var _f, _j;
                 switch (option.type) {
@@ -35088,8 +35562,7 @@ var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRe
                         }, index);
                 }
             }),
-        }, selectDefaultValue),
-    });
+        }, selectDefaultValue) }));
 });
 var selectWrapperClassName = 'framer-form-select-wrapper';
 var selectArrowSize = 16;
@@ -35118,6 +35591,9 @@ var FormSelect = /* @__PURE__ */ (() => withCSS(Select, [
             background-position: center center;
             border: none;
         }`,
+    `select.${inputClassName}:required:invalid {
+            color: var(${'--framer-input-invalid-text-color'});
+        }`,
 ]))();
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref) {
     const { background, children, alt } = props, rest = __rest(props, ["background", "children", "alt"]);
@@ -35284,7 +35760,7 @@ var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
 var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props, forwardedRef) {
     var _f, _j;
-    const { id: id3, name, html, htmlFromDesign, text, textFromDesign, fonts = [], width, height, left, right, top, bottom, center, className, stylesPresetsClassName, visible = true, opacity, rotation = 0, verticalAlignment = 'top', isEditable = false, willChangeTransform, environment: environment2 = RenderTarget.current, withExternalLayout = false, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, __htmlStructure, __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, children: _children } = props, rest = __rest(props, ["id", "name", "html", "htmlFromDesign", "text", "textFromDesign", "fonts", "width", "height", "left", "right", "top", "bottom", "center", "className", "stylesPresetsClassName", "visible", "opacity", "rotation", "verticalAlignment", "isEditable", "willChangeTransform", "environment", "withExternalLayout", "positionSticky", "positionStickyTop", "positionStickyRight", "positionStickyBottom", "positionStickyLeft", "__htmlStructure", "__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "children"]);
+    const { id: id3, name, html, htmlFromDesign, text, textFromDesign, fonts = [], width, height, left, right, top, bottom, center, className: className2, stylesPresetsClassName, visible = true, opacity, rotation = 0, verticalAlignment = 'top', isEditable = false, willChangeTransform, environment: environment2 = RenderTarget.current, withExternalLayout = false, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, __htmlStructure, __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, children: _children } = props, rest = __rest(props, ["id", "name", "html", "htmlFromDesign", "text", "textFromDesign", "fonts", "width", "height", "left", "right", "top", "bottom", "center", "className", "stylesPresetsClassName", "visible", "opacity", "rotation", "verticalAlignment", "isEditable", "willChangeTransform", "environment", "withExternalLayout", "positionSticky", "positionStickyTop", "positionStickyRight", "positionStickyBottom", "positionStickyLeft", "__htmlStructure", "__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "children"]);
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
     const fallbackLayoutRef = useRef(null);
@@ -35401,7 +35877,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     }
     Object.assign(style, props.style);
     return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ id: id3, ref: layoutRef }, rest), { style,
-        layoutId, 'data-framer-name': name, 'data-framer-component-type': 'DeprecatedRichText', 'data-center': center, className: cx(className, stylesPresetsClassName, richTextWrapperClassName), transformTemplate: template, dangerouslySetInnerHTML: {
+        layoutId, 'data-framer-name': name, 'data-framer-component-type': 'DeprecatedRichText', 'data-center': center, className: cx(className2, stylesPresetsClassName, richTextWrapperClassName), transformTemplate: template, dangerouslySetInnerHTML: {
             __html: innerHTMLWithReplacedFramerPageLinks,
         } }));
 });
@@ -36182,7 +36658,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
         render() {
             var _f;
             countNodeRender();
-            const _j = this.props, { id: id3, visible, style, fill, svg, intrinsicHeight, intrinsicWidth, title, description, layoutId, className, variants, withExternalLayout, innerRef, svgContentId, height: _height, opacity: _opacity, width: _width } = _j, rest = __rest(_j, ["id", "visible", "style", "fill", "svg", "intrinsicHeight", "intrinsicWidth", "title", "description", "layoutId", "className", "variants", "withExternalLayout", "innerRef", "svgContentId", "height", "opacity", "width"]);
+            const _j = this.props, { id: id3, visible, style, fill, svg, intrinsicHeight, intrinsicWidth, title, description, layoutId, className: className2, variants, withExternalLayout, innerRef, svgContentId, height: _height, opacity: _opacity, width: _width } = _j, rest = __rest(_j, ["id", "visible", "style", "fill", "svg", "intrinsicHeight", "intrinsicWidth", "title", "description", "layoutId", "className", "variants", "withExternalLayout", "innerRef", "svgContentId", "height", "opacity", "width"]);
             if (!withExternalLayout && (!visible || !id3))
                 return null;
             const identifier = (_f = id3 !== null && id3 !== void 0 ? id3 : layoutId) !== null && _f !== void 0 ? _f : 'svg';
@@ -36319,8 +36795,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
             }
             const MotionComponent = htmlElementAsMotionComponent(this.props.as);
             const { href, target, rel, onClick, } = this.props;
-            return /* @__PURE__ */ jsxs(MotionComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, dataProps), rest), { layoutId, transformTemplate: hasTransformTemplate ? transformTemplate(this.props.center) : void 0, id: id3, ref: innerRef, style: outerStyle, className,
-                variants, tabIndex: this.props.tabIndex, role: title || description ? 'img' : void 0, 'aria-label': title, 'aria-description': description }), {
+            return /* @__PURE__ */ jsxs(MotionComponent, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, dataProps), rest), { layoutId, transformTemplate: hasTransformTemplate ? transformTemplate(this.props.center) : void 0, id: id3, ref: innerRef, style: outerStyle, className: className2, variants, tabIndex: this.props.tabIndex, role: title || description ? 'img' : void 0, 'aria-label': title, 'aria-description': description }), {
                 href,
                 target,
                 rel,
@@ -36440,7 +36915,7 @@ var TextComponent = /* @__PURE__ */ (() => {
             });
             __publicField(this, 'renderMain', (inCodeComponent) => {
                 countNodeRender();
-                const _f = this.props, { font, visible, alignment, willChangeTransform, opacity, id: id3, layoutId, className, transition, variants, name, __fromCanvasComponent, _initialStyle, widthType: _widthType, heightType: _heightType, _usesDOMRect, autoSize, style: styleProp, fontLoadStatus, matchesCurrentRoute, preload: _preload, tabIndex } = _f, rest = __rest(_f, ["font", "visible", "alignment", "willChangeTransform", "opacity", "id", "layoutId", "className", "transition", "variants", "name", "__fromCanvasComponent", "_initialStyle", "widthType", "heightType", "_usesDOMRect", "autoSize", "style", "fontLoadStatus", "matchesCurrentRoute", "preload", "tabIndex"]);
+                const _f = this.props, { font, visible, alignment, willChangeTransform, opacity, id: id3, layoutId, className: className2, transition, variants, name, __fromCanvasComponent, _initialStyle, widthType: _widthType, heightType: _heightType, _usesDOMRect, autoSize, style: styleProp, fontLoadStatus, matchesCurrentRoute, preload: _preload, tabIndex } = _f, rest = __rest(_f, ["font", "visible", "alignment", "willChangeTransform", "opacity", "id", "layoutId", "className", "transition", "variants", "name", "__fromCanvasComponent", "_initialStyle", "widthType", "heightType", "_usesDOMRect", "autoSize", "style", "fontLoadStatus", "matchesCurrentRoute", "preload", "tabIndex"]);
                 if (!visible) {
                     return null;
                 }
@@ -36508,7 +36983,7 @@ var TextComponent = /* @__PURE__ */ (() => {
                     const tabIndexProps = getTabIndexProps(tabIndex);
                     return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign(Object.assign(Object.assign({ layoutId, id: id3 }, tabIndexProps), dataProps), rest), { style, transformTemplate: centeringTransformTemplate, dangerouslySetInnerHTML: {
                             __html: rawHTML,
-                        }, 'data-center': this.props.center, className: cx(className, matchesCurrentRoute && 'isCurrent'), transition,
+                        }, 'data-center': this.props.center, className: cx(className2, matchesCurrentRoute && 'isCurrent'), transition,
                         variants, ref: this.setElement }));
                 }
             });
@@ -37561,7 +38036,7 @@ function loadJSON(url) {
     }).then((res) => res.json());
 }
 function inspectObjectType(item) {
-    let className;
+    let className2;
     if ((item.constructor !== null ? item.constructor.name : void 0) !== null &&
         (item.constructor !== null ? item.constructor.name : void 0) !== 'Object') {
         return item.constructor.name;
@@ -37578,15 +38053,15 @@ function inspectObjectType(item) {
         return null;
     };
     if (item.toString) {
-        className = extract(item.toString());
-        if (className) {
-            return className;
+        className2 = extract(item.toString());
+        if (className2) {
+            return className2;
         }
     }
     if (item.constructor !== null ? item.constructor.toString : void 0) {
-        className = extract(item.constructor !== null ? item.constructor.toString() : void 0);
-        if (className) {
-            return className.replace('Constructor', '');
+        className2 = extract(item.constructor !== null ? item.constructor.toString() : void 0);
+        if (className2) {
+            return className2.replace('Constructor', '');
         }
     }
     return 'Object';
@@ -37729,7 +38204,7 @@ var package_default = {
         yargs: '^17.6.2',
     },
     peerDependencies: {
-        'framer-motion': '11.2.6',
+        'framer-motion': '11.2.10',
         react: '^18.2.0',
         'react-dom': '^18.2.0',
     },
@@ -37760,7 +38235,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop.start();
 }
-export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useCollectionListPaginationInfo, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
+export { _injectRuntime, AcceleratedAnimation, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text2 as Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLoadMorePaginatedQuery, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
 /**
  * @license Emotion v11.0.0
  * MIT License
@@ -37798,7 +38273,7 @@ react-is/cjs/react-is.production.min.js:
    *)
 */
 if (typeof document !== 'undefined') {
-    for (const node of document.querySelectorAll('style[data-framer-css-ssr]')) {
+    for (const node of document.querySelectorAll('body style[data-framer-css-ssr]')) {
         document.head.appendChild(node);
     }
 }