@spark-ui/components 10.0.2 → 10.0.3

package/dist/combobox/index.js

@@ -26,143 +26,135 @@ __export(combobox_exports, {
 });
 module.exports = __toCommonJS(combobox_exports);
 
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react4 = require("react");
+// src/combobox/ComboboxContext.tsx
+var import_form_field = require("@spark-ui/components/form-field");
+var import_use_combined_state = require("@spark-ui/use-combined-state");
+var import_downshift3 = require("downshift");
+var import_react7 = require("react");
 
-// src/slot/Slot.tsx
+// src/popover/Popover.tsx
 var import_radix_ui = require("radix-ui");
+
+// src/popover/PopoverContext.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 });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
+var PopoverContext = (0, import_react.createContext)(null);
+var ID_PREFIX = ":popover";
+var PopoverProvider = ({
+  children,
+  intent
+}) => {
+  const [headerId, setHeaderId] = (0, import_react.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PopoverContext.Provider,
+    {
+      value: {
+        headerId,
+        setHeaderId,
+        intent
+      },
+      children
+    }
+  );
 };
-
-// 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);
+var usePopover = () => {
+  const context = (0, import_react.useContext)(PopoverContext);
   if (!context) {
-    throw Error("useFormField must be used within a FormField provider");
+    throw Error("usePopover must be used within a Popover provider");
   }
   return context;
 };
 
-// src/form-field/FormFieldProvider.tsx
-var import_react3 = require("react");
+// src/popover/Popover.tsx
 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 });
+var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
 };
-FormFieldProvider.displayName = "FormFieldProvider";
+Popover.displayName = "Popover";
 
-// src/form-field/FormField.tsx
+// src/popover/PopoverAnchor.tsx
+var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FormField = ({
-  className,
-  disabled = false,
-  readOnly = false,
-  name,
-  state,
-  isRequired = false,
+var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
+Anchor.displayName = "Popover.Anchor";
+
+// src/popover/PopoverArrow.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Arrow = ({
   asChild = false,
+  width = 16,
+  height = 8,
+  className,
   ref,
-  ...others
+  ...rest
 }) => {
-  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    FormFieldProvider,
+  const { intent } = usePopover();
+  const styles4 = (0, import_class_variance_authority.cva)("visible", {
+    variants: {
+      intent: {
+        surface: "fill-surface",
+        main: "fill-main-container",
+        support: "fill-support-container",
+        accent: "fill-accent-container",
+        basic: "fill-basic-container",
+        success: "fill-success-container",
+        alert: "fill-alert-container",
+        danger: "fill-error-container",
+        info: "fill-info-container",
+        neutral: "fill-neutral-container"
+      }
+    },
+    defaultVariants: {
+      intent: "surface"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui3.Popover.Arrow,
     {
-      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
-        }
-      )
+      "data-spark-component": "popover-arrow",
+      ref,
+      className: styles4({ intent, className }),
+      asChild,
+      width,
+      height,
+      ...rest
     }
   );
 };
-FormField.displayName = "FormField";
+Arrow.displayName = "Popover.Arrow";
 
-// 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/popover/PopoverCloseButton.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
 
 // src/icon/Icon.tsx
