unframer 2.5.2 → 2.6.0

package/src/framer.js

@@ -1,4 +1,4 @@
-// https :https://app.framerstatic.com/chunk-AJGVEDRA.js
+// https :https://app.framerstatic.com/chunk-DUHOOT7P.js
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { jsx, jsxs, } from 'react/jsx-runtime';
@@ -146,7 +146,7 @@ var SwitchLayoutGroupContext = createContext({},);
 var LazyContext = createContext({
   strict: false,
 },);
-var Queue = class {
+var Queue = /*#__PURE__*/ class {
   constructor() {
     this.order = [];
     this.scheduled = /* @__PURE__ */ new Set();
@@ -1305,6 +1305,9 @@ function hslaToRgba({
     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;
@@ -1314,7 +1317,8 @@ 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,);
@@ -1324,6 +1328,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 = {
     ...fromRGBA,
   };
@@ -1352,9 +1359,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,);
 }
@@ -1602,7 +1606,7 @@ function flushKeyframeResolvers() {
   readAllKeyframes();
   measureAllKeyframes();
 }
-var KeyframeResolver = class {
+var KeyframeResolver = /*#__PURE__*/ class {
   constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false,) {
     this.isComplete = false;
     this.isAsync = false;
@@ -1874,7 +1878,7 @@ function getFinalKeyframe(keyframes2, {
   const index = repeat && repeatType !== 'loop' && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
   return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
-var BaseAnimation = class {
+var BaseAnimation = /*#__PURE__*/ class {
   constructor({
     autoplay = true,
     delay: delay2 = 0,
@@ -2007,7 +2011,7 @@ var generators = {
   spring,
 };
 var percentToProgress = (percent2) => percent2 / 100;
-var MainThreadAnimation = class extends BaseAnimation {
+var MainThreadAnimation = /*#__PURE__*/ class extends BaseAnimation {
   constructor({
     KeyframeResolver: KeyframeResolver$1 = KeyframeResolver,
     ...options
@@ -2487,7 +2491,7 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
     }
   }
 }
-var DOMKeyframesResolver = class extends KeyframeResolver {
+var DOMKeyframesResolver = /*#__PURE__*/ class extends KeyframeResolver {
   constructor(unresolvedKeyframes, onComplete, name, motionValue2,) {
     super(
       unresolvedKeyframes,
@@ -2507,14 +2511,17 @@ var DOMKeyframesResolver = class extends KeyframeResolver {
     if (!element.current) 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;
+          }
         }
       }
     }
@@ -2695,7 +2702,7 @@ function pregenerateKeyframes(keyframes2, options,) {
     ease: 'linear',
   };
 }
-var AcceleratedAnimation = class extends BaseAnimation {
+var AcceleratedAnimation = /*#__PURE__*/ class extends BaseAnimation {
   constructor(options,) {
     super(options,);
     const {
@@ -2967,7 +2974,7 @@ function moveItem([...arr], fromIndex, toIndex,) {
   }
   return arr;
 }
-var SubscriptionManager = class {
+var SubscriptionManager = /*#__PURE__*/ class {
   constructor() {
     this.subscriptions = [];
   }
@@ -3001,7 +3008,7 @@ var isFloat = (value) => {
 var collectMotionValues = {
   current: void 0,
 };
-var MotionValue = class {
+var MotionValue = /*#__PURE__*/ class {
   /**
    * @param init - The initiating value
    * @param config - Optional configuration options
@@ -3011,7 +3018,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,) => {
@@ -3318,6 +3325,95 @@ function isTransitionDefined({
 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 = /*#__PURE__*/ 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;
@@ -3377,7 +3473,7 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
         options.onUpdate(finalKeyframe,);
         options.onComplete();
       },);
-      return;
+      return new GroupPlaybackControls([],);
     }
   }
   if (!isHandoff && AcceleratedAnimation.supports(options,)) {
@@ -3412,6 +3508,9 @@ function setTarget(visualElement, definition,) {
     setMotionValue(visualElement, key7, value,);
   }
 }
+function getOptimisedAppearId(visualElement,) {
+  return visualElement.getProps()[optimizedAppearDataAttribute];
+}
 function shouldBlockAnimation({
   protectedKeys,
   needsAnimating,
@@ -3448,8 +3547,7 @@ function animateTarget(visualElement, targetAndTransition, {
     };
     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) {
@@ -3773,14 +3871,14 @@ function createState() {
     exit: createTypeState(),
   };
 }
-var Feature = class {
+var Feature = /*#__PURE__*/ class {
   constructor(node,) {
     this.isMounted = false;
     this.node = node;
   }
   update() {}
 };
-var AnimationFeature = class extends Feature {
+var AnimationFeature = /*#__PURE__*/ class extends Feature {
   /**
    * We dynamically generate the AnimationState manager as it contains a reference
    * to the underlying animation library. We only want to load that if we load this,
@@ -3819,7 +3917,7 @@ var AnimationFeature = class extends Feature {
   unmount() {}
 };
 var id = 0;
-var ExitAnimationFeature = class extends Feature {
+var ExitAnimationFeature = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.id = id++;
@@ -3937,7 +4035,7 @@ function isPresent(context,) {
   return context === null ? true : context.isPresent;
 }
 var compareByDepth = (a, b,) => a.depth - b.depth;
-var FlatTree = class {
+var FlatTree = /*#__PURE__*/ class {
   constructor() {
     this.children = [];
     this.isDirty = false;
@@ -4003,8 +4101,8 @@ function updateMotionValuesFromProps(element, next, prev,) {
       }
       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.`,
+          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,)) {
@@ -4059,7 +4157,7 @@ function getClosestProjectingNode(visualElement,) {
   if (!visualElement) return void 0;
   return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent,);
 }
-var VisualElement = class {
+var VisualElement = /*#__PURE__*/ class {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
    * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
@@ -4955,13 +5053,13 @@ function addHoverEvent(node, isActive,) {
     passive: !node.getProps()[callbackName],
   },);
 }
-var HoverGesture = class extends Feature {
+var HoverGesture = /*#__PURE__*/ class extends Feature {
   mount() {
     this.unmount = pipe(addHoverEvent(this.node, true,), addHoverEvent(this.node, false,),);
   }
   unmount() {}
 };
-var FocusGesture = class extends Feature {
+var FocusGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.isActive = false;
@@ -5004,7 +5102,7 @@ function fireSyntheticPointerEvent(name, handler,) {
   const syntheticPointerEvent = new PointerEvent('pointer' + name,);
   handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent,),);
 }
-var PressGesture = class extends Feature {
+var PressGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.removeStartListeners = noop;
@@ -5159,7 +5257,7 @@ var thresholdNames = {
   some: 0,
   all: 1,
 };
-var InViewFeature = class extends Feature {
+var InViewFeature = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.hasEnteredView = false;
@@ -5241,7 +5339,7 @@ var gestureAnimations = {
     Feature: HoverGesture,
   },
 };
-var PanSession = class {
+var PanSession = /*#__PURE__*/ class {
   constructor(event, handlers, {
     transformPagePoint,
     contextWindow,
@@ -5657,7 +5755,7 @@ var getContextWindow = ({
   return current ? current.ownerDocument.defaultView : null;
 };
 var elementDragControls = /* @__PURE__ */ new WeakMap();
-var VisualElementDragControls = class {
+var VisualElementDragControls = /*#__PURE__*/ class {
   constructor(visualElement,) {
     this.openGlobalLock = null;
     this.isDragging = false;
@@ -6097,7 +6195,7 @@ function getCurrentDirection(offset, lockThreshold = 10,) {
   }
   return direction;
 }
-var DragGesture = class extends Feature {
+var DragGesture = /*#__PURE__*/ class extends Feature {
   constructor(node,) {
     super(node,);
     this.removeGroupControls = noop;
@@ -6123,7 +6221,7 @@ var asyncHandler = (handler) => (event, info,) => {
     frame.postRender(() => handler(event, info,));
   }
 };
-var PanGesture = class extends Feature {
+var PanGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.removePointerDownListener = noop;
@@ -6215,7 +6313,7 @@ var correctBoxShadow = {
     return template(shadow,);
   },
 };
-var MeasureLayoutWithContext = class extends Component {
+var MeasureLayoutWithContext = /*#__PURE__*/ class extends Component {
   /**
    * This only mounts projection nodes for components that
    * need measuring, we might want to do it for all components
@@ -6439,7 +6537,7 @@ function boxEqualsRounded(a, b,) {
 function aspectRatio(box,) {
   return calcLength(box.x,) / calcLength(box.y,);
 }
-var NodeStack = class {
+var NodeStack = /*#__PURE__*/ class {
   constructor() {
     this.members = [];
   }
@@ -6603,6 +6701,22 @@ 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,
@@ -6628,6 +6742,7 @@ function createProjectionNode({
       this.isSVG = false;
       this.needsReset = false;
       this.shouldResetTransform = false;
+      this.hasCheckedOptimisedAppear = false;
       this.treeScale = {
         x: 1,
         y: 1,
@@ -6790,9 +6905,6 @@ function createProjectionNode({
     startUpdate() {
       if (this.isUpdateBlocked()) return;
       this.isUpdating = true;
-      if (window.HandoffCancelAllAnimations) {
-        window.HandoffCancelAllAnimations();
-      }
       this.nodes && this.nodes.forEach(resetSkewAndRotation,);
       this.animationId++;
     }
@@ -6808,6 +6920,9 @@ function createProjectionNode({
         this.options.onExitComplete && this.options.onExitComplete();
         return;
       }
+      if (window.HandoffCancelAllAnimations && isOptimisedAppearTree(this,)) {
+        window.HandoffCancelAllAnimations();
+      }
       !this.root.isUpdating && this.root.startUpdate();
       if (this.isLayoutDirty) return;
       this.isLayoutDirty = true;
@@ -7429,16 +7544,16 @@ function createProjectionNode({
       if (!this.isVisible) {
         return hiddenVisibility;
       }
-      const styles = {
+      const styles4 = {
         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;
+        styles4.opacity = '';
+        styles4.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents,) || '';
+        styles4.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '',) : 'none';
+        return styles4;
       }
       const lead = this.getLead();
       if (!this.projectionDelta || !this.layout || !lead.target) {
@@ -7456,17 +7571,17 @@ function createProjectionNode({
       }
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget();
-      styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender,);
+      styles4.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender,);
       if (transformTemplate2) {
-        styles.transform = transformTemplate2(valuesToRender, styles.transform,);
+        styles4.transform = transformTemplate2(valuesToRender, styles4.transform,);
       }
       const {
         x,
         y,
       } = this.projectionDelta;
-      styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+      styles4.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
       if (lead.animationValues) {
-        styles.opacity = lead === this
+        styles4.opacity = lead === this
           ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0
             ? _b
             : 1
@@ -7474,7 +7589,7 @@ function createProjectionNode({
           ? this.latestValues.opacity
           : valuesToRender.opacityExit;
       } else {
-        styles.opacity = lead === this
+        styles4.opacity = lead === this
           ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : ''
           : valuesToRender.opacityExit !== void 0
           ? valuesToRender.opacityExit
@@ -7486,22 +7601,22 @@ function createProjectionNode({
           correct,
           applyTo,
         } = scaleCorrectors[key7];
-        const corrected = styles.transform === 'none' ? valuesToRender[key7] : correct(valuesToRender[key7], lead,);
+        const corrected = styles4.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;
+            styles4[applyTo[i]] = corrected;
           }
         } else {
-          styles[key7] = corrected;
+          styles4[key7] = corrected;
         }
       }
       if (this.options.layoutId) {
-        styles.pointerEvents = lead === this
+        styles4.pointerEvents = lead === this
           ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents,) || ''
           : 'none';
       }
-      return styles;
+      return styles4;
     }
     clearSnapshot() {
       this.resumeFrom = this.snapshot = void 0;
@@ -7727,7 +7842,7 @@ var drag = {
     MeasureLayout,
   },
 };
-var DOMVisualElement = class extends VisualElement {
+var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
   constructor() {
     super(...arguments,);
     this.KeyframeResolver = DOMKeyframesResolver;
@@ -7749,7 +7864,7 @@ var DOMVisualElement = class extends VisualElement {
 function getComputedStyle2(element,) {
   return window.getComputedStyle(element,);
 }
-var HTMLVisualElement = class extends DOMVisualElement {
+var HTMLVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
   constructor() {
     super(...arguments,);
     this.type = 'html';
@@ -7793,7 +7908,7 @@ var HTMLVisualElement = class extends DOMVisualElement {
     renderHTML(instance, renderState, styleProp, projection,);
   }
 };
-var SVGVisualElement = class extends DOMVisualElement {
+var SVGVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
   constructor() {
     super(...arguments,);
     this.type = 'svg';
@@ -7885,7 +8000,7 @@ function useForceUpdate() {
 function useUnmountEffect(callback,) {
   return useEffect(() => () => callback(), [],);
 }
-var PopChildMeasure = class extends React2.Component {
+var PopChildMeasure = /*#__PURE__*/ class extends React2.Component {
   getSnapshotBeforeUpdate(prevProps,) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -9000,7 +9115,7 @@ function useTime() {
   useAnimationFrame((t) => time2.set(t,));
   return time2;
 }
-var WillChangeMotionValue = class extends MotionValue {
+var WillChangeMotionValue = /*#__PURE__*/ class extends MotionValue {
   constructor() {
     super(...arguments,);
     this.members = [];
@@ -9131,97 +9246,6 @@ var wrap = (min, max, v,) => {
   const rangeSize = max - min;
   return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
-function observeTimeline(update, timeline,) {
-  let prevProgress;
-  const onFrame = () => {
-    const {
-      currentTime,
-    } = timeline;
-    const percentage = currentTime === null ? 0 : currentTime.value;
-    const progress2 = percentage / 100;
-    if (prevProgress !== progress2) {
-      update(progress2,);
-    }
-    prevProgress = progress2;
-  };
-  frame.update(onFrame, true,);
-  return () => cancelFrame(onFrame,);
-}
-var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-var GroupPlaybackControls = class {
-  constructor(animations2,) {
-    this.animations = animations2.filter(Boolean,);
-  }
-  then(onResolve, onReject,) {
-    return Promise.all(this.animations,).then(onResolve,).catch(onReject,);
-  }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(propName,) {
-    return this.animations[0][propName];
-  }
-  setAll(propName, newValue,) {
-    for (let i = 0; i < this.animations.length; i++) {
-      this.animations[i][propName] = newValue;
-    }
-  }
-  attachTimeline(timeline,) {
-    const cancelAll = this.animations.map((animation) => {
-      if (supportsScrollTimeline() && animation.attachTimeline) {
-        animation.attachTimeline(timeline,);
-      } else {
-        animation.pause();
-        return observeTimeline((progress2) => {
-          animation.time = animation.duration * progress2;
-        }, timeline,);
-      }
-    },);
-    return () => {
-      cancelAll.forEach((cancelTimeline, i,) => {
-        if (cancelTimeline) cancelTimeline();
-        this.animations[i].stop();
-      },);
-    };
-  }
-  get time() {
-    return this.getAll('time',);
-  }
-  set time(time2,) {
-    this.setAll('time', time2,);
-  }
-  get speed() {
-    return this.getAll('speed',);
-  }
-  set speed(speed,) {
-    this.setAll('speed', speed,);
-  }
-  get duration() {
-    let max = 0;
-    for (let i = 0; i < this.animations.length; i++) {
-      max = Math.max(max, this.animations[i].duration,);
-    }
-    return max;
-  }
-  runAll(methodName,) {
-    this.animations.forEach((controls) => controls[methodName]());
-  }
-  play() {
-    this.runAll('play',);
-  }
-  pause() {
-    this.runAll('pause',);
-  }
-  stop() {
-    this.runAll('stop',);
-  }
-  cancel() {
-    this.runAll('cancel',);
-  }
-  complete() {
-    this.runAll('complete',);
-  }
-};
 function isDOMKeyframes(keyframes2,) {
   return typeof keyframes2 === 'object' && !Array.isArray(keyframes2,);
 }
@@ -9616,7 +9640,7 @@ function useInView(ref, {
   }, [root, ref, margin, once, amount,],);
   return isInView;
 }
-var DragControls = class {
+var DragControls = /*#__PURE__*/ class {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -9808,7 +9832,7 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
   }
 }
 var createObject = () => ({});
-var StateVisualElement = class extends VisualElement {
+var StateVisualElement = /*#__PURE__*/ class extends VisualElement {
   build() {}
   measureInstanceViewportBox() {
     return createBox();
@@ -9972,7 +9996,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
   return acc;
 }, {},);
 
-// https :https://app.framerstatic.com/framer.W4GEXVYP.js
+// https :https://app.framerstatic.com/framer.VEJ3JK5Y.js
 
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -9987,7 +10011,7 @@ var require_hsluv = __commonJS({
       value: true,
     },);
     exports.Hsluv = void 0;
-    var Hsluv2 = class {
+    var Hsluv2 = /*#__PURE__*/ class {
       constructor() {
         this.hex = '#000000';
         this.rgb_r = 0;
@@ -11083,11 +11107,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';
@@ -11145,7 +11169,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,) {
@@ -11662,9 +11686,9 @@ function renderPage(Page4, defaultPageStyle,) {
   };
   return React4.isValidElement(Page4,) ? React4.cloneElement(Page4, style,) : React4.createElement(Page4, style,);
 }
-var NotFoundError = class extends Error {};
-var ErrorBoundaryCaughtError = class extends Error {};
-var ErrorBoundary = class extends Component {
+var NotFoundError = /*#__PURE__*/ class extends Error {};
+var ErrorBoundaryCaughtError = /*#__PURE__*/ class extends Error {};
+var ErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor(props,) {
     super(props,);
     this.state = {
@@ -11884,14 +11908,12 @@ function lazy(factory,) {
   const Component15 = React4.forwardRef(function LazyWithPreload(props, ref,) {
     return React4.createElement(
       LoadedComponent !== null && LoadedComponent !== void 0 ? LoadedComponent : LazyComponent,
-      Object.assign(
-        ref
-          ? {
-            ref,
-          }
-          : {},
-        props,
-      ),
+      ref
+        ? {
+          ref,
+          ...props,
+        }
+        : props,
     );
   },);
   Component15.preload = () => {
@@ -11916,7 +11938,22 @@ 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,);
+  },);
 }
 async function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils,) {
   var _a, _b, _c;
@@ -12600,18 +12637,22 @@ async function switchLocale(options,) {
       routeId: options.routeId,
       pathVariables: result.pathVariables,
       localeId: options.nextLocale.id,
-      paginationInfo: options.paginationInfo,
+      paginationInfo: window.history.state.paginationInfo,
     }, result.path,);
   } catch {}
   return result;
 }
-function pushLoadMoreHistory(paginationInfo,) {
+function pushLoadMoreHistory(hash2, paginationInfo,) {
   try {
     const currentHistoryState = window.history.state;
     if (!isHistoryState(currentHistoryState,)) return;
+    const newPaginationInfo = {
+      ...currentHistoryState.paginationInfo,
+      [hash2]: paginationInfo,
+    };
     replaceHistoryState({
       ...currentHistoryState,
-      paginationInfo,
+      paginationInfo: newPaginationInfo,
     },);
   } catch {}
 }
@@ -12679,18 +12720,87 @@ function turnOnReactEventHandling() {
   eventsToStop.forEach((event) => document.body.removeEventListener(event, stopFn, options,));
   eventsToStop = void 0;
 }
-var hydrated = false;
+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({
-  addHydrationEndMarker,
+  addHydrationMarkers,
   turnOffEventHandlerHack,
 },) {
+  const hydrationMarkPrefix = 'framer-hydration-';
+  const hydrationStart = `${hydrationMarkPrefix}start`;
+  const hydrationRenderEnd = `${hydrationMarkPrefix}render-end`;
+  const hydrationLayoutEffectsEnd = `${hydrationMarkPrefix}layout-effects-end`;
+  const hydrationEffectsEnd = `${hydrationMarkPrefix}effects-end`;
+  const hydrationFP = `${hydrationMarkPrefix}first-paint`;
+  useInsertionEffect(() => {
+    if (hydrationInsertionEffectHasRun) return;
+    hydrationInsertionEffectHasRun = true;
+    if (addHydrationMarkers) {
+      performance.mark(hydrationRenderEnd,);
+      measureSafe(`${hydrationMarkPrefix}render`, hydrationStart, hydrationRenderEnd,);
+    }
+  }, [],);
   useLayoutEffect(() => {
-    if (hydrated) return;
-    hydrated = true;
-    if (turnOffEventHandlerHack) turnOnReactEventHandling();
-    if (addHydrationEndMarker) {
-      performance.mark('framer-hydration-end',);
-      performance.measure('framer-hydration', 'framer-hydration-start', 'framer-hydration-end',);
+    if (hydrationLayoutEffectHasRun) return;
+    hydrationLayoutEffectHasRun = true;
+    if (addHydrationMarkers) {
+      performance.mark(hydrationLayoutEffectsEnd,);
+      measureSafe(`${hydrationMarkPrefix}layout-effects`, hydrationRenderEnd, hydrationLayoutEffectsEnd,);
+    }
+    requestAnimationFrame(() => {
+      var _a, _b, _c;
+      const browserRenderStart = `${hydrationMarkPrefix}browser-render-start`;
+      if (addHydrationMarkers) {
+        performance.mark(browserRenderStart,);
+        measureSafe(
+          `${hydrationMarkPrefix}uho`,
+          (_b = (_a = performance.getEntriesByName(hydrationEffectsEnd,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null &&
+            _b !== void 0
+            ? _b
+            : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd,)[0]) === null || _c === void 0
+            ? void 0
+            : _c.name,
+          browserRenderStart,
+        );
+      }
+      setTimeout(() => {
+        if (turnOffEventHandlerHack) {
+          turnOnReactEventHandling();
+        }
+        if (addHydrationMarkers) {
+          performance.mark(hydrationFP,);
+          measureSafe(`${hydrationMarkPrefix}time-to-first-paint`, hydrationStart, hydrationFP,);
+          measureSafe(`${hydrationMarkPrefix}browser-render`, browserRenderStart, hydrationFP,);
+        }
+      }, 0,);
+    },);
+  }, [],);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (hydrationEffectHasRun) return;
+    hydrationEffectHasRun = true;
+    if (turnOffEventHandlerHack) {
+      turnOnReactEventHandling();
+    }
+    if (addHydrationMarkers) {
+      performance.mark(hydrationEffectsEnd,);
+      measureSafe(
+        `${hydrationMarkPrefix}effects`,
+        (_b = (_a = performance.getEntriesByName(hydrationFP,)[0]) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0
+          ? _b
+          : (_c = performance.getEntriesByName(hydrationLayoutEffectsEnd,)[0]) === null || _c === void 0
+          ? void 0
+          : _c.name,
+        hydrationEffectsEnd,
+      );
     }
   }, [],);
   return null;
@@ -12723,7 +12833,7 @@ function RoutesProvider({
     children,
   },);
 }
-var SuspenseErrorBoundary = class extends Component {
+var SuspenseErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     this.state = {
@@ -12771,25 +12881,15 @@ function SuspenseThatPreservesDom({
   },);
 }
 var defaultLocaleId = 'default';
-var noopAsync = async () => {};
-var defaultCollectionListPaginationInfo = {
-  paginationInfo: void 0,
-  setPaginationInfo: noopAsync,
-  loadMore: noopAsync,
-};
-var CollectionListPaginationInfoContext = /* @__PURE__ */ React4.createContext(defaultCollectionListPaginationInfo,);
-function useCollectionListPaginationInfo() {
-  return React4.useContext(CollectionListPaginationInfoContext,);
-}
 function useForceUpdate2() {
   const [_, setForcedRenderCount,] = React4.useState(0,);
   return [_, React4.useCallback(() => setForcedRenderCount((v) => v + 1), [],),];
 }
-var noopAsync2 = async () => {};
+var noopAsync = async () => {};
 var defaultLocaleInfo = {
   activeLocale: null,
   locales: [],
-  setLocale: noopAsync2,
+  setLocale: noopAsync,
 };
 var LocaleInfoContext = /* @__PURE__ */ React4.createContext(defaultLocaleInfo,);
 function useLocaleInfo() {
@@ -12868,9 +12968,8 @@ function Router({
   locales = [],
   preserveQueryParams = false,
   enableImproveInpDuringHydration = false,
-  shouldMarkHydrationEnd = false,
+  addHydrationMarkers = false,
 },) {
-  var _a, _b;
   useReplaceInitialState({
     disabled: disableHistory,
     routeId: initialRoute,
@@ -12884,46 +12983,17 @@ function Router({
   const currentLocaleIdRef = React4.useRef(initialLocaleId,);
   const currentLocaleId = currentLocaleIdRef.current;
   const activeLocale = React4.useMemo(() => {
-    var _a2;
-    return (_a2 = locales.find(({
+    var _a;
+    return (_a = locales.find(({
             id: id3,
           },) => {
             if (!currentLocaleId) return id3 === defaultLocaleId;
             return id3 === currentLocaleId;
-          },)) !== null && _a2 !== void 0
-      ? _a2
+          },)) !== null && _a !== void 0
+      ? _a
       : null;
   }, [currentLocaleId, locales,],);
   const [dep, forceUpdate,] = useForceUpdate2();
-  const [paginationInfo, setPaginationInfo,] = React4.useState(
-    typeof window !== 'undefined'
-      ? (_b = (_a = window === null || window === void 0 ? void 0 : window.history) === null || _a === void 0 ? void 0 : _a.state) ===
-            null || _b === void 0
-        ? void 0
-        : _b.pagination
-      : void 0,
-  );
-  const collectionListPaginationInfo = React4.useMemo(() => {
-    return {
-      paginationInfo,
-      setPaginationInfo: async (newPaginationInfo) => {
-        startTransition2(() => {
-          setPaginationInfo(newPaginationInfo,);
-        },);
-      },
-      loadMore: async () => {
-        if ((paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.type) !== 'loadMore') return;
-        const newPaginationInfo = {
-          ...paginationInfo,
-          currentPage: paginationInfo.currentPage + 1,
-        };
-        pushLoadMoreHistory(newPaginationInfo,);
-        startTransition2(() => {
-          setPaginationInfo(newPaginationInfo,);
-        },);
-      },
-    };
-  }, [paginationInfo,],);
   const localeInfo = React4.useMemo(() => {
     return {
       activeLocale,
@@ -12955,7 +13025,6 @@ function Router({
             pathVariables: currentPathVariablesRef.current,
             collectionUtils,
             preserveQueryParams,
-            paginationInfo,
           },);
           if (!localeResult) return;
           currentPathVariablesRef.current = localeResult.pathVariables;
@@ -12965,17 +13034,7 @@ function Router({
         } catch {}
       },
     };
-  }, [
-    activeLocale,
-    collectionUtils,
-    forceUpdate,
-    locales,
-    monitorNextRender,
-    paginationInfo,
-    preserveQueryParams,
-    routes,
-    startViewTransition2,
-  ],);
+  }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,],);
   const scheduleSideEffect = useScheduleRenderSideEffects(dep,);
   const setCurrentRouteId = React4.useCallback(
     (routeId, localeId, hash2, pathVariables, smoothScroll = false, isHistoryTransition = false,) => {
@@ -12992,11 +13051,11 @@ function Router({
   );
   usePopStateHandler(currentRouteRef, setCurrentRouteId,);
   const navigate = React4.useCallback((routeId, hash2, pathVariables, smoothScroll,) => {
-    var _a2, _b2;
+    var _a, _b;
     const newRoute = routes[routeId];
     if (pathVariables) {
       const inUse = /* @__PURE__ */ new Set();
-      const path = (_a2 = newRoute === null || newRoute === void 0 ? void 0 : newRoute.path) !== null && _a2 !== void 0 ? _a2 : '/';
+      const path = (_a = newRoute === null || newRoute === void 0 ? void 0 : newRoute.path) !== null && _a !== void 0 ? _a : '/';
       for (const match of path.matchAll(pathVariablesRegExp,)) {
         const usedVariable = match[1];
         if (usedVariable === void 0) {
@@ -13016,7 +13075,7 @@ function Router({
         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) {
@@ -13074,26 +13133,23 @@ function Router({
     api,
     children: jsx(LocaleInfoContext.Provider, {
       value: localeInfo,
-      children: jsx(CollectionListPaginationInfoContext.Provider, {
-        value: collectionListPaginationInfo,
-        children: jsxs(SuspenseThatPreservesDom, {
-          children: [
-            jsx(ErrorBoundary, {
-              notFoundPage,
-              defaultPageStyle,
-              forceUpdateKey: dep,
-              children: jsx(React4.Fragment, {
-                children: pageExistsInCurrentLocale
-                  ? renderPage(current.page, defaultPageStyle,)
-                  : notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
-              }, remountKey,),
-            },),
-            jsx(OnHydrationEnd, {
-              addHydrationEndMarker: shouldMarkHydrationEnd,
-              turnOffEventHandlerHack: enableImproveInpDuringHydration,
-            },),
-          ],
-        },),
+      children: jsxs(SuspenseThatPreservesDom, {
+        children: [
+          jsx(ErrorBoundary, {
+            notFoundPage,
+            defaultPageStyle,
+            forceUpdateKey: dep,
+            children: jsx(React4.Fragment, {
+              children: pageExistsInCurrentLocale
+                ? renderPage(current.page, defaultPageStyle,)
+                : notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+            }, remountKey,),
+          },),
+          jsx(OnHydrationEnd, {
+            addHydrationMarkers,
+            turnOffEventHandlerHack: enableImproveInpDuringHydration,
+          },),
+        ],
       },),
     },),
   },);
@@ -13294,18 +13350,22 @@ function useRoutePreloader(routeIds, enabled = true,) {
   const {
     getRoute,
   } = useRouter();
-  React4.useEffect(() => {
+  useEffect(() => {
     if (!getRoute || !enabled || !shouldPreloadBasedOnUA) return;
     for (const routeId of routeIds) {
-      const route = getRoute(routeId,);
-      if (route === null || route === void 0 ? void 0 : route.page) preloadComponent(route.page,);
+      void preloadRoute(getRoute(routeId,),);
     }
   }, [routeIds, getRoute, enabled,],);
 }
-function preloadComponent(component,) {
-  if (!shouldPreloadBasedOnUA) return;
-  if (isLazyComponentType(component,)) {
-    void component.preload();
+async function preloadRoute(route,) {
+  if (!shouldPreloadBasedOnUA || !route) return;
+  const component = route.page;
+  if (!component || !isLazyComponentType(component,)) return;
+  await yieldToMain();
+  try {
+    await component.preload();
+  } catch (e) {
+    if (false) console.warn('Preload failed', route, e,);
   }
 }
 function useRouteAnchor(routeId, {
@@ -13375,7 +13435,7 @@ function deprecationWarning(removedItem, removalVersion, replacement,) {
   const warningText = `Deprecation warning: ${removedItem} will be removed in version ${removalVersion}${replacementText}.`;
   warnOnce2(warningText,);
 }
-var Observers = class {
+var Observers = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'observers', /* @__PURE__ */ new Set(),);
     __publicField(this, 'transactions', {},);
@@ -13495,7 +13555,7 @@ function animatableInterpolation(value, currentInterpolation,) {
     },
   };
 }
-var AnimatableValue = class {
+var AnimatableValue = /*#__PURE__*/ class {
   constructor(value,) {
     this.value = value;
     __publicField(this, 'observers', new Observers(),);
@@ -13687,7 +13747,7 @@ function controlPointsForCurve(curve,) {
       return [0.42, 0, 0.58, 1,];
   }
 }
-var BezierAnimator = class {
+var BezierAnimator = /*#__PURE__*/ class {
   constructor(options, interpolation,) {
     this.interpolation = interpolation;
     __publicField(this, 'unitBezier',);
@@ -13742,7 +13802,7 @@ var BezierAnimator = class {
     return 1 / (200 * duration);
   }
 };
-var UnitBezier = class {
+var UnitBezier = /*#__PURE__*/ class {
   constructor(point1, point2,) {
     __publicField(this, 'a',);
     __publicField(this, 'b',);
@@ -13788,7 +13848,7 @@ var UnitBezier = class {
     return t2;
   }
 };
-var Integrator = class {
+var Integrator = /*#__PURE__*/ class {
   constructor(accelerationFunction,) {
     __publicField(this, 'accelerationForState',);
     this.accelerationForState = accelerationFunction;
@@ -13823,7 +13883,7 @@ var Integrator = class {
     return output;
   }
 };
-var FrictionAnimator = class {
+var FrictionAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'options',);
     __publicField(this, 'state',);
@@ -14001,7 +14061,7 @@ function isDampingDurationSpringOptions(options,) {
   }
   return typeof options.dampingRatio === 'number' || typeof options.duration === 'number' || typeof options.mass === 'number';
 }
-var SpringAnimator = class {
+var SpringAnimator = /*#__PURE__*/ class {
   constructor(options, interpolation,) {
     this.interpolation = interpolation;
     __publicField(this, 'options',);
@@ -14088,7 +14148,7 @@ var Defaults = {
     tolerance: 1,
   },
 };
-var InertialScrollAnimator = class {
+var InertialScrollAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'options',);
     __publicField(this, 'current',);
@@ -15330,7 +15390,7 @@ var DefaultInterpolationOptions = {
   colorModel: 'husl',
   /* HUSL */
 };
-var ValueInterpolation = class {
+var ValueInterpolation = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -15383,7 +15443,7 @@ var Defaults2 = /* @__PURE__ */ (() => ({
   delta: 1 / 60,
   maxValues: 1e4,
 }))();
-var PrecalculatedAnimator = class {
+var PrecalculatedAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'animator',);
     __publicField(this, 'values',);
@@ -15450,7 +15510,7 @@ var PrecalculatedAnimator = class {
   }
 };
 var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)();
-var EventEmitter = class {
+var EventEmitter = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, '_emitter', new EventEmitter3(),);
   }
@@ -15566,7 +15626,7 @@ var _raf = (f) => {
 var __raf = /* @__PURE__ */ (() => safeWindow['requestAnimationFrame'] || _raf)();
 var raf = (f) => __raf(f,);
 var LoopTimeStep = /* @__PURE__ */ (() => 1 / 60)();
-var Loop = class extends EventEmitter {
+var Loop = /*#__PURE__*/ class extends EventEmitter {
   /**
    * @internal
    */
@@ -15773,7 +15833,7 @@ var RenderTarget = {
     return false;
   },
 };
-var AnimationDriver = class {
+var AnimationDriver = /*#__PURE__*/ class {
   constructor(animator, updateCallback, finishedCallback,) {
     this.animator = animator;
     this.updateCallback = updateCallback;
@@ -15799,7 +15859,7 @@ var AnimationDriver = class {
     return this.animator.isFinished();
   }
 };
-var MainLoopAnimationDriver = class extends AnimationDriver {
+var MainLoopAnimationDriver = /*#__PURE__*/ class extends AnimationDriver {
   play() {
     if (RenderEnvironment.target !== RenderTarget.preview) {
       this.finishedCallback && this.finishedCallback(false,);
@@ -15820,7 +15880,7 @@ var DefaultDeprecatedAnimationOptions = {
   colorModel: 'husl',
   /* HUSL */
 };
-var FramerAnimation = class {
+var FramerAnimation = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -16513,7 +16573,7 @@ function getColorsFromTheme(theme, type,) {
     screenColor: isDarkTheme ? '#333' : '#eee',
   };
 }
-var ErrorBoundary2 = class extends Component {
+var ErrorBoundary2 = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {},);
@@ -18129,6 +18189,12 @@ function useConstraints(props,) {
   const calculatedRect = calculateRect(props, parentSize, true,);
   return calculatedRect;
 }
+function isAutoSized({
+  width,
+  height,
+},) {
+  return width === 'auto' || width === 'min-content' || height === 'auto' || height === 'min-content';
+}
 var ControlType = /* @__PURE__ */ ((ControlType2) => {
   ControlType2['Boolean'] = 'boolean';
   ControlType2['Number'] = 'number';
@@ -18157,6 +18223,7 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
   ControlType2['Cursor'] = 'cursor';
   ControlType2['Padding'] = 'padding';
   ControlType2['BorderRadius'] = 'borderradius';
+  ControlType2['CollectionReference'] = 'collectionreference';
   return ControlType2;
 })(ControlType || {},);
 var isFlexboxGapSupportedCached;
@@ -19015,8 +19082,8 @@ var didInject = false;
 function injectComponentCSSRules() {
   if (didInject) return;
   didInject = true;
-  const styles = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
-  for (const rule of styles) {
+  const styles4 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
+  for (const rule of styles4) {
     injectCSSRule(rule, void 0, void 0,);
   }
 }
@@ -19062,6 +19129,7 @@ function getControlDefaultValue(control,) {
   try {
     switch (control.type) {
       case 'string':
+      case 'collectionreference':
       case 'color':
       case 'date':
       case 'link':
@@ -21257,7 +21325,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,) {
@@ -21292,25 +21360,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 = {
-            ...props,
-          };
-        }
-        _forwardedOverrides[key7] = props[propName];
-        delete props[propName];
-      }
-    }
-  }
+  const _forwardedOverrides = props._forwardedOverrides;
   if (!_forwardedOverrides) {
     return {
       props,
@@ -21380,7 +21430,7 @@ function useForceUpdate3() {
 }
 var ResizeObserverPolyfill = /* @__PURE__ */ (() => require_resize_observer_umd().ResizeObserver)();
 var DEFAULT_SIZE = 200;
-var SharedObserver = class {
+var SharedObserver = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'sharedResizeObserver',);
     __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap(),);
@@ -21711,6 +21761,7 @@ function resetSetStyle(element, key7, toValue, microtask2 = true,) {
   }
 }
 var Layer = /* @__PURE__ */ (() => {
+  /*#__PURE__*/
   class Layer2 extends Component {
     constructor() {
       super(...arguments,);
@@ -22441,12 +22492,6 @@ function resolveParentSize(props, unwrappedProps, rect, inCodeComponent,) {
   }
   return 0;
 }
-function isAutoSized({
-  width,
-  height,
-},) {
-  return width === 'auto' || width === 'min-content' || height === 'auto' || height === 'min-content';
-}
 function EmptyState({
   title = '',
   description = 'Click and drag the connector to any frame on the canvas \u2192',
@@ -22548,7 +22593,7 @@ var SharedLayoutContext = /* @__PURE__ */ React4.createContext({
   scheduleProjectionDidUpdate: () => {},
   initLead: () => {},
 },);
-var SharedLayoutRoot = class extends Component {
+var SharedLayoutRoot = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'shouldAnimate', false,);
@@ -22631,7 +22676,7 @@ function MagicMotionCrossfadeRoot(props,) {
     children: props.children,
   },);
 }
-var SharedIntersectionObserver = class {
+var SharedIntersectionObserver = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'sharedIntersectionObserver',);
     __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap(),);
@@ -22775,7 +22820,7 @@ function pointForEvent(event, customTarget = null,) {
   };
   return point2;
 }
-var FramerEvent = class {
+var FramerEvent = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -22882,7 +22927,7 @@ var DraggingContext = /* @__PURE__ */ React4.createContext({
   dragging: false,
 },);
 function WithDragging(Component15,) {
-  const _WithDraggingHOC = class extends React4.Component {
+  const _WithDraggingHOC = /*#__PURE__*/ class extends React4.Component {
     constructor(props, defaultProps,) {
       super(props, defaultProps,);
       __publicField(this, 'state', {
@@ -23701,7 +23746,7 @@ var ObservableObject = /* @__PURE__ */ (() => {
   };
   return ObservableObject2;
 })();
-var ObservableObjectProxyHandler = class {
+var ObservableObjectProxyHandler = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'set', (target, key7, value, receiver,) => {
       if (key7 === $private) {
@@ -24377,7 +24422,7 @@ function applyLayoutProp(style, props, key7,) {
   }
 }
 var DeprecatedFrame = /* @__PURE__ */ (() => {
-  const _DeprecatedFrameInner = class extends Layer {
+  const _DeprecatedFrameInner = /*#__PURE__*/ class extends Layer {
     constructor() {
       super(...arguments,);
       __publicField(this, 'element', null,);
@@ -24596,7 +24641,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
       const {
         visible,
         id: id3,
-        className,
+        className: className2,
       } = this.props;
       if (!visible) {
         return null;
@@ -24611,7 +24656,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
         id: id3,
         style,
         ref: this.setElement,
-        className,
+        className: className2,
         children: [
           /* @__PURE__ */ jsx(ProvideParentSize, {
             parentSize,
@@ -24624,19 +24669,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
       },);
     }
     layoutChildren() {
-      let _forwardedOverrides = this.props._forwardedOverrides;
-      const extractions = this.props._overrideForwardingDescription;
-      if (extractions) {
-        let added = false;
-        _forwardedOverrides = {};
-        for (const [key7, value,] of Object.entries(extractions,)) {
-          added = true;
-          _forwardedOverrides[key7] = asRecord(this.props,)[value];
-        }
-        if (!added) {
-          _forwardedOverrides = void 0;
-        }
-      }
+      const _forwardedOverrides = this.props._forwardedOverrides;
       let children = React4.Children.map(this.props.children, (child) => {
         if (isConstraintSupportingChild(child,)) {
           return React4.cloneElement(child, {
@@ -24770,7 +24803,7 @@ var Frame = /* @__PURE__ */ (() => {
   FrameInner['displayName'] = 'Frame';
   return FrameInner;
 })();
-var LayoutTree = class extends Component {
+var LayoutTree = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'layoutMaybeMutated',);
@@ -25208,7 +25241,7 @@ var allAnimatableProperties = {
   originZ: 0,
   opacity: 1,
 };
-var NavigatorMock = class {
+var NavigatorMock = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'warning', () => {
       warnOnce2('The Navigator API is only available inside of Framer: https://www.framer.com/',);
@@ -26233,20 +26266,17 @@ function containerContent(item,) {
 function backdropTapAction(transition, goBackAction,) {
   if (transition.goBackOnTapOutside !== false) return goBackAction;
 }
-function NavigationStyleSheet() {
-  React4.useInsertionEffect(() => {
-    injectComponentCSSRules();
-  }, [],);
-  return null;
-}
 function NavigationWrapper(props,) {
   const resetProjection = useResetProjection();
   const skipLayoutAnimation = useInstantLayoutTransition();
-  return /* @__PURE__ */ jsxs(Navigation, {
+  React4.useInsertionEffect(() => {
+    injectComponentCSSRules();
+  }, [],);
+  return /* @__PURE__ */ jsx(Navigation, {
     ...props,
     resetProjection,
     skipLayoutAnimation,
-    children: [props.children, /* @__PURE__ */ jsx(NavigationStyleSheet, {},),],
+    children: props.children,
   },);
 }
 var import_hoist_non_react_statics3 = __toESM(require_hoist_non_react_statics_cjs(), 1,);
@@ -26265,7 +26295,7 @@ var NavigationTransitionType = /* @__PURE__ */ ((NavigationTransitionType2) => {
   return NavigationTransitionType2;
 })(NavigationTransitionType || {},);
 function WithNavigator(BaseComponent, navigationTransition, navigationTransitionDirection, NavigationTarget, navigationTransitionOptions,) {
-  const InternalWithNavigator = class extends React4.Component {
+  const InternalWithNavigator = /*#__PURE__*/ class extends React4.Component {
     render() {
       return /* @__PURE__ */ jsx(NavigationContext.Consumer, {
         children: (navigation) => {
@@ -26344,6 +26374,50 @@ function transitionDirectionToSide(direction,) {
 }
 var AnimateSharedLayout = (props) => props.children;
 var Draggable = /* @__PURE__ */ WithDragging(DeprecatedFrameWithEvents,);
+function useInfiniteScroll({
+  ref: elementRef,
+  loadMore,
+  rootMargin = '0px',
+  threshold,
+  paginationInfo,
+},) {
+  const callback = React4.useCallback((entries) => {
+    const entry = entries[0];
+    const isIntersecting = entry == null ? void 0 : entry.isIntersecting;
+    if (isIntersecting) loadMore();
+  }, [loadMore,],);
+  React4.useEffect(() => {
+    if (!elementRef.current) return;
+    const observer2 = new IntersectionObserver(callback, {
+      rootMargin,
+      threshold,
+    },);
+    observer2.observe(elementRef.current,);
+    return () => {
+      observer2.disconnect();
+    };
+  }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,],);
+}
+function withInfiniteScroll(Component15,) {
+  return React4.forwardRef(({
+    __paginationInfo,
+    __loadMore,
+    ...props
+  }, ref,) => {
+    const backupRef = React4.useRef(null,);
+    const infiniteScrollRef = ref ?? backupRef;
+    useInfiniteScroll({
+      rootMargin: '500px',
+      loadMore: __loadMore,
+      ref: infiniteScrollRef,
+      paginationInfo: __paginationInfo,
+    },);
+    return /* @__PURE__ */ jsx(Component15, {
+      ...props,
+      ref: infiniteScrollRef,
+    },);
+  },);
+}
 var import_process2 = __toESM(require_browser(), 1,);
 function debounce(fn, time2,) {
   let timeout;
@@ -26535,7 +26609,7 @@ var Stack = /* @__PURE__ */ (() => {
       useFlexboxGap: externalUseFlexboxGap = true,
       children,
       style: styleProp,
-      className,
+      className: className2,
       willChangeTransform,
       __fromCodeComponentNode,
       parentSize,
@@ -26623,7 +26697,7 @@ var Stack = /* @__PURE__ */ (() => {
       ref: useForwardedRef(forwardedRef, stackRef,),
       ...attributes,
       style,
-      className,
+      className: className2,
       layoutScroll: true,
       children: /* @__PURE__ */ jsx(motion.div, {
         'data-framer-stack-content-wrapper': true,
@@ -27722,7 +27796,7 @@ function stateName(state,) {
 function containsBitmask(value, bitmask,) {
   return (value & bitmask) !== 0;
 }
-var GestureRecognizer = class {
+var GestureRecognizer = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, '_state', 2,/* Possible */
     );
@@ -27798,7 +27872,7 @@ var GestureRecognizer = class {
     }
   }
 };
-var MouseWheelGestureRecognizer = class extends GestureRecognizer {
+var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'startEvent',);
@@ -27843,7 +27917,7 @@ var MouseWheelGestureRecognizer = class extends GestureRecognizer {
     this.onMouseWheelEnd(event,);
   }
 };
-var PanGestureRecognizer = class extends GestureRecognizer {
+var PanGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'startEvent',);
@@ -27918,7 +27992,7 @@ var PanGestureRecognizer = class extends GestureRecognizer {
     }
   }
 };
-var TapGestureRecognizer = class extends GestureRecognizer {
+var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'eventType', 'tap',);
@@ -27948,7 +28022,7 @@ var TapGestureRecognizer = class extends GestureRecognizer {
     }
   }
 };
-var FramerEventSession = class {
+var FramerEventSession = /*#__PURE__*/ class {
   constructor(dispatcher, customOrigin,) {
     __publicField(this, 'events', [],);
     __publicField(this, 'recognizers', [],);
@@ -28108,7 +28182,7 @@ var FramerEventSession = class {
     return subtract(event.devicePoint, this.startEvent.devicePoint,);
   }
 };
-var MouseEventListener = class extends Component {
+var MouseEventListener = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'domMouseDown', (originalEvent) => {
@@ -28160,7 +28234,7 @@ var MouseEventListener = class extends Component {
     safeWindow.removeEventListener('wheel', this.domMouseWheel,);
   }
 };
-var TouchEventListener = class extends Component {
+var TouchEventListener = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'domTouchStart', (originalEvent) => {
@@ -28916,7 +28990,7 @@ var NativeScroll = /* @__PURE__ */ React4.forwardRef(function NativeScroll2(prop
     children,
     resetOffset,
     onScroll,
-    className,
+    className: className2,
     // Not (yet) supported
     directionLock: _directionLock = false,
     wheelEnabled: _wheelEnabled = true,
@@ -28987,7 +29061,7 @@ var NativeScroll = /* @__PURE__ */ React4.forwardRef(function NativeScroll2(prop
     layoutId,
     onBeforeLayoutMeasure: updateScrollOffsetHandler,
     layoutScroll: true,
-    className: cx(className, `direction-${direction}`, !scrollBarVisible && 'scrollbar-hidden',),
+    className: cx(className2, `direction-${direction}`, !scrollBarVisible && 'scrollbar-hidden',),
     children: [
       /* @__PURE__ */ jsx(EmptyState, {
         children,
@@ -29207,7 +29281,7 @@ function useObserveData() {
   const context = React4.useContext(DataObserverContext,);
   return !isNaN(context.update,);
 }
-var DataObserver = class extends Component {
+var DataObserver = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'observers', [],);
@@ -29551,7 +29625,6 @@ function usePresenceAnimation(
   const [isPresent2, safeToRemove,] = usePresence();
   const lastPresence = useRef(false,);
   const effect = useConstant2(() => {
-    var _a;
     const base = initial ?? style;
     if (!isObject2(base,)) {
       return {
@@ -29560,7 +29633,7 @@ function usePresenceAnimation(
     }
     const defaults = {};
     for (const key7 in base) {
-      const value = isObject2(base,) ? (_a = asRecord(base,)) == null ? void 0 : _a[key7] : void 0;
+      const value = isObject2(base,) ? base[key7] : void 0;
       if (!isNumber2(value,)) continue;
       defaults[key7] = value;
     }
@@ -29789,6 +29862,7 @@ function useStyleAppearEffect(options, ref,) {
       }
       return new Promise((resolve) => {
         if (shouldReduceMotion && key7 !== 'opacity') {
+          if (isNumber2(toValue,)) effect.values[key7].set(toValue,);
           resolve();
         } else {
           const opts = {
@@ -30221,6 +30295,30 @@ function ComponentPresetsConsumer({
   const presetProps = componentPresets[componentIdentifier] ?? {};
   return children(presetProps,);
 }
+function setRef(ref, value,) {
+  if (isFunction(ref,)) {
+    ref(value,);
+  } else if (isMutableRef(ref,)) {
+    ref.current = value;
+  }
+}
+function isMutableRef(ref,) {
+  return isObject2(ref,) && 'current' in ref;
+}
+function createRefWithCallback(ref, callback,) {
+  return {
+    get current() {
+      return ref.current;
+    },
+    set current(value,) {
+      ref.current = value;
+      callback(value,);
+    },
+  };
+}
+function mergeRefs(...refs) {
+  return (value) => refs.forEach((ref) => setRef(ref, value,));
+}
 function useCloneChildrenWithPropsAndRef(forwardedRef,) {
   const hook = useConstant2(() => createHook(forwardedRef,));
   hook.useSetup(forwardedRef,);
@@ -30310,16 +30408,6 @@ function createRefFunction(state,) {
     setRef(prevForwardedRef, value,);
   };
 }
-function setRef(ref, value,) {
-  if (isFunction(ref,)) {
-    ref(value,);
-  } else if (isMutableRef(ref,)) {
-    ref.current = value;
-  }
-}
-function isMutableRef(ref,) {
-  return isObject2(ref,) && 'current' in ref;
-}
 var ComponentViewportContext = /* @__PURE__ */ React4.createContext({},);
 function useComponentViewport() {
   return React4.useContext(ComponentViewportContext,);
@@ -30351,7 +30439,7 @@ var withGeneratedLayoutId = (Component15) =>
       ref,
     },);
   },);
-var ContainerErrorBoundary = class extends Component {
+var ContainerErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {
@@ -30445,8 +30533,8 @@ var withCSS = (Component15, escapedCSS, componentSerializationId,) =>
     }
     React4.useInsertionEffect(() => {
       if (componentSerializationId && componentsWithServerRenderedStyles.has(componentSerializationId,)) return;
-      const css = Array.isArray(escapedCSS,) ? escapedCSS : escapedCSS.split('\n',);
-      css.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2,));
+      const css2 = Array.isArray(escapedCSS,) ? escapedCSS : escapedCSS.split('\n',);
+      css2.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2,));
     }, [],);
     return /* @__PURE__ */ jsx(Component15, {
       ...props,
@@ -31204,7 +31292,7 @@ function Floating({
   offsetX,
   offsetY,
   anchorRef,
-  className,
+  className: className2,
   children,
   portalSelector,
   zIndex,
@@ -31282,7 +31370,7 @@ function Floating({
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsxs('div', {
       ref: floatingPositionRef,
-      className,
+      className: className2,
       style: {
         // Initially rendered as hidden, but the layout effect will set
         // to visible when the position is calculated.
@@ -31323,7 +31411,7 @@ function Floating({
   );
 }
 var GeneratedComponentContext = /* @__PURE__ */ React4.createContext(void 0,);
-var LazyValue = class {
+var LazyValue = /*#__PURE__*/ class {
   constructor(resolver,) {
     this.resolver = resolver;
     __publicField(this, 'status',);
@@ -31469,6 +31557,92 @@ 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;
+  async function preloadTimeout(route, target,) {
+    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,);
+    await preloadDone;
+    --activePreloadsAmount;
+  }
+  function onPreloadIntersectionChange(entries,) {
+    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 = ((_a2 = routeToNodesInViewport.get(route,)) == null ? void 0 : _a2.size) ?? 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,) {
@@ -31530,10 +31704,10 @@ function linkFromFramerPageLink(link,) {
   };
 }
 var pathVariablesRegExp2 = /:([a-z]\w*)/gi;
-var PathVariablesContext = /* @__PURE__ */ React4.createContext(void 0,);
+var PathVariablesContext = /* @__PURE__ */ createContext(void 0,);
 function useImplicitPathVariables() {
   var _a;
-  const contextPathVariables = React4.useContext(PathVariablesContext,);
+  const contextPathVariables = useContext3(PathVariablesContext,);
   const currentPathVariables = (_a = useCurrentRoute()) == null ? void 0 : _a.pathVariables;
   const pathVariables = contextPathVariables || currentPathVariables;
   return pathVariables;
@@ -31558,7 +31732,7 @@ function linkMatchesRoute(route, {
 }
 function useLinkMatchesRoute(link,) {
   const route = useCurrentRoute();
-  const contextPathVariables = React4.useContext(PathVariablesContext,);
+  const contextPathVariables = useContext3(PathVariablesContext,);
   if (!route) return false;
   const pageLink = isString22(link,) ? linkFromFramerPageLink(link,) : link;
   return isLinkToWebPage(pageLink,) ? linkMatchesRoute(route, pageLink, contextPathVariables,) : false;
@@ -31609,43 +31783,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 {}
-  return propsForLink(href, openInNewTab,);
-}
 async function resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, collectionUtils, activeLocale,) {
   async function handleSlugs(unresolvedSlugs,) {
     if (!unresolvedSlugs || !collectionUtils) return {};
@@ -31698,7 +31835,64 @@ function resolveSlugsWithSuspense(unresolvedPathSlugs, unresolvedHashSlugs, coll
   }
   return result;
 }
-var Link = /* @__PURE__ */ React4.forwardRef(({
+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 {}
+  return propsForLink(href, openInNewTab,);
+}
+function getRouteFromPageLink(pageLink, router, currentRoute,) {
+  var _a;
+  if (isString22(pageLink,)) {
+    const isInternal = isInternalURL(pageLink,);
+    if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
+      return;
+    }
+    const [pathnameWithQueryParams,] = pageLink.split('#', 2,);
+    if (pathnameWithQueryParams === void 0) return;
+    const [pathname,] = pathnameWithQueryParams.split('?', 2,);
+    if (pathname === void 0) return;
+    const {
+      routeId,
+    } = inferInitialRouteFromPath(router.routes, pathname,);
+    return router.getRoute(routeId,);
+  }
+  const {
+    webPageId,
+  } = pageLink;
+  return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId,);
+}
+var Link = /* @__PURE__ */ forwardRef(({
   children,
   href,
   openInNewTab,
@@ -31711,8 +31905,29 @@ var Link = /* @__PURE__ */ React4.forwardRef(({
   const {
     activeLocale,
   } = useLocaleInfo();
+  const fallbackRef = useRef(null,);
+  const stableObserverChildRef = useMemo(() => {
+    let cleanupFn;
+    const observerCallback = (node) => {
+      var _a;
+      if (node === null) {
+        cleanupFn == null ? void 0 : cleanupFn();
+        cleanupFn = void 0;
+        return;
+      }
+      const pageLink = isLinkToWebPage(href,) ? href : linkFromFramerPageLink(href,);
+      if (!pageLink) return;
+      const route = getRouteFromPageLink(pageLink, router, currentRoute,);
+      if (!route) return;
+      cleanupFn = (_a = observeRouteForPreloading) == null ? void 0 : _a(route, node,);
+    };
+    const hasRef = isValidElement(children,) && 'ref' in children;
+    if (hasRef && isMutableRef(children.ref,)) return createRefWithCallback(children.ref, observerCallback,);
+    if (hasRef && isFunction(children.ref,)) return mergeRefs(children.ref, observerCallback,);
+    return createRefWithCallback(fallbackRef, observerCallback,);
+  }, [href, router, currentRoute, children,],);
   const clone = useCloneChildrenWithPropsAndRef(forwardedRef,);
-  const props = React4.useMemo(() => {
+  const props = useMemo(() => {
     var _a;
     if (!href) return {};
     const pageLink = isLinkToWebPage(href,) ? href : linkFromFramerPageLink(href,);
@@ -31728,22 +31943,19 @@ var Link = /* @__PURE__ */ React4.forwardRef(({
       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 = {
+      ...implicitPathVariables,
+      ...pathVariables,
+      ...(resolvedSlugs == null ? void 0 : resolvedSlugs.path),
+    };
+    const combinedHashVariable = {
+      ...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,
@@ -31763,6 +31975,7 @@ var Link = /* @__PURE__ */ React4.forwardRef(({
   return clone(children, {
     ...restProps,
     ...props,
+    ref: stableObserverChildRef,
   },);
 },);
 function resolveLink(href, router, implicitPathVariables,) {
@@ -31823,10 +32036,248 @@ function resolvePageScope(pageLink, router,) {
     preserveQueryParams: false,
   },);
 }
+var salt = 'framer';
+var difficulty = 3;
+var tokenLength = 30;
+var maxTime = 3e3;
+async function calculateProofOfWork() {
+  const target = '0'.repeat(difficulty,);
+  const startTime = Date.now();
+  let processing = true;
+  while (processing) {
+    const timestamp = Date.now();
+    if (timestamp - startTime > maxTime) {
+      processing = false;
+      return;
+    }
+    const nonce = randomCharacters(tokenLength,);
+    const secret = `${timestamp}:${nonce}`;
+    const hash2 = await sha256(salt + secret,);
+    if (hash2.startsWith(target,)) {
+      return {
+        secret,
+        hash: hash2,
+      };
+    }
+  }
+  return;
+}
+async function sha256(text,) {
+  const buffer = new TextEncoder().encode(text,);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer,);
+  return Array.from(new Uint8Array(hashBuffer,),).map((b) => b.toString(16,).padStart(2, '0',)).join('',);
+}
+function randomCharacters(count,) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const charactersLength = characters.length;
+  for (let i = 0; i < count; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength,),);
+  }
+  return result;
+}
+function getEncodedFormFieldsHeader(data2,) {
+  return Array.from(data2.keys(),).map(encodeURIComponent,).join(',',);
+}
+function formReducer({
+  state,
+}, {
+  type,
+},) {
+  switch (type) {
+    case 'complete':
+    case 'incomplete':
+      if (state === 'error') {
+        return {
+          state: 'error',
+        };
+      }
+      return {
+        state: type,
+      };
+    case 'submit':
+      return {
+        state: 'pending',
+      };
+    case 'success':
+      return {
+        state: 'success',
+      };
+    case 'error':
+      return {
+        state: 'error',
+      };
+    default:
+      assertNever(type,);
+  }
+}
+function stateCanSubmitForm(state,) {
+  return state.state === 'incomplete' || state.state === 'complete';
+}
+function preventDefault(e,) {
+  e.preventDefault();
+}
+var FormContext = React4.createContext(void 0,);
+var FormContainer = /* @__PURE__ */ React4.forwardRef(({
+  action,
+  children,
+  redirectUrl,
+  onSuccess,
+  onError,
+  onLoading,
+  ...props
+}, ref,) => {
+  const router = useRouter();
+  const [state, dispatch,] = React4.useReducer(formReducer, {
+    state: 'incomplete',
+  },);
+  const {
+    activeLocale,
+  } = useLocaleInfo();
+  const projectHash = useContext3(FormContext,);
+  const callbacks = React4.useRef({
+    onSuccess,
+    onError,
+    onLoading,
+  },);
+  callbacks.current = {
+    onSuccess,
+    onError,
+    onLoading,
+  };
+  async function redirectTo(link,) {
+    var _a, _b;
+    if (isLinkToWebPage(link,)) {
+      if (!router) return;
+      const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, link.webPageId,);
+      if (!route) return;
+      const {
+        unresolvedHashSlugs,
+        unresolvedPathSlugs,
+      } = link;
+      const resolvedSlugs = await resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale,);
+      const combinedPathVariables = Object.assign(
+        {},
+        router.currentPathVariables,
+        link.pathVariables,
+        resolvedSlugs == null ? void 0 : resolvedSlugs.path,
+      );
+      const combinedHashVariables = Object.assign(
+        {},
+        router.currentPathVariables,
+        link.pathVariables,
+        link.hashVariables,
+        resolvedSlugs == null ? void 0 : resolvedSlugs.hash,
+      );
+      const element = getHashForRoute(link.hash, route, combinedHashVariables,);
+      (_b = router.navigate) == null ? void 0 : _b.call(router, link.webPageId, element, combinedPathVariables,);
+      return;
+    }
+    if (!safeWindow) return;
+    safeWindow.open(link, '_blank',);
+  }
+  const handleSubmit = async (event) => {
+    var _a, _b, _c, _d, _e, _f;
+    event.preventDefault();
+    if (!action || !projectHash) return;
+    const data2 = new FormData(event.currentTarget,);
+    for (const [key7, value,] of data2) {
+      if (value instanceof File) data2.delete(key7,);
+    }
+    try {
+      dispatch({
+        type: 'submit',
+      },);
+      (_b = (_a = callbacks.current).onLoading) == null ? void 0 : _b.call(_a,);
+      await submitForm(action, data2, projectHash,);
+      dispatch({
+        type: 'success',
+      },);
+      (_d = (_c = callbacks.current).onSuccess) == null ? void 0 : _d.call(_c,);
+      if (redirectUrl) {
+        await redirectTo(redirectUrl,);
+      }
+    } catch (error) {
+      dispatch({
+        type: 'error',
+      },);
+      (_f = (_e = callbacks.current).onError) == null ? void 0 : _f.call(_e,);
+      console.error(error,);
+    }
+  };
+  const handleKeyDown = (event) => {
+    const {
+      target: input,
+      currentTarget: form,
+      key: key7,
+    } = event;
+    const isTextArea = input instanceof HTMLTextAreaElement;
+    if (isTextArea) return;
+    if (key7 === 'Enter' && form.checkValidity()) {
+      event.preventDefault();
+      void handleSubmit(event,);
+    }
+  };
+  const checkValidity = (e) => {
+    dispatch({
+      type: anyEmptyRequiredFields(e.currentTarget,) ? 'incomplete' : 'complete',
+    },);
+  };
+  return /* @__PURE__ */ jsx(motion.form, {
+    ...props,
+    onSubmit: stateCanSubmitForm(state,) ? handleSubmit : preventDefault,
+    onKeyDown: handleKeyDown,
+    onChange: checkValidity,
+    ref,
+    children: children(state,),
+  },);
+},);
+function anyEmptyRequiredFields(element,) {
+  if (element.children.length === 0) return false;
+  for (const child of element.children) {
+    if (child instanceof HTMLInputElement || child instanceof HTMLTextAreaElement || child instanceof HTMLSelectElement) {
+      if (child.required && child.value === '') return true;
+    } else {
+      const result = anyEmptyRequiredFields(child,);
+      if (result) return true;
+    }
+  }
+  return false;
+}
+async function submitForm(action, data2, projectHash,) {
+  const proofOfWork = await calculateProofOfWork();
+  if (!proofOfWork) {
+    throw new Error('Failed to calculate proof of work',);
+  }
+  const response = await fetch(action, {
+    body: data2,
+    method: 'POST',
+    headers: {
+      'Framer-Site-Id': projectHash,
+      'Framer-POW': proofOfWork.secret,
+      'Framer-Form-Fields': getEncodedFormFieldsHeader(data2,),
+    },
+  },);
+  if (response.ok) {
+    return response;
+  } else {
+    const body = await response.json();
+    const error = 'Failed to submit form';
+    if (responseHasError(body,)) {
+      throw new Error(`${error} - ${body.error.message}`,);
+    }
+    throw new Error(error,);
+  }
+}
+function responseHasError(response,) {
+  return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
+    'message' in response.error && typeof response.error.message === 'string';
+}
 function PageRoot({
   RootComponent,
   isWebsite,
   routeId,
+  framerSiteId,
   pathVariables,
   routes,
   collectionUtils,
@@ -31837,7 +32288,7 @@ function PageRoot({
   locales,
   preserveQueryParams,
   enableImproveInpDuringHydration,
-  shouldMarkHydrationEnd = false,
+  addHydrationMarkers = false,
 },) {
   React4.useEffect(() => {
     if (isWebsite) return;
@@ -31847,21 +32298,24 @@ function PageRoot({
     return /* @__PURE__ */ jsx(MotionConfig, {
       reducedMotion: isReducedMotion ? 'user' : 'never',
       children: /* @__PURE__ */ jsx(CustomCursorHost, {
-        children: /* @__PURE__ */ jsx(Router, {
-          initialRoute: routeId,
-          initialPathVariables: pathVariables,
-          initialLocaleId: localeId,
-          routes,
-          collectionUtils,
-          notFoundPage,
-          locales,
-          defaultPageStyle: {
-            minHeight: '100vh',
-            width: 'auto',
-          },
-          preserveQueryParams,
-          enableImproveInpDuringHydration,
-          shouldMarkHydrationEnd,
+        children: /* @__PURE__ */ jsx(FormContext.Provider, {
+          value: framerSiteId,
+          children: /* @__PURE__ */ jsx(Router, {
+            initialRoute: routeId,
+            initialPathVariables: pathVariables,
+            initialLocaleId: localeId,
+            routes,
+            collectionUtils,
+            notFoundPage,
+            locales,
+            defaultPageStyle: {
+              minHeight: '100vh',
+              width: 'auto',
+            },
+            preserveQueryParams,
+            enableImproveInpDuringHydration,
+            addHydrationMarkers,
+          },),
         },),
       },),
     },);
@@ -32191,7 +32645,7 @@ async function getCollection(collection, locale,) {
   }
   return collection;
 }
-var CompatibilityDatabaseCollection = class {
+var CompatibilityDatabaseCollection = /*#__PURE__*/ class {
   constructor(collection, locale,) {
     this.collection = collection;
     this.locale = locale;
@@ -32426,12 +32880,12 @@ function compare(left, right, collation,) {
   }
 }
 var INDEX_IDENTIFIER = 'index';
-var ScalarExpression = class {
+var ScalarExpression = /*#__PURE__*/ class {
   static from(expression, schema,) {
     return convertExpression(expression, schema, void 0,);
   }
 };
-var ScalarIdentifier = class extends ScalarExpression {
+var ScalarIdentifier = /*#__PURE__*/ class extends ScalarExpression {
   constructor(schema, name,) {
     super();
     this.schema = schema;
@@ -32463,7 +32917,7 @@ var ScalarIdentifier = class extends ScalarExpression {
     return false;
   }
 };
-var ScalarLiteralValue = class extends ScalarExpression {
+var ScalarLiteralValue = /*#__PURE__*/ class extends ScalarExpression {
   constructor(definition, value,) {
     super();
     this.definition = definition;
@@ -32545,7 +32999,7 @@ var ScalarLiteralValue = class extends ScalarExpression {
     return true;
   }
 };
-var ScalarFunctionCall = class extends ScalarExpression {
+var ScalarFunctionCall = /*#__PURE__*/ class extends ScalarExpression {
   constructor(argumentExpressions,) {
     super();
     this.argumentExpressions = argumentExpressions;
@@ -32571,7 +33025,7 @@ var ScalarFunctionCall = class extends ScalarExpression {
     },);
   }
 };
-var ScalarFunctionCallContains = class extends ScalarFunctionCall {
+var ScalarFunctionCallContains = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallContains.getDefinition(),);
@@ -32607,7 +33061,7 @@ var ScalarFunctionCallContains = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarFunctionCallStartsWith = class extends ScalarFunctionCall {
+var ScalarFunctionCallStartsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallStartsWith.getDefinition(),);
@@ -32643,7 +33097,7 @@ var ScalarFunctionCallStartsWith = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarFunctionCallEndsWith = class extends ScalarFunctionCall {
+var ScalarFunctionCallEndsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallEndsWith.getDefinition(),);
@@ -32679,7 +33133,7 @@ var ScalarFunctionCallEndsWith = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarCase = class extends ScalarExpression {
+var ScalarCase = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression, conditions, elseExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -32775,13 +33229,13 @@ var ScalarCase = class extends ScalarExpression {
     },);
   }
 };
-var ScalarCaseCondition = class {
+var ScalarCaseCondition = /*#__PURE__*/ class {
   constructor(whenExpression, thenExpression,) {
     this.whenExpression = whenExpression;
     this.thenExpression = thenExpression;
   }
 };
-var ScalarUnaryOperation = class extends ScalarExpression {
+var ScalarUnaryOperation = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -32794,7 +33248,7 @@ var ScalarUnaryOperation = class extends ScalarExpression {
     return this.valueExpression.canEvaluate();
   }
 };
-var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
+var ScalarUnaryOperationNot = /*#__PURE__*/ class extends ScalarUnaryOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarUnaryOperationNot.getDefinition(),);
@@ -32816,7 +33270,7 @@ var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
     };
   }
 };
-var ScalarLogicalOperation = class extends ScalarExpression {
+var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
   constructor(operandExpressions,) {
     super();
     this.operandExpressions = operandExpressions;
@@ -32841,7 +33295,7 @@ var ScalarLogicalOperation = class extends ScalarExpression {
     },);
   }
 };
-var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationAnd = /*#__PURE__*/ class extends ScalarLogicalOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', 'AND',);
@@ -32857,7 +33311,7 @@ var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
     };
   }
 };
-var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationOr = /*#__PURE__*/ class extends ScalarLogicalOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', 'OR',);
@@ -32873,7 +33327,7 @@ var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
     };
   }
 };
-var ScalarComparison = class extends ScalarExpression {
+var ScalarComparison = /*#__PURE__*/ class extends ScalarExpression {
   constructor(leftExpression, rightExpression,) {
     super();
     this.leftExpression = leftExpression;
@@ -32901,7 +33355,7 @@ var ScalarComparison = class extends ScalarExpression {
     return this.leftExpression.canEvaluate() && this.rightExpression.canEvaluate();
   }
 };
-var ScalarComparisonEquals = class extends ScalarComparison {
+var ScalarComparisonEquals = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '=',);
@@ -32915,7 +33369,7 @@ var ScalarComparisonEquals = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonNotEquals = class extends ScalarComparison {
+var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '!=',);
@@ -32929,7 +33383,7 @@ var ScalarComparisonNotEquals = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonLessThan = class extends ScalarComparison {
+var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '<',);
@@ -32943,7 +33397,7 @@ var ScalarComparisonLessThan = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '<=',);
@@ -32957,7 +33411,7 @@ var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonGreaterThan = class extends ScalarComparison {
+var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '>',);
@@ -32971,7 +33425,7 @@ var ScalarComparisonGreaterThan = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '>=',);
@@ -32985,7 +33439,7 @@ var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
     };
   }
 };
-var ScalarTypeCast = class extends ScalarExpression {
+var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -33001,7 +33455,7 @@ var ScalarTypeCast = class extends ScalarExpression {
     return this.valueExpression.canEvaluate();
   }
 };
-var ScalarTypeCastBoolean = class extends ScalarTypeCast {
+var ScalarTypeCastBoolean = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'BOOLEAN',);
@@ -33031,7 +33485,7 @@ function convertToBoolean(value,) {
   }
   return false;
 }
-var ScalarTypeCastDate = class extends ScalarTypeCast {
+var ScalarTypeCastDate = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'DATE',);
@@ -33069,7 +33523,7 @@ function convertToDate(value,) {
   }
   return null;
 }
-var ScalarTypeCastNumber = class extends ScalarTypeCast {
+var ScalarTypeCastNumber = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'NUMBER',);
@@ -33106,7 +33560,7 @@ function convertToNumber(value,) {
   }
   return null;
 }
-var ScalarTypeCastString = class extends ScalarTypeCast {
+var ScalarTypeCastString = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'STRING',);
@@ -33554,7 +34008,7 @@ function stringifyExecutionTime(self2, total,) {
 function stringifyItems(items,) {
   return `(items: ${items})`;
 }
-var QueryPlan = class {
+var QueryPlan = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'executionTime', 0,);
     __publicField(this, 'itemCount', 0,);
@@ -33567,7 +34021,7 @@ var QueryPlan = class {
     return result;
   }
 };
-var ScanCollectionPlan = class extends QueryPlan {
+var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(collection,) {
     super();
     this.collection = collection;
@@ -33581,7 +34035,7 @@ var ScanCollectionPlan = class extends QueryPlan {
     return this.collection.scanItems();
   }
 };
-var LookupIndexPlan = class extends QueryPlan {
+var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(index, query,) {
     super();
     this.index = index;
@@ -33621,7 +34075,7 @@ var LookupIndexPlan = class extends QueryPlan {
     return this.index.lookupItems(this.query,);
   }
 };
-var UnionPlan = class extends QueryPlan {
+var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlans,) {
     super();
     this.childPlans = childPlans;
@@ -33651,7 +34105,7 @@ var UnionPlan = class extends QueryPlan {
     return (result == null ? void 0 : result.items()) ?? [];
   }
 };
-var IntersectionPlan = class extends QueryPlan {
+var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlans,) {
     super();
     this.childPlans = childPlans;
@@ -33681,7 +34135,7 @@ var IntersectionPlan = class extends QueryPlan {
     return (result == null ? void 0 : result.items()) ?? [];
   }
 };
-var ResolveItemsPlan = class extends QueryPlan {
+var ResolveItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, collection, richTextResolver, select,) {
     super();
     this.childPlan = childPlan;
@@ -33711,7 +34165,7 @@ var ResolveItemsPlan = class extends QueryPlan {
     return this.collection.resolveItems(childPointers,);
   }
 };
-var FilterItemsPlan = class extends QueryPlan {
+var FilterItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, filterExpression,) {
     super();
     this.childPlan = childPlan;
@@ -33733,7 +34187,7 @@ var FilterItemsPlan = class extends QueryPlan {
     },);
   }
 };
-var SortItemsPlan = class extends QueryPlan {
+var SortItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, orderExpressions, collection,) {
     super();
     this.childPlan = childPlan;
@@ -33782,14 +34236,14 @@ var SortItemsPlan = class extends QueryPlan {
     },);
   }
 };
-var ScalarOrderExpression = class {
+var ScalarOrderExpression = /*#__PURE__*/ class {
   constructor(expression, direction, collation,) {
     this.expression = expression;
     this.direction = direction;
     this.collation = collation;
   }
 };
-var SliceItemsPlan = class extends QueryPlan {
+var SliceItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, offsetExpression, limitExpression,) {
     super();
     this.childPlan = childPlan;
@@ -33826,7 +34280,7 @@ var SliceItemsPlan = class extends QueryPlan {
     return childItems.slice(offset, offset + limit,);
   }
 };
-var DatabaseItemMap = class extends Map {
+var DatabaseItemMap = /*#__PURE__*/ class extends Map {
   constructor(items = [],) {
     super();
     for (const item of items) {
@@ -33857,7 +34311,7 @@ var DatabaseItemMap = class extends Map {
     return [...values,];
   }
 };
-var RichTextResolver = class {
+var RichTextResolver = /*#__PURE__*/ class {
   constructor(collection,) {
     this.collection = collection;
     __publicField(this, 'cache', /* @__PURE__ */ new Map(),);
@@ -34008,7 +34462,7 @@ function getDatabaseCollection({
   }
   assertNever(data2, 'Unsupported collection type',);
 }
-var QueryEngine = class {
+var QueryEngine = /*#__PURE__*/ class {
   async query(query, locale,) {
     const collection = getDatabaseCollection(query.from, locale,);
     const richTextResolver = new RichTextResolver(collection,);
@@ -34239,7 +34693,7 @@ function createScanCollectionPlan(collection, expression,) {
   const plan = new ScanCollectionPlan(collection,);
   return new FilterItemsPlan(plan, expression,);
 }
-var AnimationCollector = class {
+var AnimationCollector = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'entries', /* @__PURE__ */ new Map(),);
   }
@@ -34864,7 +35318,7 @@ function usePrototypeNavigate({
     return false;
   };
 }
-var QueryCache = class {
+var QueryCache = /*#__PURE__*/ class {
   constructor(queryEngine2,) {
     this.queryEngine = queryEngine2;
     __publicField(this, 'cache', /* @__PURE__ */ new Map(),);
@@ -34910,7 +35364,11 @@ function useQueryData(query,) {
   return cached.read();
 }
 function useQueryCount(query,) {
-  const collection = useQueryData(query,);
+  const countQuery = {
+    ...query,
+    select: [],
+  };
+  const collection = useQueryData(countQuery,);
   return collection.length;
 }
 function getWhereExpressionFromPathVariables(pathVariables,) {
@@ -34949,28 +35407,29 @@ function getWhereExpressionFromPathVariables(pathVariables,) {
     right: expression,
   }));
 }
-function useLoadMorePaginatedQuery(query, pageSize,) {
-  const {
-    paginationInfo,
-    setPaginationInfo,
-  } = useCollectionListPaginationInfo();
+function useLoadMorePaginatedQuery(query, pageSize, hash2,) {
   const count = useQueryCount(query,);
-  const initialPaginationInfo = useMemo(() => {
+  const [paginationInfo, setPaginationInfo,] = useState(() => {
+    var _a, _b, _c, _d;
     const totalPages = Math.ceil(count / pageSize,);
+    const currentPage = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
+          ? void 0
+          : _b.paginationInfo) == null
+        ? void 0
+        : _c[hash2]) == null
+      ? void 0
+      : _d.currentPage) ?? 1;
     return {
-      currentPage: 1,
+      currentPage,
       totalPages,
-      type: 'loadMore',
+      isLoading: false,
     };
-  }, [count, pageSize,],);
+  },);
   useEffect(() => {
-    if (!paginationInfo) {
-      setPaginationInfo(initialPaginationInfo,);
-    }
-  }, [count, initialPaginationInfo, paginationInfo, setPaginationInfo,],);
+    pushLoadMoreHistory(hash2, paginationInfo,);
+  }, [hash2, paginationInfo,],);
   const paginatedQuery = useMemo(() => {
-    const currentPaginationInfo = paginationInfo ?? 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',);
@@ -34984,8 +35443,28 @@ function useLoadMorePaginatedQuery(query, pageSize,) {
         value: limit,
       },
     };
-  }, [initialPaginationInfo, query, pageSize, paginationInfo,],);
-  return paginatedQuery;
+  }, [query, pageSize, paginationInfo,],);
+  const onCanvas = useIsOnFramerCanvas();
+  const loadMore = useCallback(() => {
+    if (onCanvas) return;
+    if (paginationInfo.currentPage >= paginationInfo.totalPages) return;
+    setPaginationInfo((info) => ({
+      ...info,
+      isLoading: true,
+    }));
+    requestAnimationFrame(() => {
+      setPaginationInfo((info) => ({
+        ...info,
+        currentPage: Math.min(info.currentPage + 1, info.totalPages,),
+        isLoading: false,
+      }));
+    },);
+  }, [onCanvas, paginationInfo.currentPage, paginationInfo.totalPages,],);
+  return {
+    paginatedQuery,
+    paginationInfo,
+    loadMore,
+  };
 }
 function createGestureVariant(variant, type,) {
   return `${variant}-${type}`;
@@ -35042,9 +35521,10 @@ function useVariantState({
 },) {
   const forceUpdate = useForceUpdate3();
   const validBaseVariants = useConstant2(() => new Set(externalCycleOrder,));
-  const internalState = useRef({
+  const internalState = React4.useRef({
     isHovered: false,
     isPressed: false,
+    hasPressedVariants: true,
     baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants,),
     lastVariant: variant,
     gestureVariant: void 0,
@@ -35056,7 +35536,7 @@ function useVariantState({
     cycleOrder: externalCycleOrder,
     transitions: externalTransitions,
   },);
-  const resolveNextVariant = useCallback((targetBaseVariant) => {
+  const resolveNextVariant = React4.useCallback((targetBaseVariant) => {
     const {
       isHovered: isHovered2,
       isPressed: isPressed2,
@@ -35068,7 +35548,7 @@ function useVariantState({
     const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture,) : void 0;
     return [nextBaseVariant, nextGestureVariant,];
   }, [validBaseVariants,],);
-  const setGestureState = useCallback(({
+  const setGestureState = React4.useCallback(({
     isHovered: isHovered2,
     isPressed: isPressed2,
   },) => {
@@ -35083,10 +35563,10 @@ function useVariantState({
     if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
       internalState.current.baseVariant = nextBase || defaultVariant2;
       internalState.current.gestureVariant = nextGesture;
-      startTransition2(forceUpdate,);
+      forceUpdate();
     }
   }, [resolveNextVariant, forceUpdate,],);
-  const setVariant = useCallback((proposedVariant) => {
+  const setVariant = React4.useCallback((proposedVariant) => {
     const {
       defaultVariant: defaultVariant2,
       cycleOrder,
@@ -35100,7 +35580,7 @@ function useVariantState({
     if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
       internalState.current.baseVariant = nextBase || defaultVariant2;
       internalState.current.gestureVariant = nextGesture;
-      startTransition2(forceUpdate,);
+      forceUpdate();
     }
   }, [resolveNextVariant, forceUpdate,],);
   if (variant !== internalState.current.lastVariant) {
@@ -35120,10 +35600,40 @@ function useVariantState({
     isPressed,
   } = internalState.current;
   const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2,);
-  return useMemo(() => {
+  return React4.useMemo(() => {
     const variants = [];
     if (baseVariant !== defaultVariant) variants.push(baseVariant,);
     if (gestureVariant) variants.push(gestureVariant,);
+    const gestures = enabledGestures == null ? void 0 : enabledGestures[baseVariant];
+    const gestureHandlers = {};
+    if (gestures == null ? void 0 : gestures.hover) {
+      Object.assign(gestureHandlers, {
+        onMouseEnter: () =>
+          setGestureState({
+            isHovered: true,
+          },),
+        onMouseLeave: () =>
+          setGestureState({
+            isHovered: false,
+          },),
+      },);
+    }
+    if (gestures == null ? void 0 : gestures.pressed) {
+      Object.assign(gestureHandlers, {
+        onTapStart: () =>
+          setGestureState({
+            isPressed: true,
+          },),
+        onTapCancel: () =>
+          setGestureState({
+            isPressed: false,
+          },),
+        onTap: () =>
+          setGestureState({
+            isPressed: false,
+          },),
+      },);
+    }
     return {
       variants,
       baseVariant,
@@ -35132,10 +35642,8 @@ function useVariantState({
       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,
@@ -35926,7 +36434,7 @@ var FontSourceNames = /* @__PURE__ */ ((FontSourceNames2) => {
   return FontSourceNames2;
 })(FontSourceNames || {},);
 var systemFontFamilyName = 'System Default';
-var LocalFontSource = class {
+var LocalFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'local',/* Local */
     );
@@ -36006,8 +36514,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 styles4 = ['normal', 'italic',];
+    for (const style of styles4) {
       for (const weight of weights) {
         const variant = createVariantName(weight, style,);
         const alias = `__SystemDefault-${weight}-${style}__`;
@@ -36068,7 +36576,7 @@ function getCustomFontName(fileName, properties,) {
   const variant = properties.font.preferredSubFamily === '' ? properties.font.fontSubFamily : properties.font.preferredSubFamily;
   return `${fontFamily} ${variant}`;
 }
-var CustomFontSource = class {
+var CustomFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'custom',/* Custom */
     );
@@ -36236,7 +36744,7 @@ var weightNameToNumber = {
 };
 var weightNames = /* @__PURE__ */ Object.keys(weightNameToNumber,);
 var allowedVariantsRegex = /* @__PURE__ */ (() => new RegExp(`^(?:${[...weightNames, 'italic',].join('|',)})`, 'u',))();
-var FontshareSource = class {
+var FontshareSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'fontshare',/* Fontshare */
     );
@@ -36374,7 +36882,7 @@ var weightNameToNumber2 = {
   ExtraBold: 800,
   Black: 900,
 };
-var FramerFontSource = class {
+var FramerFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'framer',/* Framer */
     );
@@ -36435,7 +36943,7 @@ var FramerFontSource = class {
   }
 };
 var googleFontSelectorPrefix = 'GF;';
-var GoogleFontSource = class {
+var GoogleFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'google',/* Google */
     );
@@ -36542,7 +37050,7 @@ function mapToKnownCategory2(category,) {
 var import_fontfaceobserver = __toESM(require_fontfaceobserver_standalone(), 1,);
 var FONT_LOADING_TIMEOUT = 5e3;
 var MAX_RETRIES = 3;
-var FontLoadingError = class extends Error {
+var FontLoadingError = /*#__PURE__*/ class extends Error {
   constructor(message,) {
     super(message,);
     this.name = 'FontLoadingError';
@@ -36615,7 +37123,7 @@ async function isFontReady(family, style, weight,) {
     }`,);
   }
 }
-var FontStore = class {
+var FontStore = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'enabled', false,);
     __publicField(this, 'bySelector', /* @__PURE__ */ new Map(),);
@@ -36904,7 +37412,7 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
         },
       },);
     }
-    renderErrorPlaceholder(file, error,) {
+    renderErrorPlaceholder(error,) {
       const {
         RenderPlaceholder,
       } = runtime;
@@ -36912,10 +37420,7 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
         ...this.props,
         background: null,
         children: /* @__PURE__ */ jsx(RenderPlaceholder, {
-          error: {
-            error,
-            file,
-          },
+          error,
         },),
       },);
     }
@@ -36935,13 +37440,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,);
@@ -37065,189 +37580,6 @@ function isPageOrScroll(identifier,) {
   if (identifier === 'framer/Scroll') return true;
   return false;
 }
-var salt = 'framer';
-var difficulty = 3;
-var tokenLength = 30;
-var maxTime = 3e3;
-async function calculateProofOfWork() {
-  const target = '0'.repeat(difficulty,);
-  const startTime = Date.now();
-  let processing = true;
-  while (processing) {
-    const timestamp = Date.now();
-    if (timestamp - startTime > maxTime) {
-      processing = false;
-      return;
-    }
-    const nonce = randomCharacters(tokenLength,);
-    const secret = `${timestamp}:${nonce}`;
-    const hash2 = await sha256(salt + secret,);
-    if (hash2.startsWith(target,)) {
-      return {
-        secret,
-        hash: hash2,
-      };
-    }
-  }
-  return;
-}
-async function sha256(text,) {
-  const buffer = new TextEncoder().encode(text,);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer,);
-  return Array.from(new Uint8Array(hashBuffer,),).map((b) => b.toString(16,).padStart(2, '0',)).join('',);
-}
-function randomCharacters(count,) {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-  const charactersLength = characters.length;
-  for (let i = 0; i < count; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength,),);
-  }
-  return result;
-}
-function formReducer(_state, {
-  type,
-},) {
-  switch (type) {
-    case 'submit':
-      return {
-        state: 'pending',
-      };
-    case 'success':
-      return {
-        state: 'success',
-      };
-    case 'error':
-      return {
-        state: 'error',
-      };
-    default:
-      assertNever(type,);
-  }
-}
-function preventDefault(e,) {
-  e.preventDefault();
-}
-var FormContainer = ({
-  action,
-  formId,
-  disabled,
-  children,
-  redirectUrl,
-  ...props
-},) => {
-  const [state, dispatch,] = React4.useReducer(formReducer, {
-    state: disabled ? 'disabled' : void 0,
-  },);
-  const router = useRouter();
-  const {
-    activeLocale,
-  } = useLocaleInfo();
-  const isSubmitEnabled = state.state === void 0;
-  async function redirectTo(link,) {
-    var _a, _b;
-    if (isLinkToWebPage(link,)) {
-      if (!router) return;
-      const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, link.webPageId,);
-      if (!route) return;
-      const {
-        unresolvedHashSlugs,
-        unresolvedPathSlugs,
-      } = link;
-      const resolvedSlugs = await resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale,);
-      const combinedPathVariables = Object.assign(
-        {},
-        router.currentPathVariables,
-        link.pathVariables,
-        resolvedSlugs == null ? void 0 : resolvedSlugs.path,
-      );
-      const combinedHashVariables = Object.assign(
-        {},
-        router.currentPathVariables,
-        link.pathVariables,
-        link.hashVariables,
-        resolvedSlugs == null ? void 0 : resolvedSlugs.hash,
-      );
-      const element = getHashForRoute(link.hash, route, combinedHashVariables,);
-      (_b = router.navigate) == null ? void 0 : _b.call(router, link.webPageId, element, combinedPathVariables,);
-      return;
-    }
-    if (!safeWindow) return;
-    safeWindow.open(link, '_blank',);
-  }
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    if (!action) return;
-    const data2 = new FormData(event.currentTarget,);
-    for (const [key7, value,] of data2) {
-      if (value instanceof File) data2.delete(key7,);
-    }
-    try {
-      dispatch({
-        type: 'submit',
-      },);
-      await submitForm(action, data2,);
-      dispatch({
-        type: 'success',
-      },);
-      if (redirectUrl) {
-        await redirectTo(redirectUrl,);
-      }
-    } catch (error) {
-      dispatch({
-        type: 'error',
-      },);
-    }
-  };
-  const handleKeyDown = (event) => {
-    const {
-      target: input,
-      currentTarget: form,
-      key: key7,
-    } = event;
-    const isTextArea = input instanceof HTMLTextAreaElement;
-    if (isTextArea) return;
-    if (key7 === 'Enter' && form.checkValidity()) {
-      event.preventDefault();
-      void handleSubmit(event,);
-    }
-  };
-  return /* @__PURE__ */ jsx(motion.form, {
-    ...props,
-    'data-formid': formId,
-    onSubmit: isSubmitEnabled ? handleSubmit : preventDefault,
-    onKeyDown: handleKeyDown,
-    children: children(state,),
-  },);
-};
-async function submitForm(action, data2,) {
-  const proofOfWork = await calculateProofOfWork();
-  if (!proofOfWork) {
-    throw new Error('Failed to calculate proof of work',);
-  }
-  const response = await fetch(action, {
-    body: data2,
-    method: 'POST',
-    headers: {
-      'Framer-POW': proofOfWork.secret,
-      'Framer-POW-Enforce': 'true',
-    },
-  },);
-  if (response.ok) {
-    return response;
-  } else {
-    const body = await response.json();
-    const error = 'Failed to submit form';
-    if (responseHasError(body,)) {
-      throw new Error(`${error} - ${body.error.message}`,);
-    }
-    throw new Error(error,);
-  }
-}
-function responseHasError(response,) {
-  return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
-    'message' in response.error && typeof response.error.message === 'string';
-}
 var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2) => {
   FormInputStyleVariableNames2['Padding'] = '--framer-input-padding';
   FormInputStyleVariableNames2['BorderRadiusTopLeft'] = '--framer-input-border-radius-top-left';
@@ -37270,66 +37602,84 @@ 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['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';
+  FormInputStyleVariableNames2['IconBackgroundImage'] = '--framer-input-icon-image';
+  FormInputStyleVariableNames2['IconMaskImage'] = '--framer-input-icon-mask-image';
+  FormInputStyleVariableNames2['IconColor'] = '--framer-input-icon-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 sharedInputCSS = [`.${inputClassName} {
-        padding: var(${Var.Padding});
-        background: var(${Var.Background});
-        font-family: var(${Var.FontFamily});
-        font-weight: var(${Var.FontWeight});
-        font-size: var(${Var.FontSize});
-        color: var(${Var.FontColor});
-        box-shadow: var(${Var.BoxShadow});
-        border: none;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        border-top-left-radius: var(${Var.BorderRadiusTopLeft});
-        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 = [
-  `.${inputClassName}:focus-visible { outline: none; }`,
-  `.${inputClassName}:focus {
-        background: ${cssVar(Var.FocusedBackground, Var.Background,)};
-        box-shadow: ${cssVar(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,)};
-    }`,
+var emptyValueClassName = 'framer-form-input-empty';
+var forcedFocusClassName = 'framer-form-input-forced-focus';
+var forcedCheckedClassName = '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) {
+    const value = declaration[key7];
+    output += `${key7.replace(/([A-Z])/gu, '-$1',).toLowerCase()}: ${cssValue(value,)}; `;
+  }
+  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 = [
+  css(`.${inputClassName}`, {
+    padding: css.variable(Var.Padding,),
+    background: 'transparent',
+    fontFamily: css.variable(Var.FontFamily,),
+    fontWeight: css.variable(Var.FontWeight,),
+    fontSize: css.variable(Var.FontSize,),
+    color: css.variable(Var.FontColor,),
+    border: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+    letterSpacing: css.variable(Var.FontLetterSpacing,),
+    textAlign: css.variable(Var.FontTextAlignment,),
+    lineHeight: css.variable(Var.FontLineHeight,),
+  },),
+  css(`.${inputClassName}:focus-visible`, {
+    outline: 'none',
+  },),
 ];
-var inputBorderCSS = [
-  `.${inputWrapperClassName} {
-        position: relative;
-    }`,
-  `.${inputWrapperClassName}:after {
+var inputWrapperCSS = /* @__PURE__ */ (() => [css(`.${inputWrapperClassName}`, {
+  overflow: 'hidden',
+},),])();
+var inputBorderAllSides =
+  `var(${Var.BorderTopWidth}) var(${Var.BorderRightWidth}) var(${Var.BorderBottomWidth}) var(${Var.BorderLeftWidth})`;
+var inputBorderCSS = [`.${inputWrapperClassName}:after {
         content: "";
         pointer-events: none;
         box-sizing: border-box;
@@ -37350,116 +37700,477 @@ var inputBorderCSS = [
         border-style: var(${Var.BorderStyle});
         transition: var(${Var.FocusedTransition});
         transition-property: border-color, border-width, border-style, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius;
-    }`,
-];
+    }`,];
+var customValidityKey = 'customError';
+var validKey = 'valid';
+function isRelevantValidityStateKey(key7,) {
+  return key7 !== customValidityKey && key7 !== validKey;
+}
+function isInvalid(validity,) {
+  for (const key7 in validity) {
+    if (!isRelevantValidityStateKey(key7,)) continue;
+    if ((validity == null ? void 0 : validity[key7]) === true) return true;
+  }
+  return false;
+}
+function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus,) {
+  const isValidRef = React4.useRef(null,);
+  const handleInvalid = React4.useCallback((e) => {
+    if (!onInvalid) return;
+    if (isValidRef.current === false) return;
+    isValidRef.current = false;
+    e.currentTarget.setCustomValidity(' ',);
+    e.currentTarget.reportValidity();
+    onInvalid(e,);
+  }, [onInvalid,],);
+  const handleChange = React4.useCallback((e) => {
+    onChange == null ? void 0 : onChange(e,);
+    if (!onInvalid && !onValid) return;
+    const validity = e.target.validity;
+    if (isValidRef.current === false && !isInvalid(validity,)) {
+      e.currentTarget.setCustomValidity('',);
+      e.target.reportValidity();
+      isValidRef.current = true;
+      onValid == null ? void 0 : onValid();
+    }
+  }, [onInvalid, onValid, onChange,],);
+  const handleBlur = React4.useCallback((e) => {
+    if (!onInvalid) {
+      onBlur == null ? void 0 : onBlur(e,);
+      return;
+    }
+    if (isValidRef.current === false) return;
+    const validity = e.currentTarget.validity;
+    if (isInvalid(validity,)) {
+      handleInvalid(e,);
+      return;
+    }
+    onBlur == null ? void 0 : onBlur(e,);
+  }, [handleInvalid, onBlur, onInvalid,],);
+  return React4.useMemo(() => {
+    return {
+      onInvalid: handleInvalid,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus,
+    };
+  }, [handleInvalid, handleChange, handleBlur, onFocus,],);
+}
+var iconSpacing = 10;
+var iconSize = 16;
+var inputIconCSSDeclaration = {
+  content: '',
+  display: 'block',
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  width: `${iconSize}px`,
+  boxSizing: 'content-box',
+  // Offset the icon inwards by the padding.
+  margin: css.variable(Var.Padding,),
+  marginLeft: 0,
+  border: 'none',
+  pointerEvents: 'none',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: `${iconSize}px`,
+  maskRepeat: 'no-repeat',
+  maskSize: `${iconSize}px`,
+  backgroundColor: css.variable(Var.IconColor,),
+};
 var passwordManagerIgnoreDataProps = {
   // 1Password
   'data-1p-ignore': true,
   // LastPass
   'data-lpignore': true,
-};
-var sensibleInputDefaults = {
+  // Dashlane
+  // https://support.dashlane.com/hc/en-us/articles/4420122792594-Optimize-your-web-forms-for-Dashlane-Autofill
+  'data-form-type': 'other',
+  // autocomplete="off" is a generic property that disables autofilling. It
+  // is not always respected by some browsers or password managers.
   autocomplete: 'off',
 };
 var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput(props, ref,) {
   const {
-    style,
-    inputName,
-    type,
-    required,
     autoFocus,
-    placeholder,
-    value,
-    min,
+    className: className2,
+    inputName,
     max,
+    min,
+    placeholder,
+    required,
     step: step2,
+    style,
+    type,
+    // We use a defaultValue instead of a value so that the input remains
+    // uncontrolled by React. This is important because we want the user
+    // to be able to provide an initial value in the property panel, and for
+    // the value to be editable by the user in the preview.
+    defaultValue,
+    autofillEnabled,
+    onChange,
+    onBlur,
+    onInvalid,
+    onFocus,
+    onValid,
     ...rest
   } = props;
-  const dataProps = {
-    ...sensibleInputDefaults,
-    ...passwordManagerIgnoreDataProps,
-  };
-  switch (type) {
-    case 'hidden':
-      return /* @__PURE__ */ jsx(motion.input, {
-        type: 'hidden',
-        name: inputName,
-        value,
-      },);
-    case 'textarea':
-      return /* @__PURE__ */ jsx(motion.div, {
-        ref,
-        style,
-        ...rest,
-        className: cx(inputWrapperClassName, props.className,),
-        children: /* @__PURE__ */ jsx(motion.textarea, {
-          id: inputName,
-          ...dataProps,
-          required,
-          autoFocus,
-          name: inputName,
-          placeholder,
-          className: inputClassName,
-          value,
-        },),
-      },);
-    default:
-      return /* @__PURE__ */ jsx(motion.div, {
-        ref,
-        style,
-        ...rest,
-        className: cx(inputWrapperClassName, props.className,),
-        children: /* @__PURE__ */ jsx(motion.input, {
-          id: inputName,
-          ...dataProps,
-          type,
-          required,
-          autoFocus,
-          name: inputName,
-          placeholder,
-          className: inputClassName,
-          value,
-          min,
-          max,
-          step: step2,
-        },),
-      },);
+  const [hasValue, setHasValue,] = React4.useState(!!defaultValue,);
+  const handleChange = React4.useCallback((e) => {
+    const newValue = e.target.value;
+    onChange == null ? void 0 : onChange(e,);
+    setHasValue(!!newValue,);
+  }, [onChange,],);
+  const eventHandlers = useCustomValidity(onValid, onInvalid, handleChange, onBlur, onFocus,);
+  useEffect(() => {
+    setHasValue(!!defaultValue,);
+  }, [defaultValue,],);
+  const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
+  if (type === 'hidden') {
+    return /* @__PURE__ */ jsx(motion.input, {
+      type: 'hidden',
+      name: inputName,
+      defaultValue,
+    },);
   }
+  return /* @__PURE__ */ jsx(motion.div, {
+    ref,
+    style,
+    className: cx(textInputWrapperClassName, inputWrapperClassName, className2,),
+    ...rest,
+    children: type === 'textarea'
+      ? /* @__PURE__ */ createElement(motion.textarea, {
+        ...dataProps,
+        ...eventHandlers,
+        key: defaultValue,
+        required,
+        autoFocus,
+        name: inputName,
+        placeholder,
+        className: inputClassName,
+        defaultValue,
+      },)
+      : /* @__PURE__ */ createElement(motion.input, {
+        ...dataProps,
+        ...eventHandlers,
+        key: defaultValue,
+        type,
+        required,
+        autoFocus,
+        name: inputName,
+        placeholder,
+        className: cx(inputClassName, !hasValue && emptyValueClassName,),
+        defaultValue,
+        min,
+        max,
+        step: step2,
+      },),
+  },);
 },);
-var FormPlainTextInput2 =
-  /* @__PURE__ */ (() =>
-    withCSS(PlainTextInput, [
-      ...sharedInputCSS,
-      ...focusInputCSS,
-      ...inputBorderCSS,
-      `.${inputClassName}::placeholder {
-            color: var(${'--framer-input-placeholder-color'});
-        }`,
-      `textarea.${inputClassName} {
-            resize: var(${'--framer-textarea-resize'});
-            min-height: var(${'--framer-textarea-min-height'});
-        }`,
-    ],))();
+var iconSize2 = 16;
+var textInputWrapperClassName = 'framer-form-text-input';
+var defaultTextareaResizerIcon =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="m1.5 8 7-7M9 5.5l-3 3" stroke="%23999" stroke-width="1.5" stroke-linecap="round"></path></svg>';
+var defaultDateIconMaskImage =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="rgb(153, 153, 153)" d="M3 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H3Z" opacity=".3"/><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-width="1.5" d="M3.25 5.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-2ZM3 6.75h9.5"/></svg>';
+var defaultTimeIconMaskImage =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-width="1.5" d="M2.5 8a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z"/><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25v-3m0 3h2"/></svg>';
+var styles = /* @__PURE__ */ (() => [
+  ...sharedInputCSS,
+  ...inputBorderCSS,
+  ...inputWrapperCSS,
+  css(`.${inputWrapperClassName}`, {
+    boxShadow: css.variable('--framer-input-box-shadow',/* BoxShadow */
+    ),
+    borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left',/* BorderRadiusTopLeft */
+    ),
+    borderTopRightRadius: css.variable('--framer-input-border-radius-top-right',/* BorderRadiusTopRight */
+    ),
+    borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right',/* BorderRadiusBottomRight */
+    ),
+    borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left',/* BorderRadiusBottomLeft */
+    ),
+    background: css.variable('--framer-input-background',/* Background */
+    ),
+    transition: css.variable('--framer-input-focused-transition',/* FocusedTransition */
+    ),
+    transitionProperty: 'background, box-shadow',
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}::placeholder`, {
+    color: css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="date"], .${textInputWrapperClassName} .${inputClassName}[type="time"]`, {
+    '-webkit-appearance': 'none',
+    appearance: 'none',
+  },),
+  // iOS only fix for centered date & time inputs: https://github.com/tailwindlabs/tailwindcss-forms/pull/144
+  css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-date-and-time-value`, {
+    textAlign: 'start',
+  },),
+  css(`.${textInputWrapperClassName} textarea`, {
+    display: 'flex',
+    resize: css.variable('--framer-textarea-resize',/* Resize */
+    ),
+    overflowY: 'scroll',
+    minHeight: 'inherit',
+    maxHeight: 'inherit',
+    whiteSpace: 'break-spaces',
+  },),
+  // This targets the resize handle in WebKit browsers. Unfortunately, it is not
+  // possible in CSS to target the resize handle in Firefox, so FF will always
+  // show the native resize handle.
+  css(`.${textInputWrapperClassName} textarea::-webkit-resizer`, {
+    background: `no-repeat url('${defaultTextareaResizerIcon}')`,
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar`, {
+    cursor: 'pointer',
+    background: 'transparent',
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar-thumb:window-inactive`, {
+    opacity: 0,
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar-corner`, {
+    background: 'none',
+    backgroundColor: 'transparent',
+    outline: 'none',
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}.${emptyValueClassName}::-webkit-datetime-edit`, {
+    color: css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+    // This tells safari to use the color for the shadow dom elements.
+    '-webkit-text-fill-color': css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+  },),
+  css(
+    `.${textInputWrapperClassName} .${inputClassName}[type="date"]::before, .${textInputWrapperClassName} .${inputClassName}[type="time"]::before`,
+    {
+      ...inputIconCSSDeclaration,
+      paddingLeft: `${iconSpacing}px`,
+      maskPosition: `${iconSpacing}px center`,
+      backgroundPosition: `${iconSpacing}px center`,
+    },
+  ),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="date"]::before`, {
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultDateIconMaskImage}')`,),
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="time"]::before`, {
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultTimeIconMaskImage}')`,),
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+  },),
+  // Hide the native date picker icon, but still allow the user to click it.
+  css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-calendar-picker-indicator`, {
+    opacity: 0,
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    paddingRight: 0,
+    paddingLeft: `${iconSpacing}px`,
+    width: `${iconSize2}px`,
+    height: `${iconSize2}px`,
+  },),
+  css(`.${textInputWrapperClassName}:focus-within, .${textInputWrapperClassName}.${forcedFocusClassName}`, {
+    boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+    background: css.variable('--framer-input-focused-background', '--framer-input-background',/* Background */
+    ),
+  },),
+  css(`.${textInputWrapperClassName}:focus-within::after, .${textInputWrapperClassName}.${forcedFocusClassName}::after`, {
+    borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color',/* BorderColor */
+    ),
+    borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style',/* BorderStyle */
+    ),
+    borderWidth: css.variable('--framer-input-focused-border-width', inputBorderAllSides,),
+  },),
+])();
+var FormPlainTextInput2 = /* @__PURE__ */ withCSS(PlainTextInput, styles,);
+var className = 'framer-form-boolean-input';
+var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput3(props, ref,) {
+  const {
+    inputName,
+    type = 'checkbox',
+    defaultChecked,
+    onValid,
+    ...rest
+  } = props;
+  const isCanvas = useIsOnFramerCanvas();
+  const attributes = isCanvas
+    ? {
+      checked: defaultChecked,
+    }
+    : {
+      defaultChecked,
+    };
+  const eventHandlers = useCustomValidity(onValid, props.onInvalid, props.onChange, props.onBlur, props.onFocus,);
+  return /* @__PURE__ */ jsx(motion.input, {
+    ...rest,
+    ...attributes,
+    ...eventHandlers,
+    readOnly: isCanvas,
+    ref,
+    type,
+    name: inputName,
+    className: cx(className, props.className,),
+  },);
+},);
+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 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 styles2 = /* @__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: inputBorderAllSides,
+    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`, {
+    ...inputIconCSSDeclaration,
+    backgroundPosition: 'center',
+    backgroundSize: 'contain',
+    maskPosition: 'center',
+    maskSize: 'contain',
+    height: '100%',
+    opacity: 0,
+    transition: '--framer-input-boolean-checked-transition',
+    transitionProperty: 'opacity',
+    width: '100%',
+  },),
+  // The BooleanInput component shows an svg check mark icon whenever an
+  // image url isn't provided. That's not an intuitive system for radios
+  // however, where we never want to show the default check mark.
+  css(`.${className}[type="checkbox"]::before`, {
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultCheckedIcon}')`,),
+  },),
+  css(`.${className}[type="radio"]::before`, {
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image',/* IconMaskImage */
+    ),
+  },),
+  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',/* Background */
+    ),
+    boxShadow: css.variable('--framer-input-boolean-checked-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+  },),
+  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', inputBorderAllSides,),
+  },),
+  css(`.${className}:focus, .${className}.${forcedFocusClassName}`, {
+    backgroundColor: css.variable('--framer-input-focused-background', '--framer-input-background',/* Background */
+    ),
+    boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+  },),
+  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', inputBorderAllSides,),
+  },),
+  css(`.${className}:focus:checked`, {
+    backgroundColor: css.variable(
+      '--framer-input-focused-background',
+      '--framer-input-boolean-checked-background',
+      '--framer-input-background',
+      /* Background */
+    ),
+    boxShadow: css.variable(
+      '--framer-input-focused-box-shadow',
+      '--framer-input-boolean-checked-box-shadow',
+      '--framer-input-box-shadow',
+      /* BoxShadow */
+    ),
+  },),
+  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', inputBorderAllSides,),
+  },),
+])();
+var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles2,);
 var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRef,) {
   const {
-    style,
+    autoFocus,
+    className: className2,
     inputName,
     required,
-    autoFocus,
+    defaultValue,
     selectOptions,
-    selectDefaultValue,
+    style,
+    onValid,
+    onChange,
+    onBlur,
+    onInvalid,
+    onFocus,
+    ...rest
   } = props;
+  const eventHandlers = useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus,);
+  const key7 = Array.isArray(defaultValue,) ? defaultValue[0] : defaultValue;
   return /* @__PURE__ */ jsx(motion.div, {
     ref: measureRef,
     style,
-    className: cx(inputWrapperClassName, selectWrapperClassName, props.className,),
+    className: cx(inputWrapperClassName, selectWrapperClassName, className2,),
+    ...rest,
     children: /* @__PURE__ */ jsx(motion.select, {
-      id: inputName,
       name: inputName,
       autoFocus,
       required,
       className: inputClassName,
-      defaultValue: selectDefaultValue,
+      defaultValue,
+      ...eventHandlers,
       children: selectOptions == null ? void 0 : selectOptions.map((option, index,) => {
         switch (option.type) {
           case 'divider':
@@ -37472,38 +38183,84 @@ var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRe
             }, index,);
         }
       },),
-    }, selectDefaultValue,),
+    }, key7,),
   },);
 },);
 var selectWrapperClassName = 'framer-form-select-wrapper';
 var selectArrowSize = 16;
