@spark-ui/components 10.0.2 → 10.0.3

package/dist/stepper/index.js

@@ -24,9 +24,16 @@ __export(stepper_exports, {
 });
 module.exports = __toCommonJS(stepper_exports);
 
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react4 = require("react");
+// src/stepper/Stepper.tsx
+var import_form_field3 = require("@spark-ui/components/form-field");
+var import_react6 = require("react");
+
+// src/input/InputClearButton.tsx
+var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
+var import_class_variance_authority2 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react2 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
@@ -45,122 +52,11 @@ var wrapPolymorphicSlot = (asChild, children, callback) => {
   ) : null;
 };
 
-// src/form-field/FormFieldContext.tsx
-var import_react2 = require("react");
-var FormFieldContext = (0, import_react2.createContext)(null);
-var ID_PREFIX = ":form-field";
-var useFormField = () => {
-  const context = (0, import_react2.useContext)(FormFieldContext);
-  if (!context) {
-    throw Error("useFormField must be used within a FormField provider");
-  }
-  return context;
-};
-
-// src/form-field/FormFieldProvider.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormFieldProvider = ({
-  id,
-  name,
-  disabled = false,
-  readOnly = false,
-  state,
-  isRequired,
-  children
-}) => {
-  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
-  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
-  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
-  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => [...ids, msgId]);
-  }, []);
-  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
-    setMessageIds((ids) => ids.filter((current) => current !== msgId));
-  }, []);
-  const value = (0, import_react3.useMemo)(() => {
-    const isInvalid = state === "error";
-    return {
-      id,
-      labelId,
-      name,
-      disabled,
-      readOnly,
-      state,
-      isRequired,
-      isInvalid,
-      description,
-      onMessageIdAdd: handleMessageIdAdd,
-      onMessageIdRemove: handleMessageIdRemove
-    };
-  }, [
-    id,
-    labelId,
-    name,
-    disabled,
-    readOnly,
-    description,
-    state,
-    isRequired,
-    handleMessageIdAdd,
-    handleMessageIdRemove
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
-};
-FormFieldProvider.displayName = "FormFieldProvider";
-
-// src/form-field/FormField.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormField = ({
-  className,
-  disabled = false,
-  readOnly = false,
-  name,
-  state,
-  isRequired = false,
-  asChild = false,
-  ref,
-  ...others
-}) => {
-  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    FormFieldProvider,
-    {
-      id,
-      name,
-      isRequired,
-      disabled,
-      readOnly,
-      state,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Component,
-        {
-          ref,
-          "data-spark-component": "form-field",
-          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
-          ...others
-        }
-      )
-    }
-  );
-};
-FormField.displayName = "FormField";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
-var import_Check = require("@spark-ui/icons/Check");
-var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
-var import_class_variance_authority4 = require("class-variance-authority");
-
-// src/icon/Icon.tsx
-var import_react5 = require("react");
-
 // src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
   const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -186,8 +82,8 @@ VisuallyHidden.displayName = "VisuallyHidden";
 
 // src/icon/Icon.styles.tsx
 var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
