unframer 2.5.1 → 2.5.3

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';
@@ -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,);
 }
@@ -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;
+          }
         }
       }
     }
@@ -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 = 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) {
@@ -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,)) {
@@ -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 styles2 = {
         visibility: '',
       };
       const transformTemplate2 = this.getTransformTemplate();
       if (this.needsReset) {
         this.needsReset = false;
-        styles.opacity = '';
-        styles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents,) || '';
-        styles.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '',) : 'none';
-        return styles;
+        styles2.opacity = '';
+        styles2.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents,) || '';
+        styles2.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '',) : 'none';
+        return styles2;
       }
       const lead = this.getLead();
       if (!this.projectionDelta || !this.layout || !lead.target) {
@@ -7456,17 +7571,17 @@ function createProjectionNode({
       }
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget();
-      styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender,);
+      styles2.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender,);
       if (transformTemplate2) {
-        styles.transform = transformTemplate2(valuesToRender, styles.transform,);
+        styles2.transform = transformTemplate2(valuesToRender, styles2.transform,);
       }
       const {
         x,
         y,
       } = this.projectionDelta;
-      styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+      styles2.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
       if (lead.animationValues) {
-        styles.opacity = lead === this
+        styles2.opacity = lead === this
           ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0
             ? _b
             : 1
@@ -7474,7 +7589,7 @@ function createProjectionNode({
           ? this.latestValues.opacity
           : valuesToRender.opacityExit;
       } else {
-        styles.opacity = lead === this
+        styles2.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 = styles2.transform === 'none' ? valuesToRender[key7] : correct(valuesToRender[key7], lead,);
         if (applyTo) {
           const num = applyTo.length;
           for (let i = 0; i < num; i++) {
-            styles[applyTo[i]] = corrected;
+            styles2[applyTo[i]] = corrected;
           }
         } else {
-          styles[key7] = corrected;
+          styles2[key7] = corrected;
         }
       }
       if (this.options.layoutId) {
-        styles.pointerEvents = lead === this
+        styles2.pointerEvents = lead === this
           ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents,) || ''
           : 'none';
       }
-      return styles;
+      return styles2;
     }
     clearSnapshot() {
       this.resumeFrom = this.snapshot = void 0;
@@ -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,);
 }