-var FormSelect = /* @__PURE__ */ (() =>
-  withCSS(Select, [
-    ...sharedInputCSS,
-    ...focusInputCSS,
-    ...inputBorderCSS,
-    `select.${inputClassName} {
-            appearance: none;
-            -webkit-appearance: none;
-            padding-right: calc(var(${'--framer-input-padding'}) * 2 + ${selectArrowSize}px);
-        }`,
-    `.${selectWrapperClassName}::before {
-            content: "";
-            display: block;
-            position: absolute;
-            right: 0;
-            height: 100%;
-            width: 16px;
-            box-sizing: content-box;
-            padding: 0 var(${'--framer-input-padding'});
-            position: absolute;
-            pointer-events: none;
-            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${selectArrowSize}" height="${selectArrowSize}"><path d="M 3.5 6 L 8 10.5 L 12.5 6" fill="transparent" stroke-width="1.5" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-            background-repeat: no-repeat;
-            background-position: center center;
-            border: none;
-        }`,
-  ],))();
+var defaultSelectCaretMaskImage =
+  /* @__PURE__ */ (() =>
+    `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${selectArrowSize}" height="${selectArrowSize}"><path d="M 3.5 6 L 8 10.5 L 12.5 6" fill="transparent" stroke-width="1.5" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round"></path></svg>`)();
+var styles3 = /* @__PURE__ */ (() => [
+  ...sharedInputCSS,
+  ...inputBorderCSS,
+  ...inputWrapperCSS,
+  css(`.${selectWrapperClassName}`, {
+    // First we use the complete padding string, which may be any valid
+    // padding string (10px, 10px 10px, 10px 10px 10px, or 10px 10px
+    // 10px 10px), and use it to set only the right padding. This pushes
+    // the actual select away from the arrow by 1x.
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    background: css.variable('--framer-input-background',/* Background */
+    ),
+    borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left',/* BorderRadiusTopLeft */
+    ),
+    borderTopRightRadius: css.variable('--framer-input-border-radius-top-right',/* BorderRadiusTopRight */
+    ),
+    borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right',/* BorderRadiusBottomRight */
+    ),
+    borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left',/* BorderRadiusBottomLeft */
+    ),
+    boxShadow: css.variable('--framer-input-box-shadow',/* BoxShadow */
+    ),
+    transition: css.variable('--framer-input-focused-transition',/* FocusedTransition */
+    ),
+    transitionProperty: 'background, box-shadow',
+  },),
+  css(`.${selectWrapperClassName} select`, {
+    appearance: 'none',
+    '-webkit-appearance': 'none',
+    // Then we use the complete padding string again as the margin for
+    // the select. This moves the select 2x the padding right away from
+    // the arrow.
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    // Overwrite the values inherited from .${inputClassName}. On a
+    // select, these values are on the wrapper.
+    background: 'transparent',
+  },),
+  css(`.${selectWrapperClassName}::before`, {
+    ...inputIconCSSDeclaration,
+    paddingLeft: `${iconSpacing}px`,
+    backgroundPosition: `${iconSpacing}px center`,
+    maskPosition: `${iconSpacing}px center`,
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultSelectCaretMaskImage}')`,),
+  },),
+  css(`.${selectWrapperClassName} select:required:invalid`, {
+    color: css.variable('--framer-input-invalid-text-color',/* InvalidTextColor */
+    ),
+  },),
+  css(`.${selectWrapperClassName}:focus-within, .${selectWrapperClassName}.${forcedFocusClassName}`, {
+    background: css.variable('--framer-input-focused-background', '--framer-input-background',/* Background */
+    ),
+    boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+  },),
+  css(`.${selectWrapperClassName}:focus-within::after, .${selectWrapperClassName}.${forcedFocusClassName}::after`, {
+    borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color',/* BorderColor */
+    ),
+    borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style',/* BorderStyle */
+    ),
+    borderWidth: css.variable('--framer-input-focused-border-width', inputBorderAllSides,),
+  },),
+])();
+var FormSelect = /* @__PURE__ */ withCSS(Select, styles3,);
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
   const {
     background,
@@ -37610,7 +38367,7 @@ function convertCodeComponentContainer(componentDefinitionProvider, node, conver
     ),
   ];
 }
