unframer 2.5.3 → 2.6.0

package/esm/framer.js

@@ -158,7 +158,7 @@ var SwitchLayoutGroupContext = createContext({});
 var LazyContext = createContext({
     strict: false,
 });
-var Queue = class {
+var Queue = /*#__PURE__*/ class {
     constructor() {
         this.order = [];
         this.scheduled = /* @__PURE__ */ new Set();
@@ -1071,8 +1071,8 @@ function getSpringOptions(options) {
     }
     return springOptions;
 }
-function spring(_f) {
-    var { keyframes: keyframes2, restDelta, restSpeed } = _f, options = __rest(_f, ["keyframes", "restDelta", "restSpeed"]);
+function spring(_j) {
+    var { keyframes: keyframes2, restDelta, restSpeed } = _j, options = __rest(_j, ["keyframes", "restDelta", "restSpeed"]);
     const origin = keyframes2[0];
     const target = keyframes2[keyframes2.length - 1];
     const state = {
@@ -1498,7 +1498,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;
@@ -1753,9 +1753,9 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = 'loop', }, finalKey
     const index = repeat && repeatType !== 'loop' && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
     return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
-var BaseAnimation = class {
-    constructor(_f) {
-        var { autoplay = true, delay: delay2 = 0, type = 'keyframes', repeat = 0, repeatDelay = 0, repeatType = 'loop' } = _f, options = __rest(_f, ["autoplay", "delay", "type", "repeat", "repeatDelay", "repeatType"]);
+var BaseAnimation = /*#__PURE__*/ class {
+    constructor(_j) {
+        var { autoplay = true, delay: delay2 = 0, type = 'keyframes', repeat = 0, repeatDelay = 0, repeatType = 'loop' } = _j, options = __rest(_j, ["autoplay", "delay", "type", "repeat", "repeatDelay", "repeatType"]);
         this.isStopped = false;
         this.hasAttemptedResolve = false;
         this.options = Object.assign({ autoplay, delay: delay2, type,
@@ -1862,9 +1862,9 @@ var generators = {
     spring,
 };
 var percentToProgress = (percent2) => percent2 / 100;
-var MainThreadAnimation = class extends BaseAnimation {
-    constructor(_f) {
-        var { KeyframeResolver: KeyframeResolver$1 = KeyframeResolver } = _f, options = __rest(_f, ["KeyframeResolver"]);
+var MainThreadAnimation = /*#__PURE__*/ class extends BaseAnimation {
+    constructor(_j) {
+        var { KeyframeResolver: KeyframeResolver$1 = KeyframeResolver } = _j, options = __rest(_j, ["KeyframeResolver"]);
         super(options);
         this.holdTime = null;
         this.startTime = null;
@@ -2285,7 +2285,7 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
         }
     }
 }
-var DOMKeyframesResolver = class extends KeyframeResolver {
+var DOMKeyframesResolver = /*#__PURE__*/ class extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue2) {
         super(unresolvedKeyframes, onComplete, name, motionValue2, motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.owner, true);
     }
@@ -2467,7 +2467,7 @@ function pregenerateKeyframes(keyframes2, options) {
         ease: 'linear',
     };
 }
-var AcceleratedAnimation = class extends BaseAnimation {
+var AcceleratedAnimation = /*#__PURE__*/ class extends BaseAnimation {
     constructor(options) {
         super(options);
         const { name, motionValue: motionValue2, keyframes: keyframes2, } = this.options;
@@ -2481,7 +2481,7 @@ var AcceleratedAnimation = class extends BaseAnimation {
             return false;
         }
         if (requiresPregeneratedKeyframes(this.options)) {
-            const _f = this.options, { onComplete, onUpdate, motionValue: motionValue3 } = _f, options = __rest(_f, ["onComplete", "onUpdate", "motionValue"]);
+            const _j = this.options, { onComplete, onUpdate, motionValue: motionValue3 } = _j, options = __rest(_j, ["onComplete", "onUpdate", "motionValue"]);
             const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
             keyframes2 = pregeneratedAnimation.keyframes;
             if (keyframes2.length === 1) {
@@ -2609,7 +2609,7 @@ var AcceleratedAnimation = class extends BaseAnimation {
             return;
         }
         if (this.time) {
-            const _f = this.options, { motionValue: motionValue2, onUpdate, onComplete } = _f, options = __rest(_f, ["motionValue", "onUpdate", "onComplete"]);
+            const _j = this.options, { motionValue: motionValue2, onUpdate, onComplete } = _j, options = __rest(_j, ["motionValue", "onUpdate", "onComplete"]);
             const sampleAnimation = new MainThreadAnimation(Object.assign(Object.assign({}, options), { keyframes: keyframes2, duration,
                 type, ease: ease2, times, isGenerator: true }));
             const sampleTime = secondsToMilliseconds(this.time);
@@ -2658,7 +2658,7 @@ function moveItem([...arr], fromIndex, toIndex) {
     }
     return arr;
 }
-var SubscriptionManager = class {
+var SubscriptionManager = /*#__PURE__*/ class {
     constructor() {
         this.subscriptions = [];
     }
@@ -2694,7 +2694,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
@@ -2994,8 +2994,8 @@ var getDefaultTransition = (valueKey, { keyframes: keyframes2, }) => {
     }
     return ease;
 };
-function isTransitionDefined(_f) {
-    var { when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed } = _f, transition = __rest(_f, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from", "elapsed"]);
+function isTransitionDefined(_j) {
+    var { when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed } = _j, transition = __rest(_j, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from", "elapsed"]);
     return !!Object.keys(transition).length;
 }
 function getValueTransition(transition, key7) {
@@ -3016,7 +3016,7 @@ function observeTimeline(update, timeline) {
     return () => cancelFrame(onFrame);
 }
 var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-var GroupPlaybackControls = class {
+var GroupPlaybackControls = /*#__PURE__*/ class {
     constructor(animations2) {
         this.stop = () => this.runAll('stop');
         this.animations = animations2.filter(Boolean);
@@ -3156,7 +3156,7 @@ function setMotionValue(visualElement, key7, value) {
 }
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
-    let _f = resolved || {}, { transitionEnd = {}, transition = {} } = _f, target = __rest(_f, ["transitionEnd", "transition"]);
+    let _j = resolved || {}, { transitionEnd = {}, transition = {} } = _j, target = __rest(_j, ["transitionEnd", "transition"]);
     target = Object.assign(Object.assign({}, target), transitionEnd);
     for (const key7 in target) {
         const value = resolveFinalValueInKeyframes(target[key7]);
@@ -3478,14 +3478,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,
@@ -3518,7 +3518,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++;
@@ -3629,7 +3629,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;
@@ -3746,7 +3746,7 @@ function getClosestProjectingNode(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.
@@ -3800,7 +3800,7 @@ var VisualElement = class {
             this.variantChildren = /* @__PURE__ */ new Set();
         }
         this.manuallyAnimateOnMount = Boolean(parent && parent.current);
-        const _f = this.scrapeMotionValuesFromProps(props, {}, this), { willChange } = _f, initialMotionValues = __rest(_f, ["willChange"]);
+        const _j = this.scrapeMotionValuesFromProps(props, {}, this), { willChange } = _j, initialMotionValues = __rest(_j, ["willChange"]);
         for (const key7 in initialMotionValues) {
             const value = initialMotionValues[key7];
             if (latestValues[key7] !== void 0 && isMotionValue(value)) {
@@ -3876,8 +3876,8 @@ var VisualElement = class {
         }
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures(_f, isStrict, preloadedFeatures2, initialLayoutGroupConfig) {
-        var { children } = _f, renderedProps = __rest(_f, ["children"]);
+    loadFeatures(_j, isStrict, preloadedFeatures2, initialLayoutGroupConfig) {
+        var { children } = _j, renderedProps = __rest(_j, ["children"]);
         let ProjectionNodeConstructor;
         let MeasureLayout2;
         if (false) {
@@ -4331,10 +4331,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     const pathSpacing = px.transform(spacing);
     attrs[keys23.array] = `${pathLength} ${pathSpacing}`;
 }
-function buildSVGAttrs(state, _f, options, isSVGTag2, transformTemplate2) {
-    var { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0 } = _f, 
+function buildSVGAttrs(state, _j, options, isSVGTag2, transformTemplate2) {
+    var { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0 } = _j, 
     // This is object creation, which we try to avoid per-frame.
-    latest = __rest(_f, ["attrX", "attrY", "attrScale", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+    latest = __rest(_j, ["attrX", "attrY", "attrScale", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
     buildHTMLStyles(state, latest, options, transformTemplate2);
     if (isSVGTag2) {
         if (state.style.viewBox) {
@@ -4510,13 +4510,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;
@@ -4562,7 +4562,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;
@@ -4671,8 +4671,8 @@ var fireObserverCallback = (entry) => {
 var fireAllObserverCallbacks = (entries) => {
     entries.forEach(fireObserverCallback);
 };
-function initIntersectionObserver(_f) {
-    var { root } = _f, options = __rest(_f, ["root"]);
+function initIntersectionObserver(_j) {
+    var { root } = _j, options = __rest(_j, ["root"]);
     const lookupRoot = root || document;
     if (!observers.has(lookupRoot)) {
         observers.set(lookupRoot, {});
@@ -4697,7 +4697,7 @@ var thresholdNames = {
     some: 0,
     all: 1,
 };
-var InViewFeature = class extends Feature {
+var InViewFeature = /*#__PURE__*/ class extends Feature {
     constructor() {
         super(...arguments);
         this.hasEnteredView = false;
@@ -4763,7 +4763,7 @@ var gestureAnimations = {
         Feature: HoverGesture,
     },
 };
-var PanSession = class {
+var PanSession = /*#__PURE__*/ class {
     constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
         this.startEvent = null;
         this.lastMoveEvent = null;
@@ -5127,7 +5127,7 @@ var getContextWindow = ({ current, }) => {
     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;
@@ -5484,7 +5484,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;
@@ -5508,7 +5508,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;
@@ -5598,7 +5598,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
@@ -5798,7 +5798,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 = [];
     }
@@ -6748,16 +6748,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.isVisible) {
                 return hiddenVisibility;
             }
-            const styles2 = {
+            const styles4 = {
                 visibility: '',
             };
             const transformTemplate2 = this.getTransformTemplate();
             if (this.needsReset) {
                 this.needsReset = false;
-                styles2.opacity = '';
-                styles2.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || '';
-                styles2.transform = transformTemplate2 ? transformTemplate2(this.latestValues, '') : 'none';
-                return styles2;
+                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) {
@@ -6775,14 +6775,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const valuesToRender = lead.animationValues || lead.latestValues;
             this.applyTransformsToTarget();
-            styles2.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+            styles4.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
             if (transformTemplate2) {
-                styles2.transform = transformTemplate2(valuesToRender, styles2.transform);
+                styles4.transform = transformTemplate2(valuesToRender, styles4.transform);
             }
             const { x, y, } = this.projectionDelta;
-            styles2.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+            styles4.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
             if (lead.animationValues) {
-                styles2.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
@@ -6791,7 +6791,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                         : valuesToRender.opacityExit;
             }
             else {
-                styles2.opacity = lead === this
+                styles4.opacity = lead === this
                     ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : ''
                     : valuesToRender.opacityExit !== void 0
                         ? valuesToRender.opacityExit
@@ -6801,23 +6801,23 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 if (valuesToRender[key7] === void 0)
                     continue;
                 const { correct, applyTo, } = scaleCorrectors[key7];
-                const corrected = styles2.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++) {
-                        styles2[applyTo[i]] = corrected;
+                        styles4[applyTo[i]] = corrected;
                     }
                 }
                 else {
-                    styles2[key7] = corrected;
+                    styles4[key7] = corrected;
                 }
             }
             if (this.options.layoutId) {
-                styles2.pointerEvents = lead === this
+                styles4.pointerEvents = lead === this
                     ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ''
                     : 'none';
             }
-            return styles2;
+            return styles4;
         }
         clearSnapshot() {
             this.resumeFrom = this.snapshot = void 0;
@@ -7032,7 +7032,7 @@ var drag = {
         MeasureLayout,
     },
 };
-var DOMVisualElement = class extends VisualElement {
+var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
     constructor() {
         super(...arguments);
         this.KeyframeResolver = DOMKeyframesResolver;
@@ -7051,7 +7051,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';
@@ -7093,7 +7093,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';
@@ -7173,7 +7173,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) {
@@ -7398,8 +7398,8 @@ var AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitB
         children: exitingChildren.size ? childrenToRender : childrenToRender.map((child) => cloneElement2(child)),
     });
 };
-function MotionConfig(_f) {
-    var { children, isValidProp } = _f, config = __rest(_f, ["children", "isValidProp"]);
+function MotionConfig(_j) {
+    var { children, isValidProp } = _j, config = __rest(_j, ["children", "isValidProp"]);
     isValidProp && loadExternalIsValidProp(isValidProp);
     config = Object.assign(Object.assign({}, useContext3(MotionConfigContext)), config);
     config.isStatic = useConstant(() => config.isStatic);
@@ -7419,8 +7419,8 @@ function LazyMotion({ children, features, strict = false, }) {
     }
     useEffect(() => {
         if (isLazyBundle(features)) {
-            features().then((_f) => {
-                var { renderer } = _f, loadedFeatures = __rest(_f, ["renderer"]);
+            features().then((_j) => {
+                var { renderer } = _j, loadedFeatures = __rest(_j, ["renderer"]);
                 loadFeatures(loadedFeatures);
                 loadedRenderer.current = renderer;
                 setIsLoaded(true);
@@ -7567,8 +7567,8 @@ function checkReorder(order, value, offset, velocity) {
     }
     return order;
 }
-function ReorderGroup(_f, externalRef) {
-    var { children, as = 'ul', axis = 'y', onReorder, values } = _f, props = __rest(_f, ["children", "as", "axis", "onReorder", "values"]);
+function ReorderGroup(_j, externalRef) {
+    var { children, as = 'ul', axis = 'y', onReorder, values } = _j, props = __rest(_j, ["children", "as", "axis", "onReorder", "values"]);
     const Component33 = useConstant(() => motion(as));
     const order = [];
     const isReordering = useRef(false);
@@ -7616,8 +7616,8 @@ function compareMin(a, b) {
 function useDefaultMotionValue(value, defaultValue = 0) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);
 }
-function ReorderItem(_f, externalRef) {
-    var { children, style = {}, value, as = 'li', onDrag, layout: layout2 = true } = _f, props = __rest(_f, ["children", "style", "value", "as", "onDrag", "layout"]);
+function ReorderItem(_j, externalRef) {
+    var { children, style = {}, value, as = 'li', onDrag, layout: layout2 = true } = _j, props = __rest(_j, ["children", "style", "value", "as", "onDrag", "layout"]);
     const Component33 = useConstant(() => motion(as));
     const context = useContext3(ReorderContext);
     const point2 = {
@@ -8044,8 +8044,8 @@ var scrollListeners = /* @__PURE__ */ new WeakMap();
 var resizeListeners = /* @__PURE__ */ new WeakMap();
 var onScrollHandlers = /* @__PURE__ */ new WeakMap();
 var getEventTarget = (element) => element === document.documentElement ? window : element;
-function scrollInfo(onScroll, _f = {}) {
-    var { container = document.documentElement } = _f, options = __rest(_f, ["container"]);
+function scrollInfo(onScroll, _j = {}) {
+    var { container = document.documentElement } = _j, options = __rest(_j, ["container"]);
     let containerHandlers = onScrollHandlers.get(container);
     if (!containerHandlers) {
         containerHandlers = /* @__PURE__ */ new Set();
@@ -8114,8 +8114,8 @@ var createScrollMotionValues = () => ({
     scrollXProgress: motionValue(0),
     scrollYProgress: motionValue(0),
 });
-function useScroll(_f = {}) {
-    var { container, target, layoutEffect = true } = _f, options = __rest(_f, ["container", "target", "layoutEffect"]);
+function useScroll(_j = {}) {
+    var { container, target, layoutEffect = true } = _j, options = __rest(_j, ["container", "target", "layoutEffect"]);
     const values = useConstant(createScrollMotionValues);
     const useLifecycleEffect = layoutEffect ? useIsomorphicLayoutEffect : useEffect;
     useLifecycleEffect(() => {
@@ -8164,7 +8164,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 = [];
@@ -8380,8 +8380,8 @@ function compareByTime(a, b) {
     }
 }
 var defaultSegmentEasing = 'easeInOut';
-function createAnimationsFromSequence(sequence2, _f = {}, scope) {
-    var { defaultTransition = {} } = _f, sequenceTransition = __rest(_f, ["defaultTransition"]);
+function createAnimationsFromSequence(sequence2, _j = {}, scope) {
+    var { defaultTransition = {} } = _j, sequenceTransition = __rest(_j, ["defaultTransition"]);
     const defaultDuration = defaultTransition.duration || 0.3;
     const animationDefinitions = /* @__PURE__ */ new Map();
     const sequences = /* @__PURE__ */ new Map();
@@ -8649,7 +8649,7 @@ function useInView(ref, { root, margin, amount, once = false, } = {}) {
     }, [root, ref, margin, once, amount,]);
     return isInView;
 }
-var DragControls = class {
+var DragControls = /*#__PURE__*/ class {
     constructor() {
         this.componentControls = /* @__PURE__ */ new Set();
     }
@@ -8841,7 +8841,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();
@@ -8990,7 +8990,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.IBCXHSKM.js
+// https :https://app.framerstatic.com/framer.VEJ3JK5Y.js
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
@@ -9003,7 +9003,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;
@@ -10687,11 +10687,11 @@ function renderPage(Page4, defaultPageStyle) {
     };
     return React4.isValidElement(Page4) ? React4.cloneElement(Page4, style) : React4.createElement(Page4, style);
 }
-var NotFoundError = class extends Error {
+var NotFoundError = /*#__PURE__*/ class extends Error {
 };
-var ErrorBoundaryCaughtError = class extends Error {
+var ErrorBoundaryCaughtError = /*#__PURE__*/ class extends Error {
 };
-var ErrorBoundary = class extends Component {
+var ErrorBoundary = /*#__PURE__*/ class extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -11031,7 +11031,7 @@ function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, co
         };
     });
 }
-function getLocalizedNavigationPath(_f) {
+function getLocalizedNavigationPath(_j) {
     return __awaiter(this, arguments, void 0, function* ({ currentLocale, nextLocale, defaultLocale, route, pathVariables, collectionUtils, preserveQueryParams, }) {
         const { path, } = route;
         let result = {
@@ -11046,7 +11046,7 @@ function getLocalizedNavigationPath(_f) {
                 const pathReplacement = yield replacePathVariables(path, currentLocale, nextLocale, defaultLocale, route.collectionId, pathVariables, collectionUtils);
                 result = pathReplacement;
             }
-            catch (_j) { }
+            catch (_k) { }
         }
         if (nextLocale.slug) {
             result.path = '/' + nextLocale.slug + result.path;
@@ -11246,8 +11246,8 @@ function valuesToCSSKeyframes(values, progress2, page, maskGenerator) {
 function getMaskGenerator(type) {
     return type ? maskGenerators[type] : void 0;
 }
-function createPageTransitionRules(page, _f) {
-    var { transition } = _f, values = __rest(_f, ["transition"]);
+function createPageTransitionRules(page, _j) {
+    var { transition } = _j, values = __rest(_j, ["transition"]);
     var _a;
     const name = 'view-transition-' + page;
     const settings = {
@@ -11421,7 +11421,7 @@ function pushRouteState(routeId, route, { currentRoutePath, currentPathVariables
             localeId,
         }, newPath);
     }
-    catch (_f) { }
+    catch (_j) { }
 }
 function isHistoryState(data2) {
     const routeIdKey = 'routeId';
@@ -11578,7 +11578,7 @@ function switchLocale(options) {
                 paginationInfo: window.history.state.paginationInfo,
             }, result.path);
         }
-        catch (_f) { }
+        catch (_j) { }
         return result;
     });
 }
@@ -11590,7 +11590,7 @@ function pushLoadMoreHistory(hash2, paginationInfo) {
         const newPaginationInfo = Object.assign(Object.assign({}, currentHistoryState.paginationInfo), { [hash2]: paginationInfo });
         replaceHistoryState(Object.assign(Object.assign({}, currentHistoryState), { paginationInfo: newPaginationInfo }));
     }
-    catch (_f) { }
+    catch (_j) { }
 }
 function isSamePage(a, b) {
     if (a.routeId !== b.routeId)
@@ -11759,7 +11759,7 @@ function RoutesProvider({ routes, children, }) {
         children,
     });
 }
-var SuspenseErrorBoundary = class extends Component {
+var SuspenseErrorBoundary = /*#__PURE__*/ class extends Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -11942,7 +11942,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                     startViewTransition2(currentRouteRef.current, currentRouteId2, () => startTransition2(forceUpdate));
                     monitorNextRender();
                 }
-                catch (_f) { }
+                catch (_j) { }
             }),
         };
     }, [activeLocale, collectionUtils, forceUpdate, locales, monitorNextRender, preserveQueryParams, routes, startViewTransition2,]);
@@ -12326,7 +12326,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', {});
@@ -12449,7 +12449,7 @@ function animatableInterpolation(value, currentInterpolation) {
         },
     };
 }
-var AnimatableValue = class {
+var AnimatableValue = /*#__PURE__*/ class {
     constructor(value) {
         this.value = value;
         __publicField(this, 'observers', new Observers());
@@ -12641,7 +12641,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');
@@ -12692,7 +12692,7 @@ var BezierAnimator = class {
         return 1 / (200 * duration);
     }
 };
-var UnitBezier = class {
+var UnitBezier = /*#__PURE__*/ class {
     constructor(point1, point2) {
         __publicField(this, 'a');
         __publicField(this, 'b');
@@ -12745,7 +12745,7 @@ var UnitBezier = class {
         return t2;
     }
 };
-var Integrator = class {
+var Integrator = /*#__PURE__*/ class {
     constructor(accelerationFunction) {
         __publicField(this, 'accelerationForState');
         this.accelerationForState = accelerationFunction;
@@ -12780,7 +12780,7 @@ var Integrator = class {
         return output;
     }
 };
-var FrictionAnimator = class {
+var FrictionAnimator = /*#__PURE__*/ class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'state');
@@ -12960,7 +12960,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');
@@ -13042,7 +13042,7 @@ var Defaults = {
         tolerance: 1,
     },
 };
-var InertialScrollAnimator = class {
+var InertialScrollAnimator = /*#__PURE__*/ class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'current');
@@ -13609,7 +13609,7 @@ var matchers = /* @__PURE__ */ (() => {
     };
 })();
 function stringToObject(inputColor) {
-    var _f, _j, _k, _l, _m, _o, _p, _q, _t, _u, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
+    var _j, _k, _l, _m, _o, _p, _q, _t, _u, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
     if (inputColor.includes('gradient('))
         return false;
     if (inputColor.includes('var('))
@@ -13633,9 +13633,9 @@ function stringToObject(inputColor) {
     let match;
     if (match = matchers.rgb.exec(color2)) {
         return {
-            r: parseInt((_f = match[1]) !== null && _f !== void 0 ? _f : ''),
-            g: parseInt((_j = match[2]) !== null && _j !== void 0 ? _j : ''),
-            b: parseInt((_k = match[3]) !== null && _k !== void 0 ? _k : ''),
+            r: parseInt((_j = match[1]) !== null && _j !== void 0 ? _j : ''),
+            g: parseInt((_k = match[2]) !== null && _k !== void 0 ? _k : ''),
+            b: parseInt((_l = match[3]) !== null && _l !== void 0 ? _l : ''),
             a: 1,
             format: 'rgb',
             /* RGB */
@@ -13643,19 +13643,19 @@ function stringToObject(inputColor) {
     }
     if (match = matchers.rgba.exec(color2)) {
         return {
-            r: parseInt((_l = match[1]) !== null && _l !== void 0 ? _l : ''),
-            g: parseInt((_m = match[2]) !== null && _m !== void 0 ? _m : ''),
-            b: parseInt((_o = match[3]) !== null && _o !== void 0 ? _o : ''),
-            a: parseFloat((_p = match[4]) !== null && _p !== void 0 ? _p : ''),
+            r: parseInt((_m = match[1]) !== null && _m !== void 0 ? _m : ''),
+            g: parseInt((_o = match[2]) !== null && _o !== void 0 ? _o : ''),
+            b: parseInt((_p = match[3]) !== null && _p !== void 0 ? _p : ''),
+            a: parseFloat((_q = match[4]) !== null && _q !== void 0 ? _q : ''),
             format: 'rgb',
             /* RGB */
         };
     }
     if (match = matchers.hsl.exec(color2)) {
         return {
-            h: parseInt((_q = match[1]) !== null && _q !== void 0 ? _q : ''),
-            s: percentToFraction((_t = match[2]) !== null && _t !== void 0 ? _t : ''),
-            l: percentToFraction((_u = match[3]) !== null && _u !== void 0 ? _u : ''),
+            h: parseInt((_t = match[1]) !== null && _t !== void 0 ? _t : ''),
+            s: percentToFraction((_u = match[2]) !== null && _u !== void 0 ? _u : ''),
+            l: percentToFraction((_w = match[3]) !== null && _w !== void 0 ? _w : ''),
             a: 1,
             format: 'hsl',
             /* HSL */
@@ -13663,19 +13663,19 @@ function stringToObject(inputColor) {
     }
     if (match = matchers.hsla.exec(color2)) {
         return {
-            h: parseInt((_w = match[1]) !== null && _w !== void 0 ? _w : ''),
-            s: percentToFraction((_x = match[2]) !== null && _x !== void 0 ? _x : ''),
-            l: percentToFraction((_y = match[3]) !== null && _y !== void 0 ? _y : ''),
-            a: parseFloat((_z = match[4]) !== null && _z !== void 0 ? _z : ''),
+            h: parseInt((_x = match[1]) !== null && _x !== void 0 ? _x : ''),
+            s: percentToFraction((_y = match[2]) !== null && _y !== void 0 ? _y : ''),
+            l: percentToFraction((_z = match[3]) !== null && _z !== void 0 ? _z : ''),
+            a: parseFloat((_0 = match[4]) !== null && _0 !== void 0 ? _0 : ''),
             format: 'hsl',
             /* HSL */
         };
     }
     if (match = matchers.hsv.exec(color2)) {
         return {
-            h: parseInt((_0 = match[1]) !== null && _0 !== void 0 ? _0 : ''),
-            s: percentToFraction((_1 = match[2]) !== null && _1 !== void 0 ? _1 : ''),
-            v: percentToFraction((_2 = match[3]) !== null && _2 !== void 0 ? _2 : ''),
+            h: parseInt((_1 = match[1]) !== null && _1 !== void 0 ? _1 : ''),
+            s: percentToFraction((_2 = match[2]) !== null && _2 !== void 0 ? _2 : ''),
+            v: percentToFraction((_3 = match[3]) !== null && _3 !== void 0 ? _3 : ''),
             a: 1,
             format: 'hsv',
             /* HSV */
@@ -13683,29 +13683,29 @@ function stringToObject(inputColor) {
     }
     if (match = matchers.hsva.exec(color2)) {
         return {
-            h: parseInt((_3 = match[1]) !== null && _3 !== void 0 ? _3 : ''),
-            s: percentToFraction((_4 = match[2]) !== null && _4 !== void 0 ? _4 : ''),
-            v: percentToFraction((_5 = match[3]) !== null && _5 !== void 0 ? _5 : ''),
-            a: parseFloat((_6 = match[4]) !== null && _6 !== void 0 ? _6 : ''),
+            h: parseInt((_4 = match[1]) !== null && _4 !== void 0 ? _4 : ''),
+            s: percentToFraction((_5 = match[2]) !== null && _5 !== void 0 ? _5 : ''),
+            v: percentToFraction((_6 = match[3]) !== null && _6 !== void 0 ? _6 : ''),
+            a: parseFloat((_7 = match[4]) !== null && _7 !== void 0 ? _7 : ''),
             format: 'hsv',
             /* HSV */
         };
     }
     if (match = matchers.hex8.exec(color2)) {
         return {
-            r: parseIntFromHex((_7 = match[1]) !== null && _7 !== void 0 ? _7 : ''),
-            g: parseIntFromHex((_8 = match[2]) !== null && _8 !== void 0 ? _8 : ''),
-            b: parseIntFromHex((_9 = match[3]) !== null && _9 !== void 0 ? _9 : ''),
-            a: convertHexToDecimal((_10 = match[4]) !== null && _10 !== void 0 ? _10 : ''),
+            r: parseIntFromHex((_8 = match[1]) !== null && _8 !== void 0 ? _8 : ''),
+            g: parseIntFromHex((_9 = match[2]) !== null && _9 !== void 0 ? _9 : ''),
+            b: parseIntFromHex((_10 = match[3]) !== null && _10 !== void 0 ? _10 : ''),
+            a: convertHexToDecimal((_11 = match[4]) !== null && _11 !== void 0 ? _11 : ''),
             format: namedColor ? 'name' : 'hex',
             /* HEX */
         };
     }
     if (match = matchers.hex6.exec(color2)) {
         return {
-            r: parseIntFromHex((_11 = match[1]) !== null && _11 !== void 0 ? _11 : ''),
-            g: parseIntFromHex((_12 = match[2]) !== null && _12 !== void 0 ? _12 : ''),
-            b: parseIntFromHex((_13 = match[3]) !== null && _13 !== void 0 ? _13 : ''),
+            r: parseIntFromHex((_12 = match[1]) !== null && _12 !== void 0 ? _12 : ''),
+            g: parseIntFromHex((_13 = match[2]) !== null && _13 !== void 0 ? _13 : ''),
+            b: parseIntFromHex((_14 = match[3]) !== null && _14 !== void 0 ? _14 : ''),
             a: 1,
             format: namedColor ? 'name' : 'hex',
             /* HEX */
@@ -14237,7 +14237,7 @@ var DefaultInterpolationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var ValueInterpolation = class {
+var ValueInterpolation = /*#__PURE__*/ class {
     /**
      * @internal
      */
@@ -14290,7 +14290,7 @@ var Defaults2 = /* @__PURE__ */ (() => ({
     delta: 1 / 60,
     maxValues: 1e4,
 }))();
-var PrecalculatedAnimator = class {
+var PrecalculatedAnimator = /*#__PURE__*/ class {
     constructor(options) {
         __publicField(this, 'animator');
         __publicField(this, 'values');
@@ -14350,7 +14350,7 @@ var PrecalculatedAnimator = class {
     }
 };
 var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)();
-var EventEmitter = class {
+var EventEmitter = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, '_emitter', new EventEmitter3());
     }
@@ -14469,7 +14469,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
      */
@@ -14681,7 +14681,7 @@ var RenderTarget = {
         return false;
     },
 };
-var AnimationDriver = class {
+var AnimationDriver = /*#__PURE__*/ class {
     constructor(animator, updateCallback, finishedCallback) {
         this.animator = animator;
         this.updateCallback = updateCallback;
@@ -14708,7 +14708,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);
@@ -14729,7 +14729,7 @@ var DefaultDeprecatedAnimationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var FramerAnimation = class {
+var FramerAnimation = /*#__PURE__*/ class {
     /**
      * @internal
      */
@@ -15046,7 +15046,7 @@ function assert(condition, ...msg) {
                 e.stack = lines.join('\n');
             }
         }
-        catch (_f) { }
+        catch (_j) { }
     }
     throw e;
 }
@@ -15102,7 +15102,7 @@ function LayoutIdProvider({ children, }) {
     });
     const usedIds = useRef(/* @__PURE__ */ new Set()).current;
     const getLayoutId = useCallback(({ id: id3, name, duplicatedFrom, }) => {
-        var _f;
+        var _j;
         if (!id3)
             return null;
         const cacheKey = name ? 'byName' : 'byId';
@@ -15165,7 +15165,7 @@ function LayoutIdProvider({ children, }) {
         }
         const rootDuplicatedId = duplicatedFrom == null ? void 0 : duplicatedFrom[0];
         const identifier = name || rootDuplicatedId || id3;
-        const value = ((_f = cache2.current.count[cacheKey][identifier]) !== null && _f !== void 0 ? _f : -1) + 1;
+        const value = ((_j = cache2.current.count[cacheKey][identifier]) !== null && _j !== void 0 ? _j : -1) + 1;
         const { layoutId, value: nextValue, } = nextLayoutId(identifier, value, usedIds);
         cache2.current.count[cacheKey][identifier] = nextValue;
         screen.current[cacheKey][id3] = layoutId;
@@ -15243,8 +15243,8 @@ function nextLayoutId(identifier, initialValue, usedIds) {
         value,
     };
 }
-function AutomaticLayoutIds(_f) {
-    var { enabled = true } = _f, props = __rest(_f, ["enabled"]);
+function AutomaticLayoutIds(_j) {
+    var { enabled = true } = _j, props = __rest(_j, ["enabled"]);
     const context = useContext3(LayoutIdContext);
     const contextValue = useMemo(() => {
         return Object.assign(Object.assign({}, context), { enabled });
@@ -15348,7 +15348,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', {});
@@ -15392,8 +15392,8 @@ var ErrorBoundary2 = class extends Component {
         return this.props.children;
     }
 };
-function Device(_f) {
-    var { canResize = false, children, ResizeObserver: ResizeObserver2 = safeWindow.ResizeObserver } = _f, options = __rest(_f, ["canResize", "children", "ResizeObserver"]);
+function Device(_j) {
+    var { canResize = false, children, ResizeObserver: ResizeObserver2 = safeWindow.ResizeObserver } = _j, options = __rest(_j, ["canResize", "children", "ResizeObserver"]);
     var _a, _b;
     const optionsRef = React4.useRef(void 0);
     if (optionsRef.current === void 0)
@@ -15423,8 +15423,8 @@ function Device(_f) {
         };
     }, [scaleDataRef,]);
     const updateScale = React4.useCallback(() => {
-        var _f;
-        const { deviceOptions, scaleTo, onScaleChange, } = (_f = optionsRef.current) !== null && _f !== void 0 ? _f : {};
+        var _j;
+        const { deviceOptions, scaleTo, onScaleChange, } = (_j = optionsRef.current) !== null && _j !== void 0 ? _j : {};
         if (!deviceOptions || !scaleTo || scaleTo !== 'dynamic' || !containerRef.current)
             return;
         if (containerRef.current.offsetWidth === 0 || containerRef.current.offsetHeight === 0)
@@ -15520,7 +15520,7 @@ function getComponentSize(options) {
     };
 }
 function getDeviceStyle({ scaleTo, deviceOptions, overrideTheme, } = {}) {
-    var _f, _j, _k;
+    var _j, _k, _l;
     const noDeviceStyle = {
         containerStyle: {},
         deviceStyle: {},
@@ -15545,9 +15545,9 @@ function getDeviceStyle({ scaleTo, deviceOptions, overrideTheme, } = {}) {
             boxShadows.push(`inset 0 0 15px ${overriddenColors.bezelShadeColor || appearance.bezelShadeColor}`);
         }
     }
-    const handOffsetLeft = (_f = (hand == null ? void 0 : hand.offsetLeft)) !== null && _f !== void 0 ? _f : 0;
-    const handOffsetRight = (_j = (hand == null ? void 0 : hand.offsetRight)) !== null && _j !== void 0 ? _j : 0;
-    const handOffsetBottom = (_k = (hand == null ? void 0 : hand.offsetBottom)) !== null && _k !== void 0 ? _k : 0;
+    const handOffsetLeft = (_j = (hand == null ? void 0 : hand.offsetLeft)) !== null && _j !== void 0 ? _j : 0;
+    const handOffsetRight = (_k = (hand == null ? void 0 : hand.offsetRight)) !== null && _k !== void 0 ? _k : 0;
+    const handOffsetBottom = (_l = (hand == null ? void 0 : hand.offsetBottom)) !== null && _l !== void 0 ? _l : 0;
     const handScale = (deviceWidth - handOffsetLeft - handOffsetRight) / HAND_IMG_GAP_WIDTH;
     return {
         containerStyle: {
@@ -16524,11 +16524,11 @@ var ConstraintValues = {
     },
     // Returns a parent-relative rect given concrete ConstraintValues.
     toRect: (values, parentSizeInfo = null, autoSize = null, pixelAlign = false, freeSpace = null) => {
-        var _f;
+        var _j;
         let x = values.left || 0;
         let y = values.top || 0;
         const { width, height, } = ConstraintValues.toSize(values, parentSizeInfo, autoSize, freeSpace);
-        const parentSizeForPositioning = (_f = (parentSizeInfo == null ? void 0 : parentSizeInfo.positioning)) !== null && _f !== void 0 ? _f : null;
+        const parentSizeForPositioning = (_j = (parentSizeInfo == null ? void 0 : parentSizeInfo.positioning)) !== null && _j !== void 0 ? _j : null;
         const positioningParentWidth = parentSizeForPositioning ? Animatable.getNumber(parentSizeForPositioning.width) : null;
         const positioningParentHeight = parentSizeForPositioning ? Animatable.getNumber(parentSizeForPositioning.height) : null;
         if (values.left !== null) {
@@ -16869,6 +16869,9 @@ 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';
@@ -16897,6 +16900,7 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
     ControlType2['Cursor'] = 'cursor';
     ControlType2['Padding'] = 'padding';
     ControlType2['BorderRadius'] = 'borderradius';
+    ControlType2['CollectionReference'] = 'collectionreference';
     return ControlType2;
 })(ControlType || {});
 var isFlexboxGapSupportedCached;
@@ -17464,7 +17468,7 @@ function injectCSSRule(cssRule, sheet, cache2 = defaultCache) {
     try {
         sheet.insertRule(cssRule, sheet.cssRules.length);
     }
-    catch (_f) { }
+    catch (_j) { }
 }
 var componentCSSRules = [`[data-framer-component-type] { position: absolute; }`,];
 var textAlignmentRule = `
@@ -17760,8 +17764,8 @@ function injectComponentCSSRules() {
     if (didInject)
         return;
     didInject = true;
-    const styles2 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
-    for (const rule of styles2) {
+    const styles4 = RenderTarget.current() === RenderTarget.preview ? combinedCSSRulesForPreview : combinedCSSRules;
+    for (const rule of styles4) {
         injectCSSRule(rule, void 0, void 0);
     }
 }
@@ -17807,6 +17811,7 @@ function getControlDefaultValue(control) {
     try {
         switch (control.type) {
             case 'string':
+            case 'collectionreference':
             case 'color':
             case 'date':
             case 'link':
@@ -17855,7 +17860,7 @@ function getControlDefaultValue(control) {
                 return void 0;
         }
     }
-    catch (_f) {
+    catch (_j) {
         return void 0;
     }
 }
@@ -19025,8 +19030,8 @@ var devicePresetsMap = /* @__PURE__ */ devicePresets.reduce((map, preset) => {
     return map;
 }, {});
 function getDevicePreset(presetId) {
-    var _f;
-    return (_f = devicePresetsMap[presetId]) !== null && _f !== void 0 ? _f : devicePresetsMap[defaultPresetId];
+    var _j;
+    return (_j = devicePresetsMap[presetId]) !== null && _j !== void 0 ? _j : devicePresetsMap[defaultPresetId];
 }
 var defaultDeviceProps = {
     preset: defaultPresetId,
@@ -19047,7 +19052,7 @@ var defaultDeviceProps = {
     backgroundColor: void 0,
 };
 function convertPropsToDeviceOptions(props, { forceOldClay = false, } = {}) {
-    var _f, _j, _k, _l, _m, _o;
+    var _j, _k, _l, _m, _o, _p;
     var _a;
     if (props.preset === 'no-device') {
         return;
@@ -19095,10 +19100,10 @@ function convertPropsToDeviceOptions(props, { forceOldClay = false, } = {}) {
         };
     }
     else {
-        deviceWidth = preset.screenWidth + ((_f = preset.clayBezelLeft) !== null && _f !== void 0 ? _f : 0) + ((_j = preset.clayBezelRight) !== null && _j !== void 0 ? _j : 0);
-        deviceHeight = preset.screenHeight + ((_k = preset.clayBezelTop) !== null && _k !== void 0 ? _k : 0) + ((_l = preset.clayBezelBottom) !== null && _l !== void 0 ? _l : 0);
-        screenOffsetTop = (_m = preset.clayBezelTop) !== null && _m !== void 0 ? _m : 0;
-        screenOffsetLeft = (_o = preset.clayBezelLeft) !== null && _o !== void 0 ? _o : 0;
+        deviceWidth = preset.screenWidth + ((_j = preset.clayBezelLeft) !== null && _j !== void 0 ? _j : 0) + ((_k = preset.clayBezelRight) !== null && _k !== void 0 ? _k : 0);
+        deviceHeight = preset.screenHeight + ((_l = preset.clayBezelTop) !== null && _l !== void 0 ? _l : 0) + ((_m = preset.clayBezelBottom) !== null && _m !== void 0 ? _m : 0);
+        screenOffsetTop = (_o = preset.clayBezelTop) !== null && _o !== void 0 ? _o : 0;
+        screenOffsetLeft = (_p = preset.clayBezelLeft) !== null && _p !== void 0 ? _p : 0;
         if (preset.externalClay && !forceOldClay) {
             deviceWidth = preset.externalClay.width;
             deviceHeight = preset.externalClay.height;
@@ -19221,8 +19226,8 @@ function usePrototypingMetaTags() {
         });
     }, []);
 }
-function DeviceCodeComponentInner(_f) {
-    var { children } = _f, props = __rest(_f, ["children"]);
+function DeviceCodeComponentInner(_j) {
+    var { children } = _j, props = __rest(_j, ["children"]);
     usePrototypingMetaTags();
     const deviceOptions = convertPropsToDeviceOptions(props, {
         forceOldClay: true,
@@ -19553,8 +19558,8 @@ var implementation = {
     // We need a default implementation for useImageSource and useImageElement as it is used for rendering image backgrounds which would break otherwise.
     // The default value is used for HTML export and when using the library without Framer.
     useImageSource(image) {
-        var _f;
-        return (_f = image.src) !== null && _f !== void 0 ? _f : '';
+        var _j;
+        return (_j = image.src) !== null && _j !== void 0 ? _j : '';
     },
     useImageElement(image, rect, nodeId) {
         const element = new Image();
@@ -19588,10 +19593,10 @@ function _injectRuntime(injectedRuntime) {
     isRuntimeInjected = true;
 }
 function minZoomForPixelatedImageRendering(image, containerSize, devicePixelRatio3 = 1) {
-    var _f, _j, _k, _l;
+    var _j, _k, _l, _m;
     let { width: frameWidth, height: frameHeight, } = containerSize;
-    const imageWidth = (_j = (_f = image.pixelWidth) !== null && _f !== void 0 ? _f : image.intrinsicWidth) !== null && _j !== void 0 ? _j : 0;
-    const imageHeight = (_l = (_k = image.pixelHeight) !== null && _k !== void 0 ? _k : image.intrinsicHeight) !== null && _l !== void 0 ? _l : 0;
+    const imageWidth = (_k = (_j = image.pixelWidth) !== null && _j !== void 0 ? _j : image.intrinsicWidth) !== null && _k !== void 0 ? _k : 0;
+    const imageHeight = (_m = (_l = image.pixelHeight) !== null && _l !== void 0 ? _l : image.intrinsicHeight) !== null && _m !== void 0 ? _m : 0;
     if (frameWidth < 1 || frameHeight < 1 || imageWidth < 1 || imageHeight < 1) {
         return void 0;
     }
@@ -19753,8 +19758,8 @@ function OptimizedCanvasImage({ nodeId, image, containerSize, }) {
         },
     });
 }
-function BackgroundImageComponent(_f) {
-    var { layoutId, image } = _f, props = __rest(_f, ["layoutId", "image"]);
+function BackgroundImageComponent(_j) {
+    var { layoutId, image } = _j, props = __rest(_j, ["layoutId", "image"]);
     if (layoutId) {
         layoutId = layoutId + '-background';
     }
@@ -19832,26 +19837,26 @@ function backgroundImageFromProps(props) {
     return applyForwardOverrides(backgroundImage, props);
 }
 function collectBorderStyleForProps(props, style, collapseEqualBorders = true) {
-    const { borderWidth: borderWidth2, borderStyle, borderColor, } = props;
-    if (!borderWidth2) {
+    const { borderWidth, borderStyle, borderColor, } = props;
+    if (!borderWidth) {
         return;
     }
     let borderTop;
     let borderBottom;
     let borderLeft;
     let borderRight;
-    if (typeof borderWidth2 === 'number') {
+    if (typeof borderWidth === 'number') {
         borderTop =
             borderBottom =
                 borderLeft =
                     borderRight =
-                        borderWidth2;
+                        borderWidth;
     }
     else {
-        borderTop = borderWidth2.top || 0;
-        borderBottom = borderWidth2.bottom || 0;
-        borderLeft = borderWidth2.left || 0;
-        borderRight = borderWidth2.right || 0;
+        borderTop = borderWidth.top || 0;
+        borderBottom = borderWidth.bottom || 0;
+        borderLeft = borderWidth.left || 0;
+        borderRight = borderWidth.right || 0;
     }
     if (borderTop === 0 && borderBottom === 0 && borderLeft === 0 && borderRight === 0) {
         return;
@@ -19996,12 +20001,12 @@ function useForceUpdate3() {
 }
 var ResizeObserverPolyfill = /* @__PURE__ */ (() => require_resize_observer_umd().ResizeObserver)();
 var DEFAULT_SIZE = 200;
-var SharedObserver = class {
+var SharedObserver = /*#__PURE__*/ class {
     constructor() {
-        var _f;
+        var _j;
         __publicField(this, 'sharedResizeObserver');
         __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap());
-        const ResizeObserver2 = (_f = safeWindow.ResizeObserver) !== null && _f !== void 0 ? _f : ResizeObserverPolyfill;
+        const ResizeObserver2 = (_j = safeWindow.ResizeObserver) !== null && _j !== void 0 ? _j : ResizeObserverPolyfill;
         this.sharedResizeObserver = new ResizeObserver2(this.updateResizedElements.bind(this));
     }
     updateResizedElements(entries) {
@@ -20066,20 +20071,20 @@ function useMeasuredSize(ref) {
 }
 var SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE = 'data-framer-size-compatibility-wrapper';
 var withMeasuredSize = (Component15) => (props) => {
-    var _f, _j, _k, _l;
+    var _j, _k, _l, _m;
     const ref = React4.useRef(null);
     const size = useMeasuredSize(ref);
     const dataProps = {
         [SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE]: true,
     };
     const shouldRender = Boolean(size);
-    const fallbackWidth = (_f = props.width) !== null && _f !== void 0 ? _f : DEFAULT_SIZE;
-    const fallbackHeight = (_j = props.height) !== null && _j !== void 0 ? _j : DEFAULT_SIZE;
+    const fallbackWidth = (_j = props.width) !== null && _j !== void 0 ? _j : DEFAULT_SIZE;
+    const fallbackHeight = (_k = props.height) !== null && _k !== void 0 ? _k : DEFAULT_SIZE;
     return /* @__PURE__ */ jsx('div', Object.assign(Object.assign({ style: {
             width: '100%',
             height: '100%',
             pointerEvents: 'none',
-        }, ref }, dataProps), { children: shouldRender && /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({}, props), { width: (_k = (size == null ? void 0 : size.width)) !== null && _k !== void 0 ? _k : fallbackWidth, height: (_l = (size == null ? void 0 : size.height)) !== null && _l !== void 0 ? _l : fallbackHeight })) }));
+        }, ref }, dataProps), { children: shouldRender && /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({}, props), { width: (_l = (size == null ? void 0 : size.width)) !== null && _l !== void 0 ? _l : fallbackWidth, height: (_m = (size == null ? void 0 : size.height)) !== null && _m !== void 0 ? _m : fallbackHeight })) }));
 };
 function getMeasurableCodeComponentChildren(element) {
     const childrenCollection = element.firstElementChild && element.firstElementChild.hasAttribute(SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE)
@@ -20351,6 +20356,7 @@ function resetSetStyle(element, key7, toValue, microtask2 = true) {
     }
 }
 var Layer = /* @__PURE__ */ (() => {
+    /*#__PURE__*/
     class Layer2 extends Component {
         constructor() {
             super(...arguments);
@@ -20795,7 +20801,7 @@ var defaultFrameRect = {
     height: 200,
 };
 function useStyleAndRect(props) {
-    var _f, _j, _k;
+    var _j, _k, _l;
     React4.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
@@ -20805,7 +20811,7 @@ function useStyleAndRect(props) {
     const constraintsRect = useConstraints(unwrappedProps);
     const defaultStyle = {
         display: 'block',
-        flex: (_f = (style == null ? void 0 : style.flex)) !== null && _f !== void 0 ? _f : '0 0 auto',
+        flex: (_j = (style == null ? void 0 : style.flex)) !== null && _j !== void 0 ? _j : '0 0 auto',
         userSelect: RenderTarget.current() !== RenderTarget.preview ? 'none' : void 0,
     };
     if (!props.__fromCanvasComponent) {
@@ -20855,8 +20861,8 @@ function useStyleAndRect(props) {
     }
     Object.assign(defaultStyle, centerTextStyle, _initialStyle, propsStyle, constraintsStyle, style);
     Object.assign(defaultStyle, {
-        overflowX: (_j = defaultStyle.overflowX) !== null && _j !== void 0 ? _j : defaultStyle.overflow,
-        overflowY: (_k = defaultStyle.overflowY) !== null && _k !== void 0 ? _k : defaultStyle.overflow,
+        overflowX: (_k = defaultStyle.overflowX) !== null && _k !== void 0 ? _k : defaultStyle.overflow,
+        overflowY: (_l = defaultStyle.overflowY) !== null && _l !== void 0 ? _l : defaultStyle.overflow,
         overflow: void 0,
     });
     Layer.applyWillChange(props, defaultStyle, true);
@@ -20929,7 +20935,7 @@ function hasDataFramerName(props) {
     return 'data-framer-name' in props;
 }
 var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forwardedRef) {
-    var _f, _j;
+    var _j, _k;
     const { name, center, border, _border, __portal, } = props;
     const { props: propsWithOverrides, children, } = processOverrideForwarding(props);
     const motionProps = getMotionProps(propsWithOverrides);
@@ -20938,7 +20944,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forw
     const fallbackRef = useRef(null);
     const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackRef;
     const dataProps = {
-        'data-framer-component-type': (_f = props.componentType) !== null && _f !== void 0 ? _f : 'Frame',
+        'data-framer-component-type': (_j = props.componentType) !== null && _j !== void 0 ? _j : 'Frame',
         'data-framer-cursor': cursor,
         'data-framer-highlight': cursor === 'pointer' ? true : void 0,
         'data-layoutid': layoutId,
@@ -20967,7 +20973,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forw
         children: [
             backgroundImage
                 ? /* @__PURE__ */ jsx(BackgroundImageComponent, {
-                    alt: (_j = props.alt) !== null && _j !== void 0 ? _j : '',
+                    alt: (_k = props.alt) !== null && _k !== void 0 ? _k : '',
                     image: backgroundImage,
                     containerSize: rect !== null && rect !== void 0 ? rect : void 0,
                     nodeId: props.id && nodeIdFromString(props.id),
@@ -21033,9 +21039,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', children, size, hide, insideUserCodeComponent = false, position = 'absolute', }) {
     const { target, } = RenderEnvironment;
     const childCount = React4.Children.count(children);
@@ -21120,7 +21123,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);
@@ -21206,7 +21209,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());
@@ -21269,11 +21272,11 @@ function useAppearEffect(ref, appearCallback, options) {
     });
     const { enabled, animateOnce, threshold, rootMargin = `0px 0px 0px 0px`, } = options;
     const callback = React4.useCallback(([entry,]) => {
-        var _f;
+        var _j;
         if (!entry)
             return;
         const { isInView, hasAnimatedOnce, } = internalState.current;
-        const isIntersecting = isIntersectingWithThreshold(entry, (_f = (threshold == null ? void 0 : threshold.y)) !== null && _f !== void 0 ? _f : 0);
+        const isIntersecting = isIntersectingWithThreshold(entry, (_j = (threshold == null ? void 0 : threshold.y)) !== null && _j !== void 0 ? _j : 0);
         if (isIntersecting && !isInView) {
             if (animateOnce && hasAnimatedOnce)
                 return;
@@ -21342,7 +21345,7 @@ function pointForEvent(event, customTarget = null) {
     };
     return point2;
 }
-var FramerEvent = class {
+var FramerEvent = /*#__PURE__*/ class {
     /**
      * @internal
      */
@@ -21451,7 +21454,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', {
@@ -21994,7 +21997,7 @@ function WithDragging(Component15) {
             };
         }
         render() {
-            const _f = this.props, { onPanStart, onPan, onPanEnd, onMouseWheelStart, onMouseWheel, onMouseWheelEnd } = _f, attributes = __rest(_f, ["onPanStart", "onPan", "onPanEnd", "onMouseWheelStart", "onMouseWheel", "onMouseWheelEnd"]);
+            const _j = this.props, { onPanStart, onPan, onPanEnd, onMouseWheelStart, onMouseWheel, onMouseWheelEnd } = _j, attributes = __rest(_j, ["onPanStart", "onPan", "onPanEnd", "onMouseWheelStart", "onMouseWheel", "onMouseWheelEnd"]);
             const originalProps = Object.assign({}, attributes);
             Object.keys(_WithDraggingHOC.draggingDefaultProps).forEach((key7) => {
                 delete asRecord(originalProps)[key7];
@@ -22200,7 +22203,7 @@ var ObservableObject = /* @__PURE__ */ (() => {
     };
     return ObservableObject2;
 })();
-var ObservableObjectProxyHandler = class {
+var ObservableObjectProxyHandler = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'set', (target, key7, value, receiver) => {
             if (key7 === $private) {
@@ -22851,7 +22854,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);
@@ -23210,7 +23213,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');
@@ -23575,7 +23578,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/');
@@ -24484,13 +24487,13 @@ function containerIsVisible(containerIndex, stackState) {
 }
 function containerContent(item) {
     const content = React4.Children.map(item.component, (child) => {
-        var _f;
+        var _j;
         var _a;
         if (!isReactChild(child) || !isReactElement(child) || !child.props) {
             return child;
         }
         const props = {
-            style: (_f = child.props.style) !== null && _f !== void 0 ? _f : {},
+            style: (_j = child.props.style) !== null && _j !== void 0 ? _j : {},
         };
         const position = (_a = item == null ? void 0 : item.transition) == null ? void 0 : _a.position;
         const shouldStretchWidth = !position || position.left !== void 0 && position.right !== void 0;
@@ -24543,7 +24546,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) => {
@@ -24584,7 +24587,7 @@ function WithNavigator(BaseComponent, navigationTransition, navigationTransition
                                 break;
                         }
                     };
-                    const _f = this.props, { onTap } = _f, props = __rest(_f, ["onTap"]);
+                    const _j = this.props, { onTap } = _j, props = __rest(_j, ["onTap"]);
                     if (onTap) {
                         props.onTap = (...args) => {
                             onTap.apply(this, args);
@@ -24637,8 +24640,8 @@ function useInfiniteScroll({ ref: elementRef, loadMore, rootMargin = '0px', thre
     }, [elementRef, callback, rootMargin, threshold, paginationInfo.currentPage,]);
 }
 function withInfiniteScroll(Component15) {
-    return React4.forwardRef((_f, ref) => {
-        var { __paginationInfo, __loadMore } = _f, props = __rest(_f, ["__paginationInfo", "__loadMore"]);
+    return React4.forwardRef((_j, ref) => {
+        var { __paginationInfo, __loadMore } = _j, props = __rest(_j, ["__paginationInfo", "__loadMore"]);
         const backupRef = React4.useRef(null);
         const infiniteScrollRef = ref !== null && ref !== void 0 ? ref : backupRef;
         useInfiniteScroll({
@@ -24804,7 +24807,7 @@ function useSafariGapFix(gap, ref, display) {
 }
 var Stack = /* @__PURE__ */ (() => {
     const StackInner = React4.forwardRef(function StackInner2(stackProps, forwardedRef) {
-        var _f, _j;
+        var _j, _k;
         const { as = 'div', direction = 'vertical', distribution = 'start', alignment = 'center', gap = 10, wrap: wrap2 = false, useFlexboxGap: externalUseFlexboxGap = true, children, style: styleProp, className: className2, willChangeTransform, __fromCodeComponentNode, parentSize, __contentWrapperStyle } = stackProps, containerProps = __rest(stackProps, ["as", "direction", "distribution", "alignment", "gap", "wrap", "useFlexboxGap", "children", "style", "className", "willChangeTransform", "__fromCodeComponentNode", "parentSize", "__contentWrapperStyle"]);
         const useFlexboxGap = Boolean(externalUseFlexboxGap || wrap2);
         const stackRef = React4.useRef(null);
@@ -24828,8 +24831,8 @@ var Stack = /* @__PURE__ */ (() => {
         }
         const layoutId = useLayoutId2(stackProps);
         const { children: _children, props, } = processOverrideForwarding(containerProps, children);
-        const widthType = (_f = containerProps.widthType) !== null && _f !== void 0 ? _f : (containerProps.width === 'auto' ? 2 : 0);
-        const heightType = (_j = containerProps.heightType) !== null && _j !== void 0 ? _j : (containerProps.height === 'auto' ? 2 : 0);
+        const widthType = (_j = containerProps.widthType) !== null && _j !== void 0 ? _j : (containerProps.width === 'auto' ? 2 : 0);
+        const heightType = (_k = containerProps.heightType) !== null && _k !== void 0 ? _k : (containerProps.height === 'auto' ? 2 : 0);
         const fractionChildren = handleFraction(_children, direction, widthType, heightType);
         const gapChildren = wrapInGapElementForLegacyGap(fractionChildren, gap, flexDirection, justifyContent, useFlexboxGap, wrap2);
         const content = useProvideParentSize(gapChildren, parentSize !== null && parentSize !== void 0 ? parentSize : 1);
@@ -25253,14 +25256,14 @@ var Page = /* @__PURE__ */ React4.forwardRef(function Page2(props, forwardedRef)
         if (hasMountedRef.current)
             return;
         requestAnimationFrame(() => {
-            var _f;
+            var _j;
             currentContentPageRef.current = currentPage;
             const contentOffset = contentOffsetRef.current;
             contentOffset.x.on('change', applyEffects);
             contentOffset.y.on('change', applyEffects);
             applyEffects();
             hasMountedRef.current = true;
-            const containerSize = (_f = measureContainerSize()) !== null && _f !== void 0 ? _f : containerSizeRef.current;
+            const containerSize = (_j = measureContainerSize()) !== null && _j !== void 0 ? _j : containerSizeRef.current;
             updateMaxOffsetFromPageContents(containerSize);
             updateAndSnapToPage(currentContentPageRef.current, true);
         });
@@ -25364,7 +25367,7 @@ var Page = /* @__PURE__ */ React4.forwardRef(function Page2(props, forwardedRef)
     });
     pageEffectValuesRef.current = [];
     const childComponents = React4.Children.map(children, (child, index) => {
-        var _f;
+        var _j;
         if (!isReactChild(child) || !isReactElement(child)) {
             return child;
         }
@@ -25378,7 +25381,7 @@ var Page = /* @__PURE__ */ React4.forwardRef(function Page2(props, forwardedRef)
             },
         };
         if (containerProps.__fromCanvasComponent) {
-            update.style = (_f = child.props.style) !== null && _f !== void 0 ? _f : {};
+            update.style = (_j = child.props.style) !== null && _j !== void 0 ? _j : {};
             if (contentWidth === 'stretch')
                 update.style.width = '100%';
             if (contentHeight === 'stretch')
@@ -25893,7 +25896,7 @@ function stateName(state) {
 function containsBitmask(value, bitmask) {
     return (value & bitmask) !== 0;
 }
-var GestureRecognizer = class {
+var GestureRecognizer = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, '_state', 2);
         __publicField(this, 'handler');
@@ -25960,7 +25963,7 @@ var GestureRecognizer = class {
         }
     }
 };
-var MouseWheelGestureRecognizer = class extends GestureRecognizer {
+var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'startEvent');
@@ -25993,7 +25996,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');
@@ -26057,7 +26060,7 @@ var PanGestureRecognizer = class extends GestureRecognizer {
         }
     }
 };
-var TapGestureRecognizer = class extends GestureRecognizer {
+var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'eventType', 'tap');
@@ -26086,7 +26089,7 @@ var TapGestureRecognizer = class extends GestureRecognizer {
         }
     }
 };
-var FramerEventSession = class {
+var FramerEventSession = /*#__PURE__*/ class {
     constructor(dispatcher, customOrigin) {
         __publicField(this, 'events', []);
         __publicField(this, 'recognizers', []);
@@ -26183,7 +26186,7 @@ var FramerEventSession = class {
      * @param n - number of events to use for calculation
      */
     velocity(t = Loop.TimeStep * 2) {
-        var _f;
+        var _j;
         if (!this.isStarted || this.events.length < 2) {
             return {
                 x: 0,
@@ -26194,7 +26197,7 @@ var FramerEventSession = class {
         let i = events.length - 1;
         let event = null;
         while (i >= 0) {
-            event = (_f = events[i]) !== null && _f !== void 0 ? _f : null;
+            event = (_j = events[i]) !== null && _j !== void 0 ? _j : null;
             if (!event || MainLoop.time - event.loopTime > t) {
                 break;
             }
@@ -26248,7 +26251,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) => {
@@ -26300,7 +26303,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) => {
@@ -27272,7 +27275,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', []);
@@ -27384,19 +27387,19 @@ var effectValuesKeys = [
     'transformPerspective',
 ];
 var makeFXValues = (defaults) => {
-    var _f, _j, _k, _l, _m, _o, _p, _q, _t, _u;
+    var _j, _k, _l, _m, _o, _p, _q, _t, _u, _w;
     return {
-        x: motionValue((_f = (defaults == null ? void 0 : defaults.x)) !== null && _f !== void 0 ? _f : 0),
-        y: motionValue((_j = (defaults == null ? void 0 : defaults.y)) !== null && _j !== void 0 ? _j : 0),
-        opacity: motionValue((_k = (defaults == null ? void 0 : defaults.opacity)) !== null && _k !== void 0 ? _k : 1),
-        scale: motionValue((_l = (defaults == null ? void 0 : defaults.scale)) !== null && _l !== void 0 ? _l : 1),
-        rotate: motionValue((_m = (defaults == null ? void 0 : defaults.rotate)) !== null && _m !== void 0 ? _m : 0),
-        rotateX: motionValue((_o = (defaults == null ? void 0 : defaults.rotateX)) !== null && _o !== void 0 ? _o : 0),
-        rotateY: motionValue((_p = (defaults == null ? void 0 : defaults.rotateY)) !== null && _p !== void 0 ? _p : 0),
-        skewX: motionValue((_q = (defaults == null ? void 0 : defaults.skewX)) !== null && _q !== void 0 ? _q : 0),
-        skewY: motionValue((_t = (defaults == null ? void 0 : defaults.skewY)) !== null && _t !== void 0 ? _t : 0),
+        x: motionValue((_j = (defaults == null ? void 0 : defaults.x)) !== null && _j !== void 0 ? _j : 0),
+        y: motionValue((_k = (defaults == null ? void 0 : defaults.y)) !== null && _k !== void 0 ? _k : 0),
+        opacity: motionValue((_l = (defaults == null ? void 0 : defaults.opacity)) !== null && _l !== void 0 ? _l : 1),
+        scale: motionValue((_m = (defaults == null ? void 0 : defaults.scale)) !== null && _m !== void 0 ? _m : 1),
+        rotate: motionValue((_o = (defaults == null ? void 0 : defaults.rotate)) !== null && _o !== void 0 ? _o : 0),
+        rotateX: motionValue((_p = (defaults == null ? void 0 : defaults.rotateX)) !== null && _p !== void 0 ? _p : 0),
+        rotateY: motionValue((_q = (defaults == null ? void 0 : defaults.rotateY)) !== null && _q !== void 0 ? _q : 0),
+        skewX: motionValue((_t = (defaults == null ? void 0 : defaults.skewX)) !== null && _t !== void 0 ? _t : 0),
+        skewY: motionValue((_u = (defaults == null ? void 0 : defaults.skewY)) !== null && _u !== void 0 ? _u : 0),
         /** @deprecated */
-        transformPerspective: motionValue((_u = (defaults == null ? void 0 : defaults.transformPerspective)) !== null && _u !== void 0 ? _u : 0),
+        transformPerspective: motionValue((_w = (defaults == null ? void 0 : defaults.transformPerspective)) !== null && _w !== void 0 ? _w : 0),
     };
 };
 var defaultFXValues = {
@@ -27463,14 +27466,14 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
         const from = mirror ? loop : defaultFXValues;
         mirrorStateRef.current = !mirrorStateRef.current;
         return Promise.all(effectValuesKeys.map((key7) => {
-            var _f;
+            var _j;
             if (shouldReduceMotion && key7 !== 'opacity')
                 return;
-            effect.values[key7].set((_f = from[key7]) !== null && _f !== void 0 ? _f : defaultFXValues[key7]);
+            effect.values[key7].set((_j = from[key7]) !== null && _j !== void 0 ? _j : defaultFXValues[key7]);
             return new Promise((resolve) => {
-                var _f;
+                var _j;
                 const opts = Object.assign(Object.assign({}, transition), { onComplete: () => resolve() });
-                animate(effect.values[key7], (_f = to[key7]) !== null && _f !== void 0 ? _f : from[key7], opts);
+                animate(effect.values[key7], (_j = to[key7]) !== null && _j !== void 0 ? _j : from[key7], opts);
             });
         }));
     });
@@ -27521,9 +27524,9 @@ function useParallax(options, ref, visibilityStyle) {
     }, [originalPosition, speed, offset, adjustPosition,]);
     React4.useLayoutEffect(() => {
         frame.read(() => {
-            var _f;
+            var _j;
             var _a, _b;
-            originalPosition.current = (_f = ((_b = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.top)) !== null && _f !== void 0 ? _f : 0;
+            originalPosition.current = (_j = ((_b = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.top)) !== null && _j !== void 0 ? _j : 0;
         });
         frame.update(() => {
             parallaxY.set(transform2(scrollY.get()));
@@ -27557,12 +27560,12 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, i
         const transition = getTransition(target);
         return Promise.all(effectValuesKeys.map((key7) => {
             return new Promise((resolve) => {
-                var _f;
+                var _j;
                 if (shouldReduceMotion && key7 !== 'opacity')
                     return resolve();
                 const motionValue2 = effect.values[key7];
                 motionValue2.stop();
-                let value = !isObject2(target) ? defaultFXValues[key7] : (_f = (target == null ? void 0 : target[key7])) !== null && _f !== void 0 ? _f : defaultFXValues[key7];
+                let value = !isObject2(target) ? defaultFXValues[key7] : (_j = (target == null ? void 0 : target[key7])) !== null && _j !== void 0 ? _j : defaultFXValues[key7];
                 if (isMotionValue(value))
                     value = value.get();
                 if (!isNumber2(value))
@@ -27595,7 +27598,6 @@ function usePresenceAnimation({ initial: motionInitial, animate: motionAnimate,
     const [isPresent2, safeToRemove,] = usePresence();
     const lastPresence = useRef(false);
     const effect = useConstant2(() => {
-        var _a;
         const base = initial !== null && initial !== void 0 ? initial : style;
         if (!isObject2(base)) {
             return {
@@ -27604,7 +27606,7 @@ function usePresenceAnimation({ initial: motionInitial, animate: motionAnimate,
         }
         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;
@@ -27672,17 +27674,17 @@ function calcOffsetTop(element, container) {
 }
 var scrollObserverOffset = 1;
 function createTransformInputRange(transformTargets, threshold = 0, callback) {
-    var _f, _j;
+    var _j, _k;
     var _a;
     const starts = [];
     const inputRange = [];
     for (let index = transformTargets.length; index >= 0; index--) {
-        const { ref: targetRef, offset, } = (_f = transformTargets[index]) !== null && _f !== void 0 ? _f : {};
+        const { ref: targetRef, offset, } = (_j = transformTargets[index]) !== null && _j !== void 0 ? _j : {};
         if (!targetRef || !targetRef.current)
             continue;
         const offsetTop = calcOffsetTop(targetRef.current, document.documentElement);
         const top = offsetTop - scrollObserverOffset - (offset !== null && offset !== void 0 ? offset : 0) - threshold;
-        const height = (_j = ((_a = targetRef.current) == null ? void 0 : _a.clientHeight)) !== null && _j !== void 0 ? _j : 0;
+        const height = (_k = ((_a = targetRef.current) == null ? void 0 : _a.clientHeight)) !== null && _k !== void 0 ? _k : 0;
         const previousTop = starts[starts.length - 1];
         const end = Math.max(top + height, 0);
         starts.push(top);
@@ -27782,27 +27784,27 @@ function createInputOutputRange(targets, threshold, hasExit) {
     };
 }
 function makeStyle(defaults) {
-    var _f, _j, _k, _l, _m, _o, _p, _q, _t, _u, _w;
+    var _j, _k, _l, _m, _o, _p, _q, _t, _u, _w, _x;
     return {
-        x: (_f = (defaults == null ? void 0 : defaults.x)) !== null && _f !== void 0 ? _f : defaultFXValues.x,
-        y: (_j = (defaults == null ? void 0 : defaults.y)) !== null && _j !== void 0 ? _j : defaultFXValues.y,
-        scale: (_k = (defaults == null ? void 0 : defaults.scale)) !== null && _k !== void 0 ? _k : defaultFXValues.scale,
-        opacity: (_l = (defaults == null ? void 0 : defaults.opacity)) !== null && _l !== void 0 ? _l : defaultFXValues.opacity,
-        transformPerspective: (_m = (defaults == null ? void 0 : defaults.transformPerspective)) !== null && _m !== void 0 ? _m : defaultFXValues.transformPerspective,
-        rotate: (_o = (defaults == null ? void 0 : defaults.rotate)) !== null && _o !== void 0 ? _o : defaultFXValues.rotate,
-        rotateX: (_p = (defaults == null ? void 0 : defaults.rotateX)) !== null && _p !== void 0 ? _p : defaultFXValues.rotateX,
-        rotateY: (_q = (defaults == null ? void 0 : defaults.rotateY)) !== null && _q !== void 0 ? _q : defaultFXValues.rotateY,
-        skewX: (_t = (defaults == null ? void 0 : defaults.skewX)) !== null && _t !== void 0 ? _t : defaultFXValues.skewX,
-        skewY: (_u = (defaults == null ? void 0 : defaults.skewY)) !== null && _u !== void 0 ? _u : defaultFXValues.skewY,
-        transition: (_w = (defaults == null ? void 0 : defaults.transition)) !== null && _w !== void 0 ? _w : void 0,
-    };
-}
-function useAnimationVariants(_f) {
-    var { opacity, targetOpacity, perspective: transformPerspective, enter, exit, animate: animateVariant2 } = _f, defaultStyles = __rest(_f, ["opacity", "targetOpacity", "perspective", "enter", "exit", "animate"]);
+        x: (_j = (defaults == null ? void 0 : defaults.x)) !== null && _j !== void 0 ? _j : defaultFXValues.x,
+        y: (_k = (defaults == null ? void 0 : defaults.y)) !== null && _k !== void 0 ? _k : defaultFXValues.y,
+        scale: (_l = (defaults == null ? void 0 : defaults.scale)) !== null && _l !== void 0 ? _l : defaultFXValues.scale,
+        opacity: (_m = (defaults == null ? void 0 : defaults.opacity)) !== null && _m !== void 0 ? _m : defaultFXValues.opacity,
+        transformPerspective: (_o = (defaults == null ? void 0 : defaults.transformPerspective)) !== null && _o !== void 0 ? _o : defaultFXValues.transformPerspective,
+        rotate: (_p = (defaults == null ? void 0 : defaults.rotate)) !== null && _p !== void 0 ? _p : defaultFXValues.rotate,
+        rotateX: (_q = (defaults == null ? void 0 : defaults.rotateX)) !== null && _q !== void 0 ? _q : defaultFXValues.rotateX,
+        rotateY: (_t = (defaults == null ? void 0 : defaults.rotateY)) !== null && _t !== void 0 ? _t : defaultFXValues.rotateY,
+        skewX: (_u = (defaults == null ? void 0 : defaults.skewX)) !== null && _u !== void 0 ? _u : defaultFXValues.skewX,
+        skewY: (_w = (defaults == null ? void 0 : defaults.skewY)) !== null && _w !== void 0 ? _w : defaultFXValues.skewY,
+        transition: (_x = (defaults == null ? void 0 : defaults.transition)) !== null && _x !== void 0 ? _x : void 0,
+    };
+}
+function useAnimationVariants(_j) {
+    var { opacity, targetOpacity, perspective: transformPerspective, enter, exit, animate: animateVariant2 } = _j, defaultStyles = __rest(_j, ["opacity", "targetOpacity", "perspective", "enter", "exit", "animate"]);
     return React4.useMemo(() => {
-        var _f;
+        var _j;
         return ({
-            initial: enter !== null && enter !== void 0 ? enter : makeStyle(Object.assign(Object.assign({}, defaultStyles), { opacity: (_f = opacity !== null && opacity !== void 0 ? opacity : targetOpacity) !== null && _f !== void 0 ? _f : 1, transformPerspective })),
+            initial: enter !== null && enter !== void 0 ? enter : makeStyle(Object.assign(Object.assign({}, defaultStyles), { opacity: (_j = opacity !== null && opacity !== void 0 ? opacity : targetOpacity) !== null && _j !== void 0 ? _j : 1, transformPerspective })),
             animate: animateVariant2 !== null && animateVariant2 !== void 0 ? animateVariant2 : makeStyle({
                 opacity: targetOpacity,
             }),
@@ -27821,22 +27823,24 @@ function useStyleAppearEffect(options, ref) {
         lastAppearState: !options.styleAppearEffectEnabled,
     });
     const animation = React4.useRef();
-    const runAnimation = React4.useCallback((_f, fromInitial) => __awaiter(this, void 0, void 0, function* () {
-        var _j;
-        var { transition } = _f, target = __rest(_f, ["transition"]);
-        const transitionWithFallback = (_j = transition !== null && transition !== void 0 ? transition : variants.animate.transition) !== null && _j !== void 0 ? _j : options.transition;
+    const runAnimation = React4.useCallback((_j, fromInitial) => __awaiter(this, void 0, void 0, function* () {
+        var _k;
+        var { transition } = _j, target = __rest(_j, ["transition"]);
+        const transitionWithFallback = (_k = transition !== null && transition !== void 0 ? transition : variants.animate.transition) !== null && _k !== void 0 ? _k : options.transition;
         yield animation.current;
         animation.current = Promise.all(effectValuesKeys.map((key7) => {
-            var _f, _j;
+            var _j, _k;
             if (fromInitial)
-                effect.values[key7].set((_f = variants.initial[key7]) !== null && _f !== void 0 ? _f : defaultFXValues[key7]);
-            const toValue = (_j = target[key7]) !== null && _j !== void 0 ? _j : defaultFXValues[key7];
+                effect.values[key7].set((_j = variants.initial[key7]) !== null && _j !== void 0 ? _j : defaultFXValues[key7]);
+            const toValue = (_k = target[key7]) !== null && _k !== void 0 ? _k : defaultFXValues[key7];
             const visualElement = visualElementStore.get(ref.current);
             if (visualElement && typeof toValue !== 'object') {
                 visualElement.setBaseTarget(key7, toValue);
             }
             return new Promise((resolve) => {
                 if (shouldReduceMotion && key7 !== 'opacity') {
+                    if (isNumber2(toValue))
+                        effect.values[key7].set(toValue);
                     resolve();
                 }
                 else {
@@ -27878,13 +27882,13 @@ function useStyleAppearEffect(options, ref) {
         };
         let lastVariant = 'initial';
         return scrollInfo(({ y: scrollY, }) => {
-            var _f;
+            var _j;
             const { targets, } = options;
             if (!targets)
                 return;
             if (!targets[0] || targets[0].ref && !targets[0].ref.current)
                 return;
-            const { inputRange, outputRange, } = createInputOutputRange(targets, ((_f = options.threshold) !== null && _f !== void 0 ? _f : 0) * scrollY.containerLength, !!options.exit);
+            const { inputRange, outputRange, } = createInputOutputRange(targets, ((_j = options.threshold) !== null && _j !== void 0 ? _j : 0) * scrollY.containerLength, !!options.exit);
             if (inputRange.length === 0 || inputRange.length !== outputRange.length)
                 return;
             const variant = transform(scrollY.current, inputRange, outputRange);
@@ -27914,12 +27918,12 @@ var styleTransformOptionsKeys = /* @__PURE__ */ new Set([
     'transformTrigger',
 ]);
 var defaultValues = (transformTargets, shouldReduceMotion) => {
-    var _f;
+    var _j;
     var _a;
     const initial = (_a = transformTargets == null ? void 0 : transformTargets[0]) == null ? void 0 : _a.target;
     return shouldReduceMotion
         ? {
-            opacity: (_f = (initial == null ? void 0 : initial.opacity)) !== null && _f !== void 0 ? _f : 1,
+            opacity: (_j = (initial == null ? void 0 : initial.opacity)) !== null && _j !== void 0 ? _j : 1,
         }
         : initial;
 };
@@ -27961,14 +27965,14 @@ function useAttachOptionalSpring(values, spring2) {
 function createInputOutputRanges(transformTargets, threshold) {
     const effectKeyOutputRange = defaultRanges2();
     const inputRange = createTransformInputRange(transformTargets, threshold, (index) => {
-        var _f, _j;
+        var _j, _k;
         var _a, _b, _c;
         const previousTarget = (_a = transformTargets[index - 1]) == null ? void 0 : _a.target;
         const currentTarget = (_b = transformTargets[index]) == null ? void 0 : _b.target;
         for (const key7 of effectValuesKeys) {
             (_c = effectKeyOutputRange[key7]) == null
                 ? void 0
-                : _c.unshift((_f = (previousTarget == null ? void 0 : previousTarget[key7])) !== null && _f !== void 0 ? _f : 0, (_j = (currentTarget == null ? void 0 : currentTarget[key7])) !== null && _j !== void 0 ? _j : 0);
+                : _c.unshift((_j = (previousTarget == null ? void 0 : previousTarget[key7])) !== null && _j !== void 0 ? _j : 0, (_k = (currentTarget == null ? void 0 : currentTarget[key7])) !== null && _k !== void 0 ? _k : 0);
         }
     });
     return {
@@ -27990,7 +27994,7 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
     const shouldReduceMotion = useReducedMotionConfig();
     const effect = useFXValues(defaultValues(transformTargets, shouldReduceMotion), styleTransformEffectEnabled);
     React4.useLayoutEffect(() => {
-        var _f;
+        var _j;
         if (!styleTransformEffectEnabled || !transformTargets)
             return;
         if (transformTrigger !== 'onScrollTarget') {
@@ -28007,7 +28011,7 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
                 }
             }, transformTrigger === 'onInView'
                 ? {
-                    target: (_f = ref.current) !== null && _f !== void 0 ? _f : void 0,
+                    target: (_j = ref.current) !== null && _j !== void 0 ? _j : void 0,
                     offset: [`start end`, `end end`,],
                 }
                 : void 0);
@@ -28194,9 +28198,9 @@ function ComponentPresetsProvider({ presets, children, }) {
     });
 }
 function ComponentPresetsConsumer({ componentIdentifier, children, }) {
-    var _f;
+    var _j;
     const componentPresets = useContext3(Context);
-    const presetProps = (_f = componentPresets[componentIdentifier]) !== null && _f !== void 0 ? _f : {};
+    const presetProps = (_j = componentPresets[componentIdentifier]) !== null && _j !== void 0 ? _j : {};
     return children(presetProps);
 }
 function setRef(ref, value) {
@@ -28310,8 +28314,8 @@ var ComponentViewportContext = /* @__PURE__ */ React4.createContext({});
 function useComponentViewport() {
     return React4.useContext(ComponentViewportContext);
 }
-var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef((_f, ref) => {
-    var { width, children } = _f, rest = __rest(_f, ["width", "children"]);
+var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef((_j, ref) => {
+    var { width, children } = _j, rest = __rest(_j, ["width", "children"]);
     const componentViewport = React4.useMemo(() => {
         return {
             width,
@@ -28327,7 +28331,7 @@ var withGeneratedLayoutId = (Component15) => React4.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
     return /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({ layoutId }, props), { layoutIdKey: void 0, duplicatedFrom: void 0, ref }));
 });
-var ContainerErrorBoundary = class extends Component {
+var ContainerErrorBoundary = /*#__PURE__*/ class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {
@@ -28346,8 +28350,8 @@ var ContainerErrorBoundary = class extends Component {
         return hasError ? null : children;
     }
 };
-var Providers = /* @__PURE__ */ React4.forwardRef((_f, ref) => {
-    var { children, layoutId } = _f, props = __rest(_f, ["children", "layoutId"]);
+var Providers = /* @__PURE__ */ React4.forwardRef((_j, ref) => {
+    var { children, layoutId } = _j, props = __rest(_j, ["children", "layoutId"]);
     const outerLayoutId = useConstant2(() => layoutId ? `${layoutId}-container` : void 0);
     return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ layoutId: outerLayoutId }, props), { ref, children: /* @__PURE__ */ jsx(ComponentContainerContext.Provider, {
             value: true,
@@ -28384,8 +28388,8 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
 var withCSS = (Component15, escapedCSS, componentSerializationId) => React4.forwardRef((props, ref) => {
-    var _f;
-    const { sheet, cache: cache2, } = (_f = React4.useContext(StyleSheetContext)) !== null && _f !== void 0 ? _f : {};
+    var _j;
+    const { sheet, cache: cache2, } = (_j = React4.useContext(StyleSheetContext)) !== null && _j !== void 0 ? _j : {};
     if (!isBrowser2()) {
         const concatenatedCSS = Array.isArray(escapedCSS) ? escapedCSS.join('\n') : escapedCSS;
         return /* @__PURE__ */ jsxs(Fragment, {
@@ -28424,10 +28428,10 @@ var CustomCursorContextProvider = /* @__PURE__ */ React4.memo(function CustomCur
                 return () => events.delete(callback);
             },
             registerCursors: (cursors) => {
-                var _f;
+                var _j;
                 const nextCursors = {};
                 for (const key7 in cursors) {
-                    const cursor = (_f = allCursors[key7]) !== null && _f !== void 0 ? _f : cursors[key7];
+                    const cursor = (_j = allCursors[key7]) !== null && _j !== void 0 ? _j : cursors[key7];
                     if (cursor)
                         nextCursors[key7] = cursor;
                 }
@@ -28491,7 +28495,7 @@ function getCenteringTransform(placement, alignment = 'center') {
 }
 var portalIdAttribute = 'data-framer-portal-id';
 function getCursorHash(x, y) {
-    var _f;
+    var _j;
     let el = document.elementFromPoint(x, y);
     while (el) {
         if (el === document.body)
@@ -28503,7 +28507,7 @@ function getCursorHash(x, y) {
             const id3 = el.getAttribute(portalIdAttribute);
             el = el.parentElement;
             if (id3)
-                el = (_f = document.getElementById(id3)) !== null && _f !== void 0 ? _f : el;
+                el = (_j = document.getElementById(id3)) !== null && _j !== void 0 ? _j : el;
         }
         else {
             el = el.parentElement;
@@ -28517,7 +28521,7 @@ function isEmptyObject(object) {
     return true;
 }
 var CustomCursorComponent = /* @__PURE__ */ React4.memo(function CustomCursorComponent2() {
-    var _f;
+    var _j;
     const { onRegisterCursors, } = useContext3(CustomCursorContext);
     const pointerX = useMotionValue(0);
     const pointerY = useMotionValue(0);
@@ -28618,20 +28622,20 @@ var CustomCursorComponent = /* @__PURE__ */ React4.memo(function CustomCursorCom
         document.body.classList.toggle(replaceCursorClassName, replaceNativeCursor);
     }, [replaceNativeCursor,]);
     const Cursor = cursor == null ? void 0 : cursor.component;
-    const spring2 = (_f = (cursor == null ? void 0 : cursor.transition)) !== null && _f !== void 0 ? _f : {
+    const spring2 = (_j = (cursor == null ? void 0 : cursor.transition)) !== null && _j !== void 0 ? _j : {
         duration: 0,
     };
     const sprungX = useSpring(pointerX, spring2);
     const sprungY = useSpring(pointerY, spring2);
     const x = useTransform(() => {
-        var _f;
+        var _j;
         var _a;
-        return sprungX.get() + ((_f = ((_a = cursor == null ? void 0 : cursor.offset) == null ? void 0 : _a.x)) !== null && _f !== void 0 ? _f : 0);
+        return sprungX.get() + ((_j = ((_a = cursor == null ? void 0 : cursor.offset) == null ? void 0 : _a.x)) !== null && _j !== void 0 ? _j : 0);
     });
     const y = useTransform(() => {
-        var _f;
+        var _j;
         var _a;
-        return sprungY.get() + ((_f = ((_a = cursor == null ? void 0 : cursor.offset) == null ? void 0 : _a.y)) !== null && _f !== void 0 ? _f : 0);
+        return sprungY.get() + ((_j = ((_a = cursor == null ? void 0 : cursor.offset) == null ? void 0 : _a.y)) !== null && _j !== void 0 ? _j : 0);
     });
     const alignment = cursor == null ? void 0 : cursor.alignment;
     const placement = cursor == null ? void 0 : cursor.placement;
@@ -28701,19 +28705,19 @@ var Polygon = {
      * @internal
      */
     containsPoint: (polygonPoints2, point2) => {
-        var _f, _j, _k, _l;
+        var _j, _k, _l, _m;
         var _a, _b, _c, _d;
         let sign = void 0;
         for (let i = 0; i < polygonPoints2.length; i++) {
             if (Point.isEqual(polygonPoints2[i], point2))
                 return true;
-            const x1 = (_f = ((_a = polygonPoints2[i]) == null ? void 0 : _a.x)) !== null && _f !== void 0 ? _f : 0;
-            const y1 = (_j = ((_b = polygonPoints2[i]) == null ? void 0 : _b.y)) !== null && _j !== void 0 ? _j : 0;
+            const x1 = (_j = ((_a = polygonPoints2[i]) == null ? void 0 : _a.x)) !== null && _j !== void 0 ? _j : 0;
+            const y1 = (_k = ((_b = polygonPoints2[i]) == null ? void 0 : _b.y)) !== null && _k !== void 0 ? _k : 0;
             const i2 = (i + 1) % polygonPoints2.length;
             if (Point.isEqual(polygonPoints2[i2], point2))
                 return true;
-            const x2 = (_k = ((_c = polygonPoints2[i2]) == null ? void 0 : _c.x)) !== null && _k !== void 0 ? _k : 0;
-            const y2 = (_l = ((_d = polygonPoints2[i2]) == null ? void 0 : _d.y)) !== null && _l !== void 0 ? _l : 0;
+            const x2 = (_l = ((_c = polygonPoints2[i2]) == null ? void 0 : _c.x)) !== null && _l !== void 0 ? _l : 0;
+            const y2 = (_m = ((_d = polygonPoints2[i2]) == null ? void 0 : _d.y)) !== null && _m !== void 0 ? _m : 0;
             const d = (point2.x - x1) * (y2 - y1) - (point2.y - y1) * (x2 - x1);
             if (d === 0)
                 continue;
@@ -29039,25 +29043,25 @@ function createUpdateSafeArea(safeAreaRef) {
     let x = 0;
     let y = 0;
     return (anchorRect, calculatedRect, placement, event) => {
-        var _f, _j;
+        var _j, _k;
         var _a;
         if (!((_a = safeAreaRef.current) == null ? void 0 : _a.style))
             return;
-        x = (_f = (event == null ? void 0 : event.clientX)) !== null && _f !== void 0 ? _f : x;
-        y = (_j = (event == null ? void 0 : event.clientY)) !== null && _j !== void 0 ? _j : y;
+        x = (_j = (event == null ? void 0 : event.clientX)) !== null && _j !== void 0 ? _j : x;
+        y = (_k = (event == null ? void 0 : event.clientY)) !== null && _k !== void 0 ? _k : y;
         Object.assign(safeAreaRef.current.style, floatingPositionSafeAreaStyle(x, y, placement, anchorRect, calculatedRect));
     };
 }
 function updatePosition(floatingPositionRef, position, rect) {
-    var _f, _j;
+    var _j, _k;
     if (!floatingPositionRef.current)
         return;
     Object.assign(floatingPositionRef.current.style, {
         position,
         visibility: 'visible',
         // Append "px" because we are assigning this object straight to style.
-        left: ((_f = (rect == null ? void 0 : rect.x)) !== null && _f !== void 0 ? _f : 0) + (position === 'fixed' ? 0 : safeWindow.scrollX) + 'px',
-        top: ((_j = (rect == null ? void 0 : rect.y)) !== null && _j !== void 0 ? _j : 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
+        left: ((_j = (rect == null ? void 0 : rect.x)) !== null && _j !== void 0 ? _j : 0) + (position === 'fixed' ? 0 : safeWindow.scrollX) + 'px',
+        top: ((_k = (rect == null ? void 0 : rect.y)) !== null && _k !== void 0 ? _k : 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
     });
 }
 var FloatingStackingContext = /* @__PURE__ */ React4.createContext(/* @__PURE__ */ new Set());
@@ -29151,9 +29155,9 @@ function childrenWithOrigin(child, { x, y, }) {
         style,
     });
 }
-function Floating(_f) {
-    var _j;
-    var { alignment, placement, safeArea, offsetX, offsetY, anchorRef, className: className2, children, portalSelector, zIndex, collisionDetection = false, collisionDetectionPadding, onDismiss } = _f, rest = __rest(_f, ["alignment", "placement", "safeArea", "offsetX", "offsetY", "anchorRef", "className", "children", "portalSelector", "zIndex", "collisionDetection", "collisionDetectionPadding", "onDismiss"]);
+function Floating(_j) {
+    var _k;
+    var { alignment, placement, safeArea, offsetX, offsetY, anchorRef, className: className2, children, portalSelector, zIndex, collisionDetection = false, collisionDetectionPadding, onDismiss } = _j, rest = __rest(_j, ["alignment", "placement", "safeArea", "offsetX", "offsetY", "anchorRef", "className", "children", "portalSelector", "zIndex", "collisionDetection", "collisionDetectionPadding", "onDismiss"]);
     const floatingPositionRef = React4.useRef(null);
     const safeAreaRef = React4.useRef(null);
     const contentRef = React4.useRef(null);
@@ -29255,10 +29259,10 @@ function Floating(_f) {
                     children: childrenWithOrigin(children, origin),
                 }),
             }),
-        ] })), (_j = document.querySelector(portalSelector)) !== null && _j !== void 0 ? _j : document.body);
+        ] })), (_k = document.querySelector(portalSelector)) !== null && _k !== void 0 ? _k : document.body);
 }
 var GeneratedComponentContext = /* @__PURE__ */ React4.createContext(void 0);
-var LazyValue = class {
+var LazyValue = /*#__PURE__*/ class {
     constructor(resolver) {
         this.resolver = resolver;
         __publicField(this, 'status');
@@ -29373,7 +29377,7 @@ function parseFramerPageLink(link) {
             collectionItem,
         };
     }
-    catch (_f) {
+    catch (_j) {
         return;
     }
 }
@@ -29381,13 +29385,13 @@ function shouldOpenLinkInNewTab(link) {
     return !isFramerPageLink(link);
 }
 function navigateFromAttributes(navigate, element, implicitPathVariables) {
-    var _f, _j;
+    var _j, _k;
     var _a;
     let routeId = element.getAttribute('data-framer-page-link-target');
     let elementId;
     let pathVariables;
     if (routeId) {
-        elementId = (_f = element.getAttribute('data-framer-page-link-element')) !== null && _f !== void 0 ? _f : void 0;
+        elementId = (_j = element.getAttribute('data-framer-page-link-element')) !== null && _j !== void 0 ? _j : void 0;
         const pathVariablesRaw = element.getAttribute('data-framer-page-link-path-variables');
         if (pathVariablesRaw) {
             pathVariables = Object.fromEntries(new URLSearchParams(pathVariablesRaw).entries());
@@ -29401,7 +29405,7 @@ function navigateFromAttributes(navigate, element, implicitPathVariables) {
         if (!link || !link.target)
             return false;
         routeId = link.target;
-        elementId = (_j = link.element) !== null && _j !== void 0 ? _j : void 0;
+        elementId = (_k = link.element) !== null && _k !== void 0 ? _k : void 0;
         pathVariables = (_a = link.collectionItem) == null ? void 0 : _a.pathVariables;
     }
     const smoothScroll = elementId ? element.dataset.framerSmoothScroll !== void 0 : void 0;
@@ -29461,7 +29465,7 @@ function getObserveRouteForPreloadingFn() {
         });
     }
     function onPreloadIntersectionChange(entries) {
-        var _f;
+        var _j;
         var _a2;
         for (const entry of entries) {
             const target = entry.target;
@@ -29472,7 +29476,7 @@ function getObserveRouteForPreloadingFn() {
                 continue;
             }
             const nodes = routeToNodesInViewport.get(route);
-            const amountOfNodesInViewport = (_f = ((_a2 = routeToNodesInViewport.get(route)) == null ? void 0 : _a2.size)) !== null && _f !== void 0 ? _f : 0;
+            const amountOfNodesInViewport = (_j = ((_a2 = routeToNodesInViewport.get(route)) == null ? void 0 : _a2.size)) !== null && _j !== void 0 ? _j : 0;
             if (entry.isIntersecting) {
                 if (activePreloadsAmount >= maxPreloadAmount)
                     continue;
@@ -29507,7 +29511,7 @@ var observeRouteForPreloading =
 var noLocale = {};
 var resolveSlugCache = /* @__PURE__ */ new WeakMap();
 function resolveSlug(unresolvedSlug, utilsByCollectionId, activeLocale) {
-    var _f, _j;
+    var _j, _k;
     var _a, _b;
     const cache2 = (_b = (_a = resolveSlugCache == null ? void 0 : resolveSlugCache.get(activeLocale !== null && activeLocale !== void 0 ? activeLocale : noLocale)) == null
         ? void 0
@@ -29516,9 +29520,9 @@ function resolveSlug(unresolvedSlug, utilsByCollectionId, activeLocale) {
         : _b.get(unresolvedSlug.collectionItemId);
     if (cache2)
         return cache2;
-    const collectionCache = (_f = resolveSlugCache.get(activeLocale !== null && activeLocale !== void 0 ? activeLocale : noLocale)) !== null && _f !== void 0 ? _f : new Map();
+    const collectionCache = (_j = resolveSlugCache.get(activeLocale !== null && activeLocale !== void 0 ? activeLocale : noLocale)) !== null && _j !== void 0 ? _j : new Map();
     resolveSlugCache.set(activeLocale !== null && activeLocale !== void 0 ? activeLocale : noLocale, collectionCache);
-    const collectionItemCache = (_j = collectionCache.get(unresolvedSlug.collectionId)) !== null && _j !== void 0 ? _j : new Map();
+    const collectionItemCache = (_k = collectionCache.get(unresolvedSlug.collectionId)) !== null && _k !== void 0 ? _k : new Map();
     collectionCache.set(unresolvedSlug.collectionId, collectionItemCache);
     const lazyValue = new LazyValue(() => __awaiter(this, void 0, void 0, function* () {
         try {
@@ -29615,7 +29619,7 @@ function isValidURL(href, isInternal) {
         const url = new URL(href);
         return Boolean(url.protocol);
     }
-    catch (_f) { }
+    catch (_j) { }
     return isInternal;
 }
 var AnchorLinkTarget = /* @__PURE__ */ ((AnchorLinkTarget2) => {
@@ -29744,7 +29748,7 @@ function propsForRoutePath(href, openInNewTab, router, currentRoute, implicitPat
             };
         }
     }
-    catch (_f) { }
+    catch (_j) { }
     return propsForLink(href, openInNewTab);
 }
 function getRouteFromPageLink(pageLink, router, currentRoute) {
@@ -29766,8 +29770,8 @@ function getRouteFromPageLink(pageLink, router, currentRoute) {
     const { webPageId, } = pageLink;
     return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId);
 }
-var Link = /* @__PURE__ */ forwardRef((_f, forwardedRef) => {
-    var { children, href, openInNewTab, smoothScroll } = _f, restProps = __rest(_f, ["children", "href", "openInNewTab", "smoothScroll"]);
+var Link = /* @__PURE__ */ forwardRef((_j, forwardedRef) => {
+    var { children, href, openInNewTab, smoothScroll } = _j, restProps = __rest(_j, ["children", "href", "openInNewTab", "smoothScroll"]);
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -29872,7 +29876,226 @@ function resolvePageScope(pageLink, router) {
         preserveQueryParams: false,
     });
 }
-function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, enableImproveInpDuringHydration, addHydrationMarkers = false, }) {
+var salt = 'framer';
+var difficulty = 3;
+var tokenLength = 30;
+var maxTime = 3e3;
+function calculateProofOfWork() {
+    return __awaiter(this, void 0, void 0, function* () {
+        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 = yield sha256(salt + secret);
+            if (hash2.startsWith(target)) {
+                return {
+                    secret,
+                    hash: hash2,
+                };
+            }
+        }
+        return;
+    });
+}
+function sha256(text) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const buffer = new TextEncoder().encode(text);
+        const hashBuffer = yield 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((_j, ref) => {
+    var { action, children, redirectUrl, onSuccess, onError, onLoading } = _j, props = __rest(_j, ["action", "children", "redirectUrl", "onSuccess", "onError", "onLoading"]);
+    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,
+    };
+    function redirectTo(link) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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 = yield 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 = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        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);
+            yield submitForm(action, data2, projectHash);
+            dispatch({
+                type: 'success',
+            });
+            (_d = (_c = callbacks.current).onSuccess) == null ? void 0 : _d.call(_c);
+            if (redirectUrl) {
+                yield 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, Object.assign(Object.assign({}, 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;
+}
+function submitForm(action, data2, projectHash) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const proofOfWork = yield calculateProofOfWork();
+        if (!proofOfWork) {
+            throw new Error('Failed to calculate proof of work');
+        }
+        const response = yield 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 = yield 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, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, enableImproveInpDuringHydration, addHydrationMarkers = false, }) {
     React4.useEffect(() => {
         if (isWebsite)
             return;
@@ -29882,21 +30105,24 @@ function PageRoot({ RootComponent, isWebsite, routeId, pathVariables, routes, co
         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,
-                    addHydrationMarkers,
+                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,
+                    }),
                 }),
             }),
         });
@@ -30007,8 +30233,8 @@ function renderBranchedChildrenFromPropertyOverrides(overrides, children, props,
         ],
     });
 }
-var SSRVariants = /* @__PURE__ */ React4.forwardRef(function SSRVariants2(_f, ref) {
-    var { id: _nodeId, children } = _f, props = __rest(_f, ["id", "children"]);
+var SSRVariants = /* @__PURE__ */ React4.forwardRef(function SSRVariants2(_j, ref) {
+    var { id: _nodeId, children } = _j, props = __rest(_j, ["id", "children"]);
     const cloneWithRefs = useCloneChildrenWithPropsAndRef(ref);
     if (isBrowser2()) {
         return cloneWithRefs(children, props);
@@ -30047,8 +30273,8 @@ function propsForBreakpoint(variant, props, overrides) {
 var noopSubscribe = () => () => { };
 var returnTrue = () => true;
 var returnFalse = () => false;
-var PropertyOverrides = /* @__PURE__ */ React4.forwardRef(function PropertyOverrides2(_f, ref) {
-    var { breakpoint, overrides, children } = _f, props = __rest(_f, ["breakpoint", "overrides", "children"]);
+var PropertyOverrides = /* @__PURE__ */ React4.forwardRef(function PropertyOverrides2(_j, ref) {
+    var { breakpoint, overrides, children } = _j, props = __rest(_j, ["breakpoint", "overrides", "children"]);
     const cloneWithRefs = useCloneChildrenWithPropsAndRef(ref);
     const parentVariants = React4.useContext(SSRParentVariantsContext);
     const isHydrationOrSSR = React4.useSyncExternalStore(noopSubscribe, returnFalse, returnTrue);
@@ -30086,8 +30312,8 @@ var PropertyOverrides = /* @__PURE__ */ React4.forwardRef(function PropertyOverr
             assertNever(action);
     }
 });
-var ResolveLinks = /* @__PURE__ */ React2.forwardRef(function ResolveLinksInner(_f, ref) {
-    var { links, children } = _f, rest = __rest(_f, ["links", "children"]);
+var ResolveLinks = /* @__PURE__ */ React2.forwardRef(function ResolveLinksInner(_j, ref) {
+    var { links, children } = _j, rest = __rest(_j, ["links", "children"]);
     const router = useRouter();
     const { activeLocale, } = useLocaleInfo();
     const cloneWithPropsAndRef = useCloneChildrenWithPropsAndRef(ref);
@@ -30176,7 +30402,7 @@ function getCollection(collection, locale) {
         return collection;
     });
 }
-var CompatibilityDatabaseCollection = class {
+var CompatibilityDatabaseCollection = /*#__PURE__*/ class {
     constructor(collection, locale) {
         this.collection = collection;
         this.locale = locale;
@@ -30441,14 +30667,14 @@ 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) {
-        var _f;
+        var _j;
         super();
         this.schema = schema;
         this.name = name;
@@ -30460,7 +30686,7 @@ var ScalarIdentifier = class extends ScalarExpression {
             };
         }
         else {
-            this.definition = (_f = schema[name]) !== null && _f !== void 0 ? _f : null;
+            this.definition = (_j = schema[name]) !== null && _j !== void 0 ? _j : null;
         }
     }
     stringify() {
@@ -30470,18 +30696,18 @@ var ScalarIdentifier = class extends ScalarExpression {
         return other instanceof ScalarIdentifier && isEqual(this.definition, other.definition) && isEqual(other.name, this.name);
     }
     evaluate(item) {
-        var _f;
+        var _j;
         const name = this.name;
         if (isUndefined(item) || name === INDEX_IDENTIFIER) {
             throw new Error(`Can't evaluate identifier: ${name}`);
         }
-        return (_f = item.data[name]) !== null && _f !== void 0 ? _f : null;
+        return (_j = item.data[name]) !== null && _j !== void 0 ? _j : null;
     }
     canEvaluate() {
         return false;
     }
 };
-var ScalarLiteralValue = class extends ScalarExpression {
+var ScalarLiteralValue = /*#__PURE__*/ class extends ScalarExpression {
     constructor(definition, value) {
         super();
         this.definition = definition;
@@ -30548,7 +30774,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;
@@ -30574,7 +30800,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());
@@ -30612,7 +30838,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());
@@ -30650,7 +30876,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());
@@ -30688,7 +30914,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;
@@ -30709,7 +30935,7 @@ var ScalarCase = class extends ScalarExpression {
         this.definition = ScalarCase.getDefinition(definitions);
     }
     static getDefinition(definitions) {
-        var _f;
+        var _j;
         let result = null;
         let isNullable = false;
         for (const definition of definitions) {
@@ -30717,7 +30943,7 @@ var ScalarCase = class extends ScalarExpression {
             if (result && definition && result.type !== definition.type) {
                 throw new Error('Incompatible types in CASE expression');
             }
-            isNullable || (isNullable = (_f = (definition == null ? void 0 : definition.isNullable)) !== null && _f !== void 0 ? _f : true);
+            isNullable || (isNullable = (_j = (definition == null ? void 0 : definition.isNullable)) !== null && _j !== void 0 ? _j : true);
         }
         return result
             ? {
@@ -30745,16 +30971,16 @@ var ScalarCase = class extends ScalarExpression {
             isEqual(this.conditions, other.conditions) && isEqual(this.elseExpression, other.elseExpression);
     }
     evaluate(item) {
-        var _f, _j;
+        var _j, _k;
         var _a, _b;
-        const value = (_f = ((_a = this.valueExpression) == null ? void 0 : _a.evaluate(item))) !== null && _f !== void 0 ? _f : null;
+        const value = (_j = ((_a = this.valueExpression) == null ? void 0 : _a.evaluate(item))) !== null && _j !== void 0 ? _j : null;
         for (const { whenExpression, thenExpression, } of this.conditions) {
             const when = whenExpression.evaluate(item);
             const isMatching = this.valueExpression ? DatabaseValue.equal(when, value, this.collation) : convertToBoolean(when);
             if (isMatching)
                 return thenExpression.evaluate(item);
         }
-        return (_j = ((_b = this.elseExpression) == null ? void 0 : _b.evaluate(item))) !== null && _j !== void 0 ? _j : null;
+        return (_k = ((_b = this.elseExpression) == null ? void 0 : _b.evaluate(item))) !== null && _k !== void 0 ? _k : null;
     }
     canEvaluate() {
         const expressions = [];
@@ -30773,13 +30999,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;
@@ -30792,7 +31018,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());
@@ -30814,7 +31040,7 @@ var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
         };
     }
 };
-var ScalarLogicalOperation = class extends ScalarExpression {
+var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
     constructor(operandExpressions) {
         super();
         this.operandExpressions = operandExpressions;
@@ -30839,7 +31065,7 @@ var ScalarLogicalOperation = class extends ScalarExpression {
         });
     }
 };
-var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationAnd = /*#__PURE__*/ class extends ScalarLogicalOperation {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', 'AND');
@@ -30855,7 +31081,7 @@ var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
         };
     }
 };
-var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationOr = /*#__PURE__*/ class extends ScalarLogicalOperation {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', 'OR');
@@ -30871,7 +31097,7 @@ var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
         };
     }
 };
-var ScalarComparison = class extends ScalarExpression {
+var ScalarComparison = /*#__PURE__*/ class extends ScalarExpression {
     constructor(leftExpression, rightExpression) {
         super();
         this.leftExpression = leftExpression;
@@ -30899,7 +31125,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', '=');
@@ -30913,7 +31139,7 @@ var ScalarComparisonEquals = class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonNotEquals = class extends ScalarComparison {
+var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '!=');
@@ -30927,7 +31153,7 @@ var ScalarComparisonNotEquals = class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThan = class extends ScalarComparison {
+var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<');
@@ -30941,7 +31167,7 @@ var ScalarComparisonLessThan = class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<=');
@@ -30955,7 +31181,7 @@ var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonGreaterThan = class extends ScalarComparison {
+var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>');
@@ -30969,7 +31195,7 @@ var ScalarComparisonGreaterThan = class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>=');
@@ -30983,7 +31209,7 @@ var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
         };
     }
 };
-var ScalarTypeCast = class extends ScalarExpression {
+var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
     constructor(valueExpression) {
         super();
         this.valueExpression = valueExpression;
@@ -30999,7 +31225,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');
@@ -31029,7 +31255,7 @@ function convertToBoolean(value) {
     }
     return false;
 }
-var ScalarTypeCastDate = class extends ScalarTypeCast {
+var ScalarTypeCastDate = /*#__PURE__*/ class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'DATE');
@@ -31067,7 +31293,7 @@ function convertToDate(value) {
     }
     return null;
 }
-var ScalarTypeCastNumber = class extends ScalarTypeCast {
+var ScalarTypeCastNumber = /*#__PURE__*/ class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'NUMBER');
@@ -31104,7 +31330,7 @@ function convertToNumber(value) {
     }
     return null;
 }
-var ScalarTypeCastString = class extends ScalarTypeCast {
+var ScalarTypeCastString = /*#__PURE__*/ class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'STRING');
@@ -31479,7 +31705,7 @@ function getFunctionCallType(expression) {
     }
 }
 function getCaseType(expression, schema) {
-    var _f;
+    var _j;
     const definitions = [];
     for (const condition of expression.conditions) {
         const type = getExpressionType(condition.then, schema);
@@ -31491,7 +31717,7 @@ function getCaseType(expression, schema) {
         if (!isUndefined(type))
             definitions.push(type);
     }
-    return (_f = ScalarCase.getDefinition(definitions)) !== null && _f !== void 0 ? _f : void 0;
+    return (_j = ScalarCase.getDefinition(definitions)) !== null && _j !== void 0 ? _j : void 0;
 }
 function getUnaryOperationType(expression) {
     switch (expression.operator) {
@@ -31537,7 +31763,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);
@@ -31552,7 +31778,7 @@ var QueryPlan = class {
         });
     }
 };
-var ScanCollectionPlan = class extends QueryPlan {
+var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(collection) {
         super();
         this.collection = collection;
@@ -31568,7 +31794,7 @@ var ScanCollectionPlan = class extends QueryPlan {
         });
     }
 };
-var LookupIndexPlan = class extends QueryPlan {
+var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(index, query) {
         super();
         this.index = index;
@@ -31612,13 +31838,13 @@ var LookupIndexPlan = class extends QueryPlan {
         });
     }
 };
-var UnionPlan = class extends QueryPlan {
+var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
     }
     inspect() {
-        const childPlansTime = Math.max(...this.childPlans.map((childPlan) => { var _f; return (_f = childPlan.executionTime) !== null && _f !== void 0 ? _f : 0; }));
+        const childPlansTime = Math.max(...this.childPlans.map((childPlan) => { var _j; return (_j = childPlan.executionTime) !== null && _j !== void 0 ? _j : 0; }));
         return {
             label: `UnionPlan ${stringifyExecutionTime(this.executionTime - childPlansTime, this.executionTime)} ${stringifyItems(this.itemCount)}`,
             nodes: this.childPlans.map((childPlan) => childPlan.inspect()),
@@ -31626,7 +31852,7 @@ var UnionPlan = class extends QueryPlan {
     }
     _execute() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _f;
+            var _j;
             const childItemMaps = yield Promise.all(this.childPlans.map((childPlan) => __awaiter(this, void 0, void 0, function* () {
                 const items = yield childPlan.execute();
                 return new DatabaseItemMap(items);
@@ -31640,17 +31866,17 @@ var UnionPlan = class extends QueryPlan {
                     result = itemMap;
                 }
             }
-            return (_f = (result == null ? void 0 : result.items())) !== null && _f !== void 0 ? _f : [];
+            return (_j = (result == null ? void 0 : result.items())) !== null && _j !== void 0 ? _j : [];
         });
     }
 };
-var IntersectionPlan = class extends QueryPlan {
+var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
     }
     inspect() {
-        const childPlansTime = Math.max(...this.childPlans.map((childPlan) => { var _f; return (_f = childPlan.executionTime) !== null && _f !== void 0 ? _f : 0; }));
+        const childPlansTime = Math.max(...this.childPlans.map((childPlan) => { var _j; return (_j = childPlan.executionTime) !== null && _j !== void 0 ? _j : 0; }));
         return {
             label: `IntersectionPlan ${stringifyExecutionTime(this.executionTime - childPlansTime, this.executionTime)} ${stringifyItems(this.itemCount)} ${stringifyItems(this.itemCount)}`,
             nodes: this.childPlans.map((childPlan) => childPlan.inspect()),
@@ -31658,7 +31884,7 @@ var IntersectionPlan = class extends QueryPlan {
     }
     _execute() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _f;
+            var _j;
             const childItemMaps = yield Promise.all(this.childPlans.map((childPlan) => __awaiter(this, void 0, void 0, function* () {
                 const items = yield childPlan.execute();
                 return new DatabaseItemMap(items);
@@ -31672,11 +31898,11 @@ var IntersectionPlan = class extends QueryPlan {
                     result = itemMap;
                 }
             }
-            return (_f = (result == null ? void 0 : result.items())) !== null && _f !== void 0 ? _f : [];
+            return (_j = (result == null ? void 0 : result.items())) !== null && _j !== void 0 ? _j : [];
         });
     }
 };
-var ResolveItemsPlan = class extends QueryPlan {
+var ResolveItemsPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(childPlan, collection, richTextResolver, select) {
         super();
         this.childPlan = childPlan;
@@ -31708,7 +31934,7 @@ var ResolveItemsPlan = class extends QueryPlan {
         });
     }
 };
-var FilterItemsPlan = class extends QueryPlan {
+var FilterItemsPlan = /*#__PURE__*/ class extends QueryPlan {
     constructor(childPlan, filterExpression) {
         super();
         this.childPlan = childPlan;
@@ -31730,7 +31956,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;
@@ -31773,14 +31999,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;
@@ -31788,10 +32014,10 @@ var SliceItemsPlan = class extends QueryPlan {
         this.limitExpression = limitExpression;
     }
     inspect() {
-        var _f, _j;
+        var _j, _k;
         var _a, _b;
         return {
-            label: `SliceItemsPlan(LIMIT ${(_f = ((_a = this.limitExpression) == null ? void 0 : _a.stringify())) !== null && _f !== void 0 ? _f : 'Infinity'}, OFFSET ${(_j = ((_b = this.offsetExpression) == null ? void 0 : _b.stringify())) !== null && _j !== void 0 ? _j : '0'}) ${stringifyExecutionTime(this.executionTime - this.childPlan.executionTime, this.executionTime)} ${stringifyItems(this.itemCount)}`,
+            label: `SliceItemsPlan(LIMIT ${(_j = ((_a = this.limitExpression) == null ? void 0 : _a.stringify())) !== null && _j !== void 0 ? _j : 'Infinity'}, OFFSET ${(_k = ((_b = this.offsetExpression) == null ? void 0 : _b.stringify())) !== null && _k !== void 0 ? _k : '0'}) ${stringifyExecutionTime(this.executionTime - this.childPlan.executionTime, this.executionTime)} ${stringifyItems(this.itemCount)}`,
             nodes: [this.childPlan.inspect(),],
         };
     }
@@ -31811,15 +32037,15 @@ var SliceItemsPlan = class extends QueryPlan {
     }
     _execute() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _f, _j;
+            var _j, _k;
             const childItems = yield this.childPlan.execute();
-            const offset = (_f = this.getOffset()) !== null && _f !== void 0 ? _f : 0;
-            const limit = (_j = this.getLimit()) !== null && _j !== void 0 ? _j : Infinity;
+            const offset = (_j = this.getOffset()) !== null && _j !== void 0 ? _j : 0;
+            const limit = (_k = this.getLimit()) !== null && _k !== void 0 ? _k : Infinity;
             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) {
@@ -31850,7 +32076,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());
@@ -31972,8 +32198,8 @@ function stringifyQuery(query) {
     }
     if (query.orderBy) {
         queryString += ` ORDER BY ${query.orderBy.map((orderExpression) => {
-            var _f;
-            return `${stringifyExpression(query.from.data, orderExpression)} ${(_f = orderExpression.direction) !== null && _f !== void 0 ? _f : 'asc'}`;
+            var _j;
+            return `${stringifyExpression(query.from.data, orderExpression)} ${(_j = orderExpression.direction) !== null && _j !== void 0 ? _j : 'asc'}`;
         }).join(', ')}`;
     }
     if (query.limit) {
@@ -32003,7 +32229,7 @@ function getDatabaseCollection({ data: data2, }, locale) {
     }
     assertNever(data2, 'Unsupported collection type');
 }
-var QueryEngine = class {
+var QueryEngine = /*#__PURE__*/ class {
     query(query, locale) {
         return __awaiter(this, void 0, void 0, function* () {
             const collection = getDatabaseCollection(query.from, locale);
@@ -32027,8 +32253,8 @@ ${(0, import_archy.default)(plan.inspect())}`);
         const sortExpressions = (_a = query.orderBy) == null
             ? void 0
             : _a.map((expression) => {
-                var _f;
-                return new ScalarOrderExpression(ScalarExpression.from(expression, collection.schema), (_f = expression.direction) !== null && _f !== void 0 ? _f : 'asc', {
+                var _j;
+                return new ScalarOrderExpression(ScalarExpression.from(expression, collection.schema), (_j = expression.direction) !== null && _j !== void 0 ? _j : 'asc', {
                     type: 0,
                     /* CaseInsensitive */
                 });
@@ -32087,7 +32313,7 @@ function resolveValue(richTextResolver, value) {
     });
 }
 function createPlanForWhereClause(collection, expression) {
-    var _f;
+    var _j;
     if (expression instanceof ScalarLogicalOperationAnd) {
         const childPlans = expression.operandExpressions.map((expression2) => createPlanForWhereClause(collection, expression2));
         return new IntersectionPlan(childPlans);
@@ -32096,7 +32322,7 @@ function createPlanForWhereClause(collection, expression) {
         const childPlans = expression.operandExpressions.map((expression2) => createPlanForWhereClause(collection, expression2));
         return new UnionPlan(childPlans);
     }
-    return (_f = findLookupIndexPlan(collection, expression)) !== null && _f !== void 0 ? _f : createScanCollectionPlan(collection, expression);
+    return (_j = findLookupIndexPlan(collection, expression)) !== null && _j !== void 0 ? _j : createScanCollectionPlan(collection, expression);
 }
 function findLookupIndexPlan(collection, expression) {
     var _a, _b;
@@ -32222,7 +32448,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());
     }
@@ -32383,9 +32609,9 @@ function activeBreakpointHashFromWindow(breakpoints) {
     return (_a = breakpoints[0]) == null ? void 0 : _a.hash;
 }
 function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitial = true) {
-    var _f;
+    var _j;
     const isInitialNavigation = useContext3(IsInitialNavigationContext);
-    const baseVariant = useRef(isBrowser2() ? (_f = activeMediaQueryFromWindow(mediaQueries)) !== null && _f !== void 0 ? _f : initial : initial);
+    const baseVariant = useRef(isBrowser2() ? (_j = activeMediaQueryFromWindow(mediaQueries)) !== null && _j !== void 0 ? _j : initial : initial);
     const basePropsVariant = useRef(hydratedWithInitial && isInitialNavigation ? initial : baseVariant.current);
     const forceUpdate = useForceUpdate3();
     const instantTransition = useInstantTransition();
@@ -32864,7 +33090,7 @@ function usePrototypeNavigate({ preload, } = {}) {
         return false;
     });
 }
-var QueryCache = class {
+var QueryCache = /*#__PURE__*/ class {
     constructor(queryEngine2) {
         this.queryEngine = queryEngine2;
         __publicField(this, 'cache', /* @__PURE__ */ new Map());
@@ -32889,11 +33115,11 @@ function getCollectionId(collection) {
     collectionIds.set(collection, id3);
     return id3;
 }
-function getCacheKey(_f, locale) {
-    var _j;
-    var { from } = _f, query = __rest(_f, ["from"]);
+function getCacheKey(_j, locale) {
+    var _k;
+    var { from } = _j, query = __rest(_j, ["from"]);
     const fromId = getCollectionId(from.data);
-    const localeId = (_j = (locale == null ? void 0 : locale.id)) !== null && _j !== void 0 ? _j : 'default';
+    const localeId = (_k = (locale == null ? void 0 : locale.id)) !== null && _k !== void 0 ? _k : 'default';
     return fromId + JSON.stringify(query) + localeId;
 }
 function use(promise) {
@@ -32955,16 +33181,16 @@ function getWhereExpressionFromPathVariables(pathVariables) {
 function useLoadMorePaginatedQuery(query, pageSize, hash2) {
     const count = useQueryCount(query);
     const [paginationInfo, setPaginationInfo,] = useState(() => {
-        var _f;
+        var _j;
         var _a, _b, _c, _d;
         const totalPages = Math.ceil(count / pageSize);
-        const currentPage = (_f = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
+        const currentPage = (_j = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
             ? void 0
             : _b.paginationInfo) == null
             ? void 0
             : _c[hash2]) == null
             ? void 0
-            : _d.currentPage)) !== null && _f !== void 0 ? _f : 1;
+            : _d.currentPage)) !== null && _j !== void 0 ? _j : 1;
         return {
             currentPage,
             totalPages,
@@ -33175,17 +33401,17 @@ function extractMappingFromInfo(info) {
     try {
         return JSON.parse(json);
     }
-    catch (_f) {
+    catch (_j) {
         return void 0;
     }
 }
 function withMappedReactProps(Component15, info) {
     return (rawProps) => {
-        var _f;
+        var _j;
         const props = {};
         const mapping = extractMappingFromInfo(info);
         for (const key7 in rawProps) {
-            asRecord(props)[(_f = (mapping == null ? void 0 : mapping[key7])) !== null && _f !== void 0 ? _f : key7] = rawProps[key7];
+            asRecord(props)[(_j = (mapping == null ? void 0 : mapping[key7])) !== null && _j !== void 0 ? _j : key7] = rawProps[key7];
         }
         return /* @__PURE__ */ jsx(Component15, Object.assign({}, props));
     };
@@ -33269,7 +33495,7 @@ var withVariantAppearEffect = (Component15) => React4.forwardRef((props, forward
         const playedState = {};
         let currentVariant = void 0;
         return scrollInfo(({ y: scrollY, }) => {
-            var _f;
+            var _j;
             var _a;
             if (!targets[0] || targets[0].ref && !targets[0].ref.current)
                 return;
@@ -33280,7 +33506,7 @@ var withVariantAppearEffect = (Component15) => React4.forwardRef((props, forward
             if (animateOnce && playedState[index])
                 return;
             playedState[index] = true;
-            const variant = (_f = ((_a = targets[index]) == null ? void 0 : _a.target)) !== null && _f !== void 0 ? _f : void 0;
+            const variant = (_j = ((_a = targets[index]) == null ? void 0 : _a.target)) !== null && _j !== void 0 ? _j : void 0;
             if (variant === currentVariant)
                 return;
             currentVariant = variant;
@@ -33298,8 +33524,8 @@ var withVariantAppearEffect = (Component15) => React4.forwardRef((props, forward
         return /* @__PURE__ */ jsx(Component15, Object.assign({}, rest));
     }
 });
-var withVariantFX = (Component15) => React4.forwardRef((_f, forwardedRef) => {
-    var { initial, animate: animate3, exit } = _f, props = __rest(_f, ["initial", "animate", "exit"]);
+var withVariantFX = (Component15) => React4.forwardRef((_j, forwardedRef) => {
+    var { initial, animate: animate3, exit } = _j, props = __rest(_j, ["initial", "animate", "exit"]);
     const ref = useRef();
     const effect = usePresenceAnimation({
         initial,
@@ -33915,7 +34141,7 @@ var FontSourceNames = /* @__PURE__ */ ((FontSourceNames2) => {
     return FontSourceNames2;
 })(FontSourceNames || {});
 var systemFontFamilyName = 'System Default';
-var LocalFontSource = class {
+var LocalFontSource = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'name', 'local');
         __publicField(this, 'fontFamilies', []);
@@ -33924,8 +34150,8 @@ var LocalFontSource = class {
         __publicField(this, 'fontAliases', /* @__PURE__ */ new Map());
     }
     getFontFamilyByName(family) {
-        var _f;
-        return (_f = this.byFamilyName.get(family)) !== null && _f !== void 0 ? _f : null;
+        var _j;
+        return (_j = this.byFamilyName.get(family)) !== null && _j !== void 0 ? _j : null;
     }
     // TODO: these are duplicated across implementations of FontSource
     // When adding a third source, we should abstract them
@@ -33991,8 +34217,8 @@ var LocalFontSource = class {
         };
         const aliases = /* @__PURE__ */ new Map();
         const weights = [400, 100, 200, 300, 500, 600, 700, 800, 900,];
-        const styles2 = ['normal', 'italic',];
-        for (const style of styles2) {
+        const styles4 = ['normal', 'italic',];
+        for (const style of styles4) {
             for (const weight of weights) {
                 const variant = createVariantName(weight, style);
                 const alias = `__SystemDefault-${weight}-${style}__`;
@@ -34055,7 +34281,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');
         __publicField(this, 'fontFamilies', []);
@@ -34167,7 +34393,7 @@ var CustomFontSource = class {
     }
 };
 function getFontVariants(currentVariant, variants, parseVariant) {
-    var _f, _j, _k, _l, _m, _o, _p, _q, _t, _u, _w;
+    var _j, _k, _l, _m, _o, _p, _q, _t, _u, _w, _x;
     if (variants.length === 0)
         return {};
     const currentVariantInfo = parseVariant(currentVariant);
@@ -34189,20 +34415,20 @@ function getFontVariants(currentVariant, variants, parseVariant) {
         }
     });
     let variantBold = boldVariantByStyle.get(currentStyle);
-    let variantBoldItalic = (_f = boldVariantByStyle.get('italic')) !== null && _f !== void 0 ? _f : boldVariantByStyle.get('oblique');
+    let variantBoldItalic = (_j = boldVariantByStyle.get('italic')) !== null && _j !== void 0 ? _j : boldVariantByStyle.get('oblique');
     if (currentVariantInfo.weight <= 300) {
-        variantBold = (_j = variantByWeightAndStyle.get(`400-${currentStyle}`)) !== null && _j !== void 0 ? _j : variantBold;
-        variantBoldItalic = (_l = (_k = variantByWeightAndStyle.get('400-italic')) !== null && _k !== void 0 ? _k : variantByWeightAndStyle.get('400-oblique')) !== null && _l !== void 0 ? _l : variantBoldItalic;
+        variantBold = (_k = variantByWeightAndStyle.get(`400-${currentStyle}`)) !== null && _k !== void 0 ? _k : variantBold;
+        variantBoldItalic = (_m = (_l = variantByWeightAndStyle.get('400-italic')) !== null && _l !== void 0 ? _l : variantByWeightAndStyle.get('400-oblique')) !== null && _m !== void 0 ? _m : variantBoldItalic;
     }
     else if (currentVariantInfo.weight <= 500) {
-        variantBold = (_m = variantByWeightAndStyle.get(`700-${currentStyle}`)) !== null && _m !== void 0 ? _m : variantBold;
-        variantBoldItalic = (_p = (_o = variantByWeightAndStyle.get('700-italic')) !== null && _o !== void 0 ? _o : variantByWeightAndStyle.get('700-oblique')) !== null && _p !== void 0 ? _p : variantBoldItalic;
+        variantBold = (_o = variantByWeightAndStyle.get(`700-${currentStyle}`)) !== null && _o !== void 0 ? _o : variantBold;
+        variantBoldItalic = (_q = (_p = variantByWeightAndStyle.get('700-italic')) !== null && _p !== void 0 ? _p : variantByWeightAndStyle.get('700-oblique')) !== null && _q !== void 0 ? _q : variantBoldItalic;
     }
     else {
-        variantBold = (_q = variantByWeightAndStyle.get(`900-${currentStyle}`)) !== null && _q !== void 0 ? _q : variantBold;
-        variantBoldItalic = (_u = (_t = variantByWeightAndStyle.get('900-italic')) !== null && _t !== void 0 ? _t : variantByWeightAndStyle.get('900-oblique')) !== null && _u !== void 0 ? _u : variantBoldItalic;
+        variantBold = (_t = variantByWeightAndStyle.get(`900-${currentStyle}`)) !== null && _t !== void 0 ? _t : variantBold;
+        variantBoldItalic = (_w = (_u = variantByWeightAndStyle.get('900-italic')) !== null && _u !== void 0 ? _u : variantByWeightAndStyle.get('900-oblique')) !== null && _w !== void 0 ? _w : variantBoldItalic;
     }
-    const variantItalic = (_w = variantByWeightAndStyle.get(`${currentWeight}-italic`)) !== null && _w !== void 0 ? _w : variantByWeightAndStyle.get(`${currentWeight}-oblique`);
+    const variantItalic = (_x = variantByWeightAndStyle.get(`${currentWeight}-italic`)) !== null && _x !== void 0 ? _x : variantByWeightAndStyle.get(`${currentWeight}-oblique`);
     return {
         variantBold,
         variantItalic,
@@ -34236,15 +34462,15 @@ 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');
         __publicField(this, 'fontFamilies', []);
         __publicField(this, 'byFamilyName', /* @__PURE__ */ new Map());
     }
     getFontFamilyByName(family) {
-        var _f;
-        return (_f = this.byFamilyName.get(family)) !== null && _f !== void 0 ? _f : null;
+        var _j;
+        return (_j = this.byFamilyName.get(family)) !== null && _j !== void 0 ? _j : null;
     }
     /**
      * Parses variant a string into a weight number and style, defaulting to a
@@ -34368,15 +34594,15 @@ var weightNameToNumber2 = {
     ExtraBold: 800,
     Black: 900,
 };
-var FramerFontSource = class {
+var FramerFontSource = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'name', 'framer');
         __publicField(this, 'fontFamilies', []);
         __publicField(this, 'byFamilyName', /* @__PURE__ */ new Map());
     }
     getFontFamilyByName(family) {
-        var _f;
-        return (_f = this.byFamilyName.get(family)) !== null && _f !== void 0 ? _f : null;
+        var _j;
+        return (_j = this.byFamilyName.get(family)) !== null && _j !== void 0 ? _j : null;
     }
     addFontFamily(familyName) {
         const fontFamily = {
@@ -34425,15 +34651,15 @@ var FramerFontSource = class {
     }
 };
 var googleFontSelectorPrefix = 'GF;';
-var GoogleFontSource = class {
+var GoogleFontSource = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'name', 'google');
         __publicField(this, 'fontFamilies', []);
         __publicField(this, 'byFamilyName', /* @__PURE__ */ new Map());
     }
     getFontFamilyByName(family) {
-        var _f;
-        return (_f = this.byFamilyName.get(family)) !== null && _f !== void 0 ? _f : null;
+        var _j;
+        return (_j = this.byFamilyName.get(family)) !== null && _j !== void 0 ? _j : null;
     }
     static parseVariant(variant) {
         if (variant === 'regular') {
@@ -34486,14 +34712,14 @@ var GoogleFontSource = class {
         const fonts = [];
         webFonts.forEach((webFont) => {
             webFont.variants.forEach((variant) => {
-                var _f;
+                var _j;
                 var _a;
                 const family = webFont.family;
                 let fontFamily = this.getFontFamilyByName(family);
                 if (!fontFamily) {
                     fontFamily = this.addFontFamily(family);
                 }
-                const variantInfo = (_f = GoogleFontSource.parseVariant(variant)) !== null && _f !== void 0 ? _f : {};
+                const variantInfo = (_j = GoogleFontSource.parseVariant(variant)) !== null && _j !== void 0 ? _j : {};
                 const { weight, style, } = variantInfo;
                 const selector = GoogleFontSource.createSelector(family, variant);
                 const { variantBold, variantItalic, variantBoldItalic, } = getFontVariants(variant, webFont.variants, GoogleFontSource.parseVariant);
@@ -34531,7 +34757,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';
@@ -34600,7 +34826,7 @@ function isFontReady(family, style, weight) {
         }
     });
 }
-var FontStore = class {
+var FontStore = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'enabled', false);
         __publicField(this, 'bySelector', /* @__PURE__ */ new Map());
@@ -35019,173 +35245,6 @@ function isPageOrScroll(identifier) {
         return true;
     return false;
 }
-var salt = 'framer';
-var difficulty = 3;
-var tokenLength = 30;
-var maxTime = 3e3;
-function calculateProofOfWork() {
-    return __awaiter(this, void 0, void 0, function* () {
-        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 = yield sha256(salt + secret);
-            if (hash2.startsWith(target)) {
-                return {
-                    secret,
-                    hash: hash2,
-                };
-            }
-        }
-        return;
-    });
-}
-function sha256(text) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const buffer = new TextEncoder().encode(text);
-        const hashBuffer = yield 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 = /* @__PURE__ */ React4.forwardRef((_f, ref) => {
-    var { action, formId, disabled, children, redirectUrl, onSuccess, onError } = _f, props = __rest(_f, ["action", "formId", "disabled", "children", "redirectUrl", "onSuccess", "onError"]);
-    const [state, dispatch,] = React4.useReducer(formReducer, {
-        state: disabled ? 'disabled' : void 0,
-    });
-    const router = useRouter();
-    const { activeLocale, } = useLocaleInfo();
-    const isSubmitEnabled = state.state === void 0;
-    function redirectTo(link) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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 = yield 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 = (event) => __awaiter(void 0, void 0, void 0, function* () {
-        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',
-            });
-            yield submitForm(action, data2);
-            dispatch({
-                type: 'success',
-            });
-            onSuccess == null ? void 0 : onSuccess();
-            if (redirectUrl) {
-                yield redirectTo(redirectUrl);
-            }
-        }
-        catch (error) {
-            dispatch({
-                type: 'error',
-            });
-            onError == null ? void 0 : onError();
-        }
-    });
-    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, Object.assign(Object.assign({}, props), { 'data-formid': formId, onSubmit: isSubmitEnabled ? handleSubmit : preventDefault, onKeyDown: handleKeyDown, ref, children: children(state) }));
-});
-function submitForm(action, data2) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const proofOfWork = yield calculateProofOfWork();
-        if (!proofOfWork) {
-            throw new Error('Failed to calculate proof of work');
-        }
-        const response = yield fetch(action, {
-            body: data2,
-            method: 'POST',
-            headers: {
-                'Framer-POW': proofOfWork.secret,
-                'Framer-POW-Enforce': 'true',
-            },
-        });
-        if (response.ok) {
-            return response;
-        }
-        else {
-            const body = yield 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';
@@ -35214,7 +35273,6 @@ var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2
     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';
@@ -35222,14 +35280,17 @@ var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2
     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 = /* @__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')();
+var inputClassName = 'framer-form-input';
+var inputWrapperClassName = 'framer-form-input-wrapper';
+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;
@@ -35242,7 +35303,8 @@ function cssValue(value) {
 function css(selector, declaration) {
     let output = ' ';
     for (const key7 in declaration) {
-        output += `${key7.replace(/([A-Z])/gu, '-$1').toLowerCase()}: ${cssValue(declaration[key7])}; `;
+        const value = declaration[key7];
+        output += `${key7.replace(/([A-Z])/gu, '-$1').toLowerCase()}: ${cssValue(value)}; `;
     }
     return selector + ' {' + output + '}';
 }
@@ -35258,51 +35320,33 @@ function css(selector, declaration) {
     }
     css2.variable = variable;
 })(css || (css = {}));
-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});
-        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 = 
-/* @__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, .${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;
-    }`,
-    `.${inputWrapperClassName}:after {
+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 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;
@@ -35323,8 +35367,90 @@ 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,
@@ -35338,98 +35464,133 @@ var passwordManagerIgnoreDataProps = {
     autocomplete: 'off',
 };
 var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput(props, ref) {
-    const { autoFocus, className: className2, inputName, max, min, onBlur, onFocus, onInvalid, placeholder, required, step: step2, style, type, value, autofillEnabled, canvasPreviewClassName } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "max", "min", "onBlur", "onFocus", "onInvalid", "placeholder", "required", "step", "style", "type", "value", "autofillEnabled", "canvasPreviewClassName"]);
-    const [hasValue, setHasValue,] = React4.useState(!!value);
-    const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
-    const eventProps = {
-        onBlur,
-        onFocus,
-        onInvalid,
-    };
-    const onChange = React4.useCallback((e) => {
+    const { autoFocus, 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 } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "max", "min", "placeholder", "required", "step", "style", "type", "defaultValue", "autofillEnabled", "onChange", "onBlur", "onInvalid", "onFocus", "onValid"]);
+    const [hasValue, setHasValue,] = React4.useState(!!defaultValue);
+    const handleChange = React4.useCallback((e) => {
         const newValue = e.target.value;
+        onChange == null ? void 0 : onChange(e);
         setHasValue(!!newValue);
-    }, []);
-    switch (type) {
-        case 'hidden':
-            return /* @__PURE__ */ jsx(motion.input, {
-                type: 'hidden',
-                name: inputName,
-                value,
-            });
-        case 'textarea':
-            return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref,
-                style, className: cx(inputWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.textarea, Object.assign(Object.assign(Object.assign({ id: inputName }, dataProps), eventProps), { required,
-                    autoFocus, name: inputName, placeholder, className: cx(inputClassName, canvasPreviewClassName), value })) }));
-        default:
-            return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref,
-                style, className: cx(inputWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign(Object.assign({ id: inputName }, dataProps), eventProps), { type,
-                    required,
-                    autoFocus, name: inputName, placeholder, className: cx(inputClassName, canvasPreviewClassName, !hasValue && emptyValueClassName), onChange,
-                    value,
-                    min,
-                    max, step: step2 })) }));
+    }, [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, Object.assign(Object.assign({ ref,
+        style, className: cx(textInputWrapperClassName, inputWrapperClassName, className2) }, rest), { children: type === 'textarea'
+            ? /* @__PURE__ */ createElement(motion.textarea, Object.assign(Object.assign(Object.assign({}, dataProps), eventHandlers), { key: defaultValue, required,
+                autoFocus, name: inputName, placeholder, className: inputClassName, defaultValue }))
+            : /* @__PURE__ */ createElement(motion.input, Object.assign(Object.assign(Object.assign({}, dataProps), eventHandlers), { key: defaultValue, type,
+                required,
+                autoFocus, name: inputName, placeholder, className: cx(inputClassName, !hasValue && emptyValueClassName), defaultValue,
+                min,
+                max, step: step2 })) }));
 });
-var iconSpacing = /* @__PURE__ */ (() => 10)();
-var iconSize = /* @__PURE__ */ (() => 14)();
-var defaultDateIcon = 
-/* @__PURE__ */ (() => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H2Z' fill='currentColor' opacity='.3'/%3E%3Cpath d='M2.25 4.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2ZM2 5.75h9.5' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3C/svg%3E`)();
-var defaultTimeIcon = 
-/* @__PURE__ */ (() => `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M1.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3Cpath d='M6.75 7.25v-3m0 3h2' fill='transparent' stroke-width='1.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E`)();
-var FormPlainTextInput2 = 
-/* @__PURE__ */ (() => withCSS(PlainTextInput, [
+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,
-    ...focusInputCSS,
     ...inputBorderCSS,
-    `.${inputClassName}::placeholder {
-            color: var(${'--framer-input-placeholder-color'});
-        }`,
-    `textarea.${inputClassName} {
-            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}");
-        }`,
+    ...inputWrapperCSS,
+    css(`.${inputWrapperClassName}`, {
+        boxShadow: css.variable('--framer-input-box-shadow'),
+        borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left'),
+        borderTopRightRadius: css.variable('--framer-input-border-radius-top-right'),
+        borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right'),
+        borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left'),
+        background: css.variable('--framer-input-background'),
+        transition: css.variable('--framer-input-focused-transition'),
+        transitionProperty: 'background, box-shadow',
+    }),
+    css(`.${textInputWrapperClassName} .${inputClassName}::placeholder`, {
+        color: css.variable('--framer-input-placeholder-color'),
+    }),
+    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'),
+        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'),
+        // This tells safari to use the color for the shadow dom elements.
+        '-webkit-text-fill-color': css.variable('--framer-input-placeholder-color'),
+    }),
+    css(`.${textInputWrapperClassName} .${inputClassName}[type="date"]::before, .${textInputWrapperClassName} .${inputClassName}[type="time"]::before`, Object.assign(Object.assign({}, 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'),
+    }),
+    css(`.${textInputWrapperClassName} .${inputClassName}[type="time"]::before`, {
+        maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultTimeIconMaskImage}')`),
+        backgroundImage: css.variable('--framer-input-icon-image'),
+    }),
     // 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;
-        }`,
-]))();
+    css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-calendar-picker-indicator`, {
+        opacity: 0,
+        padding: css.variable('--framer-input-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'),
+        background: css.variable('--framer-input-focused-background', '--framer-input-background'),
+    }),
+    css(`.${textInputWrapperClassName}:focus-within::after, .${textInputWrapperClassName}.${forcedFocusClassName}::after`, {
+        borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color'),
+        borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style'),
+        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, canvasPreviewClassName } = props, rest = __rest(props, ["inputName", "type", "defaultChecked", "canvasPreviewClassName"]);
+    const { inputName, type = 'checkbox', defaultChecked, onValid } = props, rest = __rest(props, ["inputName", "type", "defaultChecked", "onValid"]);
     const isCanvas = useIsOnFramerCanvas();
     const attributes = isCanvas
         ? {
@@ -35438,12 +35599,13 @@ var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput
         : {
             defaultChecked,
         };
-    return /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign(Object.assign({}, rest), attributes), { readOnly: isCanvas, ref, id: inputName, type, name: inputName, className: cx(className, props.className, canvasPreviewClassName) }));
+    const eventHandlers = useCustomValidity(onValid, props.onInvalid, props.onChange, props.onBlur, props.onFocus);
+    return /* @__PURE__ */ jsx(motion.input, Object.assign(Object.assign(Object.assign(Object.assign({}, 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 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 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 styles = /* @__PURE__ */ (() => [
+var styles2 = /* @__PURE__ */ (() => [
     css(`.${className}`, {
         '-webkit-appearance': 'none',
         // background-color: #fff; fixes a bug on iOS where the checkbox shows
@@ -35469,7 +35631,7 @@ var styles = /* @__PURE__ */ (() => [
         borderColor: css.variable('--framer-input-border-color', 'transparent'),
         borderRadius,
         borderStyle: '--framer-input-border-style',
-        borderWidth,
+        borderWidth: inputBorderAllSides,
         boxSizing: 'border-box',
         content: '',
         display: 'block',
@@ -35480,22 +35642,17 @@ var styles = /* @__PURE__ */ (() => [
     }),
     // 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}::before`, Object.assign(Object.assign({}, 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'),
+        maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultCheckedIcon}')`),
+    }),
+    css(`.${className}[type="radio"]::before`, {
+        backgroundImage: css.variable('--framer-input-icon-image'),
+        maskImage: css.variable('--framer-input-icon-mask-image'),
     }),
     css(`.${className}:checked, .${className}.${forcedCheckedClassName}`, {
         // When not set, the styles when checked shouldn't clear the default
@@ -35511,7 +35668,7 @@ var styles = /* @__PURE__ */ (() => [
         // 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),
+        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'),
@@ -35525,7 +35682,7 @@ var styles = /* @__PURE__ */ (() => [
         // 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),
+        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'),
@@ -35533,68 +35690,81 @@ var styles = /* @__PURE__ */ (() => [
     }),
     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),
+        borderWidth: css.variable('--framer-input-focused-border-width', '--framer-input-boolean-checked-border-width', inputBorderAllSides),
     }),
 ])();
-var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles);
+var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles2);
 var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRef) {
-    const { autoFocus, className: className2, inputName, onBlur, onFocus, onInvalid, required, selectDefaultValue, selectOptions, style, canvasPreviewClassName } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "onBlur", "onFocus", "onInvalid", "required", "selectDefaultValue", "selectOptions", "style", "canvasPreviewClassName"]);
-    return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, canvasPreviewClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.select, {
-            id: inputName,
-            name: inputName,
-            autoFocus,
-            required,
-            className: cx(inputClassName, canvasPreviewClassName),
-            defaultValue: selectDefaultValue,
-            onBlur,
-            onFocus,
-            onInvalid,
-            children: selectOptions == null ? void 0 : selectOptions.map((option, index) => {
-                var _f, _j;
+    const { autoFocus, className: className2, inputName, required, defaultValue, selectOptions, style, onValid, onChange, onBlur, onInvalid, onFocus } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "required", "defaultValue", "selectOptions", "style", "onValid", "onChange", "onBlur", "onInvalid", "onFocus"]);
+    const eventHandlers = useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus);
+    const key7 = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+    return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.select, Object.assign(Object.assign({ name: inputName, autoFocus,
+            required, className: inputClassName, defaultValue }, eventHandlers), { children: selectOptions == null ? void 0 : selectOptions.map((option, index) => {
+                var _j, _k;
                 switch (option.type) {
                     case 'divider':
                         return /* @__PURE__ */ jsx('hr', {}, index);
                     case 'option':
                         return /* @__PURE__ */ jsx('option', {
-                            value: (_f = option.value) !== null && _f !== void 0 ? _f : option.title,
+                            value: (_j = option.value) !== null && _j !== void 0 ? _j : option.title,
                             disabled: option.disabled,
-                            children: (_j = option.title) !== null && _j !== void 0 ? _j : option.value,
+                            children: (_k = option.title) !== null && _k !== void 0 ? _k : option.value,
                         }, index);
                 }
-            }),
-        }, selectDefaultValue) }));
+            }) }), key7) }));
 });
 var selectWrapperClassName = 'framer-form-select-wrapper';
 var selectArrowSize = 16;
-var FormSelect = /* @__PURE__ */ (() => withCSS(Select, [
+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,
-    ...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;
-        }`,
-    `select.${inputClassName}:required:invalid {
-            color: var(${'--framer-input-invalid-text-color'});
-        }`,
-]))();
+    ...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'),
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        background: css.variable('--framer-input-background'),
+        borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left'),
+        borderTopRightRadius: css.variable('--framer-input-border-radius-top-right'),
+        borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right'),
+        borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left'),
+        boxShadow: css.variable('--framer-input-box-shadow'),
+        transition: css.variable('--framer-input-focused-transition'),
+        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'),
+        // Overwrite the values inherited from .${inputClassName}. On a
+        // select, these values are on the wrapper.
+        background: 'transparent',
+    }),
+    css(`.${selectWrapperClassName}::before`, Object.assign(Object.assign({}, inputIconCSSDeclaration), { paddingLeft: `${iconSpacing}px`, backgroundPosition: `${iconSpacing}px center`, maskPosition: `${iconSpacing}px center`, backgroundImage: css.variable('--framer-input-icon-image'), maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultSelectCaretMaskImage}')`) })),
+    css(`.${selectWrapperClassName} select:required:invalid`, {
+        color: css.variable('--framer-input-invalid-text-color'),
+    }),
+    css(`.${selectWrapperClassName}:focus-within, .${selectWrapperClassName}.${forcedFocusClassName}`, {
+        background: css.variable('--framer-input-focused-background', '--framer-input-background'),
+        boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow'),
+    }),
+    css(`.${selectWrapperClassName}:focus-within::after, .${selectWrapperClassName}.${forcedFocusClassName}::after`, {
+        borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color'),
+        borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style'),
+        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, children, alt } = props, rest = __rest(props, ["background", "children", "alt"]);
     const style = Object.assign({}, rest.style);
@@ -35672,7 +35842,7 @@ function convertCodeComponentContainer(componentDefinitionProvider, node, conver
         converter(codeComponentPresentation, codeComponentPresentation.children.map((child) => convertPresentationTree(child, converter, componentDefinitionProvider, getCachedNode, skipCodeComponentPropsCache))),
     ];
 }
-var CodeComponentPresentation = class {
+var CodeComponentPresentation = /*#__PURE__*/ class {
     constructor(id3, componentIdentifier, packageVersion, props, children, codeOverrideIdentifier) {
         this.id = id3;
         this.componentIdentifier = componentIdentifier;
@@ -35705,7 +35875,7 @@ var escapeHTML = (str) => str.replace(htmlRegExp, (tag) => ({
 var regex = /(<([a-z]+)(?:\s+(?!href[\s=])[^=\s]+=(?:'[^']*'|"[^"]*"))*)(?:(\s+href\s*=)(?:'([^']*)'|"([^"]*)"))?((?:\s+[^=\s]+=(?:'[^']*'|"[^"]*"))*>)/gi;
 function replaceFramerPageLinks(rawHTML, getRoute, currentRoute, implicitPathVariables) {
     return rawHTML.replace(regex, (original, pre1, tag, pre2, value1, value2, post) => {
-        var _f;
+        var _j;
         var _a, _b;
         if (tag.toLowerCase() !== 'a')
             return original;
@@ -35721,7 +35891,7 @@ function replaceFramerPageLinks(rawHTML, getRoute, currentRoute, implicitPathVar
         if (!targetPath || !currentPath)
             return original;
         let attributes = ` ${'data-framer-page-link-target'}="${pageLink.target}"`;
-        const elementId = getRouteElementId(targetRoute, (_f = pageLink.element) !== null && _f !== void 0 ? _f : void 0);
+        const elementId = getRouteElementId(targetRoute, (_j = pageLink.element) !== null && _j !== void 0 ? _j : void 0);
         if (elementId) {
             attributes += ` ${'data-framer-page-link-element'}="${pageLink.element}"`;
         }
@@ -35754,12 +35924,12 @@ var htmlEscapes = {
 var reUnescapedHtml = /[&<>"']/gu;
 var reHasUnescapedHtml = /* @__PURE__ */ (() => new RegExp(reUnescapedHtml.source))();
 function escapeHTML2(str) {
-    return str && reHasUnescapedHtml.test(str) ? str.replace(reUnescapedHtml, (chr) => { var _f; return (_f = htmlEscapes[chr]) !== null && _f !== void 0 ? _f : ''; }) : str || '';
+    return str && reHasUnescapedHtml.test(str) ? str.replace(reUnescapedHtml, (chr) => { var _j; return (_j = htmlEscapes[chr]) !== null && _j !== void 0 ? _j : ''; }) : str || '';
 }
 var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
 var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props, forwardedRef) {
-    var _f, _j;
+    var _j, _k;
     const { id: id3, name, html, htmlFromDesign, text, textFromDesign, fonts = [], width, height, left, right, top, bottom, center, className: className2, stylesPresetsClassName, visible = true, opacity, rotation = 0, verticalAlignment = 'top', isEditable = false, willChangeTransform, environment: environment2 = RenderTarget.current, withExternalLayout = false, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, __htmlStructure, __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, children: _children } = props, rest = __rest(props, ["id", "name", "html", "htmlFromDesign", "text", "textFromDesign", "fonts", "width", "height", "left", "right", "top", "bottom", "center", "className", "stylesPresetsClassName", "visible", "opacity", "rotation", "verticalAlignment", "isEditable", "willChangeTransform", "environment", "withExternalLayout", "positionSticky", "positionStickyTop", "positionStickyRight", "positionStickyBottom", "positionStickyLeft", "__htmlStructure", "__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "children"]);
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
@@ -35767,7 +35937,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     const layoutRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackLayoutRef;
     const { navigate, getRoute, } = useRouter();
     const currentRoute = useCurrentRoute();
-    useRoutePreloader((_f = props.preload) !== null && _f !== void 0 ? _f : []);
+    useRoutePreloader((_j = props.preload) !== null && _j !== void 0 ? _j : []);
     useMeasureLayout(props, layoutRef);
     const inCodeComponent = React2.useContext(ComponentContainerContext);
     const isOnCanvas = useIsOnFramerCanvas();
@@ -35837,7 +36007,7 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     const frame2 = calculateRect(props, parentSize || 0, false);
     const isAutoSized2 = _usesDOMRect && (width === 'auto' || height === 'auto');
     const hasTransformTemplate = !!props.transformTemplate || !frame2 || !restrictedRenderTarget || __fromCanvasComponent || isAutoSized2;
-    const template = hasTransformTemplate ? (_j = props.transformTemplate) !== null && _j !== void 0 ? _j : transformTemplate(center) : void 0;
+    const template = hasTransformTemplate ? (_k = props.transformTemplate) !== null && _k !== void 0 ? _k : transformTemplate(center) : void 0;
     if (!withExternalLayout) {
         if (frame2 && restrictedRenderTarget && !isAutoSized2) {
             const rotate = Animatable.getNumber(rotation).toFixed(4);
@@ -35904,8 +36074,8 @@ function useLoadFonts(fonts, fromCanvasComponent, containerRef) {
         });
     }
 }
-var FitText = /* @__PURE__ */ forwardRef((_f, ref) => {
-    var { viewBoxScale, viewBox, children } = _f, props = __rest(_f, ["viewBoxScale", "viewBox", "children"]);
+var FitText = /* @__PURE__ */ forwardRef((_j, ref) => {
+    var { viewBoxScale, viewBox, children } = _j, props = __rest(_j, ["viewBoxScale", "viewBox", "children"]);
     return /* @__PURE__ */ jsx(motion.svg, Object.assign(Object.assign({ ref }, props), { viewBox, children: /* @__PURE__ */ jsx(motion.foreignObject, {
             width: '100%',
             height: '100%',
@@ -35919,7 +36089,7 @@ var FitText = /* @__PURE__ */ forwardRef((_f, ref) => {
         }) }));
 });
 var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
-    var _f;
+    var _j;
     const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = [], height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, willChangeTransform, withExternalLayout = false, viewBox, viewBoxScale = 1 } = props, rest = __rest(props, ["__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "as", "bottom", "center", "children", "environment", "fonts", "height", "isEditable", "left", "name", "opacity", "positionSticky", "positionStickyBottom", "positionStickyLeft", "positionStickyRight", "positionStickyTop", "right", "rotation", "style", "_initialStyle", "stylesPresetsClassNames", "text", "top", "verticalAlignment", "visible", "width", "willChangeTransform", "withExternalLayout", "viewBox", "viewBoxScale"]);
     const parentSize = useParentSize();
     const isOnCanvas = useIsOnFramerCanvas();
@@ -35947,7 +36117,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
     const frame2 = calculateRect(props, parentSize || 0, false);
     const isAutoSized2 = _usesDOMRect && (width === 'auto' || height === 'auto');
     const hasTransformTemplate = !!props.transformTemplate || !frame2 || !restrictedRenderTarget || __fromCanvasComponent || isAutoSized2;
-    const template = hasTransformTemplate ? (_f = props.transformTemplate) !== null && _f !== void 0 ? _f : transformTemplate(center) : void 0;
+    const template = hasTransformTemplate ? (_j = props.transformTemplate) !== null && _j !== void 0 ? _j : transformTemplate(center) : void 0;
     if (!withExternalLayout) {
         if (frame2 && restrictedRenderTarget && !isAutoSized2) {
             containerStyle.x = frame2.x;
@@ -36025,7 +36195,7 @@ function styleRichTextChildren(element, stylesPresetsClassNames, plainText) {
         }
         return child;
     });
-    const _f = element.props, { ['data-preset-tag']: dataPresetTag } = _f, props = __rest(_f, ['data-preset-tag']);
+    const _j = element.props, { ['data-preset-tag']: dataPresetTag } = _j, props = __rest(_j, ['data-preset-tag']);
     if (isString22(element.type) || isMotionComponent(element.type)) {
         const tag = dataPresetTag || unwrapMotionComponent(element.type) || element.type;
         const stylesPresetClassName = isString22(tag) ? stylesPresetsClassNames == null ? void 0 : stylesPresetsClassNames[tag] : void 0;
@@ -36033,8 +36203,8 @@ function styleRichTextChildren(element, stylesPresetsClassNames, plainText) {
     }
     return cloneElement2(element, props, ...children);
 }
-var RichText = /* @__PURE__ */ forwardRef((_f, ref) => {
-    var { children, html, htmlFromDesign } = _f, props = __rest(_f, ["children", "html", "htmlFromDesign"]);
+var RichText = /* @__PURE__ */ forwardRef((_j, ref) => {
+    var { children, html, htmlFromDesign } = _j, props = __rest(_j, ["children", "html", "htmlFromDesign"]);
     const content = html || children || htmlFromDesign;
     if (isString22(content)) {
         if (!props.stylesPresetsClassName && isObject2(props.stylesPresetsClassNames)) {
@@ -36093,12 +36263,12 @@ function linearGradientLine(angle) {
     return Line(start, end);
 }
 function elementPropertiesForLinearGradient(gradient, id3) {
-    var _f, _j;
+    var _j, _k;
     var _a, _b;
     const line = linearGradientLine(gradient.angle);
     const stops = gradientColorStops(gradient);
-    const startPosition = (_f = ((_a = stops[0]) == null ? void 0 : _a.position)) !== null && _f !== void 0 ? _f : 0;
-    const endPosition = (_j = ((_b = stops[stops.length - 1]) == null ? void 0 : _b.position)) !== null && _j !== void 0 ? _j : 1;
+    const startPosition = (_j = ((_a = stops[0]) == null ? void 0 : _a.position)) !== null && _j !== void 0 ? _j : 0;
+    const endPosition = (_k = ((_b = stops[stops.length - 1]) == null ? void 0 : _b.position)) !== null && _k !== void 0 ? _k : 1;
     const startPoint = Line.pointAtPercentDistance(line, startPosition);
     const endPoint = Line.pointAtPercentDistance(line, endPosition);
     const interpolator = interpolate([startPosition, endPosition,], [0, 1,]);
@@ -36163,7 +36333,7 @@ function getPositionYFraction(positionY) {
     return 0.5;
 }
 function imagePatternPropsForFill(fill, frame2, id3, includeTransform) {
-    var _f, _j, _k, _l;
+    var _j, _k, _l, _m;
     fill = Animatable.get(fill, '#09F');
     if (!BackgroundImage.isImageObject(fill))
         return void 0;
@@ -36185,11 +36355,11 @@ function imagePatternPropsForFill(fill, frame2, id3, includeTransform) {
         const validScaleX = realWidth / frame2.width;
         const validScaleY = realHeight / frame2.height;
         if (fit === 'tile') {
-            (_f = fill.backgroundSize) !== null && _f !== void 0 ? _f : (fill.backgroundSize = 1);
+            (_j = fill.backgroundSize) !== null && _j !== void 0 ? _j : (fill.backgroundSize = 1);
             width = Math.round(fill.backgroundSize * (imageWidth / 2));
             height = Math.round(fill.backgroundSize * (imageHeight / 2));
-            const layerPositionX = (_j = frame2.x) !== null && _j !== void 0 ? _j : 0;
-            const layerPositionY = (_k = frame2.y) !== null && _k !== void 0 ? _k : 0;
+            const layerPositionX = (_k = frame2.x) !== null && _k !== void 0 ? _k : 0;
+            const layerPositionY = (_l = frame2.y) !== null && _l !== void 0 ? _l : 0;
             let extraOffsetX = 0;
             let extraOffsetY = 0;
             if (includeTransform) {
@@ -36215,7 +36385,7 @@ function imagePatternPropsForFill(fill, frame2, id3, includeTransform) {
     const imageId = `id${id3}g${'-fillImage'}`;
     return {
         id: imageId,
-        path: (_l = fill.src) !== null && _l !== void 0 ? _l : '',
+        path: (_m = fill.src) !== null && _m !== void 0 ? _m : '',
         transform: transform2,
         width,
         height,
@@ -36228,7 +36398,7 @@ function isAssetReference(value) {
     return value.startsWith(`data:${mediaType2}`);
 }
 function imageUrlForAsset(asset, pixelSize) {
-    var _f;
+    var _j;
     if (/^\w+:/.test(asset) && !isAssetReference(asset))
         return asset;
     if (typeof pixelSize !== 'number')
@@ -36242,10 +36412,10 @@ function imageUrlForAsset(asset, pixelSize) {
     else
         pixelSize = 4096;
     const isExport = RenderTarget.current() === RenderTarget.export;
-    return (_f = runtime.assetResolver(asset, {
+    return (_j = runtime.assetResolver(asset, {
         pixelSize,
         isExport,
-    })) !== null && _f !== void 0 ? _f : '';
+    })) !== null && _j !== void 0 ? _j : '';
 }
 var ImagePatternElement = ({ id: id3, path, transform: transform2, repeat, width, height, offsetX, offsetY, }) => {
     const href = imageUrlForAsset(path);
@@ -36269,7 +36439,7 @@ var ImagePatternElement = ({ id: id3, path, transform: transform2, repeat, width
     });
 };
 var useDOM = /* @__PURE__ */ isBrowser2();
-var SharedSVGEntry = class {
+var SharedSVGEntry = /*#__PURE__*/ class {
     constructor(id3, svg, innerHTML, viewBox, count = 0) {
         this.id = id3;
         this.svg = svg;
@@ -36278,7 +36448,7 @@ var SharedSVGEntry = class {
         this.count = count;
     }
 };
-var SharedSVGManager = class {
+var SharedSVGManager = /*#__PURE__*/ class {
     constructor() {
         __publicField(this, 'entries', /* @__PURE__ */ new Map());
     }
@@ -36413,7 +36583,7 @@ function parseSVG(svg) {
             throw Error('no svg element found');
         return node;
     }
-    catch (_f) {
+    catch (_j) {
         return;
     }
 }
@@ -36513,12 +36683,12 @@ function hasBorderRadius(style) {
         style.borderTopRightRadius);
 }
 function sizeSVG(container, props) {
-    var _f;
+    var _j;
     var _a, _b;
     const div = container.current;
     if (!div)
         return;
-    const localWindow = (_f = props.providedWindow) !== null && _f !== void 0 ? _f : safeWindow;
+    const localWindow = (_j = props.providedWindow) !== null && _j !== void 0 ? _j : safeWindow;
     const svg = div.firstElementChild;
     if (!svg || !(svg instanceof localWindow.SVGSVGElement))
         return;
@@ -36656,12 +36826,12 @@ var SVGComponent = /* @__PURE__ */ (() => {
             }
         }
         render() {
-            var _f;
+            var _j;
             countNodeRender();
-            const _j = this.props, { id: id3, visible, style, fill, svg, intrinsicHeight, intrinsicWidth, title, description, layoutId, className: className2, variants, withExternalLayout, innerRef, svgContentId, height: _height, opacity: _opacity, width: _width } = _j, rest = __rest(_j, ["id", "visible", "style", "fill", "svg", "intrinsicHeight", "intrinsicWidth", "title", "description", "layoutId", "className", "variants", "withExternalLayout", "innerRef", "svgContentId", "height", "opacity", "width"]);
+            const _k = this.props, { id: id3, visible, style, fill, svg, intrinsicHeight, intrinsicWidth, title, description, layoutId, className: className2, variants, withExternalLayout, innerRef, svgContentId, height: _height, opacity: _opacity, width: _width } = _k, rest = __rest(_k, ["id", "visible", "style", "fill", "svg", "intrinsicHeight", "intrinsicWidth", "title", "description", "layoutId", "className", "variants", "withExternalLayout", "innerRef", "svgContentId", "height", "opacity", "width"]);
             if (!withExternalLayout && (!visible || !id3))
                 return null;
-            const identifier = (_f = id3 !== null && id3 !== void 0 ? id3 : layoutId) !== null && _f !== void 0 ? _f : 'svg';
+            const identifier = (_j = id3 !== null && id3 !== void 0 ? id3 : layoutId) !== null && _j !== void 0 ? _j : 'svg';
             const frame2 = this.frame;
             const size = frame2 || {
                 width: intrinsicWidth || 100,
@@ -36847,21 +37017,21 @@ function TextStyleSheet() {
     return null;
 }
 var Text2 = /* @__PURE__ */ React4.forwardRef(function Text3(props, forwardedRef) {
-    var _f, _j;
+    var _j, _k;
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
     const fallbackLayoutRef = useRef(null);
     const layoutRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackLayoutRef;
     const { navigate, getRoute, } = useRouter();
     const currentRoute = useCurrentRoute();
-    useRoutePreloader((_f = props.preload) !== null && _f !== void 0 ? _f : []);
+    useRoutePreloader((_j = props.preload) !== null && _j !== void 0 ? _j : []);
     const onCanvas = useIsOnFramerCanvas();
     const matchesCurrentRoute = useLinkMatchesRoute(props.__link);
     const fontLoadStatus = useFontLoadStatus(props.fonts);
     useMeasureLayout(props, layoutRef);
     const { fonts, __fromCanvasComponent, } = props;
     const prevFontsRef = useRef([]);
-    const fontsDidChange = !isShallowEqualArray((_j = prevFontsRef.current) !== null && _j !== void 0 ? _j : [], fonts !== null && fonts !== void 0 ? fonts : []);
+    const fontsDidChange = !isShallowEqualArray((_k = prevFontsRef.current) !== null && _k !== void 0 ? _k : [], fonts !== null && fonts !== void 0 ? fonts : []);
     prevFontsRef.current = fonts;
     useEffect(() => {
         if (!fontsDidChange || !fonts)
@@ -36915,7 +37085,7 @@ var TextComponent = /* @__PURE__ */ (() => {
             });
             __publicField(this, 'renderMain', (inCodeComponent) => {
                 countNodeRender();
-                const _f = this.props, { font, visible, alignment, willChangeTransform, opacity, id: id3, layoutId, className: className2, transition, variants, name, __fromCanvasComponent, _initialStyle, widthType: _widthType, heightType: _heightType, _usesDOMRect, autoSize, style: styleProp, fontLoadStatus, matchesCurrentRoute, preload: _preload, tabIndex } = _f, rest = __rest(_f, ["font", "visible", "alignment", "willChangeTransform", "opacity", "id", "layoutId", "className", "transition", "variants", "name", "__fromCanvasComponent", "_initialStyle", "widthType", "heightType", "_usesDOMRect", "autoSize", "style", "fontLoadStatus", "matchesCurrentRoute", "preload", "tabIndex"]);
+                const _j = this.props, { font, visible, alignment, willChangeTransform, opacity, id: id3, layoutId, className: className2, transition, variants, name, __fromCanvasComponent, _initialStyle, widthType: _widthType, heightType: _heightType, _usesDOMRect, autoSize, style: styleProp, fontLoadStatus, matchesCurrentRoute, preload: _preload, tabIndex } = _j, rest = __rest(_j, ["font", "visible", "alignment", "willChangeTransform", "opacity", "id", "layoutId", "className", "transition", "variants", "name", "__fromCanvasComponent", "_initialStyle", "widthType", "heightType", "_usesDOMRect", "autoSize", "style", "fontLoadStatus", "matchesCurrentRoute", "preload", "tabIndex"]);
                 if (!visible) {
                     return null;
                 }
@@ -37139,7 +37309,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);
@@ -37173,7 +37343,7 @@ var InternalID = class {
     }
 };
 var PathSegmentOuter = /* @__PURE__ */ (() => {
-    const _PathSegment = class {
+    const _PathSegment = /*#__PURE__*/ class {
         constructor(value) {
             __publicField(this, '__class', 'PathSegment');
             __publicField(this, 'x', 0);
@@ -37419,7 +37589,7 @@ function transformString(transform2) {
     }
     return result;
 }
-var LinearGradientElement = class extends Component {
+var LinearGradientElement = /*#__PURE__*/ class extends Component {
     render() {
         const { id: id3, stops, x1, x2, y1, y2, } = this.props;
         return /* @__PURE__ */ jsx('linearGradient', {
@@ -37438,7 +37608,7 @@ var LinearGradientElement = class extends Component {
         });
     }
 };
-var RadialGradientElement = class extends Component {
+var RadialGradientElement = /*#__PURE__*/ class extends Component {
     render() {
         const { centerAnchorX, centerAnchorY, id: id3, widthFactor, heightFactor, stops, } = this.props;
         return /* @__PURE__ */ jsx('radialGradient', {
@@ -37457,7 +37627,7 @@ var RadialGradientElement = class extends Component {
         });
     }
 };
-var SVGRoot = class extends Component {
+var SVGRoot = /*#__PURE__*/ class extends Component {
     render() {
         const { children, frame: frame2, innerRef, } = this.props;
         const { width, height, } = frame2;
@@ -37487,12 +37657,12 @@ var Vector = /* @__PURE__ */ (() => {
     var _a;
     return _a = class extends Layer {
         render() {
-            var _f, _j;
+            var _j, _k;
             countNodeRender();
             const { opacity, calculatedPath, d, insideStroke, shapeId, strokeEnabled, strokeClipId, strokeWidth, idAttribute, rect, shadows, strokeAlpha, name, includeTransform, isRootVectorNode, rotation, id: id3, lineCap, lineJoin, strokeColor, strokeMiterLimit, strokeDashArray, strokeDashOffset, fill, variants, transition, } = this.props;
             if (!id3 || !shapeId || !strokeClipId)
                 return null;
-            const rotate = (_j = (_f = this.props.rotate) !== null && _f !== void 0 ? _f : rotation) !== null && _j !== void 0 ? _j : 0;
+            const rotate = (_k = (_j = this.props.rotate) !== null && _j !== void 0 ? _j : rotation) !== null && _k !== void 0 ? _k : 0;
             const { target, } = RenderEnvironment;
             const transform2 = transformValues(rect, rotate, isRootVectorNode, includeTransform);
             let vectorFill;
@@ -37638,9 +37808,9 @@ var Vector = /* @__PURE__ */ (() => {
             }));
         }
         renderElement(element) {
-            var _f, _j;
+            var _j, _k;
             const { isRootVectorNode, width, height, rect, willChangeTransform, includeTransform, } = this.props;
-            const frame2 = (_j = (_f = this.props.frame) !== null && _f !== void 0 ? _f : rect) !== null && _j !== void 0 ? _j : {
+            const frame2 = (_k = (_j = this.props.frame) !== null && _j !== void 0 ? _j : rect) !== null && _k !== void 0 ? _k : {
                 x: 0,
                 y: 0,
                 width: 100,