unframer 2.5.1 → 2.5.3

package/dist/framer.js

@@ -48,13 +48,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentViewportProvider = exports.ComponentPresetsProvider = exports.ComponentPresetsConsumer = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectVisualStyleFromProps = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelFrame = exports.callEach = exports.calculateRect = exports.calcLength = exports.buildTransform = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.backgroundImageFromProps = exports.BackgroundImage = exports.AutomaticLayoutIds = exports.AnyInterpolation = exports.anticipate = exports.annotateTypeOnStringify = exports.animations = exports.animationControls = exports.animateVisualElement = exports.animateValue = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.addScaleCorrector = exports.addPropertyControls = exports.addPointerInfo = exports.addPointerEvent = exports.addFonts = exports.addActionControls = exports.AcceleratedAnimation = exports._injectRuntime = exports.combinedCSSRules = void 0;
 exports.environment = exports.EmptyState = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMax = exports.domAnimation = exports.DOM = exports.distance2D = exports.distance = exports.dispatchKeyDownEvent = exports.disableInstantTransitions = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.Device = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.delay = exports.degreesToRadians = exports.defaultDeviceProps = exports.debounce = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.cx = exports.CustomProperties = exports.CustomCursorHost = exports.cubicBezier = exports.cssBackgroundSize = exports.createScopedAnimate = exports.createMotionComponent = exports.createFramerPageLink = exports.createDomMotionComponent = exports.createData = exports.createBox = exports.convertPropsToDeviceOptions = exports.convertPresentationTree = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.constraintsEnabled = exports.ConstraintMask = void 0;
-exports.inView = exports.invariant = exports.interpolate = exports.InternalID = exports.installFlexboxGapWorkaroundIfNeeded = exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = void 0;
-exports.NavigateTo = exports.motionValue = exports.MotionValue = exports.MotionSetup = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = void 0;
-exports.sharedSVGManager = exports.Shadow = exports.setGlobalRenderEnvironment = exports.scrollInfo = exports.scroll = exports.Scroll = exports.roundWithOffset = exports.roundedNumberString = exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = void 0;
-exports.useHydratedBreakpointVariants = exports.useHotkey = exports.useGamepad = exports.useForceUpdate = exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = exports.useDataRecord = exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useCollectionListPaginationInfo = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = void 0;
-exports.ValueInterpolation = exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = exports.useRouter = exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = void 0;
-exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = void 0;
-// https :https://app.framerstatic.com/chunk-AJGVEDRA.js
+exports.invariant = exports.interpolate = exports.InternalID = exports.installFlexboxGapWorkaroundIfNeeded = exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = void 0;
+exports.motionValue = exports.MotionValue = exports.MotionSetup = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = exports.inView = void 0;
+exports.setGlobalRenderEnvironment = exports.scrollInfo = exports.scroll = exports.Scroll = exports.roundWithOffset = exports.roundedNumberString = exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.pushLoadMoreHistory = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = void 0;
+exports.useHotkey = exports.useGamepad = exports.useForceUpdate = exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = exports.useDataRecord = exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = exports.sharedSVGManager = exports.Shadow = void 0;
+exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = exports.useRouter = exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = exports.useHydratedBreakpointVariants = void 0;
+exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withInfiniteScroll = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = exports.ValueInterpolation = void 0;
+// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
 const react_1 = require("react");
 const react_2 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -1300,6 +1300,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;
@@ -1309,7 +1312,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);
@@ -1319,6 +1324,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);
@@ -1347,9 +1355,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);
 }
@@ -2373,14 +2378,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;
+                    }
                 }
             }
         }
@@ -2780,7 +2788,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) => {
@@ -3079,6 +3087,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;
@@ -3122,7 +3219,7 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
-            return;
+            return new GroupPlaybackControls([]);
         }
     }
     if (!isHandoff && AcceleratedAnimation.supports(options)) {
@@ -3152,6 +3249,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;
@@ -3174,8 +3274,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) {
@@ -3690,7 +3789,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)) {
@@ -5956,6 +6055,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()) {
@@ -5975,6 +6092,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.isSVG = false;
             this.needsReset = false;
             this.shouldResetTransform = false;
+            this.hasCheckedOptimisedAppear = false;
             this.treeScale = {
                 x: 1,
                 y: 1,
@@ -6123,9 +6241,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++;
         }
@@ -6139,6 +6254,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;
@@ -6728,16 +6846,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) {
@@ -6755,14 +6873,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
@@ -6771,7 +6889,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
@@ -6781,23 +6899,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;
@@ -8305,97 +8423,6 @@ var wrap = (min, max, v) => {
     return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
 exports.wrap = wrap;
-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);
 }