+var import_class_variance_authority = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
   variants: {
     /**
      * Color scheme of the icon.
@@ -218,7 +114,7 @@ var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink
 });
 
 // src/icon/Icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = ({
   label,
   className,
@@ -227,336 +123,30 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react5.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    (0, import_react5.cloneElement)(child, {
+  const child = import_react2.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    (0, import_react2.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
       focusable: "false",
       ...others
     }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
   ] });
 };
 Icon.displayName = "Icon";
 
-// src/form-field/FormFieldMessage.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormFieldMessage = ({
-  id: idProp,
-  className,
-  ref,
-  ...others
-}) => {
-  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
-  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
-  const id = idProp || currentId;
-  (0, import_react6.useEffect)(() => {
-    onMessageIdAdd(id);
-    return () => {
-      onMessageIdRemove(id);
-    };
-  }, [id, onMessageIdAdd, onMessageIdRemove]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      ref,
-      id,
-      "data-spark-component": "form-field-message",
-      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
-      ...others
-    }
-  );
-};
-FormFieldMessage.displayName = "FormField.Message";
-
-// src/form-field/FormFieldStateMessage.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FormFieldStateMessage = ({
-  className,
-  state,
-  children,
-  ref,
-  ...others
-}) => {
-  const field = useFormField();
-  if (field.state !== state) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-state-message",
-      "aria-live": "polite",
-      className: (0, import_class_variance_authority4.cx)(
-        "gap-sm flex items-center",
-        state === "error" ? "text-error" : "text-on-surface/dim-1",
-        className
-      ),
-      ...others,
-      children: [
-        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
-        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
-        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
-        children
-      ]
-    }
-  );
-};
-FormFieldStateMessage.displayName = "FormField.StateMessage";
-
-// src/form-field/FormFieldAlertMessage.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var FormFieldAlertMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-alert-message",
-      state: "alert",
-      ...props
-    }
-  );
-};
-FormFieldAlertMessage.displayName = "FormField.AlertMessage";
-
-// src/form-field/FormFieldCharactersCount.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FormFieldCharactersCount = ({
-  className,
-  value = "",
-  maxLength,
-  ref,
-  ...others
-}) => {
-  const displayValue = `${value.length}/${maxLength}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "form-field-characters-count",
-      className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
-      ...others,
-      children: displayValue
-    }
-  );
-};
-FormFieldCharactersCount.displayName = "FormField.CharactersCount";
-
-// src/form-field/FormFieldControl.tsx
-var import_react7 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var useFormFieldControl = () => {
-  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react7.useContext)(FormFieldContext) || {};
-  return {
-    id,
-    name,
-    description,
-    disabled,
-    readOnly,
-    state,
-    labelId,
-    isInvalid,
-    isRequired
-  };
-};
-var FormFieldControl = ({ children }) => {
-  const props = useFormFieldControl();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
-};
-FormFieldControl.displayName = "FormField.Control";
-
-// src/form-field/FormFieldErrorMessage.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var FormFieldErrorMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-error-message",
-      state: "error",
-      ...props
-    }
-  );
-};
-FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
-
-// src/form-field/FormFieldHelperMessage.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FormFieldHelperMessage = ({
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    FormFieldMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-helper-message",
-      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
-      ...others
-    }
-  );
-};
-FormFieldHelperMessage.displayName = "FormField.HelperMessage";
-
-// src/form-field/FormFieldLabel.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-
-// src/label/Label.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Label = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_radix_ui2.Label.Label,
-    {
-      ref,
-      "data-spark-component": "label",
-      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
-      ...others
-    }
-  );
-};
-Label.displayName = "Label";
-
-// src/label/LabelRequiredIndicator.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var LabelRequiredIndicator = ({
-  className,
-  children = "*",
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "label-required-indicator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
-      ...others,
-      children
-    }
-  );
-};
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/label/index.ts
-var Label2 = Object.assign(Label, {
-  RequiredIndicator: LabelRequiredIndicator
-});
-Label2.displayName = "Label";
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/form-field/FormFieldRequiredIndicator.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var FormFieldRequiredIndicator = ({
-  className,
-  ref,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
-};
-FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
-
-// src/form-field/FormFieldLabel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var FormFieldLabel = ({
-  htmlFor: htmlForProp,
-  className,
-  children,
-  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
-  asChild,
-  ref,
-  ...others
-}) => {
-  const control = useFormField();
-  const { disabled, labelId, isRequired } = control;
-  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Label2,
-    {
-      ref,
-      id: labelId,
-      "data-spark-component": "form-field-label",
-      htmlFor,
-      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
-      asChild,
-      ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
-        isRequired && requiredIndicator
-      ] })
-    }
-  );
-};
-FormFieldLabel.displayName = "FormField.Label";
-
-// src/form-field/FormFieldSuccessMessage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var FormFieldSuccessMessage = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    FormFieldStateMessage,
-    {
-      ref,
-      "data-spark-component": "form-field-success-message",
-      state: "success",
-      ...props
-    }
-  );
-};
-FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
-
-// src/form-field/index.ts
-var FormField2 = Object.assign(FormField, {
-  Label: FormFieldLabel,
-  Control: FormFieldControl,
-  StateMessage: FormFieldStateMessage,
-  SuccessMessage: FormFieldSuccessMessage,
-  AlertMessage: FormFieldAlertMessage,
-  ErrorMessage: FormFieldErrorMessage,
-  HelperMessage: FormFieldHelperMessage,
-  RequiredIndicator: FormFieldRequiredIndicator,
-  CharactersCount: FormFieldCharactersCount
-});
-FormField2.displayName = "FormField";
-FormFieldLabel.displayName = "FormField.Label";
-FormFieldControl.displayName = "FormField.Control";
-FormFieldStateMessage.displayName = "FormField.StateMessage";
-FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
-FormFieldAlertMessage.displayName = "FormField.AlertMessage";
-FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
-FormFieldHelperMessage.displayName = "FormField.HelperMessage";
-FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
-FormFieldCharactersCount.displayName = "FormField.CharactersCount";
-
-// src/stepper/Stepper.tsx
-var import_react11 = require("react");
-
-// src/input/InputClearButton.tsx
-var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority11 = require("class-variance-authority");
-
 // src/input/InputGroupContext.ts
-var import_react8 = require("react");
-var InputGroupContext = (0, import_react8.createContext)(null);
+var import_react3 = require("react");
+var InputGroupContext = (0, import_react3.createContext)(null);
 var useInputGroup = () => {
-  const context = (0, import_react8.useContext)(InputGroupContext);
+  const context = (0, import_react3.useContext)(InputGroupContext);
   return context || { isStandalone: true };
 };
 
 // src/input/InputClearButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Root = ({ className, tabIndex = -1, onClick, ref, ...others }) => {
   const { onClear, hasTrailingIcon } = useInputGroup();
   const handleClick = (event) => {
@@ -567,11 +157,11 @@ var Root = ({ className, tabIndex = -1, onClick, ref, ...others }) => {
       onClear();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       ref,
-      className: (0, import_class_variance_authority11.cx)(
+      className: (0, import_class_variance_authority2.cx)(
         className,
         "pointer-events-auto absolute top-1/2 -translate-y-1/2",
         "inline-flex h-full items-center justify-center outline-hidden",
@@ -582,7 +172,7 @@ var Root = ({ className, tabIndex = -1, onClick, ref, ...others }) => {
       onClick: handleClick,
       type: "button",
       ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DeleteOutline.DeleteOutline, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_DeleteOutline.DeleteOutline, {}) })
     }
   );
 };
@@ -592,13 +182,14 @@ var InputClearButton = Object.assign(Root, {
 Root.displayName = "InputGroup.ClearButton";
 
 // src/input/InputGroup.tsx
+var import_form_field = require("@spark-ui/components/form-field");
 var import_use_combined_state = require("@spark-ui/use-combined-state");
 var import_use_merge_refs = require("@spark-ui/use-merge-refs");
-var import_react9 = require("react");
+var import_react4 = require("react");
 
 // src/input/InputGroup.styles.ts
-var import_class_variance_authority12 = require("class-variance-authority");
-var inputGroupStyles = (0, import_class_variance_authority12.cva)(["relative inline-flex w-full"], {
+var import_class_variance_authority3 = require("class-variance-authority");
+var inputGroupStyles = (0, import_class_variance_authority3.cva)(["relative inline-flex w-full"], {
   variants: {
     /**
      * When `true`, prevents the user from interacting.
@@ -635,7 +226,7 @@ var inputGroupStyles = (0, import_class_variance_authority12.cva)(["relative inl
 });
 
 // src/input/InputGroup.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputGroup = ({
   className,
   children: childrenProp,
@@ -652,18 +243,18 @@ var InputGroup = ({
   const findElement = (...values) => {
     return children.find((child) => values.includes(getElementId(child) || ""));
   };
-  const children = import_react9.Children.toArray(childrenProp).filter(import_react9.isValidElement);
+  const children = import_react4.Children.toArray(childrenProp).filter(import_react4.isValidElement);
   const input = findElement("Input");
   const props = input?.props || {};
-  const inputRef = (0, import_react9.useRef)(null);
-  const onClearRef = (0, import_react9.useRef)(onClear);
+  const inputRef = (0, import_react4.useRef)(null);
+  const onClearRef = (0, import_react4.useRef)(onClear);
   const ref = (0, import_use_merge_refs.useMergeRefs)(input?.ref, inputRef);
   const [value, onChange] = (0, import_use_combined_state.useCombinedState)(
     props.value,
     props.defaultValue,
     props.onValueChange
   );
-  const field = useFormFieldControl();
+  const field = (0, import_form_field.useFormFieldControl)();
   const state = field.state ?? stateProp;
   const disabled = field.disabled || !!disabledProp;
   const readOnly = field.readOnly || !!readOnlyProp;
@@ -683,14 +274,14 @@ var InputGroup = ({
     }
     onChange(event.target.value);
   };
-  const handleClear = (0, import_react9.useCallback)(() => {
+  const handleClear = (0, import_react4.useCallback)(() => {
     if (onClearRef.current) {
       onClearRef.current();
     }
     onChange("");
     inputRef.current.focus();
   }, [onChange]);
-  const current = (0, import_react9.useMemo)(() => {
+  const current = (0, import_react4.useMemo)(() => {
     return {
       state,
       disabled,
@@ -713,10 +304,10 @@ var InputGroup = ({
     hasClearButton,
     handleClear
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     onClearRef.current = onClear;
   }, [onClear]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ref: forwardedRef,
@@ -724,8 +315,8 @@ var InputGroup = ({
       ...others,
       children: [
         hasLeadingAddon && leadingAddon,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative inline-flex w-full", children: [
-          input && (0, import_react9.cloneElement)(input, {
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative inline-flex w-full", children: [
+          input && (0, import_react4.cloneElement)(input, {
             ref,
             defaultValue: void 0,
             value: value ?? "",
@@ -743,14 +334,14 @@ var InputGroup = ({
 InputGroup.displayName = "InputGroup";
 
 // src/input/InputLeadingAddon.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority5 = require("class-variance-authority");
 
 // src/input/InputAddon.tsx
-var import_react10 = require("react");
+var import_react5 = require("react");
 
 // src/input/InputAddon.styles.ts
-var import_class_variance_authority13 = require("class-variance-authority");
-var inputAddonStyles = (0, import_class_variance_authority13.cva)(
+var import_class_variance_authority4 = require("class-variance-authority");
+var inputAddonStyles = (0, import_class_variance_authority4.cva)(
   [
     "overflow-hidden",
     "border-sm",
@@ -816,7 +407,7 @@ var inputAddonStyles = (0, import_class_variance_authority13.cva)(
 );
 
 // src/input/InputAddon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var InputAddon = ({
   asChild: asChildProp,
   className,
@@ -827,14 +418,14 @@ var InputAddon = ({
   const { state, disabled, readOnly } = useInputGroup();
   const isRawText = typeof children === "string";
   const asChild = !!(isRawText ? false : asChildProp);
-  const child = isRawText ? children : import_react10.Children.only(children);
+  const child = isRawText ? children : import_react5.Children.only(children);
   const Component = asChild && !isRawText ? Slot : "div";
   const getDesign = () => {
     if (isRawText) return "text";
     return asChild ? "solid" : "inline";
   };
   const design = getDesign();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
     {
       ref,
@@ -855,15 +446,15 @@ var InputAddon = ({
 InputAddon.displayName = "InputGroup.Addon";
 
 // src/input/InputLeadingAddon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Root2 = ({ className, ref, ...others }) => {
   const { disabled, readOnly } = useInputGroup();
   const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_class_variance_authority14.cx)("rounded-l-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_class_variance_authority5.cx)("rounded-l-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     InputAddon,
     {
       ref,
-      className: (0, import_class_variance_authority14.cx)(className, "rounded-r-0! mr-[-1px] rounded-l-lg"),
+      className: (0, import_class_variance_authority5.cx)(className, "rounded-r-0! mr-[-1px] rounded-l-lg"),
       ...others
     }
   ) });
@@ -874,19 +465,19 @@ var InputLeadingAddon = Object.assign(Root2, {
 Root2.displayName = "InputGroup.LeadingAddon";
 
 // src/input/InputLeadingIcon.tsx
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority7 = require("class-variance-authority");
 
 // src/input/InputIcon.tsx
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var InputIcon = ({ className, intent, children, ...others }) => {
   const { disabled, readOnly } = useInputGroup();
   const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Icon,
     {
       intent,
-      className: (0, import_class_variance_authority15.cx)(
+      className: (0, import_class_variance_authority6.cx)(
         className,
         "pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2",
         intent ? void 0 : "text-neutral peer-focus:text-outline-high",
@@ -900,22 +491,22 @@ var InputIcon = ({ className, intent, children, ...others }) => {
 InputIcon.displayName = "InputGroup.Icon";
 
 // src/input/InputLeadingIcon.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var InputLeadingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputIcon, { className: (0, import_class_variance_authority16.cx)(className, "left-lg text-body-1"), ...others });
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var InputLeadingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputIcon, { className: (0, import_class_variance_authority7.cx)(className, "left-lg text-body-1"), ...others });
 InputLeadingIcon.id = "LeadingIcon";
 InputLeadingIcon.displayName = "InputGroup.LeadingIcon";
 
 // src/input/InputTrailingAddon.tsx
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Root3 = ({ className, ref, ...others }) => {
   const { disabled, readOnly } = useInputGroup();
   const isInactive = disabled || readOnly;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_class_variance_authority17.cx)("rounded-r-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_class_variance_authority8.cx)("rounded-r-lg", isInactive ? "bg-on-surface/dim-5" : null), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     InputAddon,
     {
       ref,
-      className: (0, import_class_variance_authority17.cx)(className, "rounded-l-0! ml-[-1px] rounded-r-lg"),
+      className: (0, import_class_variance_authority8.cx)(className, "rounded-l-0! ml-[-1px] rounded-r-lg"),
       ...others
     }
   ) });
@@ -926,15 +517,18 @@ var InputTrailingAddon = Object.assign(Root3, {
 Root3.displayName = "InputGroup.TrailingAddon";
 
 // src/input/InputTrailingIcon.tsx
-var import_class_variance_authority18 = require("class-variance-authority");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var InputTrailingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InputIcon, { className: (0, import_class_variance_authority18.cx)(className, "right-lg text-body-1"), ...others });
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var InputTrailingIcon = ({ className, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InputIcon, { className: (0, import_class_variance_authority9.cx)(className, "right-lg text-body-1"), ...others });
 InputTrailingIcon.id = "TrailingIcon";
 InputTrailingIcon.displayName = "InputGroup.TrailingIcon";
 
+// src/input/Input.tsx
+var import_form_field2 = require("@spark-ui/components/form-field");
+
 // src/input/Input.styles.ts
-var import_class_variance_authority19 = require("class-variance-authority");
-var inputStyles = (0, import_class_variance_authority19.cva)(
+var import_class_variance_authority10 = require("class-variance-authority");
+var inputStyles = (0, import_class_variance_authority10.cva)(
   [
     "relative",
     "border-sm",
@@ -1030,7 +624,7 @@ var inputStyles = (0, import_class_variance_authority19.cva)(
 );
 
 // src/input/Input.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Root4 = ({
   className,
   asChild = false,
@@ -1042,7 +636,7 @@ var Root4 = ({
   ref,
   ...others
 }) => {
-  const field = useFormFieldControl();
+  const field = (0, import_form_field2.useFormFieldControl)();
   const group = useInputGroup();
   const { id, name, isInvalid, isRequired, description } = field;
   const {
@@ -1073,7 +667,7 @@ var Root4 = ({
       onClear();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Component,
     {
       ref,
@@ -1155,8 +749,8 @@ var useStepper = ({
 };
 
 // src/stepper/Stepper.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var StepperContext = (0, import_react11.createContext)(null);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var StepperContext = (0, import_react6.createContext)(null);
 var Stepper = ({
   children,
   formatOptions,
@@ -1167,7 +761,7 @@ var Stepper = ({
   ref: forwardedRef,
   ...stepperProps
 }) => {
-  const inputRef = (0, import_react11.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
   const {
     groupProps,
     inputProps: _inputProps,
@@ -1185,7 +779,7 @@ var Stepper = ({
     decrementAriaLabel,
     inputRef
   });
-  const formFieldControlProps = useFormFieldControl();
+  const formFieldControlProps = (0, import_form_field3.useFormFieldControl)();
   const isWrappedInFormField = !!formFieldControlProps.id;
   const incrementButtonProps = {
     ..._incrementButtonProps,
@@ -1204,11 +798,11 @@ var Stepper = ({
     }
   };
   const { onValueChange: _, ...remainingStepperProps } = stepperProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     StepperContext.Provider,
     {
       value: { incrementButtonProps, decrementButtonProps, inputProps, inputRef },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         InputGroup2,
         {
           ...remainingStepperProps,
@@ -1223,7 +817,7 @@ var Stepper = ({
 };
 Stepper.displayName = "Stepper";
 var useStepperContext = () => {
-  const context = (0, import_react11.useContext)(StepperContext);
+  const context = (0, import_react6.useContext)(StepperContext);
   if (!context) {
     throw Error("useStepperContext must be used within a Stepper provider");
   }
@@ -1234,21 +828,21 @@ var useStepperContext = () => {
 var import_button2 = require("@react-aria/button");
 var import_Minus = require("@spark-ui/icons/Minus");
 var import_Plus = require("@spark-ui/icons/Plus");
-var import_react13 = require("react");
+var import_react8 = require("react");
 
 // src/button/Button.tsx
-var import_class_variance_authority22 = require("class-variance-authority");
-var import_react12 = require("react");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react7 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority20 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var defaultVariants = {
   intent: "current",
   size: "current",
   isBackgroundVisible: false
 };
-var spinnerStyles = (0, import_class_variance_authority20.cva)(
+var spinnerStyles = (0, import_class_variance_authority11.cva)(
   ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
   {
     variants: {
@@ -1289,7 +883,7 @@ var spinnerStyles = (0, import_class_variance_authority20.cva)(
 );
 
 // src/spinner/Spinner.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Spinner = ({
   className,
   size = "current",
@@ -1299,7 +893,7 @@ var Spinner = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "span",
     {
       role: "status",
@@ -1307,14 +901,14 @@ var Spinner = ({
       ref,
       className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
       ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VisuallyHidden, { children: label })
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VisuallyHidden, { children: label })
     }
   );
 };
 
 // src/button/Button.styles.tsx
 var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority21 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 
 // src/button/variants/filled.ts
 var import_internal_utils3 = require("@spark-ui/internal-utils");
@@ -1868,7 +1462,7 @@ var contrastVariants = [
 ];
 
 // src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority21.cva)(
+var buttonStyles = (0, import_class_variance_authority12.cva)(
   [
     "u-shadow-border-transition",
     "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
@@ -1955,7 +1549,7 @@ var buttonStyles = (0, import_class_variance_authority21.cva)(
 );
 
 // src/button/Button.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var blockedEventHandlers = [
   "onClick",
   "onMouseDown",
@@ -1986,7 +1580,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react12.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react7.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1998,7 +1592,7 @@ var Button = ({
     className: loadingText ? "inline-block" : "absolute",
     ...loadingLabel && { "aria-label": loadingLabel }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Component,
     {
       "data-spark-component": "button",
@@ -2020,14 +1614,14 @@ var Button = ({
       children: wrapPolymorphicSlot(
         asChild,
         children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Spinner, { ...spinnerProps }),
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Spinner, { ...spinnerProps }),
           loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: (0, import_class_variance_authority22.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              className: (0, import_class_variance_authority13.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
               children: slotted
             }
           )
@@ -2040,8 +1634,8 @@ Button.displayName = "Button";
 
 // src/icon-button/IconButton.styles.tsx
 var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority23 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority23.cva)(["pl-0 pr-0"], {
+var import_class_variance_authority14 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority14.cva)(["pl-0 pr-0"], {
   variants: {
     /**
      * Sets the size of the icon.
@@ -2055,7 +1649,7 @@ var iconButtonStyles = (0, import_class_variance_authority23.cva)(["pl-0 pr-0"],
 });
 
 // src/icon-button/IconButton.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var IconButton = ({
   design = "filled",
   disabled = false,
@@ -2066,7 +1660,7 @@ var IconButton = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Button,
     {
       ref,
@@ -2083,7 +1677,7 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/stepper/StepperButton.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var IncrementButton = ({
   children,
   design = "ghost",
@@ -2092,11 +1686,11 @@ var IncrementButton = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react13.useRef)(null);
+  const innerRef = (0, import_react8.useRef)(null);
   const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
   const { incrementButtonProps } = useStepperContext();
   const { buttonProps } = (0, import_button2.useButton)({ ...incrementButtonProps, ...rest }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InputGroup2.TrailingAddon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputGroup2.TrailingAddon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     IconButton,
     {
       ref,
@@ -2105,7 +1699,7 @@ var IncrementButton = ({
       className,
       "aria-label": buttonProps["aria-label"],
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Plus.Plus, {}) })
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Plus.Plus, {}) })
     }
   ) });
 };
@@ -2117,11 +1711,11 @@ var DecrementButton = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react13.useRef)(null);
+  const innerRef = (0, import_react8.useRef)(null);
   const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
   const { decrementButtonProps } = useStepperContext();
   const { buttonProps } = (0, import_button2.useButton)({ ...decrementButtonProps, ...rest }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InputGroup2.LeadingAddon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputGroup2.LeadingAddon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     IconButton,
     {
       ref,
@@ -2130,7 +1724,7 @@ var DecrementButton = ({
       className,
       "aria-label": buttonProps["aria-label"],
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_Minus.Minus, {}) })
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Minus.Minus, {}) })
     }
   ) });
 };
@@ -2145,12 +1739,12 @@ DecrementButton.displayName = "Stepper.DecrementButton";
 
 // src/stepper/StepperInput.tsx
 var import_use_merge_refs2 = require("@spark-ui/use-merge-refs");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var Input2 = ({ ref: forwardedRef, ...props }) => {
   const { inputRef, inputProps } = useStepperContext();
   const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, inputRef);
   const { className = "", ...remainingProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Input,
     {
       ref,