@@ -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.IBCXHSKM.js
 
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -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,) {
@@ -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;
@@ -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, {
@@ -19015,8 +19075,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 styles2 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
+  for (const rule of styles2) {
     injectCSSRule(rule, void 0, void 0,);
   }
 }
@@ -21192,28 +21252,28 @@ function backgroundImageFromProps(props,) {
 }
 function collectBorderStyleForProps(props, style, collapseEqualBorders = true,) {
   const {
-    borderWidth,
+    borderWidth: borderWidth2,
     borderStyle,
     borderColor,
   } = props;
-  if (!borderWidth) {
+  if (!borderWidth2) {
     return;
   }
   let borderTop;
   let borderBottom;
   let borderLeft;
   let borderRight;
-  if (typeof borderWidth === 'number') {
+  if (typeof borderWidth2 === 'number') {
     borderTop =
       borderBottom =
       borderLeft =
       borderRight =
-        borderWidth;
+        borderWidth2;
   } else {
-    borderTop = borderWidth.top || 0;
-    borderBottom = borderWidth.bottom || 0;
-    borderLeft = borderWidth.left || 0;
-    borderRight = borderWidth.right || 0;
+    borderTop = borderWidth2.top || 0;
+    borderBottom = borderWidth2.bottom || 0;
+    borderLeft = borderWidth2.left || 0;
+    borderRight = borderWidth2.right || 0;
   }
   if (borderTop === 0 && borderBottom === 0 && borderLeft === 0 && borderRight === 0) {
     return;
@@ -21257,7 +21317,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 +21352,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,
@@ -24596,7 +24638,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
       const {
         visible,
         id: id3,
-        className,
+        className: className2,
       } = this.props;
       if (!visible) {
         return null;
@@ -24611,7 +24653,7 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
         id: id3,
         style,
         ref: this.setElement,
-        className,
+        className: className2,
         children: [
           /* @__PURE__ */ jsx(ProvideParentSize, {
             parentSize,
@@ -24624,19 +24666,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, {
@@ -26233,20 +26263,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,);
@@ -26344,6 +26371,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 +26606,7 @@ var Stack = /* @__PURE__ */ (() => {
       useFlexboxGap: externalUseFlexboxGap = true,
       children,
       style: styleProp,
-      className,
+      className: className2,
       willChangeTransform,
       __fromCodeComponentNode,
       parentSize,
@@ -26623,7 +26694,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,
@@ -28916,7 +28987,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 +29058,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,
@@ -30221,6 +30292,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 +30405,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,);
@@ -30445,8 +30530,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 +31289,7 @@ function Floating({
   offsetX,
   offsetY,
   anchorRef,
-  className,
+  className: className2,
   children,
   portalSelector,
   zIndex,
@@ -31282,7 +31367,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.
@@ -31469,6 +31554,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 +31701,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 +31729,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 +31780,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 +31832,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 +31902,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 +31940,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 +31972,7 @@ var Link = /* @__PURE__ */ React4.forwardRef(({
   return clone(children, {
     ...restProps,
     ...props,
+    ref: stableObserverChildRef,
   },);
 },);
 function resolveLink(href, router, implicitPathVariables,) {
@@ -31837,7 +32047,7 @@ function PageRoot({
   locales,
   preserveQueryParams,
   enableImproveInpDuringHydration,
-  shouldMarkHydrationEnd = false,
+  addHydrationMarkers = false,
 },) {
   React4.useEffect(() => {
     if (isWebsite) return;
@@ -31861,7 +32071,7 @@ function PageRoot({
           },
           preserveQueryParams,
           enableImproveInpDuringHydration,
-          shouldMarkHydrationEnd,
+          addHydrationMarkers,
         },),
       },),
     },);
@@ -34910,7 +35120,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 +35163,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 +35199,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 +35277,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 +35292,7 @@ function useVariantState({
     cycleOrder: externalCycleOrder,
     transitions: externalTransitions,
   },);
-  const resolveNextVariant = useCallback((targetBaseVariant) => {
+  const resolveNextVariant = React4.useCallback((targetBaseVariant) => {
     const {
       isHovered: isHovered2,
       isPressed: isPressed2,
@@ -35068,7 +35304,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 +35319,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 +35336,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 +35356,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 +35398,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,
@@ -36006,8 +36270,8 @@ var LocalFontSource = class {
     };
     const aliases = /* @__PURE__ */ new Map();
     const weights = [400, 100, 200, 300, 500, 600, 700, 800, 900,];
-    const styles = ['normal', 'italic',];
-    for (const style of styles) {
+    const styles2 = ['normal', 'italic',];
+    for (const style of styles2) {
       for (const weight of weights) {
         const variant = createVariantName(weight, style,);
         const alias = `__SystemDefault-${weight}-${style}__`;
@@ -36904,7 +37168,7 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
         },
       },);
     }
-    renderErrorPlaceholder(file, error,) {
+    renderErrorPlaceholder(error,) {
       const {
         RenderPlaceholder,
       } = runtime;
@@ -36912,10 +37176,7 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
         ...this.props,
         background: null,
         children: /* @__PURE__ */ jsx(RenderPlaceholder, {
-          error: {
-            error,
-            file,
-          },
+          error,
         },),
       },);
     }
@@ -36935,13 +37196,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,);
@@ -37128,14 +37399,16 @@ function formReducer(_state, {
 function preventDefault(e,) {
   e.preventDefault();
 }
-var FormContainer = ({
+var FormContainer = /* @__PURE__ */ React4.forwardRef(({
   action,
   formId,
   disabled,
   children,
   redirectUrl,
+  onSuccess,
+  onError,
   ...props
-},) => {
+}, ref,) => {
   const [state, dispatch,] = React4.useReducer(formReducer, {
     state: disabled ? 'disabled' : void 0,
   },);
@@ -37190,6 +37463,7 @@ var FormContainer = ({
       dispatch({
         type: 'success',
       },);
+      onSuccess == null ? void 0 : onSuccess();
       if (redirectUrl) {
         await redirectTo(redirectUrl,);
       }
@@ -37197,6 +37471,7 @@ var FormContainer = ({
       dispatch({
         type: 'error',
       },);
+      onError == null ? void 0 : onError();
     }
   };
   const handleKeyDown = (event) => {
@@ -37217,9 +37492,10 @@ var FormContainer = ({
     'data-formid': formId,
     onSubmit: isSubmitEnabled ? handleSubmit : preventDefault,
     onKeyDown: handleKeyDown,
+    ref,
     children: children(state,),
   },);
-};
+},);
 async function submitForm(action, data2,) {
   const proofOfWork = await calculateProofOfWork();
   if (!proofOfWork) {
@@ -37270,21 +37546,53 @@ var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2
   FormInputStyleVariableNames2['FontLineHeight'] = '--framer-input-font-line-height';
   FormInputStyleVariableNames2['PlaceholderColor'] = '--framer-input-placeholder-color';
   FormInputStyleVariableNames2['BoxShadow'] = '--framer-input-box-shadow';
-  FormInputStyleVariableNames2['ZIndex'] = '--framer-input-z-index';
   FormInputStyleVariableNames2['FocusedBorderColor'] = '--framer-input-focused-border-color';
   FormInputStyleVariableNames2['FocusedBorderWidth'] = '--framer-input-focused-border-width';
   FormInputStyleVariableNames2['FocusedBorderStyle'] = '--framer-input-focused-border-style';
   FormInputStyleVariableNames2['FocusedBackground'] = '--framer-input-focused-background';
   FormInputStyleVariableNames2['FocusedBoxShadow'] = '--framer-input-focused-box-shadow';
   FormInputStyleVariableNames2['FocusedTransition'] = '--framer-input-focused-transition';
+  FormInputStyleVariableNames2['BooleanCheckedIconURL'] = '--framer-input-boolean-icon';
+  FormInputStyleVariableNames2['BooleanCheckedBackground'] = '--framer-input-boolean-checked-background';
+  FormInputStyleVariableNames2['BooleanCheckedBorderColor'] = '--framer-input-boolean-checked-border-color';
+  FormInputStyleVariableNames2['BooleanCheckedBorderWidth'] = '--framer-input-boolean-checked-border-width';
+  FormInputStyleVariableNames2['BooleanCheckedBorderStyle'] = '--framer-input-boolean-checked-border-style';
+  FormInputStyleVariableNames2['BooleanCheckedBoxShadow'] = '--framer-input-boolean-checked-box-shadow';
+  FormInputStyleVariableNames2['BooleanCheckedTransition'] = '--framer-input-boolean-checked-transition';
+  FormInputStyleVariableNames2['InvalidTextColor'] = '--framer-input-invalid-text-color';
   return FormInputStyleVariableNames2;
 })(FormInputStyleVariableNames || {},);
 var Var = FormInputStyleVariableNames;
-var inputClassName = 'framer-form-input';
-var inputWrapperClassName = 'framer-form-input-wrapper';
-function cssVar(a, b,) {
-  return `var(${a}, var(${b}))`;
+var inputClassName = /* @__PURE__ */ (() => 'framer-form-input')();
+var inputWrapperClassName = /* @__PURE__ */ (() => 'framer-form-input-wrapper')();
+var emptyValueClassName = /* @__PURE__ */ (() => 'framer-form-input-empty')();
+var forcedFocusClassName = /* @__PURE__ */ (() => 'framer-form-input-forced-focus')();
+var forcedCheckedClassName = /* @__PURE__ */ (() => 'framer-form-input-forced-checked')();
+function cssValue(value,) {
+  if (typeof value === 'number') return value;
+  if (value.startsWith('--',)) return css.variable(value,);
+  if (value === '') return '""';
+  return value;
 }
+function css(selector, declaration,) {
+  let output = ' ';
+  for (const key7 in declaration) {
+    output += `${key7.replace(/([A-Z])/gu, '-$1',).toLowerCase()}: ${cssValue(declaration[key7],)}; `;
+  }
+  return selector + ' {' + output + '}';
+}
+((css2) => {
+  function variable(...variables) {
+    const lastItem = variables[variables.length - 1];
+    let value = lastItem.startsWith('--',) ? `var(${lastItem})` : lastItem;
+    for (let index = variables.length - 2; index >= 0; index--) {
+      const element = variables[index];
+      value = `var(${element}, ${value})`;
+    }
+    return value;
+  }
+  css2.variable = variable;
+})(css || (css = {}),);
 var sharedInputCSS = [`.${inputClassName} {
         padding: var(${Var.Padding});
         background: var(${Var.Background});
@@ -37303,28 +37611,28 @@ var sharedInputCSS = [`.${inputClassName} {
         border-top-right-radius: var(${Var.BorderRadiusTopRight});
         border-bottom-right-radius: var(${Var.BorderRadiusBottomRight});
         border-bottom-left-radius: var(${Var.BorderRadiusBottomLeft});
-        z-index: var(${Var.ZIndex});
         letter-spacing: var(${Var.FontLetterSpacing});
         text-align: var(${Var.FontTextAlignment});
         line-height: var(${Var.FontLineHeight});
         transition: var(${Var.FocusedTransition});
         transition-property: background, box-shadow;
     }`,];
-var focusInputCSS = [
-  `.${inputClassName}:focus-visible { outline: none; }`,
-  `.${inputClassName}:focus {
-        background: ${cssVar(Var.FocusedBackground, Var.Background,)};
-        box-shadow: ${cssVar(Var.FocusedBoxShadow, Var.BoxShadow,)};
+var focusInputCSS =
+  /* @__PURE__ */ (() => [
+    `.${inputClassName}:focus-visible { outline: none; }`,
+    `.${inputClassName}:focus, .${inputClassName}.${forcedFocusClassName} {
+        background: ${css.variable(Var.FocusedBackground, Var.Background,)};
+        box-shadow: ${css.variable(Var.FocusedBoxShadow, Var.BoxShadow,)};
     }`,
-  `.${inputWrapperClassName}:focus-within::after {
-        border-color: ${cssVar(Var.FocusedBorderColor, Var.BorderColor,)};
-        border-style: ${cssVar(Var.FocusedBorderStyle, Var.BorderStyle,)};
-        border-top-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderTopWidth,)};
-        border-right-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderRightWidth,)};
-        border-bottom-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderBottomWidth,)};
-        border-left-width: ${cssVar(Var.FocusedBorderWidth, Var.BorderLeftWidth,)};
+    `.${inputWrapperClassName}:focus-within::after, .${inputWrapperClassName}.${forcedFocusClassName}::after {
+        border-color: ${css.variable(Var.FocusedBorderColor, Var.BorderColor,)};
+        border-style: ${css.variable(Var.FocusedBorderStyle, Var.BorderStyle,)};
+        border-top-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderTopWidth,)};
+        border-right-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderRightWidth,)};
+        border-bottom-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderBottomWidth,)};
+        border-left-width: ${css.variable(Var.FocusedBorderWidth, Var.BorderLeftWidth,)};
     }`,
-];
+  ])();
 var inputBorderCSS = [
   `.${inputWrapperClassName} {
         position: relative;
@@ -37357,28 +37665,44 @@ var passwordManagerIgnoreDataProps = {
   'data-1p-ignore': true,
   // LastPass
   'data-lpignore': true,
-};
-var sensibleInputDefaults = {
+  // Dashlane
+  // https://support.dashlane.com/hc/en-us/articles/4420122792594-Optimize-your-web-forms-for-Dashlane-Autofill
+  'data-form-type': 'other',
+  // autocomplete="off" is a generic property that disables autofilling. It
+  // is not always respected by some browsers or password managers.
   autocomplete: 'off',
 };
 var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput(props, ref,) {
   const {
-    style,
-    inputName,
-    type,
-    required,
     autoFocus,
-    placeholder,
-    value,
-    min,
+    className: className2,
+    inputName,
     max,
+    min,
+    onBlur,
+    onFocus,
+    onInvalid,
+    placeholder,
+    required,
     step: step2,
+    style,
+    type,
+    value,
+    autofillEnabled,
+    canvasPreviewClassName,
     ...rest
   } = props;
-  const dataProps = {
-    ...sensibleInputDefaults,
-    ...passwordManagerIgnoreDataProps,
-  };
+  const [hasValue, setHasValue,] = React4.useState(!!value,);
+  const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
+  const eventProps = {
+    onBlur,
+    onFocus,
+    onInvalid,
+  };
+  const onChange = React4.useCallback((e) => {
+    const newValue = e.target.value;
+    setHasValue(!!newValue,);
+  }, [],);
   switch (type) {
     case 'hidden':
       return /* @__PURE__ */ jsx(motion.input, {
@@ -37390,16 +37714,17 @@ var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInp
       return /* @__PURE__ */ jsx(motion.div, {
         ref,
         style,
+        className: cx(inputWrapperClassName, canvasPreviewClassName, className2,),
         ...rest,
-        className: cx(inputWrapperClassName, props.className,),
         children: /* @__PURE__ */ jsx(motion.textarea, {
           id: inputName,
           ...dataProps,
+          ...eventProps,
           required,
           autoFocus,
           name: inputName,
           placeholder,
-          className: inputClassName,
+          className: cx(inputClassName, canvasPreviewClassName,),
           value,
         },),
       },);
@@ -37407,17 +37732,19 @@ var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInp
       return /* @__PURE__ */ jsx(motion.div, {
         ref,
         style,
+        className: cx(inputWrapperClassName, canvasPreviewClassName, className2,),
         ...rest,
-        className: cx(inputWrapperClassName, props.className,),
         children: /* @__PURE__ */ jsx(motion.input, {
           id: inputName,
           ...dataProps,
+          ...eventProps,
           type,
           required,
           autoFocus,
           name: inputName,
           placeholder,
-          className: inputClassName,
+          className: cx(inputClassName, canvasPreviewClassName, !hasValue && emptyValueClassName,),
+          onChange,
           value,
           min,
           max,
@@ -37426,6 +37753,14 @@ var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInp
       },);
   }
 },);
+var iconSpacing = /* @__PURE__ */ (() => 10)();
+var iconSize = /* @__PURE__ */ (() => 14)();
+var defaultDateIcon =
+  /* @__PURE__ */ (() =>
+    `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H2Z' fill='currentColor' opacity='.3'/%3E%3Cpath d='M2.25 4.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2ZM2 5.75h9.5' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3C/svg%3E`)();
+var defaultTimeIcon =
+  /* @__PURE__ */ (() =>
+    `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M1.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3Cpath d='M6.75 7.25v-3m0 3h2' fill='transparent' stroke-width='1.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E`)();
 var FormPlainTextInput2 =
   /* @__PURE__ */ (() =>
     withCSS(PlainTextInput, [
@@ -37439,27 +37774,221 @@ var FormPlainTextInput2 =
             resize: var(${'--framer-textarea-resize'});
             min-height: var(${'--framer-textarea-min-height'});
         }`,
+      `.${inputClassName}.${emptyValueClassName}::-webkit-datetime-edit {
+            color:var(${'--framer-input-placeholder-color'});
+            -webkit-text-fill-color: var(${'--framer-input-placeholder-color'});
+        }`,
+      `.${inputClassName}[type="date"]::before, .${inputClassName}[type="time"]::before {
+            content: "";
+            display: block;
+            position: absolute;
+            padding: var(${'--framer-input-padding'});
+            padding-left: ${iconSpacing}px;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: ${iconSize}px;
+            box-sizing: content-box;
+
+            pointer-events: none;
+            mask-repeat: no-repeat;
+            mask-position: ${iconSpacing}px center;
+            border: none;
+            background-color: #999;
+        }`,
+      `.${inputClassName}[type="date"]::before {
+            mask-image: url("${defaultDateIcon}");
+        }`,
+      `.${inputClassName}[type="time"]::before {
+            mask-image: url("${defaultTimeIcon}");
+        }`,
+      // Hide the native date picker icon, but still allow the user to click it.
+      `.${inputClassName}::-webkit-calendar-picker-indicator {
+            opacity: 0;
+            padding: var(${'--framer-input-padding'});
+            padding-right: 0;
+            padding-left: ${iconSpacing}px;
+            width: ${iconSize}px;
+            height: ${iconSize}px;
+        }`,
     ],))();
+var className = 'framer-form-boolean-input';
+var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput3(props, ref,) {
+  const {
+    inputName,
+    type = 'checkbox',
+    defaultChecked,
+    canvasPreviewClassName,
+    ...rest
+  } = props;
+  const isCanvas = useIsOnFramerCanvas();
+  const attributes = isCanvas
+    ? {
+      checked: defaultChecked,
+    }
+    : {
+      defaultChecked,
+    };
+  return /* @__PURE__ */ jsx(motion.input, {
+    ...rest,
+    ...attributes,
+    readOnly: isCanvas,
+    ref,
+    id: inputName,
+    type,
+    name: inputName,
+    className: cx(className, props.className, canvasPreviewClassName,),
+  },);
+},);
+var defaultCheckedIcon =
+  `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M 4 8 L 6.5 10.5 L 11.5 5.5" fill="transparent" stroke-width="2" stroke="rgb(255, 255, 255)" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var borderWidth =
+  `var(${'--framer-input-border-top-width'}) var(${'--framer-input-border-right-width'}) var(${'--framer-input-border-bottom-width'}) var(${'--framer-input-border-left-width'})`;
+var borderRadius =
+  `var(${'--framer-input-border-radius-top-left'}) var(${'--framer-input-border-radius-top-right'}) var(${'--framer-input-border-radius-bottom-right'}) var(${'--framer-input-border-radius-bottom-left'})`;
+var styles = /* @__PURE__ */ (() => [
+  css(`.${className}`, {
+    '-webkit-appearance': 'none',
+    // background-color: #fff; fixes a bug on iOS where the checkbox shows
+    // through the appearance: none;
+    alignItems: 'center',
+    appearance: 'none',
+    backgroundColor: '#fff',
+    background: '--framer-input-background',
+    borderRadius,
+    boxShadow: '--framer-input-box-shadow',
+    display: 'flex',
+    justifyContent: 'center',
+    margin: 0,
+    overflow: 'hidden',
+    position: 'relative',
+    transition: '--framer-input-boolean-checked-transition',
+    transitionProperty: 'box-shadow, background',
+  },),
+  // The after element styles the border of the checkbox to conform to
+  // framer's inset border model.
+  css(`.${className}::after`, {
+    background: 'transparent',
+    borderColor: css.variable('--framer-input-border-color', 'transparent',),
+    borderRadius,
+    borderStyle: '--framer-input-border-style',
+    borderWidth,
+    boxSizing: 'border-box',
+    content: '',
+    display: 'block',
+    inset: 0,
+    position: 'absolute',
+    transition: '--framer-input-boolean-checked-transition',
+    transitionProperty: 'border-color, border-width, border-style',
+  },),
+  // The before element is used to display the check mark icon. It is
+  // faded in when the input is checked.
+  css(`.${className}::before`, {
+    // Use the icon url if it's provided, falling back to a default check
+    // mark. Radio inputs will be code-generated with a "none" value for the
+    // variable if an image isn't provided which will prevent this fallback
+    // in those cases.
+    backgroundImage: css.variable('--framer-input-boolean-icon', `url('${defaultCheckedIcon}')`,),
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
+    content: '',
+    display: 'block',
+    height: '100%',
+    opacity: 0,
+    transition: '--framer-input-boolean-checked-transition',
+    transitionProperty: 'opacity',
+    width: '100%',
+  },),
+  css(`.${className}:checked, .${className}.${forcedCheckedClassName}`, {
+    // When not set, the styles when checked shouldn't clear the default
+    // styles.
+    backgroundColor: css.variable('--framer-input-boolean-checked-background', '--framer-input-background',/* 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', borderWidth,),
+  },),
+  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', borderWidth,),
+  },),
+  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', borderWidth,),
+  },),
+])();
+var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles,);
 var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRef,) {
   const {
-    style,
+    autoFocus,
+    className: className2,
     inputName,
+    onBlur,
+    onFocus,
+    onInvalid,
     required,
-    autoFocus,
-    selectOptions,
     selectDefaultValue,
+    selectOptions,
+    style,
+    canvasPreviewClassName,
+    ...rest
   } = props;
   return /* @__PURE__ */ jsx(motion.div, {
     ref: measureRef,
     style,
-    className: cx(inputWrapperClassName, selectWrapperClassName, props.className,),
+    className: cx(inputWrapperClassName, selectWrapperClassName, canvasPreviewClassName, className2,),
+    ...rest,
     children: /* @__PURE__ */ jsx(motion.select, {
       id: inputName,
       name: inputName,
       autoFocus,
       required,
-      className: inputClassName,
+      className: cx(inputClassName, canvasPreviewClassName,),
       defaultValue: selectDefaultValue,
+      onBlur,
+      onFocus,
+      onInvalid,
       children: selectOptions == null ? void 0 : selectOptions.map((option, index,) => {
         switch (option.type) {
           case 'divider':
@@ -37503,6 +38032,9 @@ var FormSelect = /* @__PURE__ */ (() =>
             background-position: center center;
             border: none;
         }`,
+    `select.${inputClassName}:required:invalid {
+            color: var(${'--framer-input-invalid-text-color'});
+        }`,
   ],))();
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
   const {
@@ -37713,7 +38245,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     top,
     bottom,
     center,
-    className,
+    className: className2,
     stylesPresetsClassName,
     visible = true,
     opacity,
@@ -37854,7 +38386,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,
@@ -38730,7 +39262,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
         title,
         description,
         layoutId,
-        className,
+        className: className2,
         variants,
         withExternalLayout,
         innerRef,
@@ -38896,7 +39428,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 +39572,7 @@ var TextComponent = /* @__PURE__ */ (() => {
           opacity,
           id: id3,
           layoutId,
-          className,
+          className: className2,
           transition,
           variants,
           name,
@@ -39131,7 +39663,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,
@@ -40359,7 +40891,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 +40910,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 +41058,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 +41200,7 @@ export {
   FontSourceNames,
   fontStore,
   forceLayerBackingWithCSSProperties,
+  FormBooleanInput,
   FormContainer,
   FormPlainTextInput2 as FormPlainTextInput,
   FormSelect,
@@ -40786,6 +41319,7 @@ export {
   PropertyOverrides,
   PropertyStore,
   propsForLink,
+  pushLoadMoreHistory,
   px,
   QueryEngine,
   RadialGradient,
@@ -40843,7 +41377,6 @@ export {
   useAnimationControls,
   useAnimationFrame,
   useBreakpointVariants,
-  useCollectionListPaginationInfo,
   useComponentViewport,
   useConstant2 as useConstant,
   useCurrentPathVariables,
@@ -40921,6 +41454,7 @@ export {
   withCSS,
   withFX,
   withGeneratedLayoutId,
+  withInfiniteScroll,
   withMappedReactProps,
   withMeasuredSize,
   WithNavigator,
@@ -40972,7 +41506,7 @@ react-is/cjs/react-is.production.min.js:
 */
 if (typeof document !== 'undefined') {
     for (const node of document.querySelectorAll(
-        'style[data-framer-css-ssr]',
+        'body style[data-framer-css-ssr]',
     )) {
         document.head.appendChild(node)
     }