@@ -9118,7 +9145,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
-// https :https://app.framerstatic.com/framer.W4GEXVYP.js
+// https :https://app.framerstatic.com/framer.IBCXHSKM.js
 const react_12 = __importDefault(require("react"));
 const react_13 = require("react");
 const react_14 = require("react");
@@ -10249,11 +10276,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';
@@ -10311,7 +10338,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) {
@@ -11051,11 +11078,8 @@ function lazy(factory) {
     let factoryPromise;
     let LoadedComponent;
     const Component15 = react_12.default.forwardRef(function LazyWithPreload(props, ref) {
-        return react_12.default.createElement(LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent, Object.assign(ref
-            ? {
-                ref,
-            }
-            : {}, props));
+        return react_12.default.createElement(LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent, ref
+            ? Object.assign({ ref }, props) : props);
     });
     Component15.preload = () => {
         if (!factoryPromise) {
@@ -11081,7 +11105,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* () {
@@ -11693,22 +11734,24 @@ 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) { }
 }
+exports.pushLoadMoreHistory = pushLoadMoreHistory;
 function isSamePage(a, b) {
     if (a.routeId !== b.routeId)
         return false;
@@ -11776,17 +11819,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`;
+    (0, react_4.useInsertionEffect)(() => {
+        if (hydrationInsertionEffectHasRun)
+            return;
+        hydrationInsertionEffectHasRun = true;
+        if (addHydrationMarkers) {
+            performance.mark(hydrationRenderEnd);
+            measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd);
+        }
+    }, []);
     (0, react_2.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);
+        });
+    }, []);
+    (0, react_2.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;
@@ -11862,26 +11968,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__ */ react_12.default.createContext(defaultCollectionListPaginationInfo);
-function useCollectionListPaginationInfo() {
-    return react_12.default.useContext(CollectionListPaginationInfoContext);
-}
-exports.useCollectionListPaginationInfo = useCollectionListPaginationInfo;
 function useForceUpdate2() {
     const [_, setForcedRenderCount,] = react_12.default.useState(0);
     return [_, react_12.default.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__ */ react_12.default.createContext(defaultLocaleInfo);
 function useLocaleInfo() {
@@ -11950,8 +12045,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,
@@ -11965,41 +12059,16 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const currentLocaleIdRef = react_12.default.useRef(initialLocaleId);
     const currentLocaleId = currentLocaleIdRef.current;
     const activeLocale = react_12.default.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,] = react_12.default.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 = react_12.default.useMemo(() => {
-        return {
-            paginationInfo,
-            setPaginationInfo: (newPaginationInfo) => __awaiter(this, void 0, void 0, function* () {
-                (0, react_13.startTransition)(() => {
-                    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);
-                (0, react_13.startTransition)(() => {
-                    setPaginationInfo(newPaginationInfo);
-                });
-            }),
-        };
-    }, [paginationInfo,]);
     const localeInfo = react_12.default.useMemo(() => {
         return {
             activeLocale,
@@ -12030,7 +12099,6 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                         pathVariables: currentPathVariablesRef.current,
                         collectionUtils,
                         preserveQueryParams,
-                        paginationInfo,
                     });
                     if (!localeResult)
                         return;
@@ -12042,17 +12110,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 = react_12.default.useCallback((routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false) => {
         currentRouteRef.current = routeId;
@@ -12066,11 +12124,11 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     }, [forceUpdate, monitorNextRender, scheduleSideEffect,]);
     usePopStateHandler(currentRouteRef, setCurrentRouteId);
     const navigate = react_12.default.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) {
@@ -12088,7 +12146,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) {
@@ -12147,26 +12205,23 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         api,
         children: (0, jsx_runtime_1.jsx)(LocaleInfoContext.Provider, {
             value: localeInfo,
-            children: (0, jsx_runtime_1.jsx)(CollectionListPaginationInfoContext.Provider, {
-                value: collectionListPaginationInfo,
-                children: (0, jsx_runtime_1.jsxs)(SuspenseThatPreservesDom, {
-                    children: [
-                        (0, jsx_runtime_1.jsx)(ErrorBoundary, {
-                            notFoundPage,
-                            defaultPageStyle,
-                            forceUpdateKey: dep,
-                            children: (0, jsx_runtime_1.jsx)(react_12.default.Fragment, {
-                                children: pageExistsInCurrentLocale
-                                    ? renderPage(current.page, defaultPageStyle)
-                                    : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
-                            }, remountKey),
-                        }),
-                        (0, jsx_runtime_1.jsx)(OnHydrationEnd, {
-                            addHydrationEndMarker: shouldMarkHydrationEnd,
-                            turnOffEventHandlerHack: enableImproveInpDuringHydration,
-                        }),
-                    ],
-                }),
+            children: (0, jsx_runtime_1.jsxs)(SuspenseThatPreservesDom, {
+                children: [
+                    (0, jsx_runtime_1.jsx)(ErrorBoundary, {
+                        notFoundPage,
+                        defaultPageStyle,
+                        forceUpdateKey: dep,
+                        children: (0, jsx_runtime_1.jsx)(react_12.default.Fragment, {
+                            children: pageExistsInCurrentLocale
+                                ? renderPage(current.page, defaultPageStyle)
+                                : notFoundPage && renderPage(notFoundPage, defaultPageStyle),
+                        }, remountKey),
+                    }),
+                    (0, jsx_runtime_1.jsx)(OnHydrationEnd, {
+                        addHydrationMarkers,
+                        turnOffEventHandlerHack: enableImproveInpDuringHydration,
+                    }),
+                ],
             }),
         }),
     });
@@ -12356,22 +12411,30 @@ exports.useRoute = useRoute;
 var shouldPreloadBasedOnUA = /* @__PURE__ */ (() => typeof window !== 'undefined' && !isBot(navigator.userAgent))();
 function useRoutePreloader(routeIds, enabled = true) {
     const { getRoute, } = useRouter();
-    react_12.default.useEffect(() => {
+    (0, react_2.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();
@@ -17915,8 +17978,8 @@ function injectComponentCSSRules() {
     if (didInject)
         return;
     didInject = true;
-    const styles = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : exports.combinedCSSRules;
-    for (const rule of styles) {
+    const styles2 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : exports.combinedCSSRules;
+    for (const rule of styles2) {
         injectCSSRule(rule, void 0, void 0);
     }
 }
@@ -20000,26 +20063,26 @@ function backgroundImageFromProps(props) {
 }
 exports.backgroundImageFromProps = backgroundImageFromProps;
 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;
@@ -20063,7 +20126,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) {
@@ -20100,23 +20163,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,
@@ -23270,7 +23317,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;
             }
@@ -23284,7 +23331,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
                 id: id3,
                 style,
                 ref: this.setElement,
-                className,
+                className: className2,
                 children: [
                     /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ProvideParentSize, {
                         parentSize,
@@ -23295,19 +23342,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 = react_12.default.Children.map(this.props.children, (child) => {
                 if (isConstraintSupportingChild(child)) {
                     return react_12.default.cloneElement(child, {
@@ -24742,17 +24777,14 @@ function backdropTapAction(transition, goBackAction) {
     if (transition.goBackOnTapOutside !== false)
         return goBackAction;
 }
-function NavigationStyleSheet() {
-    react_12.default.useInsertionEffect(() => {
-        injectComponentCSSRules();
-    }, []);
-    return null;
-}
 function NavigationWrapper(props) {
     const resetProjection = useResetProjection();
     const skipLayoutAnimation = useInstantLayoutTransition();
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsxs)(Navigation, Object.assign(Object.assign({}, props), { resetProjection,
-        skipLayoutAnimation, children: [props.children, /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NavigationStyleSheet, {}),] }));
+    react_12.default.useInsertionEffect(() => {
+        injectComponentCSSRules();
+    }, []);
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Navigation, Object.assign(Object.assign({}, props), { resetProjection,
+        skipLayoutAnimation, children: props.children }));
 }
 exports.Navigation = NavigationWrapper;
 var import_hoist_non_react_statics3 = __toESM(require_hoist_non_react_statics_cjs(), 1);
@@ -24849,6 +24881,41 @@ var AnimateSharedLayout = (props) => props.children;
 exports.AnimateSharedLayout = AnimateSharedLayout;
 var Draggable = /* @__PURE__ */ WithDragging(DeprecatedFrameWithEvents);
 exports.Draggable = Draggable;
+function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', threshold, paginationInfo, }) {
+    const callback = react_12.default.useCallback((entries) => {
+        const entry = entries[0];
+        const isIntersecting = entry == null ? void 0 : entry.isIntersecting;
+        if (isIntersecting)
+            loadMore();
+    }, [loadMore,]);
+    react_12.default.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 react_12.default.forwardRef((_f, ref) => {
+        var { __paginationInfo, __loadMore } = _f, props = __rest(_f, ["__paginationInfo", "__loadMore"]);
+        const backupRef = react_12.default.useRef(null);
+        const infiniteScrollRef = ref !== null && ref !== void 0 ? ref : backupRef;
+        useInfiniteScroll({
+            rootMargin: '500px',
+            loadMore: __loadMore,
+            ref: infiniteScrollRef,
+            paginationInfo: __paginationInfo,
+        });
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component15, Object.assign(Object.assign({}, props), { ref: infiniteScrollRef }));
+    });
+}
+exports.withInfiniteScroll = withInfiniteScroll;
 var import_process2 = __toESM(require_browser(), 1);
 function debounce(fn, time2) {
     let timeout;
@@ -25007,7 +25074,7 @@ function useSafariGapFix(gap, ref, display) {
 var Stack = /* @__PURE__ */ (() => {
     const StackInner = react_12.default.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 = react_12.default.useRef(null);
         const onBeforeLayoutMeasure = useSafariGapFix(gap, stackRef, 'flex');
@@ -25066,8 +25133,7 @@ var Stack = /* @__PURE__ */ (() => {
             if (styleProp == null ? void 0 : styleProp.height)
                 contentWrapperStyle.height = styleProp == null ? void 0 : styleProp.height;
         }
-        return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(motion.div, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(motion.div, {
                 'data-framer-stack-content-wrapper': true,
                 'data-framer-stack-direction-reverse': isReverse,
                 'data-framer-stack-gap-enabled': gapEnabled,
@@ -27235,7 +27301,7 @@ function useUpdateScrollOffset(ref, side, offset, cancelEmulatedTouchScrollAnima
     [offset,]);
 }
 var NativeScroll = /* @__PURE__ */ react_12.default.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
@@ -27282,7 +27348,7 @@ var NativeScroll = /* @__PURE__ */ react_12.default.forwardRef(function NativeSc
         }
         : {};
     return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(EmptyState, {
                 children,
                 size: {
@@ -28427,6 +28493,31 @@ function ComponentPresetsConsumer({ componentIdentifier, children, }) {
     return children(presetProps);
 }
 exports.ComponentPresetsConsumer = ComponentPresetsConsumer;
+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);
@@ -28509,17 +28600,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__ */ react_12.default.createContext({});
 function useComponentViewport() {
     return react_12.default.useContext(ComponentViewportContext);
@@ -28622,8 +28702,8 @@ var withCSS = (Component15, escapedCSS, componentSerializationId) => react_12.de
     react_12.default.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__ */ (0, jsx_runtime_1.jsx)(Component15, Object.assign(Object.assign({}, props), { ref }));
 });
@@ -29377,7 +29457,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 = react_12.default.useRef(null);
     const safeAreaRef = react_12.default.useRef(null);
     const contentRef = react_12.default.useRef(null);
@@ -29447,7 +29527,7 @@ function Floating(_f) {
         onDismiss,
     });
     return react_dom_1.default.createPortal(
-    /* @__PURE__ */ (0, jsx_runtime_1.jsxs)('div', Object.assign(Object.assign({ ref: floatingPositionRef, className, style: {
+    /* @__PURE__ */ (0, jsx_runtime_1.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',
@@ -29639,6 +29719,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) {
@@ -29705,11 +29881,11 @@ function linkFromFramerPageLink(link) {
     };
 }
 var pathVariablesRegExp2 = /:([a-z]\w*)/gi;
-var PathVariablesContext = /* @__PURE__ */ react_12.default.createContext(void 0);
+var PathVariablesContext = /* @__PURE__ */ (0, react_1.createContext)(void 0);
 exports.PathVariablesContext = PathVariablesContext;
 function useImplicitPathVariables() {
     var _a;
-    const contextPathVariables = react_12.default.useContext(PathVariablesContext);
+    const contextPathVariables = (0, react_3.useContext)(PathVariablesContext);
     const currentPathVariables = (_a = useCurrentRoute()) == null ? void 0 : _a.pathVariables;
     const pathVariables = contextPathVariables || currentPathVariables;
     return pathVariables;
@@ -29733,7 +29909,7 @@ function linkMatchesRoute(route, { webPageId, hash: hash2, pathVariables, }, imp
 }
 function useLinkMatchesRoute(link) {
     const route = useCurrentRoute();
-    const contextPathVariables = react_12.default.useContext(PathVariablesContext);
+    const contextPathVariables = (0, react_3.useContext)(PathVariablesContext);
     if (!route)
         return false;
     const pageLink = isString22(link) ? linkFromFramerPageLink(link) : link;
@@ -29792,41 +29968,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) {
@@ -29886,14 +30027,92 @@ function resolveSlugsWithSuspense(unresolvedPathSlugs, unresolvedHashSlugs, coll
     }
     return result;
 }
-var Link = /* @__PURE__ */ react_12.default.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__ */ (0, react_3.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 = (0, react_4.useRef)(null);
+    const stableObserverChildRef = (0, react_6.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 = (0, react_11.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 = react_12.default.useMemo(() => {
+    const props = (0, react_6.useMemo)(() => {
         var _a;
         if (!href)
             return {};
@@ -29904,13 +30123,11 @@ var Link = /* @__PURE__ */ react_12.default.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,
@@ -29927,7 +30144,7 @@ var Link = /* @__PURE__ */ react_12.default.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 }));
 });
 exports.Link = Link;
 function resolveLink(href, router, implicitPathVariables) {
@@ -29972,7 +30189,7 @@ function resolvePageScope(pageLink, router) {
     });
 }
 exports.resolvePageScope = resolvePageScope;
-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, }) {
     react_12.default.useEffect(() => {
         if (isWebsite)
             return;
@@ -29996,7 +30213,7 @@ function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, co
                     },
                     preserveQueryParams,
                     enableImproveInpDuringHydration,
-                    shouldMarkHydrationEnd,
+                    addHydrationMarkers,
                 }),
             }),
         });
@@ -33042,7 +33259,8 @@ function useQueryData(query) {
 }
 exports.useQueryData = useQueryData;
 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) {
@@ -33084,25 +33302,30 @@ function getWhereExpressionFromPathVariables(pathVariables) {
     }));
 }
 exports.getWhereExpressionFromPathVariables = getWhereExpressionFromPathVariables;
-function useLoadMorePaginatedQuery(query, pageSize) {
-    const { paginationInfo, setPaginationInfo, } = useCollectionListPaginationInfo();
+function useLoadMorePaginatedQuery(query, pageSize, hash2) {
     const count = useQueryCount(query);
-    const initialPaginationInfo = (0, react_6.useMemo)(() => {
+    const [paginationInfo, setPaginationInfo,] = (0, react_10.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,]);
+    });
     (0, react_2.useEffect)(() => {
-        if (!paginationInfo) {
-            setPaginationInfo(initialPaginationInfo);
-        }
-    }, [count, initialPaginationInfo, paginationInfo, setPaginationInfo,]);
+        pushLoadMoreHistory(hash2, paginationInfo);
+    }, [hash2, paginationInfo,]);
     const paginatedQuery = (0, react_6.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');
@@ -33113,8 +33336,23 @@ function useLoadMorePaginatedQuery(query, pageSize) {
                 type: 'LiteralValue',
                 value: limit,
             } });
-    }, [initialPaginationInfo, query, pageSize, paginationInfo,]);
-    return paginatedQuery;
+    }, [query, pageSize, paginationInfo,]);
+    const onCanvas = useIsOnFramerCanvas();
+    const loadMore = (0, react_5.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,
+    };
 }
 exports.useLoadMorePaginatedQuery = useLoadMorePaginatedQuery;
 function createGestureVariant(variant, type) {
@@ -33170,9 +33408,10 @@ exports.CycleVariantState = CycleVariantState;
 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 = (0, react_4.useRef)({
+    const internalState = react_12.default.useRef({
         isHovered: false,
         isPressed: false,
+        hasPressedVariants: true,
         baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants),
         lastVariant: variant,
         gestureVariant: void 0,
@@ -33184,14 +33423,14 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         cycleOrder: externalCycleOrder,
         transitions: externalTransitions,
     });
-    const resolveNextVariant = (0, react_5.useCallback)((targetBaseVariant) => {
+    const resolveNextVariant = react_12.default.useCallback((targetBaseVariant) => {
         const { isHovered: isHovered2, isPressed: isPressed2, enabledGestures: enabledGestures2, defaultVariant: defaultVariant2, } = internalState.current;
         const nextBaseVariant = safeBaseVariant(targetBaseVariant, defaultVariant2, validBaseVariants);
         const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2);
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
     }, [validBaseVariants,]);
-    const setGestureState = (0, react_5.useCallback)(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
+    const setGestureState = react_12.default.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, }) => {
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -33201,10 +33440,10 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
             internalState.current.baseVariant = nextBase || defaultVariant2;
             internalState.current.gestureVariant = nextGesture;
-            (0, react_13.startTransition)(forceUpdate);
+            forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
-    const setVariant = (0, react_5.useCallback)((proposedVariant) => {
+    const setVariant = react_12.default.useCallback((proposedVariant) => {
         const { defaultVariant: defaultVariant2, cycleOrder, baseVariant: baseVariant2, gestureVariant: gestureVariant2, } = internalState.current;
         const nextBaseVariant = proposedVariant === CycleVariantState
             ? nextVariant(cycleOrder || [], baseVariant2 || defaultVariant2)
@@ -33213,7 +33452,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
             internalState.current.baseVariant = nextBase || defaultVariant2;
             internalState.current.gestureVariant = nextGesture;
-            (0, react_13.startTransition)(forceUpdate);
+            forceUpdate();
         }
     }, [resolveNextVariant, forceUpdate,]);
     if (variant !== internalState.current.lastVariant) {
@@ -33226,12 +33465,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 (0, react_6.useMemo)(() => {
+    return react_12.default.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,
@@ -33240,7 +33504,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,
@@ -34091,8 +34356,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}__`;
@@ -35004,13 +35269,10 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
                 },
             });
         }