-var import_react5 = require("react");
+var import_react3 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui4 = require("radix-ui");
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Slottable = import_radix_ui4.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Slot.Root, { ref, ...props });
+};
+var wrapPolymorphicSlot = (asChild, children, callback) => {
+  if (!asChild) return callback(children);
+  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
+    children,
+    void 0,
+    callback(children.props.children)
+  ) : null;
+};
 
 // src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = 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_runtime6.jsx)(
     Component,
     {
       ...props,
@@ -220,7 +212,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_runtime7 = require("react/jsx-runtime");
 var Icon = ({
   label,
   className,
@@ -229,435 +221,33 @@ 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_runtime7.jsxs)(import_jsx_runtime7.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_runtime7.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/combobox/ComboboxContext.tsx
-var import_use_combined_state = require("@spark-ui/use-combined-state");
-var import_downshift3 = require("downshift");
-var import_react12 = require("react");
-
-// src/popover/Popover.tsx
-var import_radix_ui3 = require("radix-ui");
-
-// src/popover/PopoverContext.tsx
-var import_react8 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react8.createContext)(null);
-var ID_PREFIX2 = ":popover";
-var PopoverProvider = ({
-  children,
-  intent
-}) => {
-  const [headerId, setHeaderId] = (0, import_react8.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    PopoverContext.Provider,
-    {
-      value: {
-        headerId,
-        setHeaderId,
-        intent
-      },
-      children
-    }
-  );
-};
-var usePopover = () => {
-  const context = (0, import_react8.useContext)(PopoverContext);
-  if (!context) {
-    throw Error("usePopover must be used within a Popover provider");
-  }
-  return context;
-};
-
-// src/popover/Popover.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui3.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
-};
-Popover.displayName = "Popover";
-
-// src/popover/PopoverAnchor.tsx
-var import_radix_ui4 = require("radix-ui");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui4.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
-Anchor.displayName = "Popover.Anchor";
-
-// src/popover/PopoverArrow.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Arrow = ({
-  asChild = false,
-  width = 16,
-  height = 8,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { intent } = usePopover();
-  const styles4 = (0, import_class_variance_authority11.cva)("visible", {
-    variants: {
-      intent: {
-        surface: "fill-surface",
-        main: "fill-main-container",
-        support: "fill-support-container",
-        accent: "fill-accent-container",
-        basic: "fill-basic-container",
-        success: "fill-success-container",
-        alert: "fill-alert-container",
-        danger: "fill-error-container",
-        info: "fill-info-container",
-        neutral: "fill-neutral-container"
-      }
-    },
-    defaultVariants: {
-      intent: "surface"
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_radix_ui5.Popover.Arrow,
-    {
-      "data-spark-component": "popover-arrow",
-      ref,
-      className: styles4({ intent, className }),
-      asChild,
-      width,
-      height,
-      ...rest
-    }
-  );
-};
-Arrow.displayName = "Popover.Arrow";
-
-// src/popover/PopoverCloseButton.tsx
-var import_Close = require("@spark-ui/icons/Close");
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_radix_ui6 = require("radix-ui");
-
 // src/button/Button.tsx
-var import_class_variance_authority14 = require("class-variance-authority");
-var import_react9 = require("react");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react4 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority12 = require("class-variance-authority");
+var import_class_variance_authority3 = require("class-variance-authority");
 var defaultVariants = {
   intent: "current",
   size: "current",
   isBackgroundVisible: false
 };
-var spinnerStyles = (0, import_class_variance_authority12.cva)(
+var spinnerStyles = (0, import_class_variance_authority3.cva)(
   ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
   {
     variants: {
@@ -698,7 +288,7 @@ var spinnerStyles = (0, import_class_variance_authority12.cva)(
 );
 
 // src/spinner/Spinner.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Spinner = ({
   className,
   size = "current",
@@ -708,7 +298,7 @@ var Spinner = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       role: "status",
@@ -716,14 +306,14 @@ var Spinner = ({
       ref,
       className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
       ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VisuallyHidden, { children: label })
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
     }
   );
 };
 
 // src/button/Button.styles.tsx
 var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority4 = require("class-variance-authority");
 
 // src/button/variants/filled.ts
 var import_internal_utils3 = require("@spark-ui/internal-utils");
@@ -1277,7 +867,7 @@ var contrastVariants = [
 ];
 
 // src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority13.cva)(
+var buttonStyles = (0, import_class_variance_authority4.cva)(
   [
     "u-shadow-border-transition",
     "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
@@ -1364,7 +954,7 @@ var buttonStyles = (0, import_class_variance_authority13.cva)(
 );
 
 // src/button/Button.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var blockedEventHandlers = [
   "onClick",
   "onMouseDown",
@@ -1395,7 +985,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react4.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1407,7 +997,7 @@ var Button = ({
     className: loadingText ? "inline-block" : "absolute",
     ...loadingLabel && { "aria-label": loadingLabel }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
     {
       "data-spark-component": "button",
@@ -1429,14 +1019,14 @@ var Button = ({
       children: wrapPolymorphicSlot(
         asChild,
         children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Spinner, { ...spinnerProps }),
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
           loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "div",
             {
               "aria-hidden": true,
-              className: (0, import_class_variance_authority14.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
               children: slotted
             }
           )
@@ -1449,8 +1039,8 @@ Button.displayName = "Button";
 
 // src/icon-button/IconButton.styles.tsx
 var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority15 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority15.cva)(["pl-0 pr-0"], {
+var import_class_variance_authority6 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority6.cva)(["pl-0 pr-0"], {
   variants: {
     /**
      * Sets the size of the icon.
@@ -1464,7 +1054,7 @@ var iconButtonStyles = (0, import_class_variance_authority15.cva)(["pl-0 pr-0"],
 });
 
 // src/icon-button/IconButton.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var IconButton = ({
   design = "filled",
   disabled = false,
@@ -1475,7 +1065,7 @@ var IconButton = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Button,
     {
       ref,
@@ -1492,33 +1082,33 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/popover/PopoverCloseButton.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CloseButton = ({
   "aria-label": ariaLabel,
   className,
   ref,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_radix_ui6.Popover.Close,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui5.Popover.Close,
     {
       "data-spark-component": "popover-close-button",
       ref,
-      className: (0, import_class_variance_authority16.cx)("right-md top-md absolute", className),
+      className: (0, import_class_variance_authority7.cx)("right-md top-md absolute", className),
       asChild: true,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Close.Close, {}) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}) }) })
     }
   );
 };
 CloseButton.displayName = "Popover.CloseButton";
 
 // src/popover/PopoverContent.tsx
-var import_radix_ui7 = require("radix-ui");
+var import_radix_ui6 = require("radix-ui");
 
 // src/popover/PopoverContent.styles.ts
-var import_class_variance_authority17 = require("class-variance-authority");
-var styles = (0, import_class_variance_authority17.cva)(
+var import_class_variance_authority8 = require("class-variance-authority");
+var styles = (0, import_class_variance_authority8.cva)(
   [
     "rounded-md",
     "shadow-sm",
@@ -1579,7 +1169,7 @@ var styles = (0, import_class_variance_authority17.cva)(
 );
 
 // src/popover/PopoverContent.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Content = ({
   // Spark props
   className,
@@ -1604,8 +1194,8 @@ var Content = ({
   ...rest
 }) => {
   const { headerId, intent } = usePopover();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_radix_ui7.Popover.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui6.Popover.Content,
     {
       "aria-labelledby": headerId || ariaLabelledBy,
       className: styles({
@@ -1638,31 +1228,31 @@ var Content = ({
 Content.displayName = "Popover.Content";
 
 // src/popover/PopoverHeader.tsx
-var import_class_variance_authority18 = require("class-variance-authority");
-var import_react10 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_react5 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var Header = ({ children, className, ref, ...rest }) => {
-  const id = `${ID_PREFIX2}-header-${(0, import_react10.useId)()}`;
+  const id = `${ID_PREFIX}-header-${(0, import_react5.useId)()}`;
   const { setHeaderId } = usePopover();
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     setHeaderId(id);
     return () => setHeaderId(null);
   }, [id, setHeaderId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("header", { id, ref, className: (0, import_class_variance_authority18.cx)("mb-md text-headline-2", className), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { id, ref, className: (0, import_class_variance_authority9.cx)("mb-md text-headline-2", className), ...rest, children });
 };
 Header.displayName = "Popover.Header";
 
 // src/popover/PopoverPortal.tsx
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_radix_ui8.Popover.Portal, { ...rest, children });
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui7.Popover.Portal, { ...rest, children });
 Portal.displayName = "Popover.Portal";
 
 // src/popover/PopoverTrigger.tsx
-var import_radix_ui9 = require("radix-ui");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-  import_radix_ui9.Popover.Trigger,
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  import_radix_ui8.Popover.Trigger,
   {
     "data-spark-component": "popover-trigger",
     ref,
@@ -1696,7 +1286,7 @@ Trigger.displayName = "Popover.Trigger";
 var import_downshift = require("downshift");
 
 // src/combobox/utils/index.ts
-var import_react11 = require("react");
+var import_react6 = require("react");
 function getIndexByKey(map, targetKey) {
   let index = 0;
   for (const [key] of map.entries()) {
@@ -1723,8 +1313,8 @@ var getElementDisplayName = (element) => {
   return element ? element.type.displayName : "";
 };
 var getOrderedItems = (children, result = []) => {
-  import_react11.Children.forEach(children, (child) => {
-    if (!(0, import_react11.isValidElement)(child)) return;
+  import_react6.Children.forEach(children, (child) => {
+    if (!(0, import_react6.isValidElement)(child)) return;
     if (getElementDisplayName(child) === "Combobox.Item") {
       const childProps = child.props;
       result.push({
@@ -1741,8 +1331,8 @@ var getOrderedItems = (children, result = []) => {
 };
 var findNestedItemText = (children) => {
   if (!children) return "";
-  for (const child of import_react11.Children.toArray(children)) {
-    if ((0, import_react11.isValidElement)(child)) {
+  for (const child of import_react6.Children.toArray(children)) {
+    if ((0, import_react6.isValidElement)(child)) {
       const childElement = child;
       if (getElementDisplayName(childElement) === "Combobox.ItemText") {
         return childElement.props.children;
@@ -1764,8 +1354,8 @@ var getItemsFromChildren = (children) => {
   return newMap;
 };
 var hasChildComponent = (children, displayName) => {
-  return import_react11.Children.toArray(children).some((child) => {
-    if (!(0, import_react11.isValidElement)(child)) return false;
+  return import_react6.Children.toArray(children).some((child) => {
+    if (!(0, import_react6.isValidElement)(child)) return false;
     if (getElementDisplayName(child) === displayName) {
       return true;
     } else if (child.props.children) {
@@ -1775,7 +1365,7 @@ var hasChildComponent = (children, displayName) => {
   });
 };
 var findElement = (children, value) => {
-  return import_react11.Children.toArray(children).filter(import_react11.isValidElement).find((child) => value === getElementDisplayName(child) || "");
+  return import_react6.Children.toArray(children).filter(import_react6.isValidElement).find((child) => value === getElementDisplayName(child) || "");
 };
 
 // src/combobox/useCombobox/multipleSelectionReducer.ts
@@ -1883,15 +1473,15 @@ var singleSelectionReducer = ({
 };
 
 // src/combobox/ComboboxContext.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ComboboxContext = (0, import_react12.createContext)(null);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ComboboxContext = (0, import_react7.createContext)(null);
 var getFilteredItemsMap = (map, inputValue) => {
   if (!inputValue) return map;
   return new Map(
     Array.from(map).filter(([_, { text }]) => text.toLowerCase().includes(inputValue.toLowerCase()))
   );
 };
-var ID_PREFIX3 = ":combobox";
+var ID_PREFIX2 = ":combobox";
 var ComboboxProvider = ({
   children,
   state: stateProp,
@@ -1911,22 +1501,22 @@ var ComboboxProvider = ({
   onOpenChange,
   isLoading
 }) => {
-  const isMounted = (0, import_react12.useRef)(false);
-  const [inputValue, setInputValue] = (0, import_react12.useState)("");
-  const [isTyping, setIsTyping] = (0, import_react12.useState)(filtering === "strict");
-  const triggerAreaRef = (0, import_react12.useRef)(null);
-  const innerInputRef = (0, import_react12.useRef)(null);
-  const [onInputValueChange, setOnInputValueChange] = (0, import_react12.useState)(null);
+  const isMounted = (0, import_react7.useRef)(false);
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react7.useState)(filtering === "strict");
+  const triggerAreaRef = (0, import_react7.useRef)(null);
+  const innerInputRef = (0, import_react7.useRef)(null);
+  const [onInputValueChange, setOnInputValueChange] = (0, import_react7.useState)(null);
   const [comboboxValue] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
   const shouldFilterItems = filtering === "strict" || filtering === "auto" && isTyping;
-  const [itemsMap, setItemsMap] = (0, import_react12.useState)(getItemsFromChildren(children));
-  const [filteredItemsMap, setFilteredItems] = (0, import_react12.useState)(
+  const [itemsMap, setItemsMap] = (0, import_react7.useState)(getItemsFromChildren(children));
+  const [filteredItemsMap, setFilteredItems] = (0, import_react7.useState)(
     shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap
   );
-  const [selectedItem, setSelectedItem] = (0, import_react12.useState)(
+  const [selectedItem, setSelectedItem] = (0, import_react7.useState)(
     itemsMap.get(comboboxValue) || null
   );
-  const [selectedItems, setSelectedItems] = (0, import_react12.useState)(
+  const [selectedItems, setSelectedItems] = (0, import_react7.useState)(
     comboboxValue ? [...itemsMap.values()].filter((item) => comboboxValue.includes(item.value)) : []
   );
   const onInternalSelectedItemChange = (item) => {
@@ -1944,7 +1534,7 @@ var ComboboxProvider = ({
       onValueChange?.(items.map((i) => i.value));
     }, 0);
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isMounted.current) {
       isMounted.current = true;
       return;
@@ -1962,19 +1552,19 @@ var ComboboxProvider = ({
       setSelectedItem(itemsMap.get(comboboxValue) || null);
     }
   }, [multiple ? JSON.stringify(comboboxValue) : comboboxValue]);
-  const field = useFormFieldControl();
-  const internalFieldLabelID = `${ID_PREFIX3}-label-${(0, import_react12.useId)()}`;
-  const internalFieldID = `${ID_PREFIX3}-field-${(0, import_react12.useId)()}`;
+  const field = (0, import_form_field.useFormFieldControl)();
+  const internalFieldLabelID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
+  const internalFieldID = `${ID_PREFIX2}-field-${(0, import_react7.useId)()}`;
   const id = field.id || internalFieldID;
   const labelId = field.labelId || internalFieldLabelID;
   const state = field.state || stateProp;
   const disabled = field.disabled ?? disabledProp;
   const readOnly = field.readOnly ?? readOnlyProp;
-  const [hasPopover, setHasPopover] = (0, import_react12.useState)(
+  const [hasPopover, setHasPopover] = (0, import_react7.useState)(
     hasChildComponent(children, "Combobox.Popover")
   );
-  const [lastInteractionType, setLastInteractionType] = (0, import_react12.useState)("mouse");
-  (0, import_react12.useEffect)(() => {
+  const [lastInteractionType, setLastInteractionType] = (0, import_react7.useState)("mouse");
+  (0, import_react7.useEffect)(() => {
     setFilteredItems(shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap);
   }, [inputValue, itemsMap]);
   const multiselect = (0, import_downshift3.useMultipleSelection)({
@@ -2022,7 +1612,7 @@ var ComboboxProvider = ({
     }
   });
   const filteredItems = Array.from(filteredItemsMap.values());
-  (0, import_react12.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     onInputValueChange?.(inputValue || "");
   }, [inputValue]);
   const downshift = (0, import_downshift3.useCombobox)({
@@ -2081,7 +1671,7 @@ var ComboboxProvider = ({
       return void 0;
     }
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const newMap = getItemsFromChildren(children);
     const previousItems = [...itemsMap.values()];
     const newItems = [...newMap.values()];
@@ -2094,8 +1684,8 @@ var ComboboxProvider = ({
       setItemsMap(newMap);
     }
   }, [children]);
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2, { open: true }] : [import_react12.Fragment, {}];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2, { open: true }] : [import_react7.Fragment, {}];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ComboboxContext.Provider,
     {
       value: {
@@ -2127,12 +1717,12 @@ var ComboboxProvider = ({
         isTyping,
         setIsTyping
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WrapperComponent, { ...wrapperProps, children })
     }
   );
 };
 var useComboboxContext = () => {
-  const context = (0, import_react12.useContext)(ComboboxContext);
+  const context = (0, import_react7.useContext)(ComboboxContext);
   if (!context) {
     throw Error("useComboboxContext must be used within a Combobox provider");
   }
@@ -2140,16 +1730,16 @@ var useComboboxContext = () => {
 };
 
 // src/combobox/Combobox.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Combobox = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ComboboxProvider, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ComboboxProvider, { ...props, children });
 };
 Combobox.displayName = "Combobox";
 
 // src/combobox/ComboboxClearButton.tsx
 var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ClearButton = ({
   className,
   tabIndex = -1,
@@ -2173,16 +1763,16 @@ var ClearButton = ({
       onClick(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       ref,
-      className: (0, import_class_variance_authority19.cx)(className, "h-sz-44 text-neutral hover:text-neutral-hovered"),
+      className: (0, import_class_variance_authority10.cx)(className, "h-sz-44 text-neutral hover:text-neutral-hovered"),
       tabIndex,
       onClick: handleClick,
       type: "button",
       ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_DeleteOutline.DeleteOutline, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DeleteOutline.DeleteOutline, {}) })
     }
   );
 };
@@ -2191,8 +1781,8 @@ ClearButton.displayName = "Combobox.ClearButton";
 // src/combobox/ComboboxDisclosure.tsx
 var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
 var import_use_merge_refs = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Disclosure = ({
   className,
   closedLabel,
@@ -2212,11 +1802,11 @@ var Disclosure = ({
   });
   const isExpanded = downshiftDisclosureProps["aria-expanded"];
   const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     IconButton,
     {
       ref,
-      className: (0, import_class_variance_authority20.cx)(className, "mt-[calc((44px-32px)/2)]"),
+      className: (0, import_class_variance_authority11.cx)(className, "mt-[calc((44px-32px)/2)]"),
       intent,
       design,
       size,
@@ -2224,14 +1814,14 @@ var Disclosure = ({
       ...props,
       "aria-label": isExpanded ? openedLabel : closedLabel,
       disabled: ctx.disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Icon,
         {
-          className: (0, import_class_variance_authority20.cx)("shrink-0", "rotate-0 transition duration-100 ease-in", {
+          className: (0, import_class_variance_authority11.cx)("shrink-0", "rotate-0 transition duration-100 ease-in", {
             "rotate-180": isExpanded
           }),
           size: "sm",
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
         }
       )
     }
@@ -2240,16 +1830,16 @@ var Disclosure = ({
 Disclosure.displayName = "Combobox.Disclosure";
 
 // src/combobox/ComboboxEmpty.tsx
-var import_class_variance_authority21 = require("class-variance-authority");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Empty = ({ className, children, ref: forwardedRef }) => {
   const ctx = useComboboxContext();
   const hasNoItemVisible = ctx.filteredItemsMap.size === 0;
-  return hasNoItemVisible ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return hasNoItemVisible ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ref: forwardedRef,
-      className: (0, import_class_variance_authority21.cx)("px-lg py-md text-body-1 text-on-surface/dim-1", className),
+      className: (0, import_class_variance_authority12.cx)("px-lg py-md text-body-1 text-on-surface/dim-1", className),
       children
     }
   ) : null;
@@ -2257,19 +1847,19 @@ var Empty = ({ className, children, ref: forwardedRef }) => {
 Empty.displayName = "Combobox.Empty";
 
 // src/combobox/ComboboxGroup.tsx
-var import_class_variance_authority22 = require("class-variance-authority");
-var import_react14 = require("react");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react9 = require("react");
 
 // src/combobox/ComboboxItemsGroupContext.tsx
-var import_react13 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var ComboboxGroupContext = (0, import_react13.createContext)(null);
+var import_react8 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ComboboxGroupContext = (0, import_react8.createContext)(null);
 var ComboboxGroupProvider = ({ children }) => {
-  const groupLabelId = `${ID_PREFIX3}-group-label-${(0, import_react13.useId)()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ComboboxGroupContext.Provider, { value: { groupLabelId }, children });
+  const groupLabelId = `${ID_PREFIX2}-group-label-${(0, import_react8.useId)()}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComboboxGroupContext.Provider, { value: { groupLabelId }, children });
 };
 var useComboboxGroupContext = () => {
-  const context = (0, import_react13.useContext)(ComboboxGroupContext);
+  const context = (0, import_react8.useContext)(ComboboxGroupContext);
   if (!context) {
     throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
   }
@@ -2277,23 +1867,23 @@ var useComboboxGroupContext = () => {
 };
 
 // src/combobox/ComboboxGroup.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ComboboxGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComboboxGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
 };
 var GroupContent = ({ children, className, ref: forwardedRef }) => {
   const ctx = useComboboxContext();
   const groupCtx = useComboboxGroupContext();
-  const hasVisibleOptions = import_react14.Children.toArray(children).some((child) => {
-    return (0, import_react14.isValidElement)(child) && ctx.filteredItemsMap.get(child.props.value);
+  const hasVisibleOptions = import_react9.Children.toArray(children).some((child) => {
+    return (0, import_react9.isValidElement)(child) && ctx.filteredItemsMap.get(child.props.value);
   });
-  return hasVisibleOptions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return hasVisibleOptions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref: forwardedRef,
       role: "group",
       "aria-labelledby": groupCtx.groupLabelId,
-      className: (0, import_class_variance_authority22.cx)(className),
+      className: (0, import_class_variance_authority13.cx)(className),
       children
     }
   ) : null;
@@ -2303,9 +1893,9 @@ Group.displayName = "Combobox.Group";
 // src/combobox/ComboboxInput.tsx
 var import_use_combined_state2 = require("@spark-ui/use-combined-state");
 var import_use_merge_refs2 = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority23 = require("class-variance-authority");
-var import_react15 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_react10 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Input = ({
   "aria-label": ariaLabel,
   className,
@@ -2318,12 +1908,12 @@ var Input = ({
 }) => {
   const ctx = useComboboxContext();
   const [inputValue] = (0, import_use_combined_state2.useCombinedState)(value, defaultValue);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (inputValue != null) {
       ctx.setInputValue(inputValue);
     }
   }, [inputValue]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (onValueChange) {
       ctx.setOnInputValueChange(() => onValueChange);
     }
@@ -2331,7 +1921,7 @@ var Input = ({
       ctx.setInputValue(ctx.selectedItem.text);
     }
   }, []);
-  const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover ? [Popover2.Trigger, { asChild: true, type: void 0 }] : [import_react15.Fragment, {}];
+  const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover ? [Popover2.Trigger, { asChild: true, type: void 0 }] : [import_react10.Fragment, {}];
   const multiselectInputProps = ctx.getDropdownProps();
   const inputRef = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref);
   const downshiftInputProps = ctx.getInputProps({
@@ -2366,15 +1956,15 @@ var Input = ({
     onClick: mergeHandlers(props.onClick, downshiftInputProps.onClick),
     onKeyDown: mergeHandlers(props.onKeyDown, downshiftInputProps.onKeyDown)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { ...ctx.getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverTrigger, { ...popoverTriggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { ...ctx.getLabelProps(), children: ariaLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverTrigger, { ...popoverTriggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         "data-spark-component": "combobox-input",
         type: "text",
         ...hasPlaceholder && { placeholder },
-        className: (0, import_class_variance_authority23.cx)(
+        className: (0, import_class_variance_authority14.cx)(
           "max-w-full shrink-0 grow basis-[80px]",
           "h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden",
           "disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent",
@@ -2396,23 +1986,23 @@ Input.displayName = "Combobox.Input";
 
 // src/combobox/ComboboxItem.tsx
 var import_use_merge_refs3 = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority24 = require("class-variance-authority");
+var import_class_variance_authority15 = require("class-variance-authority");
 
 // src/combobox/ComboboxItemContext.tsx
-var import_react16 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ComboboxItemContext = (0, import_react16.createContext)(null);
+var import_react11 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ComboboxItemContext = (0, import_react11.createContext)(null);
 var ComboboxItemProvider = ({
   value,
   disabled = false,
   children
 }) => {
   const ctx = useComboboxContext();
-  const [textId, setTextId] = (0, import_react16.useState)(void 0);
+  const [textId, setTextId] = (0, import_react11.useState)(void 0);
   const index = getIndexByKey(ctx.filteredItemsMap, value);
   const itemData = { disabled, value, text: getItemText(children) };
   const isSelected = ctx.multiple ? ctx.selectedItems.some((selectedItem) => selectedItem.value === value) : ctx.selectedItem?.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     ComboboxItemContext.Provider,
     {
       value: { textId, setTextId, isSelected, itemData, index, disabled },
@@ -2421,7 +2011,7 @@ var ComboboxItemProvider = ({
   );
 };
 var useComboboxItemContext = () => {
-  const context = (0, import_react16.useContext)(ComboboxItemContext);
+  const context = (0, import_react11.useContext)(ComboboxItemContext);
   if (!context) {
     throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
   }
@@ -2429,12 +2019,12 @@ var useComboboxItemContext = () => {
 };
 
 // src/combobox/ComboboxItem.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Item = ({ children, ref: forwardedRef, ...props }) => {
   const { value, disabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ComboboxItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComboboxItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
 };
-var styles2 = (0, import_class_variance_authority24.cva)("px-lg py-md text-body-1", {
+var styles2 = (0, import_class_variance_authority15.cva)("px-lg py-md text-body-1", {
   variants: {
     selected: {
       true: "font-bold"
@@ -2480,11 +2070,11 @@ var ItemContent = ({
   });
   const ref = (0, import_use_merge_refs3.useMergeRefs)(forwardedRef, downshiftRef);
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "li",
     {
       ref,
-      className: (0, import_class_variance_authority24.cx)(
+      className: (0, import_class_variance_authority15.cx)(
         styles2({
           selected: itemCtx.isSelected,
           disabled,
@@ -2504,9 +2094,9 @@ var ItemContent = ({
 Item.displayName = "Combobox.Item";
 
 // src/combobox/ComboboxItemIndicator.tsx
-var import_Check2 = require("@spark-ui/icons/Check");
-var import_class_variance_authority25 = require("class-variance-authority");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_Check = require("@spark-ui/icons/Check");
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ItemIndicator = ({
   className,
   children,
@@ -2514,12 +2104,12 @@ var ItemIndicator = ({
   ref: forwardedRef
 }) => {
   const { disabled, isSelected } = useComboboxItemContext();
-  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_Check2.Check, { "aria-label": label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Check.Check, { "aria-label": label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "span",
     {
       ref: forwardedRef,
-      className: (0, import_class_variance_authority25.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
+      className: (0, import_class_variance_authority16.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
       children: isSelected && childElement
     }
   );
@@ -2528,9 +2118,9 @@ ItemIndicator.displayName = "Combobox.ItemIndicator";
 
 // src/combobox/ComboboxItems.tsx
 var import_use_merge_refs4 = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority26 = require("class-variance-authority");
-var import_react17 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_react12 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Items = ({ children, className, ref: forwardedRef, ...props }) => {
   const ctx = useComboboxContext();
   const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
@@ -2538,21 +2128,21 @@ var Items = ({ children, className, ref: forwardedRef, ...props }) => {
       ctx.setLastInteractionType("mouse");
     }
   });
-  const innerRef = (0, import_react17.useRef)(null);
+  const innerRef = (0, import_react12.useRef)(null);
   const ref = (0, import_use_merge_refs4.useMergeRefs)(forwardedRef, downshiftRef, innerRef);
   const isOpen = ctx.hasPopover ? ctx.isOpen : true;
   const isPointerEventsDisabled = ctx.hasPopover && !isOpen;
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (innerRef.current?.parentElement) {
       innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
       innerRef.current.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
     }
   }, [isPointerEventsDisabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "ul",
     {
       ref,
-      className: (0, import_class_variance_authority26.cx)(
+      className: (0, import_class_variance_authority17.cx)(
         className,
         "flex flex-col",
         isOpen ? "block" : "pointer-events-none invisible opacity-0",
@@ -2563,55 +2153,55 @@ var Items = ({ children, className, ref: forwardedRef, ...props }) => {
       ...downshiftMenuProps,
       "aria-busy": ctx.isLoading,
       "data-spark-component": "combobox-items",
-      children: ctx.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Spinner, { size: "sm" }) : children
+      children: ctx.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner, { size: "sm" }) : children
     }
   );
 };
 Items.displayName = "Combobox.Items";
 
 // src/combobox/ComboboxItemText.tsx
-var import_class_variance_authority27 = require("class-variance-authority");
-var import_react18 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_react13 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ItemText = ({ children, className, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX3}-item-text-${(0, import_react18.useId)()}`;
+  const id = `${ID_PREFIX2}-item-text-${(0, import_react13.useId)()}`;
   const { setTextId } = useComboboxItemContext();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setTextId(id);
     return () => setTextId(void 0);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { id, className: (0, import_class_variance_authority27.cx)("inline", className), ref: forwardedRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id, className: (0, import_class_variance_authority18.cx)("inline", className), ref: forwardedRef, children });
 };
 ItemText.displayName = "Combobox.ItemText";
 
 // src/combobox/ComboboxLabel.tsx
-var import_class_variance_authority28 = require("class-variance-authority");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Label3 = ({ children, className, ref: forwardedRef }) => {
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Label = ({ children, className, ref: forwardedRef }) => {
   const groupCtx = useComboboxGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       ref: forwardedRef,
       id: groupCtx.groupLabelId,
-      className: (0, import_class_variance_authority28.cx)("px-md py-sm text-body-2 text-neutral italic", className),
+      className: (0, import_class_variance_authority19.cx)("px-md py-sm text-body-2 text-neutral italic", className),
       children
     }
   );
 };
-Label3.displayName = "Combobox.Label";
+Label.displayName = "Combobox.Label";
 
 // src/combobox/ComboboxLeadingIcon.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { size: "sm", className: "h-sz-44 shrink-0", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { size: "sm", className: "h-sz-44 shrink-0", children });
 };
 LeadingIcon.displayName = "Combobox.LeadingIcon";
 
 // src/combobox/ComboboxPopover.tsx
-var import_class_variance_authority29 = require("class-variance-authority");
-var import_react19 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_class_variance_authority20 = require("class-variance-authority");
+var import_react14 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Popover3 = ({
   children,
   matchTriggerWidth = true,
@@ -2621,18 +2211,18 @@ var Popover3 = ({
   ...props
 }) => {
   const ctx = useComboboxContext();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     ctx.setHasPopover(true);
     return () => ctx.setHasPopover(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Popover2.Content,
     {
       ref: forwardedRef,
       inset: true,
       asChild: true,
       matchTriggerWidth,
-      className: (0, import_class_variance_authority29.cx)("z-dropdown! relative", className),
+      className: (0, import_class_variance_authority20.cx)("z-dropdown! relative", className),
       sideOffset,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -2646,14 +2236,14 @@ var Popover3 = ({
 Popover3.displayName = "Combobox.Popover";
 
 // src/combobox/ComboboxPortal.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Popover2.Portal, { ...rest, children });
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover2.Portal, { ...rest, children });
 Portal2.displayName = "Combobox.Portal";
 
 // src/combobox/ComboboxSelectedItems.tsx
 var import_DeleteOutline2 = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority30 = require("class-variance-authority");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_class_variance_authority21 = require("class-variance-authority");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SelectedItem = ({ item: selectedItem, index }) => {
   const ctx = useComboboxContext();
   const isCleanable = !ctx.disabled && !ctx.readOnly;
@@ -2673,12 +2263,12 @@ var SelectedItem = ({ item: selectedItem, index }) => {
     index
   });
   const Element = disabled ? "button" : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Element,
     {
       role: "presentation",
       "data-spark-component": "combobox-selected-item",
-      className: (0, import_class_variance_authority30.cx)(
+      className: (0, import_class_variance_authority21.cx)(
         "h-sz-28 bg-neutral-container flex items-center rounded-md align-middle",
         "text-body-2 text-on-neutral-container",
         "disabled:opacity-dim-3 disabled:cursor-not-allowed",
@@ -2690,17 +2280,17 @@ var SelectedItem = ({ item: selectedItem, index }) => {
       ...disabled && { disabled: true },
       onFocus: handleFocus,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "span",
           {
-            className: (0, import_class_variance_authority30.cx)("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
+            className: (0, import_class_variance_authority21.cx)("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
               "w-max": !ctx.wrap
             }),
             children: selectedItem.text
           }
         ),
         ctx.disabled,
-        isCleanable && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        isCleanable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -2717,7 +2307,7 @@ var SelectedItem = ({ item: selectedItem, index }) => {
                 ctx.innerInputRef.current.focus({ preventScroll: true });
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_DeleteOutline2.DeleteOutline, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_DeleteOutline2.DeleteOutline, {}) })
           }
         )
       ]
@@ -2727,18 +2317,19 @@ var SelectedItem = ({ item: selectedItem, index }) => {
 };
 var SelectedItems = () => {
   const ctx = useComboboxContext();
-  return ctx.multiple && ctx.selectedItems.length ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: ctx.selectedItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectedItem, { item, index }, item.value)) }) : null;
+  return ctx.multiple && ctx.selectedItems.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: ctx.selectedItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectedItem, { item, index }, item.value)) }) : null;
 };
 SelectedItems.displayName = "Combobox.SelectedItems";
 
 // src/combobox/ComboboxTrigger.tsx
+var import_form_field2 = require("@spark-ui/components/form-field");
 var import_use_merge_refs5 = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority32 = require("class-variance-authority");
-var import_react21 = require("react");
+var import_class_variance_authority23 = require("class-variance-authority");
+var import_react16 = require("react");
 
 // src/combobox/ComboboxTrigger.styles.tsx
-var import_class_variance_authority31 = require("class-variance-authority");
-var styles3 = (0, import_class_variance_authority31.cva)(
+var import_class_variance_authority22 = require("class-variance-authority");
+var styles3 = (0, import_class_variance_authority22.cva)(
   [
     "flex items-start gap-md min-h-sz-44 text-body-1",
     "h-fit rounded-lg px-lg",
@@ -2785,10 +2376,10 @@ var styles3 = (0, import_class_variance_authority31.cva)(
 );
 
 // src/combobox/utils/useWidthIncreaseCallback.ts
-var import_react20 = require("react");
+var import_react15 = require("react");
 var useWidthIncreaseCallback = (elementRef, callback) => {
-  const prevWidthRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const prevWidthRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     const checkWidthIncrease = () => {
       const currentWidth = elementRef.current?.scrollWidth || null;
       if (prevWidthRef.current && currentWidth && currentWidth > prevWidthRef.current) {
@@ -2803,18 +2394,18 @@ var useWidthIncreaseCallback = (elementRef, callback) => {
 };
 
 // src/combobox/ComboboxTrigger.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Trigger2 = ({ className, children, ref: forwardedRef }) => {
   const ctx = useComboboxContext();
-  const field = useFormFieldControl();
+  const field = (0, import_form_field2.useFormFieldControl)();
   const leadingIcon = findElement(children, "Combobox.LeadingIcon");
   const selectedItems = findElement(children, "Combobox.SelectedItems");
   const input = findElement(children, "Combobox.Input");
   const clearButton = findElement(children, "Combobox.ClearButton");
   const disclosure = findElement(children, "Combobox.Disclosure");
-  const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover ? [Popover2.Anchor, { asChild: true, type: void 0 }] : [import_react21.Fragment, {}];
+  const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover ? [Popover2.Anchor, { asChild: true, type: void 0 }] : [import_react16.Fragment, {}];
   const ref = (0, import_use_merge_refs5.useMergeRefs)(forwardedRef, ctx.triggerAreaRef);
-  const scrollableAreaRef = (0, import_react21.useRef)(null);
+  const scrollableAreaRef = (0, import_react16.useRef)(null);
   const disabled = field.disabled || ctx.disabled;
   const readOnly = field.readOnly || ctx.readOnly;
   const hasClearButton = !!clearButton && !disabled && !readOnly;
@@ -2825,7 +2416,7 @@ var Trigger2 = ({ className, children, ref: forwardedRef }) => {
     }
   };
   useWidthIncreaseCallback(scrollableAreaRef, scrollToRight);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const resizeObserver = new ResizeObserver(scrollToRight);
     if (scrollableAreaRef.current) {
       resizeObserver.observe(scrollableAreaRef.current);
@@ -2834,7 +2425,7 @@ var Trigger2 = ({ className, children, ref: forwardedRef }) => {
       resizeObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverAnchor, { ...popoverAnchorProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverAnchor, { ...popoverAnchorProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       ref,
@@ -2855,11 +2446,11 @@ var Trigger2 = ({ className, children, ref: forwardedRef }) => {
       },
       children: [
         leadingIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "div",
           {
             ref: scrollableAreaRef,
-            className: (0, import_class_variance_authority32.cx)(
+            className: (0, import_class_variance_authority23.cx)(
               "min-w-none gap-sm py-md inline-flex grow items-start",
               ctx.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
             ),
@@ -2884,7 +2475,7 @@ var Combobox2 = Object.assign(Combobox, {
   Items,
   ItemText,
   ItemIndicator,
-  Label: Label3,
+  Label,
   Popover: Popover3,
   Trigger: Trigger2,
   LeadingIcon,
@@ -2901,7 +2492,7 @@ Items.displayName = "Combobox.Items";
 Item.displayName = "Combobox.Item";
 ItemText.displayName = "Combobox.ItemText";
 ItemIndicator.displayName = "Combobox.ItemIndicator";
-Label3.displayName = "Combobox.Label";
+Label.displayName = "Combobox.Label";
 Popover3.displayName = "Combobox.Popover";
 Trigger2.displayName = "Combobox.Trigger";
 LeadingIcon.displayName = "Combobox.LeadingIcon";