@spark-ui/components 10.0.2 → 10.0.3

package/dist/dropdown/index.js

@@ -26,143 +26,133 @@ __export(dropdown_exports, {
 });
 module.exports = __toCommonJS(dropdown_exports);
 
-// src/form-field/FormField.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_react4 = require("react");
+// src/dropdown/DropdownContext.tsx
+var import_form_field = require("@spark-ui/components/form-field");
+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 +210,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,433 +219,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/dropdown/DropdownContext.tsx
-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: {
@@ -696,7 +286,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",
@@ -706,7 +296,7 @@ var Spinner = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       role: "status",
@@ -714,14 +304,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");
@@ -1275,7 +865,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",
@@ -1362,7 +952,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",
@@ -1393,7 +983,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);
@@ -1405,7 +995,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",
@@ -1427,14 +1017,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
             }
           )
@@ -1447,8 +1037,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.
@@ -1462,7 +1052,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,
@@ -1473,7 +1063,7 @@ var IconButton = ({
   ref,
   ...others
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Button,
     {
       ref,
@@ -1490,33 +1080,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",
@@ -1577,7 +1167,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,
@@ -1602,8 +1192,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({
@@ -1636,31 +1226,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,
@@ -1785,7 +1375,7 @@ var useDropdown = ({
 };
 
 // src/dropdown/utils.ts
-var import_react11 = require("react");
+var import_react6 = require("react");
 function getIndexByKey(map, targetKey) {
   let index = 0;
   for (const [key] of map.entries()) {
@@ -1812,8 +1402,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) === "Dropdown.Item") {
       const childProps = child.props;
       result.push({
@@ -1832,8 +1422,8 @@ var getItemText = (children, itemText = "") => {
   if (typeof children === "string") {
     return children;
   }
-  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) === "Dropdown.ItemText") {
       itemText = child.props.children;
     }
@@ -1851,8 +1441,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) {
@@ -1863,9 +1453,9 @@ var hasChildComponent = (children, displayName) => {
 };
 
 // src/dropdown/DropdownContext.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var DropdownContext = (0, import_react12.createContext)(null);
-var ID_PREFIX3 = ":dropdown";
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DropdownContext = (0, import_react7.createContext)(null);
+var ID_PREFIX2 = ":dropdown";
 var DropdownProvider = ({
   children,
   defaultValue,
@@ -1879,15 +1469,15 @@ var DropdownProvider = ({
   readOnly: readOnlyProp = false,
   state: stateProp
 }) => {
-  const [itemsMap, setItemsMap] = (0, import_react12.useState)(getItemsFromChildren(children));
-  const [hasPopover, setHasPopover] = (0, import_react12.useState)(
+  const [itemsMap, setItemsMap] = (0, import_react7.useState)(getItemsFromChildren(children));
+  const [hasPopover, setHasPopover] = (0, import_react7.useState)(
     hasChildComponent(children, "Dropdown.Popover")
   );
-  const [lastInteractionType, setLastInteractionType] = (0, import_react12.useState)("mouse");
-  const field = useFormFieldControl();
+  const [lastInteractionType, setLastInteractionType] = (0, import_react7.useState)("mouse");
+  const field = (0, import_form_field.useFormFieldControl)();
   const state = field.state || stateProp;
-  const internalFieldLabelID = `${ID_PREFIX3}-label-${(0, import_react12.useId)()}`;
-  const internalFieldID = `${ID_PREFIX3}-input-${(0, import_react12.useId)()}`;
+  const internalFieldLabelID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
+  const internalFieldID = `${ID_PREFIX2}-input-${(0, import_react7.useId)()}`;
   const id = field.id || internalFieldID;
   const labelId = field.labelId || internalFieldLabelID;
   const disabled = field.disabled ?? disabledProp;
@@ -1904,7 +1494,7 @@ var DropdownProvider = ({
     id,
     labelId
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const newMap = getItemsFromChildren(children);
     const previousItems = [...itemsMap.values()];
     const newItems = [...newMap.values()];
@@ -1917,8 +1507,8 @@ var DropdownProvider = ({
       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)(
     DropdownContext.Provider,
     {
       value: {
@@ -1934,12 +1524,12 @@ var DropdownProvider = ({
         lastInteractionType,
         setLastInteractionType
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WrapperComponent, { ...wrapperProps, children })
     }
   );
 };
 var useDropdownContext = () => {
-  const context = (0, import_react12.useContext)(DropdownContext);
+  const context = (0, import_react7.useContext)(DropdownContext);
   if (!context) {
     throw Error("useDropdownContext must be used within a Dropdown provider");
   }
@@ -1947,33 +1537,33 @@ var useDropdownContext = () => {
 };
 
 // src/dropdown/Dropdown.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Dropdown = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropdownProvider, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownProvider, { ...props, children });
 };
 Dropdown.displayName = "Dropdown";
 
 // src/dropdown/DropdownDivider.tsx
-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 Divider = ({ className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: forwardedRef, className: (0, import_class_variance_authority19.cx)("my-md border-b-sm border-outline", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: forwardedRef, className: (0, import_class_variance_authority10.cx)("my-md border-b-sm border-outline", className) });
 };
 Divider.displayName = "Dropdown.Divider";
 
 // src/dropdown/DropdownGroup.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 
 // src/dropdown/DropdownItemsGroupContext.tsx
-var import_react13 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var DropdownGroupContext = (0, import_react13.createContext)(null);
+var import_react8 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DropdownGroupContext = (0, import_react8.createContext)(null);
 var DropdownGroupProvider = ({ children }) => {
-  const labelId = `${ID_PREFIX3}-group-label-${(0, import_react13.useId)()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownGroupContext.Provider, { value: { labelId }, children });
+  const labelId = `${ID_PREFIX2}-group-label-${(0, import_react8.useId)()}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownGroupContext.Provider, { value: { labelId }, children });
 };
 var useDropdownGroupContext = () => {
-  const context = (0, import_react13.useContext)(DropdownGroupContext);
+  const context = (0, import_react8.useContext)(DropdownGroupContext);
   if (!context) {
     throw Error("useDropdownGroupContext must be used within a DropdownGroup provider");
   }
@@ -1981,35 +1571,35 @@ var useDropdownGroupContext = () => {
 };
 
 // src/dropdown/DropdownGroup.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
 };
 var GroupContent = ({ children, className, ref: forwardedRef }) => {
   const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: forwardedRef, role: "group", "aria-labelledby": labelId, className: (0, import_class_variance_authority20.cx)(className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: forwardedRef, role: "group", "aria-labelledby": labelId, className: (0, import_class_variance_authority11.cx)(className), children });
 };
 Group.displayName = "Dropdown.Group";
 
 // src/dropdown/DropdownItem.tsx
 var import_use_merge_refs = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority21 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 
 // src/dropdown/DropdownItemContext.tsx
-var import_react14 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var DropdownItemContext = (0, import_react14.createContext)(null);
+var import_react9 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var DropdownItemContext = (0, import_react9.createContext)(null);
 var DropdownItemProvider = ({
   value,
   disabled = false,
   children
 }) => {
   const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext();
-  const [textId, setTextId] = (0, import_react14.useState)(void 0);
+  const [textId, setTextId] = (0, import_react9.useState)(void 0);
   const index = getIndexByKey(itemsMap, value);
   const itemData = { disabled, value, text: getItemText(children) };
   const isSelected = multiple ? selectedItems.some((selectedItem2) => selectedItem2.value === value) : selectedItem?.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     DropdownItemContext.Provider,
     {
       value: { textId, setTextId, isSelected, itemData, index, disabled },
@@ -2018,7 +1608,7 @@ var DropdownItemProvider = ({
   );
 };
 var useDropdownItemContext = () => {
-  const context = (0, import_react14.useContext)(DropdownItemContext);
+  const context = (0, import_react9.useContext)(DropdownItemContext);
   if (!context) {
     throw Error("useDropdownItemContext must be used within a DropdownItem provider");
   }
@@ -2026,12 +1616,12 @@ var useDropdownItemContext = () => {
 };
 
 // src/dropdown/DropdownItem.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Item = ({ children, ref: forwardedRef, ...props }) => {
   const { value, disabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
 };
-var styles2 = (0, import_class_variance_authority21.cva)("px-lg py-md text-body-1", {
+var styles2 = (0, import_class_variance_authority12.cva)("px-lg py-md text-body-1", {
   variants: {
     selected: {
       true: "font-bold"
@@ -2073,11 +1663,11 @@ var ItemContent = ({
   const isHighlighted = highlightedItem?.value === value;
   const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index });
   const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "li",
     {
       ref,
-      className: (0, import_class_variance_authority21.cx)(
+      className: (0, import_class_variance_authority12.cx)(
         styles2({
           selected: isSelected,
           disabled,
@@ -2097,9 +1687,9 @@ var ItemContent = ({
 Item.displayName = "Dropdown.Item";
 
 // src/dropdown/DropdownItemIndicator.tsx
-var import_Check2 = require("@spark-ui/icons/Check");
-var import_class_variance_authority22 = require("class-variance-authority");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_Check = require("@spark-ui/icons/Check");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ItemIndicator = ({
   className,
   children,
@@ -2107,12 +1697,12 @@ var ItemIndicator = ({
   ref: forwardedRef
 }) => {
   const { disabled, isSelected } = useDropdownItemContext();
-  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Check2.Check, { "aria-label": label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Check.Check, { "aria-label": label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       ref: forwardedRef,
-      className: (0, import_class_variance_authority22.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
+      className: (0, import_class_variance_authority13.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
       children: isSelected && childElement
     }
   );
@@ -2121,9 +1711,9 @@ ItemIndicator.displayName = "Dropdown.ItemIndicator";
 
 // src/dropdown/DropdownItems.tsx
 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_runtime38 = require("react/jsx-runtime");
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_react10 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Items = ({ children, className, ref: forwardedRef, ...props }) => {
   const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext();
   const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
@@ -2131,9 +1721,9 @@ var Items = ({ children, className, ref: forwardedRef, ...props }) => {
       setLastInteractionType("mouse");
     }
   });
-  const innerRef = (0, import_react15.useRef)(null);
+  const innerRef = (0, import_react10.useRef)(null);
   const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, downshiftRef, innerRef);
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!hasPopover) return;
     if (!innerRef.current) return;
     if (innerRef.current.parentElement) {
@@ -2141,11 +1731,11 @@ var Items = ({ children, className, ref: forwardedRef, ...props }) => {
       innerRef.current.style.pointerEvents = isOpen ? "" : "none";
     }
   }, [isOpen, hasPopover]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "ul",
     {
       ref,
-      className: (0, import_class_variance_authority23.cx)(
+      className: (0, import_class_variance_authority14.cx)(
         className,
         "flex flex-col",
         isOpen ? "pointer-events-auto! block" : "pointer-events-none invisible absolute opacity-0",
@@ -2161,48 +1751,48 @@ var Items = ({ children, className, ref: forwardedRef, ...props }) => {
 Items.displayName = "Dropdown.Items";
 
 // src/dropdown/DropdownItemText.tsx
-var import_class_variance_authority24 = require("class-variance-authority");
-var import_react16 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_react11 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ItemText = ({ children, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX3}-item-text-${(0, import_react16.useId)()}`;
+  const id = `${ID_PREFIX2}-item-text-${(0, import_react11.useId)()}`;
   const { setTextId } = useDropdownItemContext();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setTextId(id);
     return () => setTextId(void 0);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id, className: (0, import_class_variance_authority24.cx)("inline"), ref: forwardedRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id, className: (0, import_class_variance_authority15.cx)("inline"), ref: forwardedRef, children });
 };
 ItemText.displayName = "Dropdown.ItemText";
 
 // src/dropdown/DropdownLabel.tsx
-var import_class_variance_authority25 = require("class-variance-authority");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Label3 = ({ children, className, ref: forwardedRef }) => {
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Label = ({ children, className, ref: forwardedRef }) => {
   const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ref: forwardedRef,
       id: labelId,
-      className: (0, import_class_variance_authority25.cx)("px-md py-sm text-body-2 text-neutral italic", className),
+      className: (0, import_class_variance_authority16.cx)("px-md py-sm text-body-2 text-neutral italic", className),
       children
     }
   );
 };
-Label3.displayName = "Dropdown.Label";
+Label.displayName = "Dropdown.Label";
 
 // src/dropdown/DropdownLeadingIcon.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { size: "sm", className: "shrink-0", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { size: "sm", className: "shrink-0", children });
 };
 LeadingIcon.displayName = "Dropdown.LeadingIcon";
 
 // src/dropdown/DropdownPopover.tsx
-var import_class_variance_authority26 = require("class-variance-authority");
-var import_react17 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_react12 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Popover3 = ({
   children,
   matchTriggerWidth = true,
@@ -2213,11 +1803,11 @@ var Popover3 = ({
   ...props
 }) => {
   const ctx = useDropdownContext();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     ctx.setHasPopover(true);
     return () => ctx.setHasPopover(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Popover2.Content,
     {
       ref: forwardedRef,
@@ -2225,7 +1815,7 @@ var Popover3 = ({
       asChild: true,
       matchTriggerWidth,
       elevation,
-      className: (0, import_class_variance_authority26.cx)("relative", className),
+      className: (0, import_class_variance_authority17.cx)("relative", className),
       sideOffset,
       onOpenAutoFocus: (e) => {
         e.preventDefault();
@@ -2239,19 +1829,19 @@ var Popover3 = ({
 Popover3.displayName = "Dropdown.Popover";
 
 // src/dropdown/DropdownPortal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Popover2.Portal, { ...rest, children });
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Popover2.Portal, { ...rest, children });
 Portal2.displayName = "Dropdown.Portal";
 
 // src/dropdown/DropdownTrigger.tsx
 var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
 var import_use_merge_refs3 = require("@spark-ui/use-merge-refs");
-var import_class_variance_authority28 = require("class-variance-authority");
-var import_react18 = require("react");
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_react13 = require("react");
 
 // src/dropdown/DropdownTrigger.styles.tsx
-var import_class_variance_authority27 = require("class-variance-authority");
-var styles3 = (0, import_class_variance_authority27.cva)(
+var import_class_variance_authority18 = require("class-variance-authority");
+var styles3 = (0, import_class_variance_authority18.cva)(
   [
     "flex w-full items-center justify-between",
     "min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg",
@@ -2285,7 +1875,7 @@ var styles3 = (0, import_class_variance_authority27.cva)(
 );
 
 // src/dropdown/DropdownTrigger.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Trigger2 = ({
   "aria-label": ariaLabel,
   children,
@@ -2302,7 +1892,7 @@ var Trigger2 = ({
     state,
     setLastInteractionType
   } = useDropdownContext();
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2.Trigger, { asChild: true }] : [import_react18.Fragment, {}];
+  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2.Trigger, { asChild: true }] : [import_react13.Fragment, {}];
   const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({
     ...getDropdownProps(),
     onKeyDown: () => {
@@ -2311,9 +1901,9 @@ var Trigger2 = ({
   });
   const isExpanded = downshiftTriggerProps["aria-expanded"];
   const ref = (0, import_use_merge_refs3.useMergeRefs)(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { ...getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WrapperComponent, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { ...getLabelProps(), children: ariaLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "button",
       {
         type: "button",
@@ -2323,15 +1913,15 @@ var Trigger2 = ({
         ...downshiftTriggerProps,
         "data-spark-component": "dropdown-trigger",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Icon,
             {
-              className: (0, import_class_variance_authority28.cx)("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
+              className: (0, import_class_variance_authority19.cx)("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
                 "rotate-180": isExpanded
               }),
               size: "sm",
-              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
             }
           )
         ]
@@ -2342,25 +1932,25 @@ var Trigger2 = ({
 Trigger2.displayName = "Dropdown.Trigger";
 
 // src/dropdown/DropdownValue.tsx
-var import_class_variance_authority29 = require("class-variance-authority");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_class_variance_authority20 = require("class-variance-authority");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Value = ({ children, className, placeholder, ref: forwardedRef }) => {
   const { selectedItem, multiple, selectedItems } = useDropdownContext();
   const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem);
   const text = multiple ? selectedItems[0]?.text : selectedItem?.text;
   const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { ref: forwardedRef, className: (0, import_class_variance_authority29.cx)("flex shrink items-center text-left", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { ref: forwardedRef, className: (0, import_class_variance_authority20.cx)("flex shrink items-center text-left", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "span",
       {
-        className: (0, import_class_variance_authority29.cx)(
+        className: (0, import_class_variance_authority20.cx)(
           "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
           !hasSelectedItems && "text-on-surface/dim-1"
         ),
         children: !hasSelectedItems ? placeholder : children || text
       }
     ),
-    suffix && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: suffix })
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: suffix })
   ] });
 };
 Value.displayName = "Dropdown.Value";
@@ -2372,7 +1962,7 @@ var Dropdown2 = Object.assign(Dropdown, {
   Items,
   ItemText,
   ItemIndicator,
-  Label: Label3,
+  Label,
   Popover: Popover3,
   Divider,
   Trigger: Trigger2,
@@ -2386,7 +1976,7 @@ Items.displayName = "Dropdown.Items";
 Item.displayName = "Dropdown.Item";
 ItemText.displayName = "Dropdown.ItemText";
 ItemIndicator.displayName = "Dropdown.ItemIndicator";
-Label3.displayName = "Dropdown.Label";
+Label.displayName = "Dropdown.Label";
 Popover3.displayName = "Dropdown.Popover";
 Divider.displayName = "Dropdown.Divider";
 Trigger2.displayName = "Dropdown.Trigger";