unframer 2.5.3 → 2.6.0

package/src/framer.js

@@ -146,7 +146,7 @@ var SwitchLayoutGroupContext = createContext({},);
 var LazyContext = createContext({
   strict: false,
 },);
-var Queue = class {
+var Queue = /*#__PURE__*/ class {
   constructor() {
     this.order = [];
     this.scheduled = /* @__PURE__ */ new Set();
@@ -1606,7 +1606,7 @@ function flushKeyframeResolvers() {
   readAllKeyframes();
   measureAllKeyframes();
 }
-var KeyframeResolver = class {
+var KeyframeResolver = /*#__PURE__*/ class {
   constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false,) {
     this.isComplete = false;
     this.isAsync = false;
@@ -1878,7 +1878,7 @@ function getFinalKeyframe(keyframes2, {
   const index = repeat && repeatType !== 'loop' && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
   return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
-var BaseAnimation = class {
+var BaseAnimation = /*#__PURE__*/ class {
   constructor({
     autoplay = true,
     delay: delay2 = 0,
@@ -2011,7 +2011,7 @@ var generators = {
   spring,
 };
 var percentToProgress = (percent2) => percent2 / 100;
-var MainThreadAnimation = class extends BaseAnimation {
+var MainThreadAnimation = /*#__PURE__*/ class extends BaseAnimation {
   constructor({
     KeyframeResolver: KeyframeResolver$1 = KeyframeResolver,
     ...options
@@ -2491,7 +2491,7 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
     }
   }
 }
-var DOMKeyframesResolver = class extends KeyframeResolver {
+var DOMKeyframesResolver = /*#__PURE__*/ class extends KeyframeResolver {
   constructor(unresolvedKeyframes, onComplete, name, motionValue2,) {
     super(
       unresolvedKeyframes,
@@ -2702,7 +2702,7 @@ function pregenerateKeyframes(keyframes2, options,) {
     ease: 'linear',
   };
 }
-var AcceleratedAnimation = class extends BaseAnimation {
+var AcceleratedAnimation = /*#__PURE__*/ class extends BaseAnimation {
   constructor(options,) {
     super(options,);
     const {
@@ -2974,7 +2974,7 @@ function moveItem([...arr], fromIndex, toIndex,) {
   }
   return arr;
 }
-var SubscriptionManager = class {
+var SubscriptionManager = /*#__PURE__*/ class {
   constructor() {
     this.subscriptions = [];
   }
@@ -3008,7 +3008,7 @@ var isFloat = (value) => {
 var collectMotionValues = {
   current: void 0,
 };
-var MotionValue = class {
+var MotionValue = /*#__PURE__*/ class {
   /**
    * @param init - The initiating value
    * @param config - Optional configuration options
@@ -3342,7 +3342,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,);
@@ -3871,14 +3871,14 @@ function createState() {
     exit: createTypeState(),
   };
 }
-var Feature = class {
+var Feature = /*#__PURE__*/ class {
   constructor(node,) {
     this.isMounted = false;
     this.node = node;
   }
   update() {}
 };
-var AnimationFeature = class extends Feature {
+var AnimationFeature = /*#__PURE__*/ class extends Feature {
   /**
    * We dynamically generate the AnimationState manager as it contains a reference
    * to the underlying animation library. We only want to load that if we load this,
@@ -3917,7 +3917,7 @@ var AnimationFeature = class extends Feature {
   unmount() {}
 };
 var id = 0;
-var ExitAnimationFeature = class extends Feature {
+var ExitAnimationFeature = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.id = id++;
@@ -4035,7 +4035,7 @@ function isPresent(context,) {
   return context === null ? true : context.isPresent;
 }
 var compareByDepth = (a, b,) => a.depth - b.depth;
-var FlatTree = class {
+var FlatTree = /*#__PURE__*/ class {
   constructor() {
     this.children = [];
     this.isDirty = false;
@@ -4157,7 +4157,7 @@ function getClosestProjectingNode(visualElement,) {
   if (!visualElement) return void 0;
   return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent,);
 }
-var VisualElement = class {
+var VisualElement = /*#__PURE__*/ class {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
    * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
@@ -5053,13 +5053,13 @@ function addHoverEvent(node, isActive,) {
     passive: !node.getProps()[callbackName],
   },);
 }
-var HoverGesture = class extends Feature {
+var HoverGesture = /*#__PURE__*/ class extends Feature {
   mount() {
     this.unmount = pipe(addHoverEvent(this.node, true,), addHoverEvent(this.node, false,),);
   }
   unmount() {}
 };
-var FocusGesture = class extends Feature {
+var FocusGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.isActive = false;
@@ -5102,7 +5102,7 @@ function fireSyntheticPointerEvent(name, handler,) {
   const syntheticPointerEvent = new PointerEvent('pointer' + name,);
   handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent,),);
 }
-var PressGesture = class extends Feature {
+var PressGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.removeStartListeners = noop;
@@ -5257,7 +5257,7 @@ var thresholdNames = {
   some: 0,
   all: 1,
 };
-var InViewFeature = class extends Feature {
+var InViewFeature = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.hasEnteredView = false;
@@ -5339,7 +5339,7 @@ var gestureAnimations = {
     Feature: HoverGesture,
   },
 };
-var PanSession = class {
+var PanSession = /*#__PURE__*/ class {
   constructor(event, handlers, {
     transformPagePoint,
     contextWindow,
@@ -5755,7 +5755,7 @@ var getContextWindow = ({
   return current ? current.ownerDocument.defaultView : null;
 };
 var elementDragControls = /* @__PURE__ */ new WeakMap();
-var VisualElementDragControls = class {
+var VisualElementDragControls = /*#__PURE__*/ class {
   constructor(visualElement,) {
     this.openGlobalLock = null;
     this.isDragging = false;
@@ -6195,7 +6195,7 @@ function getCurrentDirection(offset, lockThreshold = 10,) {
   }
   return direction;
 }
-var DragGesture = class extends Feature {
+var DragGesture = /*#__PURE__*/ class extends Feature {
   constructor(node,) {
     super(node,);
     this.removeGroupControls = noop;
@@ -6221,7 +6221,7 @@ var asyncHandler = (handler) => (event, info,) => {
     frame.postRender(() => handler(event, info,));
   }
 };
-var PanGesture = class extends Feature {
+var PanGesture = /*#__PURE__*/ class extends Feature {
   constructor() {
     super(...arguments,);
     this.removePointerDownListener = noop;
@@ -6313,7 +6313,7 @@ var correctBoxShadow = {
     return template(shadow,);
   },
 };
-var MeasureLayoutWithContext = class extends Component {
+var MeasureLayoutWithContext = /*#__PURE__*/ class extends Component {
   /**
    * This only mounts projection nodes for components that
    * need measuring, we might want to do it for all components
@@ -6537,7 +6537,7 @@ function boxEqualsRounded(a, b,) {
 function aspectRatio(box,) {
   return calcLength(box.x,) / calcLength(box.y,);
 }
-var NodeStack = class {
+var NodeStack = /*#__PURE__*/ class {
   constructor() {
     this.members = [];
   }
@@ -7544,16 +7544,16 @@ function createProjectionNode({
       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) {
@@ -7571,17 +7571,17 @@ function createProjectionNode({
       }
       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
@@ -7589,7 +7589,7 @@ function createProjectionNode({
           ? this.latestValues.opacity
           : valuesToRender.opacityExit;
       } else {
-        styles2.opacity = lead === this
+        styles4.opacity = lead === this
           ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : ''
           : valuesToRender.opacityExit !== void 0
           ? valuesToRender.opacityExit
@@ -7601,22 +7601,22 @@ function createProjectionNode({
           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;
@@ -7842,7 +7842,7 @@ var drag = {
     MeasureLayout,
   },
 };
-var DOMVisualElement = class extends VisualElement {
+var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
   constructor() {
     super(...arguments,);
     this.KeyframeResolver = DOMKeyframesResolver;
@@ -7864,7 +7864,7 @@ var DOMVisualElement = class extends VisualElement {
 function getComputedStyle2(element,) {
   return window.getComputedStyle(element,);
 }
-var HTMLVisualElement = class extends DOMVisualElement {
+var HTMLVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
   constructor() {
     super(...arguments,);
     this.type = 'html';
@@ -7908,7 +7908,7 @@ var HTMLVisualElement = class extends DOMVisualElement {
     renderHTML(instance, renderState, styleProp, projection,);
   }
 };
-var SVGVisualElement = class extends DOMVisualElement {
+var SVGVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
   constructor() {
     super(...arguments,);
     this.type = 'svg';
@@ -8000,7 +8000,7 @@ function useForceUpdate() {
 function useUnmountEffect(callback,) {
   return useEffect(() => () => callback(), [],);
 }
-var PopChildMeasure = class extends React2.Component {
+var PopChildMeasure = /*#__PURE__*/ class extends React2.Component {
   getSnapshotBeforeUpdate(prevProps,) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -9115,7 +9115,7 @@ function useTime() {
   useAnimationFrame((t) => time2.set(t,));
   return time2;
 }
-var WillChangeMotionValue = class extends MotionValue {
+var WillChangeMotionValue = /*#__PURE__*/ class extends MotionValue {
   constructor() {
     super(...arguments,);
     this.members = [];
@@ -9640,7 +9640,7 @@ function useInView(ref, {
   }, [root, ref, margin, once, amount,],);
   return isInView;
 }
-var DragControls = class {
+var DragControls = /*#__PURE__*/ class {
   constructor() {
     this.componentControls = /* @__PURE__ */ new Set();
   }
@@ -9832,7 +9832,7 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
   }
 }
 var createObject = () => ({});
-var StateVisualElement = class extends VisualElement {
+var StateVisualElement = /*#__PURE__*/ class extends VisualElement {
   build() {}
   measureInstanceViewportBox() {
     return createBox();
@@ -9996,7 +9996,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
   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';
@@ -10011,7 +10011,7 @@ var require_hsluv = __commonJS({
       value: true,
     },);
     exports.Hsluv = void 0;
-    var Hsluv2 = class {
+    var Hsluv2 = /*#__PURE__*/ class {
       constructor() {
         this.hex = '#000000';
         this.rgb_r = 0;
@@ -11686,9 +11686,9 @@ function renderPage(Page4, defaultPageStyle,) {
   };
   return React4.isValidElement(Page4,) ? React4.cloneElement(Page4, style,) : React4.createElement(Page4, style,);
 }
-var NotFoundError = class extends Error {};
-var ErrorBoundaryCaughtError = class extends Error {};
-var ErrorBoundary = class extends Component {
+var NotFoundError = /*#__PURE__*/ class extends Error {};
+var ErrorBoundaryCaughtError = /*#__PURE__*/ class extends Error {};
+var ErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor(props,) {
     super(props,);
     this.state = {
@@ -12833,7 +12833,7 @@ function RoutesProvider({
     children,
   },);
 }
-var SuspenseErrorBoundary = class extends Component {
+var SuspenseErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     this.state = {
@@ -13435,7 +13435,7 @@ function deprecationWarning(removedItem, removalVersion, replacement,) {
   const warningText = `Deprecation warning: ${removedItem} will be removed in version ${removalVersion}${replacementText}.`;
   warnOnce2(warningText,);
 }
-var Observers = class {
+var Observers = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'observers', /* @__PURE__ */ new Set(),);
     __publicField(this, 'transactions', {},);
@@ -13555,7 +13555,7 @@ function animatableInterpolation(value, currentInterpolation,) {
     },
   };
 }
-var AnimatableValue = class {
+var AnimatableValue = /*#__PURE__*/ class {
   constructor(value,) {
     this.value = value;
     __publicField(this, 'observers', new Observers(),);
@@ -13747,7 +13747,7 @@ function controlPointsForCurve(curve,) {
       return [0.42, 0, 0.58, 1,];
   }
 }
-var BezierAnimator = class {
+var BezierAnimator = /*#__PURE__*/ class {
   constructor(options, interpolation,) {
     this.interpolation = interpolation;
     __publicField(this, 'unitBezier',);
@@ -13802,7 +13802,7 @@ var BezierAnimator = class {
     return 1 / (200 * duration);
   }
 };
-var UnitBezier = class {
+var UnitBezier = /*#__PURE__*/ class {
   constructor(point1, point2,) {
     __publicField(this, 'a',);
     __publicField(this, 'b',);
@@ -13848,7 +13848,7 @@ var UnitBezier = class {
     return t2;
   }
 };
-var Integrator = class {
+var Integrator = /*#__PURE__*/ class {
   constructor(accelerationFunction,) {
     __publicField(this, 'accelerationForState',);
     this.accelerationForState = accelerationFunction;
@@ -13883,7 +13883,7 @@ var Integrator = class {
     return output;
   }
 };
-var FrictionAnimator = class {
+var FrictionAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'options',);
     __publicField(this, 'state',);
@@ -14061,7 +14061,7 @@ function isDampingDurationSpringOptions(options,) {
   }
   return typeof options.dampingRatio === 'number' || typeof options.duration === 'number' || typeof options.mass === 'number';
 }
-var SpringAnimator = class {
+var SpringAnimator = /*#__PURE__*/ class {
   constructor(options, interpolation,) {
     this.interpolation = interpolation;
     __publicField(this, 'options',);
@@ -14148,7 +14148,7 @@ var Defaults = {
     tolerance: 1,
   },
 };
-var InertialScrollAnimator = class {
+var InertialScrollAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'options',);
     __publicField(this, 'current',);
@@ -15390,7 +15390,7 @@ var DefaultInterpolationOptions = {
   colorModel: 'husl',
   /* HUSL */
 };
-var ValueInterpolation = class {
+var ValueInterpolation = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -15443,7 +15443,7 @@ var Defaults2 = /* @__PURE__ */ (() => ({
   delta: 1 / 60,
   maxValues: 1e4,
 }))();
-var PrecalculatedAnimator = class {
+var PrecalculatedAnimator = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'animator',);
     __publicField(this, 'values',);
@@ -15510,7 +15510,7 @@ var PrecalculatedAnimator = class {
   }
 };
 var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)();
-var EventEmitter = class {
+var EventEmitter = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, '_emitter', new EventEmitter3(),);
   }
@@ -15626,7 +15626,7 @@ var _raf = (f) => {
 var __raf = /* @__PURE__ */ (() => safeWindow['requestAnimationFrame'] || _raf)();
 var raf = (f) => __raf(f,);
 var LoopTimeStep = /* @__PURE__ */ (() => 1 / 60)();
-var Loop = class extends EventEmitter {
+var Loop = /*#__PURE__*/ class extends EventEmitter {
   /**
    * @internal
    */
@@ -15833,7 +15833,7 @@ var RenderTarget = {
     return false;
   },
 };
-var AnimationDriver = class {
+var AnimationDriver = /*#__PURE__*/ class {
   constructor(animator, updateCallback, finishedCallback,) {
     this.animator = animator;
     this.updateCallback = updateCallback;
@@ -15859,7 +15859,7 @@ var AnimationDriver = class {
     return this.animator.isFinished();
   }
 };
-var MainLoopAnimationDriver = class extends AnimationDriver {
+var MainLoopAnimationDriver = /*#__PURE__*/ class extends AnimationDriver {
   play() {
     if (RenderEnvironment.target !== RenderTarget.preview) {
       this.finishedCallback && this.finishedCallback(false,);
@@ -15880,7 +15880,7 @@ var DefaultDeprecatedAnimationOptions = {
   colorModel: 'husl',
   /* HUSL */
 };
-var FramerAnimation = class {
+var FramerAnimation = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -16573,7 +16573,7 @@ function getColorsFromTheme(theme, type,) {
     screenColor: isDarkTheme ? '#333' : '#eee',
   };
 }
-var ErrorBoundary2 = class extends Component {
+var ErrorBoundary2 = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {},);
@@ -18189,6 +18189,12 @@ function useConstraints(props,) {
   const calculatedRect = calculateRect(props, parentSize, true,);
   return calculatedRect;
 }
+function isAutoSized({
+  width,
+  height,
+},) {
+  return width === 'auto' || width === 'min-content' || height === 'auto' || height === 'min-content';
+}
 var ControlType = /* @__PURE__ */ ((ControlType2) => {
   ControlType2['Boolean'] = 'boolean';
   ControlType2['Number'] = 'number';
@@ -18217,6 +18223,7 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
   ControlType2['Cursor'] = 'cursor';
   ControlType2['Padding'] = 'padding';
   ControlType2['BorderRadius'] = 'borderradius';
+  ControlType2['CollectionReference'] = 'collectionreference';
   return ControlType2;
 })(ControlType || {},);
 var isFlexboxGapSupportedCached;
@@ -19075,8 +19082,8 @@ var didInject = false;
 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,);
   }
 }
@@ -19122,6 +19129,7 @@ function getControlDefaultValue(control,) {
   try {
     switch (control.type) {
       case 'string':
+      case 'collectionreference':
       case 'color':
       case 'date':
       case 'link':
@@ -21252,28 +21260,28 @@ function backgroundImageFromProps(props,) {
 }
 function collectBorderStyleForProps(props, style, collapseEqualBorders = true,) {
   const {
-    borderWidth: borderWidth2,
+    borderWidth,
     borderStyle,
     borderColor,
   } = props;
-  if (!borderWidth2) {
+  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;
@@ -21422,7 +21430,7 @@ function useForceUpdate3() {
 }
 var ResizeObserverPolyfill = /* @__PURE__ */ (() => require_resize_observer_umd().ResizeObserver)();
 var DEFAULT_SIZE = 200;
-var SharedObserver = class {
+var SharedObserver = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'sharedResizeObserver',);
     __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap(),);
@@ -21753,6 +21761,7 @@ function resetSetStyle(element, key7, toValue, microtask2 = true,) {
   }
 }
 var Layer = /* @__PURE__ */ (() => {
+  /*#__PURE__*/
   class Layer2 extends Component {
     constructor() {
       super(...arguments,);
@@ -22483,12 +22492,6 @@ function resolveParentSize(props, unwrappedProps, rect, inCodeComponent,) {
   }
   return 0;
 }
-function isAutoSized({
-  width,
-  height,
-},) {
-  return width === 'auto' || width === 'min-content' || height === 'auto' || height === 'min-content';
-}
 function EmptyState({
   title = '',
   description = 'Click and drag the connector to any frame on the canvas \u2192',
@@ -22590,7 +22593,7 @@ var SharedLayoutContext = /* @__PURE__ */ React4.createContext({
   scheduleProjectionDidUpdate: () => {},
   initLead: () => {},
 },);
-var SharedLayoutRoot = class extends Component {
+var SharedLayoutRoot = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'shouldAnimate', false,);
@@ -22673,7 +22676,7 @@ function MagicMotionCrossfadeRoot(props,) {
     children: props.children,
   },);
 }
-var SharedIntersectionObserver = class {
+var SharedIntersectionObserver = /*#__PURE__*/ class {
   constructor(options,) {
     __publicField(this, 'sharedIntersectionObserver',);
     __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap(),);
@@ -22817,7 +22820,7 @@ function pointForEvent(event, customTarget = null,) {
   };
   return point2;
 }
-var FramerEvent = class {
+var FramerEvent = /*#__PURE__*/ class {
   /**
    * @internal
    */
@@ -22924,7 +22927,7 @@ var DraggingContext = /* @__PURE__ */ React4.createContext({
   dragging: false,
 },);
 function WithDragging(Component15,) {
-  const _WithDraggingHOC = class extends React4.Component {
+  const _WithDraggingHOC = /*#__PURE__*/ class extends React4.Component {
     constructor(props, defaultProps,) {
       super(props, defaultProps,);
       __publicField(this, 'state', {
@@ -23743,7 +23746,7 @@ var ObservableObject = /* @__PURE__ */ (() => {
   };
   return ObservableObject2;
 })();
-var ObservableObjectProxyHandler = class {
+var ObservableObjectProxyHandler = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'set', (target, key7, value, receiver,) => {
       if (key7 === $private) {
@@ -24419,7 +24422,7 @@ function applyLayoutProp(style, props, key7,) {
   }
 }
 var DeprecatedFrame = /* @__PURE__ */ (() => {
-  const _DeprecatedFrameInner = class extends Layer {
+  const _DeprecatedFrameInner = /*#__PURE__*/ class extends Layer {
     constructor() {
       super(...arguments,);
       __publicField(this, 'element', null,);
@@ -24800,7 +24803,7 @@ var Frame = /* @__PURE__ */ (() => {
   FrameInner['displayName'] = 'Frame';
   return FrameInner;
 })();
-var LayoutTree = class extends Component {
+var LayoutTree = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'layoutMaybeMutated',);
@@ -25238,7 +25241,7 @@ var allAnimatableProperties = {
   originZ: 0,
   opacity: 1,
 };
-var NavigatorMock = class {
+var NavigatorMock = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'warning', () => {
       warnOnce2('The Navigator API is only available inside of Framer: https://www.framer.com/',);
@@ -26292,7 +26295,7 @@ var NavigationTransitionType = /* @__PURE__ */ ((NavigationTransitionType2) => {
   return NavigationTransitionType2;
 })(NavigationTransitionType || {},);
 function WithNavigator(BaseComponent, navigationTransition, navigationTransitionDirection, NavigationTarget, navigationTransitionOptions,) {
-  const InternalWithNavigator = class extends React4.Component {
+  const InternalWithNavigator = /*#__PURE__*/ class extends React4.Component {
     render() {
       return /* @__PURE__ */ jsx(NavigationContext.Consumer, {
         children: (navigation) => {
@@ -27793,7 +27796,7 @@ function stateName(state,) {
 function containsBitmask(value, bitmask,) {
   return (value & bitmask) !== 0;
 }
-var GestureRecognizer = class {
+var GestureRecognizer = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, '_state', 2,/* Possible */
     );
@@ -27869,7 +27872,7 @@ var GestureRecognizer = class {
     }
   }
 };
-var MouseWheelGestureRecognizer = class extends GestureRecognizer {
+var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'startEvent',);
@@ -27914,7 +27917,7 @@ var MouseWheelGestureRecognizer = class extends GestureRecognizer {
     this.onMouseWheelEnd(event,);
   }
 };
-var PanGestureRecognizer = class extends GestureRecognizer {
+var PanGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'startEvent',);
@@ -27989,7 +27992,7 @@ var PanGestureRecognizer = class extends GestureRecognizer {
     }
   }
 };
-var TapGestureRecognizer = class extends GestureRecognizer {
+var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
   constructor() {
     super(...arguments,);
     __publicField(this, 'eventType', 'tap',);
@@ -28019,7 +28022,7 @@ var TapGestureRecognizer = class extends GestureRecognizer {
     }
   }
 };
-var FramerEventSession = class {
+var FramerEventSession = /*#__PURE__*/ class {
   constructor(dispatcher, customOrigin,) {
     __publicField(this, 'events', [],);
     __publicField(this, 'recognizers', [],);
@@ -28179,7 +28182,7 @@ var FramerEventSession = class {
     return subtract(event.devicePoint, this.startEvent.devicePoint,);
   }
 };
-var MouseEventListener = class extends Component {
+var MouseEventListener = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'domMouseDown', (originalEvent) => {
@@ -28231,7 +28234,7 @@ var MouseEventListener = class extends Component {
     safeWindow.removeEventListener('wheel', this.domMouseWheel,);
   }
 };
-var TouchEventListener = class extends Component {
+var TouchEventListener = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'domTouchStart', (originalEvent) => {
@@ -29278,7 +29281,7 @@ function useObserveData() {
   const context = React4.useContext(DataObserverContext,);
   return !isNaN(context.update,);
 }
-var DataObserver = class extends Component {
+var DataObserver = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'observers', [],);
@@ -29622,7 +29625,6 @@ function usePresenceAnimation(
   const [isPresent2, safeToRemove,] = usePresence();
   const lastPresence = useRef(false,);
   const effect = useConstant2(() => {
-    var _a;
     const base = initial ?? style;
     if (!isObject2(base,)) {
       return {
@@ -29631,7 +29633,7 @@ function usePresenceAnimation(
     }
     const defaults = {};
     for (const key7 in base) {
-      const value = isObject2(base,) ? (_a = asRecord(base,)) == null ? void 0 : _a[key7] : void 0;
+      const value = isObject2(base,) ? base[key7] : void 0;
       if (!isNumber2(value,)) continue;
       defaults[key7] = value;
     }
@@ -29860,6 +29862,7 @@ function useStyleAppearEffect(options, ref,) {
       }
       return new Promise((resolve) => {
         if (shouldReduceMotion && key7 !== 'opacity') {
+          if (isNumber2(toValue,)) effect.values[key7].set(toValue,);
           resolve();
         } else {
           const opts = {
@@ -30436,7 +30439,7 @@ var withGeneratedLayoutId = (Component15) =>
       ref,
     },);
   },);
-var ContainerErrorBoundary = class extends Component {
+var ContainerErrorBoundary = /*#__PURE__*/ class extends Component {
   constructor() {
     super(...arguments,);
     __publicField(this, 'state', {
@@ -31408,7 +31411,7 @@ function Floating({
   );
 }
 var GeneratedComponentContext = /* @__PURE__ */ React4.createContext(void 0,);
-var LazyValue = class {
+var LazyValue = /*#__PURE__*/ class {
   constructor(resolver,) {
     this.resolver = resolver;
     __publicField(this, 'status',);
@@ -32033,10 +32036,248 @@ function resolvePageScope(pageLink, router,) {
     preserveQueryParams: false,
   },);
 }
+var salt = 'framer';
+var difficulty = 3;
+var tokenLength = 30;
+var maxTime = 3e3;
+async function calculateProofOfWork() {
+  const target = '0'.repeat(difficulty,);
+  const startTime = Date.now();
+  let processing = true;
+  while (processing) {
+    const timestamp = Date.now();
+    if (timestamp - startTime > maxTime) {
+      processing = false;
+      return;
+    }
+    const nonce = randomCharacters(tokenLength,);
+    const secret = `${timestamp}:${nonce}`;
+    const hash2 = await sha256(salt + secret,);
+    if (hash2.startsWith(target,)) {
+      return {
+        secret,
+        hash: hash2,
+      };
+    }
+  }
+  return;
+}
+async function sha256(text,) {
+  const buffer = new TextEncoder().encode(text,);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer,);
+  return Array.from(new Uint8Array(hashBuffer,),).map((b) => b.toString(16,).padStart(2, '0',)).join('',);
+}
+function randomCharacters(count,) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const charactersLength = characters.length;
+  for (let i = 0; i < count; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength,),);
+  }
+  return result;
+}
+function getEncodedFormFieldsHeader(data2,) {
+  return Array.from(data2.keys(),).map(encodeURIComponent,).join(',',);
+}
+function formReducer({
+  state,
+}, {
+  type,
+},) {
+  switch (type) {
+    case 'complete':
+    case 'incomplete':
+      if (state === 'error') {
+        return {
+          state: 'error',
+        };
+      }
+      return {
+        state: type,
+      };
+    case 'submit':
+      return {
+        state: 'pending',
+      };
+    case 'success':
+      return {
+        state: 'success',
+      };
+    case 'error':
+      return {
+        state: 'error',
+      };
+    default:
+      assertNever(type,);
+  }
+}
+function stateCanSubmitForm(state,) {
+  return state.state === 'incomplete' || state.state === 'complete';
+}
+function preventDefault(e,) {
+  e.preventDefault();
+}
+var FormContext = React4.createContext(void 0,);
+var FormContainer = /* @__PURE__ */ React4.forwardRef(({
+  action,
+  children,
+  redirectUrl,
+  onSuccess,
+  onError,
+  onLoading,
+  ...props
+}, ref,) => {
+  const router = useRouter();
+  const [state, dispatch,] = React4.useReducer(formReducer, {
+    state: 'incomplete',
+  },);
+  const {
+    activeLocale,
+  } = useLocaleInfo();
+  const projectHash = useContext3(FormContext,);
+  const callbacks = React4.useRef({
+    onSuccess,
+    onError,
+    onLoading,
+  },);
+  callbacks.current = {
+    onSuccess,
+    onError,
+    onLoading,
+  };
+  async function redirectTo(link,) {
+    var _a, _b;
+    if (isLinkToWebPage(link,)) {
+      if (!router) return;
+      const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, link.webPageId,);
+      if (!route) return;
+      const {
+        unresolvedHashSlugs,
+        unresolvedPathSlugs,
+      } = link;
+      const resolvedSlugs = await resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale,);
+      const combinedPathVariables = Object.assign(
+        {},
+        router.currentPathVariables,
+        link.pathVariables,
+        resolvedSlugs == null ? void 0 : resolvedSlugs.path,
+      );
+      const combinedHashVariables = Object.assign(
+        {},
+        router.currentPathVariables,
+        link.pathVariables,
+        link.hashVariables,
+        resolvedSlugs == null ? void 0 : resolvedSlugs.hash,
+      );
+      const element = getHashForRoute(link.hash, route, combinedHashVariables,);
+      (_b = router.navigate) == null ? void 0 : _b.call(router, link.webPageId, element, combinedPathVariables,);
+      return;
+    }
+    if (!safeWindow) return;
+    safeWindow.open(link, '_blank',);
+  }
+  const handleSubmit = async (event) => {
+    var _a, _b, _c, _d, _e, _f;
+    event.preventDefault();
+    if (!action || !projectHash) return;
+    const data2 = new FormData(event.currentTarget,);
+    for (const [key7, value,] of data2) {
+      if (value instanceof File) data2.delete(key7,);
+    }
+    try {
+      dispatch({
+        type: 'submit',
+      },);
+      (_b = (_a = callbacks.current).onLoading) == null ? void 0 : _b.call(_a,);
+      await submitForm(action, data2, projectHash,);
+      dispatch({
+        type: 'success',
+      },);
+      (_d = (_c = callbacks.current).onSuccess) == null ? void 0 : _d.call(_c,);
+      if (redirectUrl) {
+        await redirectTo(redirectUrl,);
+      }
+    } catch (error) {
+      dispatch({
+        type: 'error',
+      },);
+      (_f = (_e = callbacks.current).onError) == null ? void 0 : _f.call(_e,);
+      console.error(error,);
+    }
+  };
+  const handleKeyDown = (event) => {
+    const {
+      target: input,
+      currentTarget: form,
+      key: key7,
+    } = event;
+    const isTextArea = input instanceof HTMLTextAreaElement;
+    if (isTextArea) return;
+    if (key7 === 'Enter' && form.checkValidity()) {
+      event.preventDefault();
+      void handleSubmit(event,);
+    }
+  };
+  const checkValidity = (e) => {
+    dispatch({
+      type: anyEmptyRequiredFields(e.currentTarget,) ? 'incomplete' : 'complete',
+    },);
+  };
+  return /* @__PURE__ */ jsx(motion.form, {
+    ...props,
+    onSubmit: stateCanSubmitForm(state,) ? handleSubmit : preventDefault,
+    onKeyDown: handleKeyDown,
+    onChange: checkValidity,
+    ref,
+    children: children(state,),
+  },);
+},);
+function anyEmptyRequiredFields(element,) {
+  if (element.children.length === 0) return false;
+  for (const child of element.children) {
+    if (child instanceof HTMLInputElement || child instanceof HTMLTextAreaElement || child instanceof HTMLSelectElement) {
+      if (child.required && child.value === '') return true;
+    } else {
+      const result = anyEmptyRequiredFields(child,);
+      if (result) return true;
+    }
+  }
+  return false;
+}
+async function submitForm(action, data2, projectHash,) {
+  const proofOfWork = await calculateProofOfWork();
+  if (!proofOfWork) {
+    throw new Error('Failed to calculate proof of work',);
+  }
+  const response = await fetch(action, {
+    body: data2,
+    method: 'POST',
+    headers: {
+      'Framer-Site-Id': projectHash,
+      'Framer-POW': proofOfWork.secret,
+      'Framer-Form-Fields': getEncodedFormFieldsHeader(data2,),
+    },
+  },);
+  if (response.ok) {
+    return response;
+  } else {
+    const body = await response.json();
+    const error = 'Failed to submit form';
+    if (responseHasError(body,)) {
+      throw new Error(`${error} - ${body.error.message}`,);
+    }
+    throw new Error(error,);
+  }
+}
+function responseHasError(response,) {
+  return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
+    'message' in response.error && typeof response.error.message === 'string';
+}
 function PageRoot({
   RootComponent,
   isWebsite,
   routeId,
+  framerSiteId,
   pathVariables,
   routes,
   collectionUtils,
@@ -32057,21 +32298,24 @@ function PageRoot({
     return /* @__PURE__ */ jsx(MotionConfig, {
       reducedMotion: isReducedMotion ? 'user' : 'never',
       children: /* @__PURE__ */ jsx(CustomCursorHost, {
-        children: /* @__PURE__ */ jsx(Router, {
-          initialRoute: routeId,
-          initialPathVariables: pathVariables,
-          initialLocaleId: localeId,
-          routes,
-          collectionUtils,
-          notFoundPage,
-          locales,
-          defaultPageStyle: {
-            minHeight: '100vh',
-            width: 'auto',
-          },
-          preserveQueryParams,
-          enableImproveInpDuringHydration,
-          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,
+          },),
         },),
       },),
     },);
@@ -32401,7 +32645,7 @@ async function getCollection(collection, locale,) {
   }
   return collection;
 }
-var CompatibilityDatabaseCollection = class {
+var CompatibilityDatabaseCollection = /*#__PURE__*/ class {
   constructor(collection, locale,) {
     this.collection = collection;
     this.locale = locale;
@@ -32636,12 +32880,12 @@ function compare(left, right, collation,) {
   }
 }
 var INDEX_IDENTIFIER = 'index';
-var ScalarExpression = class {
+var ScalarExpression = /*#__PURE__*/ class {
   static from(expression, schema,) {
     return convertExpression(expression, schema, void 0,);
   }
 };
-var ScalarIdentifier = class extends ScalarExpression {
+var ScalarIdentifier = /*#__PURE__*/ class extends ScalarExpression {
   constructor(schema, name,) {
     super();
     this.schema = schema;
@@ -32673,7 +32917,7 @@ var ScalarIdentifier = class extends ScalarExpression {
     return false;
   }
 };
-var ScalarLiteralValue = class extends ScalarExpression {
+var ScalarLiteralValue = /*#__PURE__*/ class extends ScalarExpression {
   constructor(definition, value,) {
     super();
     this.definition = definition;
@@ -32755,7 +32999,7 @@ var ScalarLiteralValue = class extends ScalarExpression {
     return true;
   }
 };
-var ScalarFunctionCall = class extends ScalarExpression {
+var ScalarFunctionCall = /*#__PURE__*/ class extends ScalarExpression {
   constructor(argumentExpressions,) {
     super();
     this.argumentExpressions = argumentExpressions;
@@ -32781,7 +33025,7 @@ var ScalarFunctionCall = class extends ScalarExpression {
     },);
   }
 };
-var ScalarFunctionCallContains = class extends ScalarFunctionCall {
+var ScalarFunctionCallContains = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallContains.getDefinition(),);
@@ -32817,7 +33061,7 @@ var ScalarFunctionCallContains = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarFunctionCallStartsWith = class extends ScalarFunctionCall {
+var ScalarFunctionCallStartsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallStartsWith.getDefinition(),);
@@ -32853,7 +33097,7 @@ var ScalarFunctionCallStartsWith = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarFunctionCallEndsWith = class extends ScalarFunctionCall {
+var ScalarFunctionCallEndsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarFunctionCallEndsWith.getDefinition(),);
@@ -32889,7 +33133,7 @@ var ScalarFunctionCallEndsWith = class extends ScalarFunctionCall {
     };
   }
 };
-var ScalarCase = class extends ScalarExpression {
+var ScalarCase = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression, conditions, elseExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -32985,13 +33229,13 @@ var ScalarCase = class extends ScalarExpression {
     },);
   }
 };
-var ScalarCaseCondition = class {
+var ScalarCaseCondition = /*#__PURE__*/ class {
   constructor(whenExpression, thenExpression,) {
     this.whenExpression = whenExpression;
     this.thenExpression = thenExpression;
   }
 };
-var ScalarUnaryOperation = class extends ScalarExpression {
+var ScalarUnaryOperation = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -33004,7 +33248,7 @@ var ScalarUnaryOperation = class extends ScalarExpression {
     return this.valueExpression.canEvaluate();
   }
 };
-var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
+var ScalarUnaryOperationNot = /*#__PURE__*/ class extends ScalarUnaryOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'definition', ScalarUnaryOperationNot.getDefinition(),);
@@ -33026,7 +33270,7 @@ var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
     };
   }
 };
-var ScalarLogicalOperation = class extends ScalarExpression {
+var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
   constructor(operandExpressions,) {
     super();
     this.operandExpressions = operandExpressions;
@@ -33051,7 +33295,7 @@ var ScalarLogicalOperation = class extends ScalarExpression {
     },);
   }
 };
-var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationAnd = /*#__PURE__*/ class extends ScalarLogicalOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', 'AND',);
@@ -33067,7 +33311,7 @@ var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
     };
   }
 };
-var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
+var ScalarLogicalOperationOr = /*#__PURE__*/ class extends ScalarLogicalOperation {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', 'OR',);
@@ -33083,7 +33327,7 @@ var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
     };
   }
 };
-var ScalarComparison = class extends ScalarExpression {
+var ScalarComparison = /*#__PURE__*/ class extends ScalarExpression {
   constructor(leftExpression, rightExpression,) {
     super();
     this.leftExpression = leftExpression;
@@ -33111,7 +33355,7 @@ var ScalarComparison = class extends ScalarExpression {
     return this.leftExpression.canEvaluate() && this.rightExpression.canEvaluate();
   }
 };
-var ScalarComparisonEquals = class extends ScalarComparison {
+var ScalarComparisonEquals = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '=',);
@@ -33125,7 +33369,7 @@ var ScalarComparisonEquals = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonNotEquals = class extends ScalarComparison {
+var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '!=',);
@@ -33139,7 +33383,7 @@ var ScalarComparisonNotEquals = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonLessThan = class extends ScalarComparison {
+var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '<',);
@@ -33153,7 +33397,7 @@ var ScalarComparisonLessThan = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '<=',);
@@ -33167,7 +33411,7 @@ var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonGreaterThan = class extends ScalarComparison {
+var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '>',);
@@ -33181,7 +33425,7 @@ var ScalarComparisonGreaterThan = class extends ScalarComparison {
     };
   }
 };
-var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
+var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
   constructor() {
     super(...arguments,);
     __publicField(this, 'operator', '>=',);
@@ -33195,7 +33439,7 @@ var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
     };
   }
 };
-var ScalarTypeCast = class extends ScalarExpression {
+var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
   constructor(valueExpression,) {
     super();
     this.valueExpression = valueExpression;
@@ -33211,7 +33455,7 @@ var ScalarTypeCast = class extends ScalarExpression {
     return this.valueExpression.canEvaluate();
   }
 };
-var ScalarTypeCastBoolean = class extends ScalarTypeCast {
+var ScalarTypeCastBoolean = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'BOOLEAN',);
@@ -33241,7 +33485,7 @@ function convertToBoolean(value,) {
   }
   return false;
 }
-var ScalarTypeCastDate = class extends ScalarTypeCast {
+var ScalarTypeCastDate = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'DATE',);
@@ -33279,7 +33523,7 @@ function convertToDate(value,) {
   }
   return null;
 }
-var ScalarTypeCastNumber = class extends ScalarTypeCast {
+var ScalarTypeCastNumber = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'NUMBER',);
@@ -33316,7 +33560,7 @@ function convertToNumber(value,) {
   }
   return null;
 }
-var ScalarTypeCastString = class extends ScalarTypeCast {
+var ScalarTypeCastString = /*#__PURE__*/ class extends ScalarTypeCast {
   constructor() {
     super(...arguments,);
     __publicField(this, 'dataType', 'STRING',);
@@ -33764,7 +34008,7 @@ function stringifyExecutionTime(self2, total,) {
 function stringifyItems(items,) {
   return `(items: ${items})`;
 }
-var QueryPlan = class {
+var QueryPlan = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'executionTime', 0,);
     __publicField(this, 'itemCount', 0,);
@@ -33777,7 +34021,7 @@ var QueryPlan = class {
     return result;
   }
 };
-var ScanCollectionPlan = class extends QueryPlan {
+var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(collection,) {
     super();
     this.collection = collection;
@@ -33791,7 +34035,7 @@ var ScanCollectionPlan = class extends QueryPlan {
     return this.collection.scanItems();
   }
 };
-var LookupIndexPlan = class extends QueryPlan {
+var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(index, query,) {
     super();
     this.index = index;
@@ -33831,7 +34075,7 @@ var LookupIndexPlan = class extends QueryPlan {
     return this.index.lookupItems(this.query,);
   }
 };
-var UnionPlan = class extends QueryPlan {
+var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlans,) {
     super();
     this.childPlans = childPlans;
@@ -33861,7 +34105,7 @@ var UnionPlan = class extends QueryPlan {
     return (result == null ? void 0 : result.items()) ?? [];
   }
 };
-var IntersectionPlan = class extends QueryPlan {
+var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlans,) {
     super();
     this.childPlans = childPlans;
@@ -33891,7 +34135,7 @@ var IntersectionPlan = class extends QueryPlan {
     return (result == null ? void 0 : result.items()) ?? [];
   }
 };
-var ResolveItemsPlan = class extends QueryPlan {
+var ResolveItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, collection, richTextResolver, select,) {
     super();
     this.childPlan = childPlan;
@@ -33921,7 +34165,7 @@ var ResolveItemsPlan = class extends QueryPlan {
     return this.collection.resolveItems(childPointers,);
   }
 };
-var FilterItemsPlan = class extends QueryPlan {
+var FilterItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, filterExpression,) {
     super();
     this.childPlan = childPlan;
@@ -33943,7 +34187,7 @@ var FilterItemsPlan = class extends QueryPlan {
     },);
   }
 };
-var SortItemsPlan = class extends QueryPlan {
+var SortItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, orderExpressions, collection,) {
     super();
     this.childPlan = childPlan;
@@ -33992,14 +34236,14 @@ var SortItemsPlan = class extends QueryPlan {
     },);
   }
 };
-var ScalarOrderExpression = class {
+var ScalarOrderExpression = /*#__PURE__*/ class {
   constructor(expression, direction, collation,) {
     this.expression = expression;
     this.direction = direction;
     this.collation = collation;
   }
 };
-var SliceItemsPlan = class extends QueryPlan {
+var SliceItemsPlan = /*#__PURE__*/ class extends QueryPlan {
   constructor(childPlan, offsetExpression, limitExpression,) {
     super();
     this.childPlan = childPlan;
@@ -34036,7 +34280,7 @@ var SliceItemsPlan = class extends QueryPlan {
     return childItems.slice(offset, offset + limit,);
   }
 };
-var DatabaseItemMap = class extends Map {
+var DatabaseItemMap = /*#__PURE__*/ class extends Map {
   constructor(items = [],) {
     super();
     for (const item of items) {
@@ -34067,7 +34311,7 @@ var DatabaseItemMap = class extends Map {
     return [...values,];
   }
 };
-var RichTextResolver = class {
+var RichTextResolver = /*#__PURE__*/ class {
   constructor(collection,) {
     this.collection = collection;
     __publicField(this, 'cache', /* @__PURE__ */ new Map(),);
@@ -34218,7 +34462,7 @@ function getDatabaseCollection({
   }
   assertNever(data2, 'Unsupported collection type',);
 }
-var QueryEngine = class {
+var QueryEngine = /*#__PURE__*/ class {
   async query(query, locale,) {
     const collection = getDatabaseCollection(query.from, locale,);
     const richTextResolver = new RichTextResolver(collection,);
@@ -34449,7 +34693,7 @@ function createScanCollectionPlan(collection, expression,) {
   const plan = new ScanCollectionPlan(collection,);
   return new FilterItemsPlan(plan, expression,);
 }
-var AnimationCollector = class {
+var AnimationCollector = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'entries', /* @__PURE__ */ new Map(),);
   }
@@ -35074,7 +35318,7 @@ function usePrototypeNavigate({
     return false;
   };
 }
-var QueryCache = class {
+var QueryCache = /*#__PURE__*/ class {
   constructor(queryEngine2,) {
     this.queryEngine = queryEngine2;
     __publicField(this, 'cache', /* @__PURE__ */ new Map(),);
@@ -36190,7 +36434,7 @@ var FontSourceNames = /* @__PURE__ */ ((FontSourceNames2) => {
   return FontSourceNames2;
 })(FontSourceNames || {},);
 var systemFontFamilyName = 'System Default';
-var LocalFontSource = class {
+var LocalFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'local',/* Local */
     );
@@ -36270,8 +36514,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}__`;
@@ -36332,7 +36576,7 @@ function getCustomFontName(fileName, properties,) {
   const variant = properties.font.preferredSubFamily === '' ? properties.font.fontSubFamily : properties.font.preferredSubFamily;
   return `${fontFamily} ${variant}`;
 }
-var CustomFontSource = class {
+var CustomFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'custom',/* Custom */
     );
@@ -36500,7 +36744,7 @@ var weightNameToNumber = {
 };
 var weightNames = /* @__PURE__ */ Object.keys(weightNameToNumber,);
 var allowedVariantsRegex = /* @__PURE__ */ (() => new RegExp(`^(?:${[...weightNames, 'italic',].join('|',)})`, 'u',))();
-var FontshareSource = class {
+var FontshareSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'fontshare',/* Fontshare */
     );
@@ -36638,7 +36882,7 @@ var weightNameToNumber2 = {
   ExtraBold: 800,
   Black: 900,
 };
-var FramerFontSource = class {
+var FramerFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'framer',/* Framer */
     );
@@ -36699,7 +36943,7 @@ var FramerFontSource = class {
   }
 };
 var googleFontSelectorPrefix = 'GF;';
-var GoogleFontSource = class {
+var GoogleFontSource = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'name', 'google',/* Google */
     );
@@ -36806,7 +37050,7 @@ function mapToKnownCategory2(category,) {
 var import_fontfaceobserver = __toESM(require_fontfaceobserver_standalone(), 1,);
 var FONT_LOADING_TIMEOUT = 5e3;
 var MAX_RETRIES = 3;
-var FontLoadingError = class extends Error {
+var FontLoadingError = /*#__PURE__*/ class extends Error {
   constructor(message,) {
     super(message,);
     this.name = 'FontLoadingError';
@@ -36879,7 +37123,7 @@ async function isFontReady(family, style, weight,) {
     }`,);
   }
 }
-var FontStore = class {
+var FontStore = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'enabled', false,);
     __publicField(this, 'bySelector', /* @__PURE__ */ new Map(),);
@@ -37336,194 +37580,6 @@ function isPageOrScroll(identifier,) {
   if (identifier === 'framer/Scroll') return true;
   return false;
 }
-var salt = 'framer';
-var difficulty = 3;
-var tokenLength = 30;
-var maxTime = 3e3;
-async function calculateProofOfWork() {
-  const target = '0'.repeat(difficulty,);
-  const startTime = Date.now();
-  let processing = true;
-  while (processing) {
-    const timestamp = Date.now();
-    if (timestamp - startTime > maxTime) {
-      processing = false;
-      return;
-    }
-    const nonce = randomCharacters(tokenLength,);
-    const secret = `${timestamp}:${nonce}`;
-    const hash2 = await sha256(salt + secret,);
-    if (hash2.startsWith(target,)) {
-      return {
-        secret,
-        hash: hash2,
-      };
-    }
-  }
-  return;
-}
-async function sha256(text,) {
-  const buffer = new TextEncoder().encode(text,);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer,);
-  return Array.from(new Uint8Array(hashBuffer,),).map((b) => b.toString(16,).padStart(2, '0',)).join('',);
-}
-function randomCharacters(count,) {
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-  const charactersLength = characters.length;
-  for (let i = 0; i < count; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength,),);
-  }
-  return result;
-}
-function formReducer(_state, {
-  type,
-},) {
-  switch (type) {
-    case 'submit':
-      return {
-        state: 'pending',
-      };
-    case 'success':
-      return {
-        state: 'success',
-      };
-    case 'error':
-      return {
-        state: 'error',
-      };
-    default:
-      assertNever(type,);
-  }
-}
-function preventDefault(e,) {
-  e.preventDefault();
-}
-var FormContainer = /* @__PURE__ */ React4.forwardRef(({
-  action,
-  formId,
-  disabled,
-  children,
-  redirectUrl,
-  onSuccess,
-  onError,
-  ...props
-}, ref,) => {
-  const [state, dispatch,] = React4.useReducer(formReducer, {
-    state: disabled ? 'disabled' : void 0,
-  },);
-  const router = useRouter();
-  const {
-    activeLocale,
-  } = useLocaleInfo();
-  const isSubmitEnabled = state.state === void 0;
-  async function redirectTo(link,) {
-    var _a, _b;
-    if (isLinkToWebPage(link,)) {
-      if (!router) return;
-      const route = (_a = router.getRoute) == null ? void 0 : _a.call(router, link.webPageId,);
-      if (!route) return;
-      const {
-        unresolvedHashSlugs,
-        unresolvedPathSlugs,
-      } = link;
-      const resolvedSlugs = await resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale,);
-      const combinedPathVariables = Object.assign(
-        {},
-        router.currentPathVariables,
-        link.pathVariables,
-        resolvedSlugs == null ? void 0 : resolvedSlugs.path,
-      );
-      const combinedHashVariables = Object.assign(
-        {},
-        router.currentPathVariables,
-        link.pathVariables,
-        link.hashVariables,
-        resolvedSlugs == null ? void 0 : resolvedSlugs.hash,
-      );
-      const element = getHashForRoute(link.hash, route, combinedHashVariables,);
-      (_b = router.navigate) == null ? void 0 : _b.call(router, link.webPageId, element, combinedPathVariables,);
-      return;
-    }
-    if (!safeWindow) return;
-    safeWindow.open(link, '_blank',);
-  }
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    if (!action) return;
-    const data2 = new FormData(event.currentTarget,);
-    for (const [key7, value,] of data2) {
-      if (value instanceof File) data2.delete(key7,);
-    }
-    try {
-      dispatch({
-        type: 'submit',
-      },);
-      await submitForm(action, data2,);
-      dispatch({
-        type: 'success',
-      },);
-      onSuccess == null ? void 0 : onSuccess();
-      if (redirectUrl) {
-        await 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, {
-    ...props,
-    'data-formid': formId,
-    onSubmit: isSubmitEnabled ? handleSubmit : preventDefault,
-    onKeyDown: handleKeyDown,
-    ref,
-    children: children(state,),
-  },);
-},);
-async function submitForm(action, data2,) {
-  const proofOfWork = await calculateProofOfWork();
-  if (!proofOfWork) {
-    throw new Error('Failed to calculate proof of work',);
-  }
-  const response = await fetch(action, {
-    body: data2,
-    method: 'POST',
-    headers: {
-      'Framer-POW': proofOfWork.secret,
-      'Framer-POW-Enforce': 'true',
-    },
-  },);
-  if (response.ok) {
-    return response;
-  } else {
-    const body = await response.json();
-    const error = 'Failed to submit form';
-    if (responseHasError(body,)) {
-      throw new Error(`${error} - ${body.error.message}`,);
-    }
-    throw new Error(error,);
-  }
-}
-function responseHasError(response,) {
-  return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
-    'message' in response.error && typeof response.error.message === 'string';
-}
 var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2) => {
   FormInputStyleVariableNames2['Padding'] = '--framer-input-padding';
   FormInputStyleVariableNames2['BorderRadiusTopLeft'] = '--framer-input-border-radius-top-left';
@@ -37552,7 +37608,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';
@@ -37560,14 +37615,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;
   if (value.startsWith('--',)) return css.variable(value,);
@@ -37577,7 +37635,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 + '}';
 }
@@ -37593,51 +37652,34 @@ 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;
@@ -37658,8 +37700,84 @@ 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,
@@ -37679,146 +37797,202 @@ var PlainTextInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInp
     inputName,
     max,
     min,
-    onBlur,
-    onFocus,
-    onInvalid,
     placeholder,
     required,
     step: step2,
     style,
     type,
-    value,
+    // 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,
-    canvasPreviewClassName,
-    ...rest
-  } = props;
-  const [hasValue, setHasValue,] = React4.useState(!!value,);
-  const dataProps = autofillEnabled === false ? passwordManagerIgnoreDataProps : void 0;
-  const eventProps = {
+    onChange,
     onBlur,
-    onFocus,
     onInvalid,
-  };
-  const onChange = React4.useCallback((e) => {
+    onFocus,
+    onValid,
+    ...rest
+  } = props;
+  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, {
-        ref,
-        style,
-        className: cx(inputWrapperClassName, canvasPreviewClassName, className2,),
-        ...rest,
-        children: /* @__PURE__ */ jsx(motion.textarea, {
-          id: inputName,
-          ...dataProps,
-          ...eventProps,
-          required,
-          autoFocus,
-          name: inputName,
-          placeholder,
-          className: cx(inputClassName, canvasPreviewClassName,),
-          value,
-        },),
-      },);
-    default:
-      return /* @__PURE__ */ jsx(motion.div, {
-        ref,
-        style,
-        className: cx(inputWrapperClassName, canvasPreviewClassName, className2,),
-        ...rest,
-        children: /* @__PURE__ */ jsx(motion.input, {
-          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, {
+    ref,
+    style,
+    className: cx(textInputWrapperClassName, inputWrapperClassName, className2,),
+    ...rest,
+    children: type === 'textarea'
+      ? /* @__PURE__ */ createElement(motion.textarea, {
+        ...dataProps,
+        ...eventHandlers,
+        key: defaultValue,
+        required,
+        autoFocus,
+        name: inputName,
+        placeholder,
+        className: inputClassName,
+        defaultValue,
+      },)
+      : /* @__PURE__ */ createElement(motion.input, {
+        ...dataProps,
+        ...eventHandlers,
+        key: defaultValue,
+        type,
+        required,
+        autoFocus,
+        name: inputName,
+        placeholder,
+        className: cx(inputClassName, !hasValue && emptyValueClassName,),
+        defaultValue,
+        min,
+        max,
+        step: step2,
+      },),
+  },);
 },);
-var iconSpacing = /* @__PURE__ */ (() => 10)();
-var iconSize = /* @__PURE__ */ (() => 14)();
-var defaultDateIcon =
-  /* @__PURE__ */ (() =>
-    `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H2Z' fill='currentColor' opacity='.3'/%3E%3Cpath d='M2.25 4.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2ZM2 5.75h9.5' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3C/svg%3E`)();
-var defaultTimeIcon =
-  /* @__PURE__ */ (() =>
-    `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${iconSize}' height='${iconSize}'%3E%3Cpath d='M1.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z' fill='transparent' stroke-width='1.5' stroke='currentColor'/%3E%3Cpath d='M6.75 7.25v-3m0 3h2' fill='transparent' stroke-width='1.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E`)();
-var FormPlainTextInput2 =
-  /* @__PURE__ */ (() =>
-    withCSS(PlainTextInput, [
-      ...sharedInputCSS,
-      ...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}");
-        }`,
-      // Hide the native date picker icon, but still allow the user to click it.
-      `.${inputClassName}::-webkit-calendar-picker-indicator {
-            opacity: 0;
-            padding: var(${'--framer-input-padding'});
-            padding-right: 0;
-            padding-left: ${iconSpacing}px;
-            width: ${iconSize}px;
-            height: ${iconSize}px;
-        }`,
-    ],))();
+var iconSize2 = 16;
+var textInputWrapperClassName = 'framer-form-text-input';
+var defaultTextareaResizerIcon =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="m1.5 8 7-7M9 5.5l-3 3" stroke="%23999" stroke-width="1.5" stroke-linecap="round"></path></svg>';
+var defaultDateIconMaskImage =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="rgb(153, 153, 153)" d="M3 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2H3Z" opacity=".3"/><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-width="1.5" d="M3.25 5.25a2 2 0 0 1 2-2h5.5a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2ZM3 6.75h9.5"/></svg>';
+var defaultTimeIconMaskImage =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-width="1.5" d="M2.5 8a5.5 5.5 0 1 1 11 0 5.5 5.5 0 1 1-11 0Z"/><path fill="transparent" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25v-3m0 3h2"/></svg>';
+var styles = /* @__PURE__ */ (() => [
+  ...sharedInputCSS,
+  ...inputBorderCSS,
+  ...inputWrapperCSS,
+  css(`.${inputWrapperClassName}`, {
+    boxShadow: css.variable('--framer-input-box-shadow',/* BoxShadow */
+    ),
+    borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left',/* BorderRadiusTopLeft */
+    ),
+    borderTopRightRadius: css.variable('--framer-input-border-radius-top-right',/* BorderRadiusTopRight */
+    ),
+    borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right',/* BorderRadiusBottomRight */
+    ),
+    borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left',/* BorderRadiusBottomLeft */
+    ),
+    background: css.variable('--framer-input-background',/* Background */
+    ),
+    transition: css.variable('--framer-input-focused-transition',/* FocusedTransition */
+    ),
+    transitionProperty: 'background, box-shadow',
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}::placeholder`, {
+    color: css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="date"], .${textInputWrapperClassName} .${inputClassName}[type="time"]`, {
+    '-webkit-appearance': 'none',
+    appearance: 'none',
+  },),
+  // iOS only fix for centered date & time inputs: https://github.com/tailwindlabs/tailwindcss-forms/pull/144
+  css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-date-and-time-value`, {
+    textAlign: 'start',
+  },),
+  css(`.${textInputWrapperClassName} textarea`, {
+    display: 'flex',
+    resize: css.variable('--framer-textarea-resize',/* Resize */
+    ),
+    overflowY: 'scroll',
+    minHeight: 'inherit',
+    maxHeight: 'inherit',
+    whiteSpace: 'break-spaces',
+  },),
+  // This targets the resize handle in WebKit browsers. Unfortunately, it is not
+  // possible in CSS to target the resize handle in Firefox, so FF will always
+  // show the native resize handle.
+  css(`.${textInputWrapperClassName} textarea::-webkit-resizer`, {
+    background: `no-repeat url('${defaultTextareaResizerIcon}')`,
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar`, {
+    cursor: 'pointer',
+    background: 'transparent',
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar-thumb:window-inactive`, {
+    opacity: 0,
+  },),
+  css(`.${textInputWrapperClassName} textarea::-webkit-scrollbar-corner`, {
+    background: 'none',
+    backgroundColor: 'transparent',
+    outline: 'none',
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}.${emptyValueClassName}::-webkit-datetime-edit`, {
+    color: css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+    // This tells safari to use the color for the shadow dom elements.
+    '-webkit-text-fill-color': css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
+    ),
+  },),
+  css(
+    `.${textInputWrapperClassName} .${inputClassName}[type="date"]::before, .${textInputWrapperClassName} .${inputClassName}[type="time"]::before`,
+    {
+      ...inputIconCSSDeclaration,
+      paddingLeft: `${iconSpacing}px`,
+      maskPosition: `${iconSpacing}px center`,
+      backgroundPosition: `${iconSpacing}px center`,
+    },
+  ),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="date"]::before`, {
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultDateIconMaskImage}')`,),
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+  },),
+  css(`.${textInputWrapperClassName} .${inputClassName}[type="time"]::before`, {
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultTimeIconMaskImage}')`,),
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+  },),
+  // Hide the native date picker icon, but still allow the user to click it.
+  css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-calendar-picker-indicator`, {
+    opacity: 0,
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    paddingRight: 0,
+    paddingLeft: `${iconSpacing}px`,
+    width: `${iconSize2}px`,
+    height: `${iconSize2}px`,
+  },),
+  css(`.${textInputWrapperClassName}:focus-within, .${textInputWrapperClassName}.${forcedFocusClassName}`, {
+    boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+    background: css.variable('--framer-input-focused-background', '--framer-input-background',/* Background */
+    ),
+  },),
+  css(`.${textInputWrapperClassName}:focus-within::after, .${textInputWrapperClassName}.${forcedFocusClassName}::after`, {
+    borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color',/* BorderColor */
+    ),
+    borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style',/* BorderStyle */
+    ),
+    borderWidth: css.variable('--framer-input-focused-border-width', inputBorderAllSides,),
+  },),
+])();
+var FormPlainTextInput2 = /* @__PURE__ */ withCSS(PlainTextInput, styles,);
 var className = 'framer-form-boolean-input';
 var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput3(props, ref,) {
   const {
     inputName,
     type = 'checkbox',
     defaultChecked,
-    canvasPreviewClassName,
+    onValid,
     ...rest
   } = props;
   const isCanvas = useIsOnFramerCanvas();
@@ -37829,24 +38003,23 @@ var BooleanInput = /* @__PURE__ */ React4.forwardRef(function FormPlainTextInput
     : {
       defaultChecked,
     };
+  const eventHandlers = useCustomValidity(onValid, props.onInvalid, props.onChange, props.onBlur, props.onFocus,);
   return /* @__PURE__ */ jsx(motion.input, {
     ...rest,
     ...attributes,
+    ...eventHandlers,
     readOnly: isCanvas,
     ref,
-    id: inputName,
     type,
     name: inputName,
-    className: cx(className, props.className, canvasPreviewClassName,),
+    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'})`;
+  '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
@@ -37872,7 +38045,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',
@@ -37884,22 +38057,31 @@ 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}')`,),
+    ...inputIconCSSDeclaration,
     backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat',
     backgroundSize: 'contain',
-    content: '',
-    display: 'block',
+    maskPosition: 'center',
+    maskSize: 'contain',
     height: '100%',
     opacity: 0,
     transition: '--framer-input-boolean-checked-transition',
     transitionProperty: 'opacity',
     width: '100%',
   },),
+  // The BooleanInput component shows an svg check mark icon whenever an
+  // image url isn't provided. That's not an intuitive system for radios
+  // however, where we never want to show the default check mark.
+  css(`.${className}[type="checkbox"]::before`, {
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultCheckedIcon}')`,),
+  },),
+  css(`.${className}[type="radio"]::before`, {
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image',/* IconMaskImage */
+    ),
+  },),
   css(`.${className}:checked, .${className}.${forcedCheckedClassName}`, {
     // When not set, the styles when checked shouldn't clear the default
     // styles.
@@ -37916,7 +38098,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',/* Background */
@@ -37932,7 +38114,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(
@@ -37955,40 +38137,40 @@ var styles = /* @__PURE__ */ (() => [
       '--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,
+    defaultValue,
     selectOptions,
     style,
-    canvasPreviewClassName,
+    onValid,
+    onChange,
+    onBlur,
+    onInvalid,
+    onFocus,
     ...rest
   } = props;
+  const eventHandlers = useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus,);
+  const key7 = Array.isArray(defaultValue,) ? defaultValue[0] : defaultValue;
   return /* @__PURE__ */ jsx(motion.div, {
     ref: measureRef,
     style,
-    className: cx(inputWrapperClassName, selectWrapperClassName, canvasPreviewClassName, className2,),
+    className: cx(inputWrapperClassName, selectWrapperClassName, className2,),
     ...rest,
     children: /* @__PURE__ */ jsx(motion.select, {
-      id: inputName,
       name: inputName,
       autoFocus,
       required,
-      className: cx(inputClassName, canvasPreviewClassName,),
-      defaultValue: selectDefaultValue,
-      onBlur,
-      onFocus,
-      onInvalid,
+      className: inputClassName,
+      defaultValue,
+      ...eventHandlers,
       children: selectOptions == null ? void 0 : selectOptions.map((option, index,) => {
         switch (option.type) {
           case 'divider':
@@ -38001,41 +38183,84 @@ var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRe
             }, index,);
         }
       },),
-    }, selectDefaultValue,),
+    }, key7,),
   },);
 },);
 var selectWrapperClassName = 'framer-form-select-wrapper';
 var selectArrowSize = 16;
-var FormSelect = /* @__PURE__ */ (() =>
-  withCSS(Select, [
-    ...sharedInputCSS,
-    ...focusInputCSS,
-    ...inputBorderCSS,
-    `select.${inputClassName} {
-            appearance: none;
-            -webkit-appearance: none;
-            padding-right: calc(var(${'--framer-input-padding'}) * 2 + ${selectArrowSize}px);
-        }`,
-    `.${selectWrapperClassName}::before {
-            content: "";
-            display: block;
-            position: absolute;
-            right: 0;
-            height: 100%;
-            width: 16px;
-            box-sizing: content-box;
-            padding: 0 var(${'--framer-input-padding'});
-            position: absolute;
-            pointer-events: none;
-            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${selectArrowSize}" height="${selectArrowSize}"><path d="M 3.5 6 L 8 10.5 L 12.5 6" fill="transparent" stroke-width="1.5" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
-            background-repeat: no-repeat;
-            background-position: center center;
-            border: none;
-        }`,
-    `select.${inputClassName}:required:invalid {
-            color: var(${'--framer-input-invalid-text-color'});
-        }`,
-  ],))();
+var defaultSelectCaretMaskImage =
+  /* @__PURE__ */ (() =>
+    `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${selectArrowSize}" height="${selectArrowSize}"><path d="M 3.5 6 L 8 10.5 L 12.5 6" fill="transparent" stroke-width="1.5" stroke="rgb(153, 153, 153)" stroke-linecap="round" stroke-linejoin="round"></path></svg>`)();
+var styles3 = /* @__PURE__ */ (() => [
+  ...sharedInputCSS,
+  ...inputBorderCSS,
+  ...inputWrapperCSS,
+  css(`.${selectWrapperClassName}`, {
+    // First we use the complete padding string, which may be any valid
+    // padding string (10px, 10px 10px, 10px 10px 10px, or 10px 10px
+    // 10px 10px), and use it to set only the right padding. This pushes
+    // the actual select away from the arrow by 1x.
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    background: css.variable('--framer-input-background',/* Background */
+    ),
+    borderTopLeftRadius: css.variable('--framer-input-border-radius-top-left',/* BorderRadiusTopLeft */
+    ),
+    borderTopRightRadius: css.variable('--framer-input-border-radius-top-right',/* BorderRadiusTopRight */
+    ),
+    borderBottomRightRadius: css.variable('--framer-input-border-radius-bottom-right',/* BorderRadiusBottomRight */
+    ),
+    borderBottomLeftRadius: css.variable('--framer-input-border-radius-bottom-left',/* BorderRadiusBottomLeft */
+    ),
+    boxShadow: css.variable('--framer-input-box-shadow',/* BoxShadow */
+    ),
+    transition: css.variable('--framer-input-focused-transition',/* FocusedTransition */
+    ),
+    transitionProperty: 'background, box-shadow',
+  },),
+  css(`.${selectWrapperClassName} select`, {
+    appearance: 'none',
+    '-webkit-appearance': 'none',
+    // Then we use the complete padding string again as the margin for
+    // the select. This moves the select 2x the padding right away from
+    // the arrow.
+    padding: css.variable('--framer-input-padding',/* Padding */
+    ),
+    // Overwrite the values inherited from .${inputClassName}. On a
+    // select, these values are on the wrapper.
+    background: 'transparent',
+  },),
+  css(`.${selectWrapperClassName}::before`, {
+    ...inputIconCSSDeclaration,
+    paddingLeft: `${iconSpacing}px`,
+    backgroundPosition: `${iconSpacing}px center`,
+    maskPosition: `${iconSpacing}px center`,
+    backgroundImage: css.variable('--framer-input-icon-image',/* IconBackgroundImage */
+    ),
+    maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultSelectCaretMaskImage}')`,),
+  },),
+  css(`.${selectWrapperClassName} select:required:invalid`, {
+    color: css.variable('--framer-input-invalid-text-color',/* InvalidTextColor */
+    ),
+  },),
+  css(`.${selectWrapperClassName}:focus-within, .${selectWrapperClassName}.${forcedFocusClassName}`, {
+    background: css.variable('--framer-input-focused-background', '--framer-input-background',/* Background */
+    ),
+    boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow',/* BoxShadow */
+    ),
+  },),
+  css(`.${selectWrapperClassName}:focus-within::after, .${selectWrapperClassName}.${forcedFocusClassName}::after`, {
+    borderColor: css.variable('--framer-input-focused-border-color', '--framer-input-border-color',/* BorderColor */
+    ),
+    borderStyle: css.variable('--framer-input-focused-border-style', '--framer-input-border-style',/* BorderStyle */
+    ),
+    borderWidth: css.variable('--framer-input-focused-border-width', inputBorderAllSides,),
+  },),
+])();
+var FormSelect = /* @__PURE__ */ withCSS(Select, styles3,);
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
   const {
     background,
@@ -38142,7 +38367,7 @@ function convertCodeComponentContainer(componentDefinitionProvider, node, conver
     ),
   ];
 }
-var CodeComponentPresentation = class {
+var CodeComponentPresentation = /*#__PURE__*/ class {
   constructor(id3, componentIdentifier, packageVersion, props, children, codeOverrideIdentifier,) {
     this.id = id3;
     this.componentIdentifier = componentIdentifier;
@@ -38854,7 +39079,7 @@ var ImagePatternElement = ({
   },);
 };
 var useDOM = /* @__PURE__ */ isBrowser2();
-var SharedSVGEntry = class {
+var SharedSVGEntry = /*#__PURE__*/ class {
   constructor(id3, svg, innerHTML, viewBox, count = 0,) {
     this.id = id3;
     this.svg = svg;
@@ -38863,7 +39088,7 @@ var SharedSVGEntry = class {
     this.count = count;
   }
 };
-var SharedSVGManager = class {
+var SharedSVGManager = /*#__PURE__*/ class {
   constructor() {
     __publicField(this, 'entries', /* @__PURE__ */ new Map(),);
   }
@@ -39856,7 +40081,7 @@ function getTabIndexProps(tabIndex,) {
   };
 }
 var keys22 = /* @__PURE__ */ new Map();
-var InternalID = class {
+var InternalID = /*#__PURE__*/ class {
   constructor(id3,) {
     this.id = id3;
     __publicField(this, '_link', null,);
@@ -39887,7 +40112,7 @@ var InternalID = class {
   }
 };
 var PathSegmentOuter = /* @__PURE__ */ (() => {
-  const _PathSegment = class {
+  const _PathSegment = /*#__PURE__*/ class {
     constructor(value,) {
       __publicField(this, '__class', 'PathSegment',);
       __publicField(this, 'x', 0,);
@@ -40142,7 +40367,7 @@ function transformString(transform2,) {
   }
   return result;
 }
-var LinearGradientElement = class extends Component {
+var LinearGradientElement = /*#__PURE__*/ class extends Component {
   render() {
     const {
       id: id3,
@@ -40168,7 +40393,7 @@ var LinearGradientElement = class extends Component {
     },);
   }
 };
-var RadialGradientElement = class extends Component {
+var RadialGradientElement = /*#__PURE__*/ class extends Component {
   render() {
     const {
       centerAnchorX,
@@ -40196,7 +40421,7 @@ var RadialGradientElement = class extends Component {
     },);
   }
 };
-var SVGRoot = class extends Component {
+var SVGRoot = /*#__PURE__*/ class extends Component {
   render() {
     const {
       children,