-        renderErrorPlaceholder(file, error) {
+        renderErrorPlaceholder(error) {
             const { RenderPlaceholder, } = runtime;
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FrameWithMotion, Object.assign(Object.assign({}, this.props), { background: null, children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(RenderPlaceholder, {
-                    error: {
-                        error,
-                        file,
-                    },
+                    error,
                 }) }));
         }
         render() {
@@ -35023,13 +35285,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;
@@ -35181,8 +35453,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__ */ react_12.default.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,] = react_12.default.useReducer(formReducer, {
         state: disabled ? 'disabled' : void 0,
     });
@@ -35228,6 +35500,7 @@ var FormContainer = (_f) => {
             dispatch({
                 type: 'success',
             });
+            onSuccess == null ? void 0 : onSuccess();
             if (redirectUrl) {
                 yield redirectTo(redirectUrl);
             }
@@ -35236,6 +35509,7 @@ var FormContainer = (_f) => {
             dispatch({
                 type: 'error',
             });
+            onError == null ? void 0 : onError();
         }
     });
     const handleKeyDown = (event) => {
@@ -35248,8 +35522,8 @@ var FormContainer = (_f) => {
             void handleSubmit(event);
         }
     };
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: isSubmitEnabled ? handleSubmit : preventDefault, onKeyDown: handleKeyDown, children: children(state) }));
-};
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.form, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: isSubmitEnabled ? handleSubmit : preventDefault, onKeyDown: handleKeyDown, ref, children: children(state) }));
+});
 exports.FormContainer = FormContainer;
 function submitForm(action, data2) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -35304,21 +35578,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});
