@spark-ui/components 10.0.0

package/dist/combobox/index.js

@@ -0,0 +1,2920 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/combobox/index.ts
+var combobox_exports = {};
+__export(combobox_exports, {
+  Combobox: () => Combobox2,
+  ComboboxProvider: () => ComboboxProvider,
+  useComboboxContext: () => useComboboxContext
+});
+module.exports = __toCommonJS(combobox_exports);
+
+// 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/form-field/FormField.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react4 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+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;
+};
+
+// src/form-field/FormFieldContext.tsx
+var import_react2 = require("react");
+var FormFieldContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":form-field";
+var useFormField = () => {
+  const context = (0, import_react2.useContext)(FormFieldContext);
+  if (!context) {
+    throw Error("useFormField must be used within a FormField provider");
+  }
+  return context;
+};
+
+// src/form-field/FormFieldProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormFieldProvider = ({
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  state,
+  isRequired,
+  children
+}) => {
+  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
+  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
+  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
+  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => [...ids, msgId]);
+  }, []);
+  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => ids.filter((current) => current !== msgId));
+  }, []);
+  const value = (0, import_react3.useMemo)(() => {
+    const isInvalid = state === "error";
+    return {
+      id,
+      labelId,
+      name,
+      disabled,
+      readOnly,
+      state,
+      isRequired,
+      isInvalid,
+      description,
+      onMessageIdAdd: handleMessageIdAdd,
+      onMessageIdRemove: handleMessageIdRemove
+    };
+  }, [
+    id,
+    labelId,
+    name,
+    disabled,
+    readOnly,
+    description,
+    state,
+    isRequired,
+    handleMessageIdAdd,
+    handleMessageIdRemove
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
+};
+FormFieldProvider.displayName = "FormFieldProvider";
+
+// src/form-field/FormField.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
+}) => {
+  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormFieldProvider,
+    {
+      id,
+      name,
+      isRequired,
+      disabled,
+      readOnly,
+      state,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          ref,
+          "data-spark-component": "form-field",
+          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
+          ...others
+        }
+      )
+    }
+  );
+};
+FormField.displayName = "FormField";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
+var import_Check = require("@spark-ui/icons/Check");
+var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
+var import_class_variance_authority4 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  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, {
+      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 })
+  ] });
+};
+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/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");
+
+// src/spinner/Spinner.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority12 = require("class-variance-authority");
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = (0, import_class_variance_authority12.cva)(
+  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
+  {
+    variants: {
+      /**
+       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
+       */
+      size: {
+        current: ["u-current-font-size"],
+        sm: ["w-sz-20", "h-sz-20"],
+        md: ["w-sz-28", "h-sz-28"],
+        full: ["w-full", "h-full"]
+      },
+      /**
+       * Color scheme of the spinner.
+       */
+      intent: (0, import_internal_utils2.makeVariants)({
+        current: ["border-current"],
+        main: ["border-main"],
+        support: ["border-support"],
+        accent: ["border-accent"],
+        basic: ["border-basic"],
+        success: ["border-success"],
+        alert: ["border-alert"],
+        error: ["border-error"],
+        info: ["border-info"],
+        neutral: ["border-neutral"]
+      }),
+      /**
+       * Size of the button.
+       */
+      isBackgroundVisible: {
+        true: ["border-b-neutral-container", "border-l-neutral-container"],
+        false: ["border-b-transparent", "border-l-transparent"]
+      }
+    },
+    defaultVariants
+  }
+);
+
+// src/spinner/Spinner.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime22.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");
+
+// src/button/variants/filled.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var filledVariants = [
+  // Main
+  {
+    intent: "main",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-main",
+      "text-on-main",
+      "hover:bg-main-hovered",
+      "enabled:active:bg-main-hovered",
+      "focus-visible:bg-main-hovered"
+    ])
+  },
+  // Support
+  {
+    intent: "support",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-support",
+      "text-on-support",
+      "hover:bg-support-hovered",
+      "enabled:active:bg-support-hovered",
+      "focus-visible:bg-support-hovered"
+    ])
+  },
+  // Accent
+  {
+    intent: "accent",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-accent",
+      "text-on-accent",
+      "hover:bg-accent-hovered",
+      "enabled:active:bg-accent-hovered",
+      "focus-visible:bg-accent-hovered"
+    ])
+  },
+  // Basic
+  {
+    intent: "basic",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-basic",
+      "text-on-basic",
+      "hover:bg-basic-hovered",
+      "enabled:active:bg-basic-hovered",
+      "focus-visible:bg-basic-hovered"
+    ])
+  },
+  // Success
+  {
+    intent: "success",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-success",
+      "text-on-success",
+      "hover:bg-success-hovered",
+      "enabled:active:bg-success-hovered",
+      "focus-visible:bg-success-hovered"
+    ])
+  },
+  // Alert
+  {
+    intent: "alert",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-alert",
+      "text-on-alert",
+      "hover:bg-alert-hovered",
+      "enabled:active:bg-alert-hovered",
+      "focus-visible:bg-alert-hovered"
+    ])
+  },
+  // Danger
+  {
+    intent: "danger",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-error",
+      "hover:bg-error-hovered enabled:active:bg-error-hovered",
+      "focus-visible:bg-error-hovered"
+    ])
+  },
+  // Info
+  {
+    intent: "info",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-info",
+      "hover:bg-info-hovered enabled:active:bg-info-hovered",
+      "focus-visible:bg-info-hovered"
+    ])
+  },
+  // Neutral
+  {
+    intent: "neutral",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-neutral",
+      "text-on-neutral",
+      "hover:bg-neutral-hovered",
+      "enabled:active:bg-neutral-hovered",
+      "focus-visible:bg-neutral-hovered"
+    ])
+  },
+  // Surface
+  {
+    intent: "surface",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/variants/ghost.ts
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var ghostVariants = [
+  {
+    intent: "main",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-main",
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5"
+    ])
+  },
+  {
+    intent: "support",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-support",
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-accent",
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-basic",
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5"
+    ])
+  },
+  {
+    intent: "success",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-success",
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-alert",
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-error",
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5"
+    ])
+  },
+  {
+    intent: "info",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-info",
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-neutral",
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface",
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5"
+    ])
+  }
+];
+
+// src/button/variants/outlined.ts
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "text-support"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "text-surface"
+    ])
+  }
+];
+
+// src/button/variants/tinted.ts
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-main-container",
+      "text-on-main-container",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-support-container",
+      "text-on-support-container",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-accent-container",
+      "text-on-accent-container",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-basic-container",
+      "text-on-basic-container",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-success-container",
+      "text-on-success-container",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-alert-container",
+      "text-on-alert-container",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-error-container",
+      "text-on-error-container",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-info-container",
+      "text-on-info-container",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-neutral-container",
+      "text-on-neutral-container",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/variants/contrast.ts
+var import_internal_utils7 = require("@spark-ui/internal-utils");
+var contrastVariants = [
+  {
+    intent: "main",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-main",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-support",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-accent",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-basic",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-success",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-alert",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-error",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-info",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-neutral",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/Button.styles.tsx
+var buttonStyles = (0, import_class_variance_authority13.cva)(
+  [
+    "u-shadow-border-transition",
+    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+    "px-lg",
+    "text-body-1 font-bold",
+    "focus-visible:u-outline"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the button.
+       *
+       * - `filled`: Button will be plain.
+       *
+       * - `outlined`: Button will be transparent with an outline.
+       *
+       * - `tinted`: Button will be filled but using a lighter color scheme.
+       *
+       * - `ghost`: Button will look like a link. No borders, plain text.
+       *
+       * - `contrast`: Button will be surface filled. No borders, plain text.
+       *
+       */
+      design: (0, import_internal_utils8.makeVariants)({
+        filled: [],
+        outlined: ["bg-transparent", "border-sm", "border-current"],
+        tinted: [],
+        ghost: [],
+        contrast: ["bg-surface"]
+      }),
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils8.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: []
+      }),
+      /**
+       * Size of the button.
+       */
+      size: (0, import_internal_utils8.makeVariants)({
+        sm: ["min-w-sz-32", "h-sz-32"],
+        md: ["min-w-sz-44", "h-sz-44"],
+        lg: ["min-w-sz-56", "h-sz-56"]
+      }),
+      /**
+       * Shape of the button.
+       */
+      shape: (0, import_internal_utils8.makeVariants)({
+        rounded: ["rounded-lg"],
+        square: ["rounded-0"],
+        pill: ["rounded-full"]
+      }),
+      /**
+       * Disable the button, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"],
+        false: ["cursor-pointer"]
+      }
+    },
+    compoundVariants: [
+      ...filledVariants,
+      ...outlinedVariants,
+      ...tintedVariants,
+      ...ghostVariants,
+      ...contrastVariants
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "main",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+
+// src/button/Button.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var blockedEventHandlers = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseOver",
+  "onMouseOut",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onSubmit"
+];
+var Button = ({
+  children,
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = "rounded",
+  size = "md",
+  asChild,
+  className,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "button";
+  const shouldNotInteract = !!disabled || isLoading;
+  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
+    const result = {};
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
+    }
+    return result;
+  }, [shouldNotInteract]);
+  const spinnerProps = {
+    size: "current",
+    className: loadingText ? "inline-block" : "absolute",
+    ...loadingLabel && { "aria-label": loadingLabel }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Component,
+    {
+      "data-spark-component": "button",
+      ...Component === "button" && { type: "button" },
+      ref,
+      className: buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size
+      }),
+      disabled: !!disabled,
+      "aria-busy": isLoading,
+      "aria-live": isLoading ? "assertive" : "off",
+      ...others,
+      ...disabledEventHandlers,
+      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 }),
+          loadingText && loadingText,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: (0, import_class_variance_authority14.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              children: slotted
+            }
+          )
+        ] }) : slotted
+      )
+    }
+  );
+};
+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"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Button,
+    {
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/popover/PopoverCloseButton.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CloseButton = ({
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_radix_ui6.Popover.Close,
+    {
+      "data-spark-component": "popover-close-button",
+      ref,
+      className: (0, import_class_variance_authority16.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, {}) }) })
+    }
+  );
+};
+CloseButton.displayName = "Popover.CloseButton";
+
+// src/popover/PopoverContent.tsx
+var import_radix_ui7 = 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)(
+  [
+    "rounded-md",
+    "shadow-sm",
+    "focus-visible:outline-hidden focus-visible:u-outline",
+    "max-h-(--radix-popper-available-height) overflow-y-auto"
+  ],
+  {
+    variants: {
+      intent: {
+        surface: "bg-surface text-on-surface",
+        main: "bg-main-container text-on-main-container",
+        support: "bg-support-container text-on-support-container",
+        accent: "bg-accent-container text-on-accent-container",
+        basic: "bg-basic-container text-on-basic-container",
+        success: "bg-success-container text-on-success-container",
+        alert: "bg-alert-container text-on-alert-container",
+        danger: "bg-error-container text-on-error-container",
+        info: "bg-info-container text-on-info-container",
+        neutral: "bg-neutral-container text-on-neutral-container"
+      },
+      matchTriggerWidth: {
+        true: "w-(--radix-popper-anchor-width)"
+      },
+      enforceBoundaries: {
+        true: ["max-w-(--radix-popper-available-width)"]
+      },
+      inset: {
+        true: "overflow-hidden",
+        false: "p-lg"
+      },
+      elevation: {
+        dropdown: "z-dropdown",
+        popover: "z-popover"
+      }
+    },
+    compoundVariants: [
+      {
+        inset: false,
+        /**
+         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
+         */
+        class: "has-data-[spark-component=popover-close-button]:pr-3xl"
+      },
+      {
+        enforceBoundaries: false,
+        matchTriggerWidth: false,
+        class: "max-w-[min(var(--spacing-sz-384),100vw)]"
+      }
+    ],
+    defaultVariants: {
+      matchTriggerWidth: false,
+      enforceBoundaries: false,
+      inset: false,
+      intent: "surface",
+      elevation: "popover"
+    }
+  }
+);
+
+// src/popover/PopoverContent.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Content = ({
+  // Spark props
+  className,
+  children,
+  matchTriggerWidth = false,
+  // Radix props
+  align = "center",
+  arrowPadding = 16,
+  // In order not to overlap the arrow on the rounded corners of the popover.
+  asChild = false,
+  avoidCollisions = true,
+  "aria-labelledby": ariaLabelledBy,
+  collisionBoundary,
+  collisionPadding = 0,
+  hideWhenDetached = false,
+  side = "bottom",
+  sideOffset = 8,
+  sticky = "partial",
+  inset = false,
+  elevation = "popover",
+  ref,
+  ...rest
+}) => {
+  const { headerId, intent } = usePopover();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_radix_ui7.Popover.Content,
+    {
+      "aria-labelledby": headerId || ariaLabelledBy,
+      className: styles({
+        enforceBoundaries: !!collisionBoundary,
+        matchTriggerWidth,
+        inset,
+        elevation,
+        intent,
+        className
+      }),
+      "data-spark-component": "popover-content",
+      ref,
+      ...{
+        align,
+        arrowPadding,
+        asChild,
+        avoidCollisions,
+        collisionBoundary,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky
+      },
+      ...rest,
+      children
+    }
+  );
+};
+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 Header = ({ children, className, ref, ...rest }) => {
+  const id = `${ID_PREFIX2}-header-${(0, import_react10.useId)()}`;
+  const { setHeaderId } = usePopover();
+  (0, import_react10.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 });
+};
+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 });
+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,
+  {
+    "data-spark-component": "popover-trigger",
+    ref,
+    asChild,
+    ...rest,
+    children
+  }
+);
+Trigger.displayName = "Popover.Trigger";
+
+// src/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Anchor,
+  Arrow,
+  CloseButton,
+  Content,
+  Header,
+  Portal,
+  Trigger
+});
+Popover2.displayName = "Popover";
+Anchor.displayName = "Popover.Anchor";
+Arrow.displayName = "Popover.Arrow";
+CloseButton.displayName = "Popover.CloseButton";
+Content.displayName = "Popover.Content";
+Header.displayName = "Popover.Header";
+Portal.displayName = "Popover.Portal";
+Trigger.displayName = "Popover.Trigger";
+
+// src/combobox/useCombobox/multipleSelectionReducer.ts
+var import_downshift = require("downshift");
+
+// src/combobox/utils/index.ts
+var import_react11 = require("react");
+function getIndexByKey(map, targetKey) {
+  let index = 0;
+  for (const [key] of map.entries()) {
+    if (key === targetKey) {
+      return index;
+    }
+    index++;
+  }
+  return -1;
+}
+var getKeyAtIndex = (map, index) => {
+  let i = 0;
+  for (const key of map.keys()) {
+    if (i === index) return key;
+    i++;
+  }
+  return void 0;
+};
+var getElementByIndex = (map, index) => {
+  const key = getKeyAtIndex(map, index);
+  return key !== void 0 ? map.get(key) : void 0;
+};
+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;
+    if (getElementDisplayName(child) === "Combobox.Item") {
+      const childProps = child.props;
+      result.push({
+        value: childProps.value,
+        disabled: !!childProps.disabled,
+        text: getItemText(childProps.children)
+      });
+    }
+    if (child.props.children) {
+      getOrderedItems(child.props.children, result);
+    }
+  });
+  return result;
+};
+var findNestedItemText = (children) => {
+  if (!children) return "";
+  for (const child of import_react11.Children.toArray(children)) {
+    if ((0, import_react11.isValidElement)(child)) {
+      const childElement = child;
+      if (getElementDisplayName(childElement) === "Combobox.ItemText") {
+        return childElement.props.children;
+      }
+      const foundText = findNestedItemText(childElement.props.children);
+      if (foundText) return foundText;
+    }
+  }
+  return "";
+};
+var getItemText = (children) => {
+  return typeof children === "string" ? children : findNestedItemText(children);
+};
+var getItemsFromChildren = (children) => {
+  const newMap = /* @__PURE__ */ new Map();
+  getOrderedItems(children).forEach((itemData) => {
+    newMap.set(itemData.value, itemData);
+  });
+  return newMap;
+};
+var hasChildComponent = (children, displayName) => {
+  return import_react11.Children.toArray(children).some((child) => {
+    if (!(0, import_react11.isValidElement)(child)) return false;
+    if (getElementDisplayName(child) === displayName) {
+      return true;
+    } else if (child.props.children) {
+      return hasChildComponent(child.props.children, displayName);
+    }
+    return false;
+  });
+};
+var findElement = (children, value) => {
+  return import_react11.Children.toArray(children).filter(import_react11.isValidElement).find((child) => value === getElementDisplayName(child) || "");
+};
+
+// src/combobox/useCombobox/multipleSelectionReducer.ts
+var multipleSelectionReducer = ({
+  multiselect,
+  selectedItems,
+  allowCustomValue = false,
+  setSelectedItems,
+  triggerAreaRef,
+  items
+}) => {
+  const reducer = (_, { changes, type }) => {
+    const isFocusInsideTriggerArea = triggerAreaRef.current?.contains?.(document.activeElement);
+    switch (type) {
+      case import_downshift.useCombobox.stateChangeTypes.InputClick:
+        return {
+          ...changes,
+          isOpen: true
+          // keep menu opened
+        };
+      case import_downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case import_downshift.useCombobox.stateChangeTypes.ItemClick: {
+        const newState = { ...changes };
+        if (changes.selectedItem != null) {
+          newState.inputValue = "";
+          newState.isOpen = true;
+          const highlightedIndex = getIndexByKey(items, changes.selectedItem.value);
+          newState.highlightedIndex = highlightedIndex;
+          const isAlreadySelected = multiselect.selectedItems.some(
+            (selectedItem) => selectedItem.value === changes.selectedItem?.value
+          );
+          const updatedItems = isAlreadySelected ? selectedItems.filter((item) => item.value !== changes.selectedItem?.value) : [...selectedItems, changes.selectedItem];
+          setSelectedItems(updatedItems);
+        }
+        return newState;
+      }
+      case import_downshift.useCombobox.stateChangeTypes.ToggleButtonClick:
+        return {
+          ...changes,
+          inputValue: allowCustomValue ? changes.inputValue : ""
+        };
+      case import_downshift.useCombobox.stateChangeTypes.InputChange:
+        return {
+          ...changes,
+          selectedItem: changes.highlightedIndex === -1 ? null : changes.selectedItem
+        };
+      case import_downshift.useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          inputValue: allowCustomValue ? changes.inputValue : "",
+          isOpen: isFocusInsideTriggerArea
+        };
+      default:
+        return changes;
+    }
+  };
+  return reducer;
+};
+
+// src/combobox/useCombobox/singleSelectionReducer.ts
+var import_downshift2 = require("downshift");
+var singleSelectionReducer = ({
+  filteredItems,
+  allowCustomValue = false,
+  setSelectedItem
+}) => {
+  const reducer = (state, { changes, type }) => {
+    const exactMatch = filteredItems.find(
+      (item) => item.text.toLowerCase() === state.inputValue.toLowerCase()
+    );
+    switch (type) {
+      case import_downshift2.useCombobox.stateChangeTypes.InputKeyDownEscape:
+        if (!changes.selectedItem) {
+          setSelectedItem(null);
+        }
+        return changes;
+      case import_downshift2.useCombobox.stateChangeTypes.ItemClick:
+      case import_downshift2.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        if (changes.selectedItem) {
+          setSelectedItem(changes.selectedItem);
+        }
+        return changes;
+      case import_downshift2.useCombobox.stateChangeTypes.InputClick:
+        return { ...changes, isOpen: true };
+      case import_downshift2.useCombobox.stateChangeTypes.ToggleButtonClick:
+      case import_downshift2.useCombobox.stateChangeTypes.InputBlur:
+        if (allowCustomValue) return changes;
+        if (state.inputValue === "") {
+          setSelectedItem(null);
+          return { ...changes, selectedItem: null };
+        }
+        if (exactMatch) {
+          setSelectedItem(exactMatch);
+          return { ...changes, selectedItem: exactMatch, inputValue: exactMatch.text };
+        }
+        if (state.selectedItem) {
+          return { ...changes, inputValue: state.selectedItem.text };
+        }
+        return { ...changes, inputValue: "" };
+      default:
+        return changes;
+    }
+  };
+  return reducer;
+};
+
+// src/combobox/ComboboxContext.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ComboboxContext = (0, import_react12.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 ComboboxProvider = ({
+  children,
+  state: stateProp,
+  allowCustomValue = false,
+  filtering = "auto",
+  disabled: disabledProp = false,
+  multiple = false,
+  readOnly: readOnlyProp = false,
+  wrap = true,
+  // Value
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  // Open
+  open: controlledOpen,
+  defaultOpen,
+  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 [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)(
+    shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap
+  );
+  const [selectedItem, setSelectedItem] = (0, import_react12.useState)(
+    itemsMap.get(comboboxValue) || null
+  );
+  const [selectedItems, setSelectedItems] = (0, import_react12.useState)(
+    comboboxValue ? [...itemsMap.values()].filter((item) => comboboxValue.includes(item.value)) : []
+  );
+  const onInternalSelectedItemChange = (item) => {
+    setIsTyping(false);
+    if (item?.value !== selectedItem?.value) {
+      setSelectedItem(item);
+      setTimeout(() => {
+        onValueChange?.(item?.value);
+      }, 0);
+    }
+  };
+  const onInternalSelectedItemsChange = (items) => {
+    setSelectedItems(items);
+    setTimeout(() => {
+      onValueChange?.(items.map((i) => i.value));
+    }, 0);
+  };
+  (0, import_react12.useEffect)(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    if (multiple) {
+      const newSelectedItems = comboboxValue.reduce(
+        (accum, value) => {
+          const match = itemsMap.get(value);
+          return match ? [...accum, match] : accum;
+        },
+        []
+      );
+      setSelectedItems(comboboxValue ? newSelectedItems : []);
+    } else {
+      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 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)(
+    hasChildComponent(children, "Combobox.Popover")
+  );
+  const [lastInteractionType, setLastInteractionType] = (0, import_react12.useState)("mouse");
+  (0, import_react12.useEffect)(() => {
+    setFilteredItems(shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap);
+  }, [inputValue, itemsMap]);
+  const multiselect = (0, import_downshift3.useMultipleSelection)({
+    selectedItems,
+    stateReducer: (state2, { type, changes }) => {
+      const types = import_downshift3.useMultipleSelection.stateChangeTypes;
+      switch (type) {
+        case types.SelectedItemKeyDownBackspace:
+        case types.SelectedItemKeyDownDelete: {
+          onInternalSelectedItemsChange(changes.selectedItems || []);
+          let activeIndex;
+          if (type === types.SelectedItemKeyDownDelete) {
+            const isLastItem = state2?.activeIndex === changes.selectedItems?.length;
+            activeIndex = isLastItem ? -1 : state2.activeIndex;
+          } else {
+            const hasItemBefore = (changes?.activeIndex || 0) - 1 >= 0;
+            activeIndex = hasItemBefore ? state2.activeIndex - 1 : changes?.activeIndex;
+          }
+          return {
+            ...changes,
+            activeIndex
+          };
+        }
+        case types.SelectedItemClick:
+          if (innerInputRef.current) {
+            innerInputRef.current.focus();
+          }
+          return {
+            ...changes,
+            activeIndex: -1
+            // the focus will remain on the input
+          };
+        case types.FunctionRemoveSelectedItem:
+          return {
+            ...changes,
+            activeIndex: -1
+            // the focus will remain on the input
+          };
+        case types.DropdownKeyDownNavigationPrevious:
+          downshift.closeMenu();
+          return changes;
+        default:
+          return changes;
+      }
+    }
+  });
+  const filteredItems = Array.from(filteredItemsMap.values());
+  (0, import_react12.useEffect)(() => {
+    onInputValueChange?.(inputValue || "");
+  }, [inputValue]);
+  const downshift = (0, import_downshift3.useCombobox)({
+    inputId: id,
+    items: filteredItems,
+    selectedItem: multiple ? void 0 : selectedItem,
+    id,
+    labelId,
+    // Input
+    inputValue,
+    onInputValueChange: ({ inputValue: newInputValue }) => {
+      setInputValue(newInputValue);
+      if (shouldFilterItems) {
+        const filtered = getFilteredItemsMap(itemsMap, newInputValue || "");
+        setFilteredItems(filtered);
+      }
+    },
+    // Open
+    initialIsOpen: defaultOpen,
+    ...controlledOpen != null && { isOpen: controlledOpen },
+    onIsOpenChange: (changes) => {
+      if (changes.isOpen != null) {
+        onOpenChange?.(changes.isOpen);
+      }
+    },
+    // Custom Spark item object parsing
+    itemToString: (item) => {
+      return item?.text;
+    },
+    isItemDisabled: (item) => {
+      const isFilteredOut = !!inputValue && !filteredItems.some((filteredItem) => {
+        return item.value === filteredItem.value;
+      });
+      return item.disabled || isFilteredOut;
+    },
+    // Main reducer
+    stateReducer: multiple ? multipleSelectionReducer({
+      multiselect,
+      selectedItems,
+      allowCustomValue,
+      setSelectedItems: onInternalSelectedItemsChange,
+      triggerAreaRef,
+      items: itemsMap
+    }) : singleSelectionReducer({
+      allowCustomValue,
+      setSelectedItem: onInternalSelectedItemChange,
+      filteredItems: [...filteredItemsMap.values()]
+    }),
+    /**
+     * Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.
+     */
+    scrollIntoView: (node) => {
+      if (node) {
+        node.scrollIntoView({ block: "nearest" });
+      }
+      return void 0;
+    }
+  });
+  (0, import_react12.useEffect)(() => {
+    const newMap = getItemsFromChildren(children);
+    const previousItems = [...itemsMap.values()];
+    const newItems = [...newMap.values()];
+    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
+      const hasUpdatedValue = item.value !== newItems[index]?.value;
+      const hasUpdatedText = item.text !== newItems[index]?.text;
+      return hasUpdatedValue || hasUpdatedText;
+    });
+    if (hasItemsChanges) {
+      setItemsMap(newMap);
+    }
+  }, [children]);
+  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2, { open: true }] : [import_react12.Fragment, {}];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    ComboboxContext.Provider,
+    {
+      value: {
+        // Data
+        itemsMap,
+        filteredItemsMap,
+        highlightedItem: getElementByIndex(filteredItemsMap, downshift.highlightedIndex),
+        // State
+        multiple,
+        disabled,
+        readOnly,
+        hasPopover,
+        setHasPopover,
+        state,
+        lastInteractionType,
+        setLastInteractionType,
+        wrap,
+        // Refs
+        innerInputRef,
+        triggerAreaRef,
+        // Downshift state
+        ...downshift,
+        ...multiselect,
+        setInputValue,
+        selectItem: onInternalSelectedItemChange,
+        setSelectedItems: onInternalSelectedItemsChange,
+        isLoading,
+        setOnInputValueChange,
+        isTyping,
+        setIsTyping
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children })
+    }
+  );
+};
+var useComboboxContext = () => {
+  const context = (0, import_react12.useContext)(ComboboxContext);
+  if (!context) {
+    throw Error("useComboboxContext must be used within a Combobox provider");
+  }
+  return context;
+};
+
+// src/combobox/Combobox.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Combobox = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.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 ClearButton = ({
+  className,
+  tabIndex = -1,
+  onClick,
+  ref,
+  ...others
+}) => {
+  const ctx = useComboboxContext();
+  const handleClick = (event) => {
+    event.stopPropagation();
+    if (ctx.multiple) {
+      ctx.setSelectedItems([]);
+    } else {
+      ctx.selectItem(null);
+    }
+    ctx.setInputValue("");
+    if (ctx.innerInputRef.current) {
+      ctx.innerInputRef.current.focus();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "button",
+    {
+      ref,
+      className: (0, import_class_variance_authority19.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, {}) })
+    }
+  );
+};
+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 Disclosure = ({
+  className,
+  closedLabel,
+  openedLabel,
+  intent = "neutral",
+  design = "ghost",
+  size = "sm",
+  ref: forwardedRef,
+  ...props
+}) => {
+  const ctx = useComboboxContext();
+  const { ref: downshiftRef, ...downshiftDisclosureProps } = ctx.getToggleButtonProps({
+    disabled: ctx.disabled || ctx.readOnly,
+    onClick: (event) => {
+      event.stopPropagation();
+    }
+  });
+  const isExpanded = downshiftDisclosureProps["aria-expanded"];
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, downshiftRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    IconButton,
+    {
+      ref,
+      className: (0, import_class_variance_authority20.cx)(className, "mt-[calc((44px-32px)/2)]"),
+      intent,
+      design,
+      size,
+      ...downshiftDisclosureProps,
+      ...props,
+      "aria-label": isExpanded ? openedLabel : closedLabel,
+      disabled: ctx.disabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        Icon,
+        {
+          className: (0, import_class_variance_authority20.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, {})
+        }
+      )
+    }
+  );
+};
+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 Empty = ({ className, children, ref: forwardedRef }) => {
+  const ctx = useComboboxContext();
+  const hasNoItemVisible = ctx.filteredItemsMap.size === 0;
+  return hasNoItemVisible ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_class_variance_authority21.cx)("px-lg py-md text-body-1 text-on-surface/dim-1", className),
+      children
+    }
+  ) : null;
+};
+Empty.displayName = "Combobox.Empty";
+
+// src/combobox/ComboboxGroup.tsx
+var import_class_variance_authority22 = require("class-variance-authority");
+var import_react14 = 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 ComboboxGroupProvider = ({ children }) => {
+  const groupLabelId = `${ID_PREFIX3}-group-label-${(0, import_react13.useId)()}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ComboboxGroupContext.Provider, { value: { groupLabelId }, children });
+};
+var useComboboxGroupContext = () => {
+  const context = (0, import_react13.useContext)(ComboboxGroupContext);
+  if (!context) {
+    throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
+  }
+  return context;
+};
+
+// src/combobox/ComboboxGroup.tsx
+var import_jsx_runtime36 = 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 }) });
+};
+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);
+  });
+  return hasVisibleOptions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      role: "group",
+      "aria-labelledby": groupCtx.groupLabelId,
+      className: (0, import_class_variance_authority22.cx)(className),
+      children
+    }
+  ) : null;
+};
+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 Input = ({
+  "aria-label": ariaLabel,
+  className,
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  ref: forwardedRef,
+  ...props
+}) => {
+  const ctx = useComboboxContext();
+  const [inputValue] = (0, import_use_combined_state2.useCombinedState)(value, defaultValue);
+  (0, import_react15.useEffect)(() => {
+    if (inputValue != null) {
+      ctx.setInputValue(inputValue);
+    }
+  }, [inputValue]);
+  (0, import_react15.useEffect)(() => {
+    if (onValueChange) {
+      ctx.setOnInputValueChange(() => onValueChange);
+    }
+    if (!ctx.multiple && ctx.selectedItem) {
+      ctx.setInputValue(ctx.selectedItem.text);
+    }
+  }, []);
+  const [PopoverTrigger, popoverTriggerProps] = ctx.hasPopover ? [Popover2.Trigger, { asChild: true, type: void 0 }] : [import_react15.Fragment, {}];
+  const multiselectInputProps = ctx.getDropdownProps();
+  const inputRef = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref);
+  const downshiftInputProps = ctx.getInputProps({
+    disabled: ctx.disabled || ctx.readOnly,
+    ...multiselectInputProps,
+    onKeyDown: (event) => {
+      multiselectInputProps.onKeyDown?.(event);
+      ctx.setLastInteractionType("keyboard");
+      ctx.setIsTyping(true);
+    },
+    /**
+     *
+     * Important:
+     * - without this, the input cursor is moved to the end after every change.
+     * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
+     */
+    onChange: (e) => {
+      ctx.setInputValue(e.target.value);
+    },
+    ref: inputRef
+  });
+  const hasPlaceholder = ctx.multiple ? ctx.selectedItems.length === 0 : ctx.selectedItem === null;
+  function mergeHandlers(handlerA, handlerB) {
+    return (event) => {
+      handlerA?.(event);
+      handlerB?.(event);
+    };
+  }
+  const mergedEventProps = {
+    onBlur: mergeHandlers(props.onBlur, downshiftInputProps.onBlur),
+    onChange: mergeHandlers(props.onChange, downshiftInputProps.onChange),
+    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)(
+      "input",
+      {
+        "data-spark-component": "combobox-input",
+        type: "text",
+        ...hasPlaceholder && { placeholder },
+        className: (0, import_class_variance_authority23.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",
+          "read-only:text-on-surface read-only:cursor-default read-only:bg-transparent",
+          className
+        ),
+        ...props,
+        ...downshiftInputProps,
+        ...mergedEventProps,
+        value: ctx.inputValue,
+        "aria-label": ariaLabel,
+        disabled: ctx.disabled,
+        readOnly: ctx.readOnly
+      }
+    ) })
+  ] });
+};
+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");
+
+// 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 ComboboxItemProvider = ({
+  value,
+  disabled = false,
+  children
+}) => {
+  const ctx = useComboboxContext();
+  const [textId, setTextId] = (0, import_react16.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)(
+    ComboboxItemContext.Provider,
+    {
+      value: { textId, setTextId, isSelected, itemData, index, disabled },
+      children
+    }
+  );
+};
+var useComboboxItemContext = () => {
+  const context = (0, import_react16.useContext)(ComboboxItemContext);
+  if (!context) {
+    throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
+  }
+  return context;
+};
+
+// src/combobox/ComboboxItem.tsx
+var import_jsx_runtime39 = 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 }) });
+};
+var styles2 = (0, import_class_variance_authority24.cva)("px-lg py-md text-body-1", {
+  variants: {
+    selected: {
+      true: "font-bold"
+    },
+    disabled: {
+      true: "opacity-dim-3 cursor-not-allowed",
+      false: "cursor-pointer"
+    },
+    highlighted: {
+      true: ""
+    },
+    interactionType: {
+      mouse: "",
+      keyboard: ""
+    }
+  },
+  compoundVariants: [
+    {
+      highlighted: true,
+      interactionType: "mouse",
+      class: "bg-surface-hovered"
+    },
+    {
+      highlighted: true,
+      interactionType: "keyboard",
+      class: "u-outline"
+    }
+  ]
+});
+var ItemContent = ({
+  className,
+  disabled = false,
+  value,
+  children,
+  ref: forwardedRef
+}) => {
+  const ctx = useComboboxContext();
+  const itemCtx = useComboboxItemContext();
+  const isVisible = !!ctx.filteredItemsMap.get(value);
+  const { ref: downshiftRef, ...downshiftItemProps } = ctx.getItemProps({
+    item: itemCtx.itemData,
+    index: itemCtx.index
+  });
+  const ref = (0, import_use_merge_refs3.useMergeRefs)(forwardedRef, downshiftRef);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "li",
+    {
+      ref,
+      className: (0, import_class_variance_authority24.cx)(
+        styles2({
+          selected: itemCtx.isSelected,
+          disabled,
+          highlighted: ctx.highlightedItem?.value === value,
+          interactionType: ctx.lastInteractionType,
+          className
+        })
+      ),
+      ...downshiftItemProps,
+      "aria-selected": itemCtx.isSelected,
+      "aria-labelledby": itemCtx.textId,
+      children
+    },
+    value
+  );
+};
+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 ItemIndicator = ({
+  className,
+  children,
+  label,
+  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)(
+    "span",
+    {
+      ref: forwardedRef,
+      className: (0, import_class_variance_authority25.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
+      children: isSelected && childElement
+    }
+  );
+};
+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 Items = ({ children, className, ref: forwardedRef, ...props }) => {
+  const ctx = useComboboxContext();
+  const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
+    onMouseMove: () => {
+      ctx.setLastInteractionType("mouse");
+    }
+  });
+  const innerRef = (0, import_react17.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)(() => {
+    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)(
+    "ul",
+    {
+      ref,
+      className: (0, import_class_variance_authority26.cx)(
+        className,
+        "flex flex-col",
+        isOpen ? "block" : "pointer-events-none invisible opacity-0",
+        ctx.hasPopover && "p-lg",
+        ctx.isLoading && "items-center overflow-y-auto"
+      ),
+      ...props,
+      ...downshiftMenuProps,
+      "aria-busy": ctx.isLoading,
+      "data-spark-component": "combobox-items",
+      children: ctx.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.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 ItemText = ({ children, className, ref: forwardedRef }) => {
+  const id = `${ID_PREFIX3}-item-text-${(0, import_react18.useId)()}`;
+  const { setTextId } = useComboboxItemContext();
+  (0, import_react18.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 });
+};
+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 }) => {
+  const groupCtx = useComboboxGroupContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime43.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),
+      children
+    }
+  );
+};
+Label3.displayName = "Combobox.Label";
+
+// src/combobox/ComboboxLeadingIcon.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var LeadingIcon = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.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 Popover3 = ({
+  children,
+  matchTriggerWidth = true,
+  sideOffset = 4,
+  className,
+  ref: forwardedRef,
+  ...props
+}) => {
+  const ctx = useComboboxContext();
+  (0, import_react19.useEffect)(() => {
+    ctx.setHasPopover(true);
+    return () => ctx.setHasPopover(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    Popover2.Content,
+    {
+      ref: forwardedRef,
+      inset: true,
+      asChild: true,
+      matchTriggerWidth,
+      className: (0, import_class_variance_authority29.cx)("z-dropdown! relative", className),
+      sideOffset,
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+      },
+      ...props,
+      "data-spark-component": "combobox-popover",
+      children
+    }
+  );
+};
+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 });
+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 SelectedItem = ({ item: selectedItem, index }) => {
+  const ctx = useComboboxContext();
+  const isCleanable = !ctx.disabled && !ctx.readOnly;
+  const handleFocus = (e) => {
+    const element = e.target;
+    if (ctx.lastInteractionType === "keyboard") {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  };
+  const { disabled, ...selectedItemProps } = ctx.getSelectedItemProps({
+    disabled: ctx.disabled || ctx.readOnly,
+    selectedItem,
+    index
+  });
+  const Element = disabled ? "button" : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    Element,
+    {
+      role: "presentation",
+      "data-spark-component": "combobox-selected-item",
+      className: (0, import_class_variance_authority30.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",
+        "focus-visible:u-outline-inset outline-hidden",
+        { "px-md": !isCleanable, "pl-md": isCleanable }
+      ),
+      ...selectedItemProps,
+      tabIndex: -1,
+      ...disabled && { disabled: true },
+      onFocus: handleFocus,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "span",
+          {
+            className: (0, import_class_variance_authority30.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)(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "px-md h-full cursor-pointer",
+            onClick: (e) => {
+              e.stopPropagation();
+              const updatedSelectedItems = ctx.selectedItems.filter(
+                (item) => item.value !== selectedItem.value
+              );
+              ctx.setSelectedItems(updatedSelectedItems);
+              if (ctx.innerInputRef.current) {
+                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, {}) })
+          }
+        )
+      ]
+    },
+    `selected-item-${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;
+};
+SelectedItems.displayName = "Combobox.SelectedItems";
+
+// src/combobox/ComboboxTrigger.tsx
+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");
+
+// src/combobox/ComboboxTrigger.styles.tsx
+var import_class_variance_authority31 = require("class-variance-authority");
+var styles3 = (0, import_class_variance_authority31.cva)(
+  [
+    "flex items-start gap-md min-h-sz-44 text-body-1",
+    "h-fit rounded-lg px-lg",
+    // outline styles
+    "ring-1 outline-hidden ring-inset focus-within:ring-2"
+  ],
+  {
+    variants: {
+      allowWrap: {
+        true: "",
+        false: "h-sz-44"
+      },
+      state: {
+        undefined: "ring-outline focus-within:ring-outline-high",
+        error: "ring-error",
+        alert: "ring-alert",
+        success: "ring-success"
+      },
+      disabled: {
+        true: "cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3"
+      },
+      readOnly: {
+        true: "cursor-default bg-on-surface/dim-5 text-on-surface"
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        state: void 0,
+        class: "hover:ring-outline-high"
+      },
+      {
+        disabled: false,
+        readOnly: false,
+        class: "bg-surface text-on-surface cursor-text"
+      }
+    ],
+    defaultVariants: {
+      state: void 0,
+      disabled: false,
+      readOnly: false
+    }
+  }
+);
+
+// src/combobox/utils/useWidthIncreaseCallback.ts
+var import_react20 = require("react");
+var useWidthIncreaseCallback = (elementRef, callback) => {
+  const prevWidthRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    const checkWidthIncrease = () => {
+      const currentWidth = elementRef.current?.scrollWidth || null;
+      if (prevWidthRef.current && currentWidth && currentWidth > prevWidthRef.current) {
+        callback();
+      }
+      prevWidthRef.current = currentWidth;
+      requestAnimationFrame(checkWidthIncrease);
+    };
+    const interval = requestAnimationFrame(checkWidthIncrease);
+    return () => cancelAnimationFrame(interval);
+  }, [elementRef]);
+};
+
+// src/combobox/ComboboxTrigger.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Trigger2 = ({ className, children, ref: forwardedRef }) => {
+  const ctx = useComboboxContext();
+  const field = 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 ref = (0, import_use_merge_refs5.useMergeRefs)(forwardedRef, ctx.triggerAreaRef);
+  const scrollableAreaRef = (0, import_react21.useRef)(null);
+  const disabled = field.disabled || ctx.disabled;
+  const readOnly = field.readOnly || ctx.readOnly;
+  const hasClearButton = !!clearButton && !disabled && !readOnly;
+  const scrollToRight = () => {
+    if (scrollableAreaRef.current && !ctx.wrap) {
+      const { scrollWidth, clientWidth } = scrollableAreaRef.current;
+      scrollableAreaRef.current.scrollLeft = scrollWidth - clientWidth;
+    }
+  };
+  useWidthIncreaseCallback(scrollableAreaRef, scrollToRight);
+  (0, import_react21.useEffect)(() => {
+    const resizeObserver = new ResizeObserver(scrollToRight);
+    if (scrollableAreaRef.current) {
+      resizeObserver.observe(scrollableAreaRef.current);
+    }
+    return () => {
+      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)(
+    "div",
+    {
+      ref,
+      className: styles3({
+        className,
+        state: ctx.state,
+        disabled,
+        readOnly,
+        allowWrap: ctx.wrap
+      }),
+      onClick: () => {
+        if (!ctx.isOpen && !disabled && !readOnly) {
+          ctx.openMenu();
+          if (ctx.innerInputRef.current) {
+            ctx.innerInputRef.current.focus();
+          }
+        }
+      },
+      children: [
+        leadingIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          "div",
+          {
+            ref: scrollableAreaRef,
+            className: (0, import_class_variance_authority32.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]"
+            ),
+            children: [
+              selectedItems,
+              input
+            ]
+          }
+        ),
+        hasClearButton && clearButton,
+        disclosure
+      ]
+    }
+  ) }) });
+};
+Trigger2.displayName = "Combobox.Trigger";
+
+// src/combobox/index.ts
+var Combobox2 = Object.assign(Combobox, {
+  Group,
+  Item,
+  Items,
+  ItemText,
+  ItemIndicator,
+  Label: Label3,
+  Popover: Popover3,
+  Trigger: Trigger2,
+  LeadingIcon,
+  Empty,
+  Input,
+  Disclosure,
+  SelectedItems,
+  ClearButton,
+  Portal: Portal2
+});
+Combobox2.displayName = "Combobox";
+Group.displayName = "Combobox.Group";
+Items.displayName = "Combobox.Items";
+Item.displayName = "Combobox.Item";
+ItemText.displayName = "Combobox.ItemText";
+ItemIndicator.displayName = "Combobox.ItemIndicator";
+Label3.displayName = "Combobox.Label";
+Popover3.displayName = "Combobox.Popover";
+Trigger2.displayName = "Combobox.Trigger";
+LeadingIcon.displayName = "Combobox.LeadingIcon";
+Empty.displayName = "Combobox.Empty";
+Input.displayName = "Combobox.Input";
+Disclosure.displayName = "Combobox.Disclosure";
+SelectedItems.displayName = "Combobox.SelectedItems";
+ClearButton.displayName = "Combobox.ClearButton";
+Portal2.displayName = "Combobox.Portal";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Combobox,
+  ComboboxProvider,
+  useComboboxContext
+});
+//# sourceMappingURL=index.js.map