@spark-ui/components 10.0.1 → 10.0.3

package/dist/checkbox/index.js

@@ -26,139 +26,41 @@ __export(checkbox_exports, {
 module.exports = __toCommonJS(checkbox_exports);
 
 // src/checkbox/Checkbox.tsx
+var import_form_field = require("@spark-ui/components/form-field");
 var import_use_merge_refs = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_react9 = require("react");
-
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
+var import_class_variance_authority6 = require("class-variance-authority");
 var import_react4 = require("react");
 
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
+// src/checkbox/CheckboxGroupContext.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// 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");
-  }
+var CheckboxGroupContext = (0, import_react.createContext)({});
+var useCheckboxGroup = () => {
+  const context = (0, import_react.useContext)(CheckboxGroupContext);
   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");
+// src/checkbox/CheckboxInput.tsx
 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");
+var import_Minus = require("@spark-ui/icons/Minus");
+var import_radix_ui3 = require("radix-ui");
 
 // src/icon/Icon.tsx
-var import_react5 = require("react");
+var import_react3 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
 
 // 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,
@@ -184,8 +86,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.
@@ -216,7 +118,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,
@@ -225,343 +127,31 @@ 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_react3.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    (0, import_react3.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/checkbox/CheckboxGroupContext.tsx
-var import_react8 = require("react");
-var CheckboxGroupContext = (0, import_react8.createContext)({});
-var useCheckboxGroup = () => {
-  const context = (0, import_react8.useContext)(CheckboxGroupContext);
-  return context;
-};
-
-// src/checkbox/CheckboxInput.tsx
-var import_Check2 = require("@spark-ui/icons/Check");
-var import_Minus = require("@spark-ui/icons/Minus");
-var import_radix_ui4 = require("radix-ui");
-
 // src/checkbox/CheckboxIndicator.tsx
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var CheckboxIndicatorPrimitive = import_radix_ui3.Checkbox.CheckboxIndicator;
-var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CheckboxIndicatorPrimitive = import_radix_ui2.Checkbox.CheckboxIndicator;
+var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
 CheckboxIndicator.displayName = "CheckboxIndicator";
 
 // src/checkbox/CheckboxInput.styles.ts
 var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority11 = require("class-variance-authority");
-var checkboxInputStyles = (0, import_class_variance_authority11.cva)(
+var import_class_variance_authority2 = require("class-variance-authority");
+var checkboxInputStyles = (0, import_class_variance_authority2.cva)(
   [
     "size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
     "disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
@@ -648,31 +238,79 @@ var checkboxInputStyles = (0, import_class_variance_authority11.cva)(
 );
 
 // src/checkbox/CheckboxInput.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var CheckboxPrimitive = import_radix_ui4.Checkbox.Checkbox;
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CheckboxPrimitive = import_radix_ui3.Checkbox.Checkbox;
 var CheckboxInput = ({
   className,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Check2.Check, {}),
-  indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Minus.Minus, {}),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}),
+  indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Minus.Minus, {}),
   intent,
   checked,
   ref,
   ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   CheckboxPrimitive,
   {
     ref,
     className: checkboxInputStyles({ intent, className }),
     checked,
     ...others,
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
   }
 );
 CheckboxInput.displayName = "CheckboxInput";
 
+// src/label/Label.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Label = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui4.Label.Label,
+    {
+      ref,
+      "data-spark-component": "label",
+      className: (0, import_class_variance_authority3.cx)("text-body-1", className),
+      ...others
+    }
+  );
+};
+Label.displayName = "Label";
+
+// src/label/LabelRequiredIndicator.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LabelRequiredIndicator = ({
+  className,
+  children = "*",
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "label-required-indicator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_class_variance_authority4.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/checkbox/CheckboxLabel.styles.ts
-var import_class_variance_authority12 = require("class-variance-authority");
-var labelStyles = (0, import_class_variance_authority12.cva)("grow", {
+var import_class_variance_authority5 = require("class-variance-authority");
+var labelStyles = (0, import_class_variance_authority5.cva)("grow", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -685,13 +323,13 @@ var labelStyles = (0, import_class_variance_authority12.cva)("grow", {
 });
 
 // src/checkbox/CheckboxLabel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
 CheckboxLabel.displayName = "CheckboxLabel";
 
 // src/checkbox/Checkbox.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ID_PREFIX2 = ":checkbox";
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ID_PREFIX = ":checkbox";
 var Checkbox3 = ({
   id: idProp,
   className,
@@ -705,12 +343,12 @@ var Checkbox3 = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const checkboxId = `${ID_PREFIX2}-${(0, import_react9.useId)()}`;
+  const checkboxId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
   const innerId = idProp || checkboxId;
-  const innerLabelId = `${ID_PREFIX2}-${(0, import_react9.useId)()}`;
-  const field = useFormFieldControl();
+  const innerLabelId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
+  const field = (0, import_form_field.useFormFieldControl)();
   const group = useCheckboxGroup();
-  const rootRef = (0, import_react9.useRef)(null);
+  const rootRef = (0, import_react4.useRef)(null);
   const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
   const getCheckboxAttributes = ({
     fieldState,
@@ -747,12 +385,12 @@ var Checkbox3 = ({
     groupState: group,
     checkboxIntent: intentProp
   });
-  const isRequired = (0, import_react9.useMemo)(() => {
+  const isRequired = (0, import_react4.useMemo)(() => {
     if (!group) return isRequiredAttr;
     return isRequiredAttr ? !group.value?.length : false;
   }, [group, isRequiredAttr]);
-  const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
-  const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
+  const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     CheckboxInput,
     {
       ref,
@@ -770,18 +408,18 @@ var Checkbox3 = ({
       ...others
     }
   );
-  const content = group.reverse || reverse ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  const content = group.reverse || reverse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     checkboxLabel,
     checkboxInput
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     checkboxInput,
     checkboxLabel
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       "data-spark-component": "checkbox",
-      className: (0, import_class_variance_authority13.cx)("gap-md text-body-1 relative flex items-start", className),
+      className: (0, import_class_variance_authority6.cx)("gap-md text-body-1 relative flex items-start", className),
       children: content
     }
   );
@@ -789,12 +427,13 @@ var Checkbox3 = ({
 Checkbox3.displayName = "Checkbox";
 
 // src/checkbox/CheckboxGroup.tsx
+var import_form_field2 = require("@spark-ui/components/form-field");
 var import_use_combined_state = require("@spark-ui/use-combined-state");
-var import_react10 = require("react");
+var import_react5 = require("react");
 
 // src/checkbox/CheckboxGroup.styles.ts
-var import_class_variance_authority14 = require("class-variance-authority");
-var checkboxGroupStyles = (0, import_class_variance_authority14.cva)(["flex"], {
+var import_class_variance_authority7 = require("class-variance-authority");
+var checkboxGroupStyles = (0, import_class_variance_authority7.cva)(["flex"], {
   variants: {
     /**
      * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
@@ -807,7 +446,7 @@ var checkboxGroupStyles = (0, import_class_variance_authority14.cva)(["flex"], {
 });
 
 // src/checkbox/CheckboxGroup.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CheckboxGroup = ({
   name: nameProp,
   value: valueProp,
@@ -822,11 +461,11 @@ var CheckboxGroup = ({
   ...others
 }) => {
   const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue);
-  const field = useFormFieldControl();
-  const onCheckedChangeRef = (0, import_react10.useRef)(onCheckedChangeProp);
+  const field = (0, import_form_field2.useFormFieldControl)();
+  const onCheckedChangeRef = (0, import_react5.useRef)(onCheckedChangeProp);
   const { id, labelId, description, state, isInvalid, isRequired } = field;
   const name = nameProp ?? field.name;
-  const current = (0, import_react10.useMemo)(() => {
+  const current = (0, import_react5.useMemo)(() => {
     const handleCheckedChange = (checked, changed) => {
       const values = value || [];
       const modified = checked ? [...values, changed] : values.filter((val) => val !== changed);
@@ -848,10 +487,10 @@ var CheckboxGroup = ({
       onCheckedChange: handleCheckedChange
     };
   }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     onCheckedChangeRef.current = onCheckedChangeProp;
   }, [onCheckedChangeProp]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ref,