@@ -35337,28 +35646,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;
@@ -35391,13 +35700,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__ */ react_12.default.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,] = react_12.default.useState(!!value);
+    const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
+    const eventProps = {
+        onBlur,
+        onFocus,
+        onInvalid,
+    };
+    const onChange = react_12.default.useCallback((e) => {
+        const newValue = e.target.value;
+        setHasValue(!!newValue);
+    }, []);
     switch (type) {
         case 'hidden':
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.input, {
@@ -35407,17 +35729,24 @@ var PlainTextInput = /* @__PURE__ */ react_12.default.forwardRef(function FormPl
             });
         case 'textarea':
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.div, Object.assign(Object.assign({ ref,
-                style }, rest), { className: cx(inputWrapperClassName, props.className), children: /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(motion.div, Object.assign(Object.assign({ ref,
-                style }, rest), { className: cx(inputWrapperClassName, props.className), children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.input, Object.assign(Object.assign({ id: inputName }, dataProps), { type,
+                style, className: cx(inputWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ (0, jsx_runtime_1.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,
@@ -35430,21 +35759,168 @@ 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;
+        }`,
 ]))();
 exports.FormPlainTextInput = FormPlainTextInput2;
+var className = 'framer-form-boolean-input';
+var BooleanInput = /* @__PURE__ */ react_12.default.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__ */ (0, jsx_runtime_1.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);
+exports.FormBooleanInput = FormBooleanInput;
 var Select = /* @__PURE__ */ react_12.default.forwardRef(function Select2(props, measureRef) {
-    const { style, inputName, required, autoFocus, selectOptions, selectDefaultValue, } = props;
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.div, {
-        ref: measureRef,
-        style,
-        className: cx(inputWrapperClassName, selectWrapperClassName, props.className),
-        children: /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ (0, jsx_runtime_1.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) {
@@ -35458,8 +35934,7 @@ var Select = /* @__PURE__ */ react_12.default.forwardRef(function Select2(props,
                         }, index);
                 }
             }),
-        }, selectDefaultValue),
-    });
+        }, selectDefaultValue) }));
 });
 var selectWrapperClassName = 'framer-form-select-wrapper';
 var selectArrowSize = 16;
@@ -35488,6 +35963,9 @@ var FormSelect = /* @__PURE__ */ (() => withCSS(Select, [
             background-position: center center;
             border: none;
         }`,
+    `select.${inputClassName}:required:invalid {
+            color: var(${'--framer-input-invalid-text-color'});
+        }`,
 ]))();
 exports.FormSelect = FormSelect;
 var Image2 = /* @__PURE__ */ react_12.default.forwardRef(function Image3(props, ref) {
@@ -35658,7 +36136,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 = (0, react_4.useRef)(null);
@@ -35775,7 +36253,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     }
     Object.assign(style, props.style);
     return /* @__PURE__ */ (0, jsx_runtime_1.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,
         } }));
 });
@@ -36562,7 +37040,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';
@@ -36699,8 +37177,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
             }
             const MotionComponent = htmlElementAsMotionComponent(this.props.as);
             const { href, target, rel, onClick, } = this.props;
-            return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.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,
@@ -36821,7 +37298,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;
                 }
@@ -36889,7 +37366,7 @@ var TextComponent = /* @__PURE__ */ (() => {
                     const tabIndexProps = getTabIndexProps(tabIndex);
                     return /* @__PURE__ */ (0, jsx_runtime_1.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 }));
                 }
             });
@@ -37967,7 +38444,7 @@ function loadJSON(url) {
 }
 exports.loadJSON = loadJSON;
 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;
@@ -37984,15 +38461,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';
@@ -38137,7 +38614,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',
     },
@@ -38206,7 +38683,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);
     }
 }