-var CodeComponentPresentation = class {
+var CodeComponentPresentation = /*#__PURE__*/ class {
   constructor(id3, componentIdentifier, packageVersion, props, children, codeOverrideIdentifier,) {
     this.id = id3;
     this.componentIdentifier = componentIdentifier;
@@ -37713,7 +38470,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     top,
     bottom,
     center,
-    className,
+    className: className2,
     stylesPresetsClassName,
     visible = true,
     opacity,
@@ -37854,7 +38611,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     'data-framer-name': name,
     'data-framer-component-type': 'DeprecatedRichText',
     'data-center': center,
-    className: cx(className, stylesPresetsClassName, richTextWrapperClassName,),
+    className: cx(className2, stylesPresetsClassName, richTextWrapperClassName,),
     transformTemplate: template,
     dangerouslySetInnerHTML: {
       __html: innerHTMLWithReplacedFramerPageLinks,
@@ -38322,7 +39079,7 @@ var ImagePatternElement = ({
   },);
 };
 var useDOM = /* @__PURE__ */ isBrowser2();
-var SharedSVGEntry = class {
+var SharedSVGEntry = /*#__PURE__*/ class {
   constructor(id3, svg, innerHTML, viewBox, count = 0,) {
     this.id = id3;
     this.svg = svg;
@@ -38331,7 +39088,7 @@ var SharedSVGEntry = class {
     this.count = count;
   }
 };
-var SharedSVGManager = class {
+var SharedSVGManager = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'entries', /* @__PURE__ */ new Map(),);
   }
@@ -38730,7 +39487,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
         title,
         description,
         layoutId,
-        className,
+        className: className2,
         variants,
         withExternalLayout,
         innerRef,
@@ -38896,7 +39653,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
         id: id3,
         ref: innerRef,
         style: outerStyle,
-        className,
+        className: className2,
         variants,
         tabIndex: this.props.tabIndex,
         role: title || description ? 'img' : void 0,
@@ -39040,7 +39797,7 @@ var TextComponent = /* @__PURE__ */ (() => {
           opacity,
           id: id3,
           layoutId,
-          className,
+          className: className2,
           transition,
           variants,
           name,
@@ -39131,7 +39888,7 @@ var TextComponent = /* @__PURE__ */ (() => {
               __html: rawHTML,
             },
             'data-center': this.props.center,
-            className: cx(className, matchesCurrentRoute && 'isCurrent',),
+            className: cx(className2, matchesCurrentRoute && 'isCurrent',),
             transition,
             variants,
             ref: this.setElement,
@@ -39324,7 +40081,7 @@ function getTabIndexProps(tabIndex,) {
   };
 }
 var keys22 = /* @__PURE__ */ new Map();
-var InternalID = class {
+var InternalID = /*#__PURE__*/ class {
   constructor(id3,) {
     this.id = id3;
     __publicField(this, '_link', null,);
@@ -39355,7 +40112,7 @@ var InternalID = class {
   }
 };
 var PathSegmentOuter = /* @__PURE__ */ (() => {
-  const _PathSegment = class {
+  const _PathSegment = /*#__PURE__*/ class {
     constructor(value,) {
       __publicField(this, '__class', 'PathSegment',);
       __publicField(this, 'x', 0,);
@@ -39610,7 +40367,7 @@ function transformString(transform2,) {
   }
   return result;
 }
-var LinearGradientElement = class extends Component {
+var LinearGradientElement = /*#__PURE__*/ class extends Component {
   render() {
     const {
       id: id3,
@@ -39636,7 +40393,7 @@ var LinearGradientElement = class extends Component {
     },);
   }
 };
-var RadialGradientElement = class extends Component {
+var RadialGradientElement = /*#__PURE__*/ class extends Component {
   render() {
     const {
       centerAnchorX,
@@ -39664,7 +40421,7 @@ var RadialGradientElement = class extends Component {
     },);
   }
 };
-var SVGRoot = class extends Component {
+var SVGRoot = /*#__PURE__*/ class extends Component {
   render() {
     const {
       children,
@@ -40359,7 +41116,7 @@ function loadJSON(url,) {
   },).then((res) => res.json());
 }
 function inspectObjectType(item,) {
-  let className;
+  let className2;
   if (
     (item.constructor !== null ? item.constructor.name : void 0) !== null &&
     (item.constructor !== null ? item.constructor.name : void 0) !== 'Object'
@@ -40378,15 +41135,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';
@@ -40526,7 +41283,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',
   },
@@ -40668,6 +41425,7 @@ export {
   FontSourceNames,
   fontStore,
   forceLayerBackingWithCSSProperties,
+  FormBooleanInput,
   FormContainer,
   FormPlainTextInput2 as FormPlainTextInput,
   FormSelect,
@@ -40786,6 +41544,7 @@ export {
   PropertyOverrides,
   PropertyStore,
   propsForLink,
+  pushLoadMoreHistory,
   px,
   QueryEngine,
   RadialGradient,
@@ -40843,7 +41602,6 @@ export {
   useAnimationControls,
   useAnimationFrame,
   useBreakpointVariants,
-  useCollectionListPaginationInfo,
   useComponentViewport,
   useConstant2 as useConstant,
   useCurrentPathVariables,
@@ -40921,6 +41679,7 @@ export {
   withCSS,
   withFX,
   withGeneratedLayoutId,
+  withInfiniteScroll,
   withMappedReactProps,
   withMeasuredSize,
   WithNavigator,