@spark-ui/components 13.1.4 → 13.2.0

package/dist/combobox/index.js

@@ -1,2588 +1,2 @@
-"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_form_field = require("@spark-ui/components/form-field");
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_downshift3 = require("downshift");
-var import_react7 = require("react");
-
-// src/popover/Popover.tsx
-var import_radix_ui = require("radix-ui");
-
-// src/popover/PopoverContext.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var PopoverContext = (0, import_react.createContext)(null);
-var ID_PREFIX = ":popover";
-var PopoverProvider = ({
-  children,
-  intent
-}) => {
-  const [headerId, setHeaderId] = (0, import_react.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    PopoverContext.Provider,
-    {
-      value: {
-        headerId,
-        setHeaderId,
-        intent
-      },
-      children
-    }
-  );
-};
-var usePopover = () => {
-  const context = (0, import_react.useContext)(PopoverContext);
-  if (!context) {
-    throw Error("usePopover must be used within a Popover provider");
-  }
-  return context;
-};
-
-// src/popover/Popover.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
-};
-Popover.displayName = "Popover";
-
-// src/popover/PopoverAnchor.tsx
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui2.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
-Anchor.displayName = "Popover.Anchor";
-
-// src/popover/PopoverArrow.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Arrow = ({
-  asChild = false,
-  width = 16,
-  height = 8,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { intent } = usePopover();
-  const styles4 = (0, import_class_variance_authority.cva)("visible", {
-    variants: {
-      intent: {
-        surface: "fill-surface",
-        main: "fill-main-container",
-        support: "fill-support-container",
-        accent: "fill-accent-container",
-        basic: "fill-basic-container",
-        success: "fill-success-container",
-        alert: "fill-alert-container",
-        danger: "fill-error-container",
-        info: "fill-info-container",
-        neutral: "fill-neutral-container"
-      }
-    },
-    defaultVariants: {
-      intent: "surface"
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_radix_ui3.Popover.Arrow,
-    {
-      "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_authority7 = require("class-variance-authority");
-var import_radix_ui5 = require("radix-ui");
-
-// src/icon/Icon.tsx
-var import_react3 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui4 = require("radix-ui");
-var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Slottable = import_radix_ui4.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui4.Slot.Root, { ref, ...props });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime7 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react3.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react3.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/button/Button.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react4 = require("react");
-
-// src/spinner/Spinner.styles.tsx
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority3 = require("class-variance-authority");
-var defaultVariants = {
-  intent: "current",
-  size: "current",
-  isBackgroundVisible: false
-};
-var spinnerStyles = (0, import_class_variance_authority3.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_runtime8 = require("react/jsx-runtime");
-var Spinner = ({
-  className,
-  size = "current",
-  intent = "current",
-  label,
-  isBackgroundVisible,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "span",
-    {
-      role: "status",
-      "data-spark-component": "spinner",
-      ref,
-      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
-      ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
-    }
-  );
-};
-
-// src/button/Button.styles.tsx
-var import_internal_utils8 = require("@spark-ui/internal-utils");
-var import_class_variance_authority4 = 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"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "filled",
-    class: (0, import_internal_utils3.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-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-on-main-container",
-      "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-on-support-container",
-      "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-on-accent-container",
-      "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-on-basic-container",
-      "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-on-success-container",
-      "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-on-alert-container",
-      "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-on-error-container",
-      "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-on-info-container",
-      "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-on-neutral-container",
-      "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"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "ghost",
-    class: (0, import_internal_utils4.tw)([
-      "text-surface-inverse",
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/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"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "outlined",
-    class: (0, import_internal_utils5.tw)([
-      "hover:bg-surface-inverse/dim-5",
-      "enabled:active:bg-surface-inverse/dim-5",
-      "focus-visible:bg-surface-inverse/dim-5",
-      "text-surface-inverse"
-    ])
-  }
-];
-
-// 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"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "tinted",
-    class: (0, import_internal_utils6.tw)([
-      "bg-surface-inverse",
-      "text-on-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-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-on-main-contaier bg-surface",
-      "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-on-support-container bg-surface",
-      "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-on-accent-container bg-surface",
-      "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-on-basic-container bg-surface",
-      "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-on-success-container bg-surface",
-      "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-on-alert-container bg-surface",
-      "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-on-error-container bg-surface",
-      "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-on-info-container bg-surface",
-      "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-on-neutral-container bg-surface",
-      "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 bg-surface",
-      "hover:bg-surface-hovered",
-      "enabled:active:bg-surface-hovered",
-      "focus-visible:bg-surface-hovered"
-    ])
-  },
-  {
-    intent: "surfaceInverse",
-    design: "contrast",
-    class: (0, import_internal_utils7.tw)([
-      "text-on-surface-inverse bg-surface-inverse",
-      "hover:bg-surface-inverse-hovered",
-      "enabled:active:bg-surface-inverse-hovered",
-      "focus-visible:bg-surface-inverse-hovered"
-    ])
-  }
-];
-
-// src/button/Button.styles.tsx
-var buttonStyles = (0, import_class_variance_authority4.cva)(
-  [
-    "u-shadow-border-transition",
-    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
-    "default: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: ["default:-mx-md px-md hover:bg-main/dim-5"],
-        contrast: []
-      }),
-      underline: {
-        true: ["underline"]
-      },
-      /**
-       * Color scheme of the button.
-       */
-      intent: (0, import_internal_utils8.makeVariants)({
-        main: [],
-        support: [],
-        accent: [],
-        basic: [],
-        success: [],
-        alert: [],
-        danger: [],
-        info: [],
-        neutral: [],
-        surface: [],
-        surfaceInverse: []
-      }),
-      /**
-       * 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_runtime9 = 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,
-  underline = false,
-  ref,
-  ...others
-}) => {
-  const Component = asChild ? Slot : "button";
-  const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react4.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_runtime9.jsx)(
-    Component,
-    {
-      "data-spark-component": "button",
-      ...Component === "button" && { type: "button" },
-      ref,
-      className: buttonStyles({
-        className,
-        design,
-        disabled: shouldNotInteract,
-        intent,
-        shape,
-        size,
-        underline
-      }),
-      disabled: !!disabled,
-      "aria-busy": isLoading,
-      "aria-live": isLoading ? "assertive" : "off",
-      ...others,
-      ...disabledEventHandlers,
-      children: wrapPolymorphicSlot(
-        asChild,
-        children,
-        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: (0, import_class_variance_authority5.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_authority6 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority6.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_runtime10 = require("react/jsx-runtime");
-var IconButton = ({
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  shape = "rounded",
-  size = "md",
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    Button,
-    {
-      "data-spark-component": "icon-button",
-      ref,
-      className: iconButtonStyles({ size, className }),
-      design,
-      disabled,
-      intent,
-      shape,
-      size,
-      ...others
-    }
-  );
-};
-IconButton.displayName = "IconButton";
-
-// src/popover/PopoverCloseButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var CloseButton = ({
-  "aria-label": ariaLabel,
-  className,
-  ref,
-  ...rest
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_radix_ui5.Popover.Close,
-    {
-      "data-spark-component": "popover-close-button",
-      ref,
-      className: (0, import_class_variance_authority7.cx)("right-lg top-md absolute", className),
-      asChild: true,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}) }) })
-    }
-  );
-};
-CloseButton.displayName = "Popover.CloseButton";
-
-// src/popover/PopoverContent.tsx
-var import_radix_ui6 = require("radix-ui");
-
-// src/popover/PopoverContent.styles.ts
-var import_class_variance_authority8 = require("class-variance-authority");
-var styles = (0, import_class_variance_authority8.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_runtime12 = 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_runtime12.jsx)(
-    import_radix_ui6.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_authority9 = require("class-variance-authority");
-var import_react5 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Header = ({ children, className, ref, ...rest }) => {
-  const id = `${ID_PREFIX}-header-${(0, import_react5.useId)()}`;
-  const { setHeaderId } = usePopover();
-  (0, import_react5.useLayoutEffect)(() => {
-    setHeaderId(id);
-    return () => setHeaderId(null);
-  }, [id, setHeaderId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { id, ref, className: (0, import_class_variance_authority9.cx)("mb-md text-headline-2", className), ...rest, children });
-};
-Header.displayName = "Popover.Header";
-
-// src/popover/PopoverPortal.tsx
-var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_radix_ui7.Popover.Portal, { ...rest, children });
-Portal.displayName = "Popover.Portal";
-
-// src/popover/PopoverTrigger.tsx
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-  import_radix_ui8.Popover.Trigger,
-  {
-    "data-spark-component": "popover-trigger",
-    ref,
-    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_react6 = 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_react6.Children.forEach(children, (child) => {
-    if (!(0, import_react6.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_react6.Children.toArray(children)) {
-    if ((0, import_react6.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_react6.Children.toArray(children).some((child) => {
-    if (!(0, import_react6.isValidElement)(child)) return false;
-    if (getElementDisplayName(child) === displayName) {
-      return true;
-    } else if (child.props.children) {
-      return hasChildComponent(child.props.children, displayName);
-    }
-    return false;
-  });
-};
-var findElement = (children, value) => {
-  return import_react6.Children.toArray(children).filter(import_react6.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_runtime16 = require("react/jsx-runtime");
-var ComboboxContext = (0, import_react7.createContext)(null);
-var getFilteredItemsMap = (map, inputValue) => {
-  if (!inputValue) return map;
-  return new Map(
-    Array.from(map).filter(([_, { text }]) => text.toLowerCase().includes(inputValue.toLowerCase()))
-  );
-};
-var ID_PREFIX2 = ":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_react7.useRef)(false);
-  const [inputValue, setInputValue] = (0, import_react7.useState)("");
-  const [isTyping, setIsTyping] = (0, import_react7.useState)(filtering === "strict");
-  const triggerAreaRef = (0, import_react7.useRef)(null);
-  const innerInputRef = (0, import_react7.useRef)(null);
-  const [onInputValueChange, setOnInputValueChange] = (0, import_react7.useState)(null);
-  const [comboboxValue] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
-  const shouldFilterItems = filtering === "strict" || filtering === "auto" && isTyping;
-  const [itemsMap, setItemsMap] = (0, import_react7.useState)(getItemsFromChildren(children));
-  const [filteredItemsMap, setFilteredItems] = (0, import_react7.useState)(
-    shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap
-  );
-  const [selectedItem, setSelectedItem] = (0, import_react7.useState)(
-    itemsMap.get(comboboxValue) || null
-  );
-  const [selectedItems, setSelectedItems] = (0, import_react7.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_react7.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 = (0, import_form_field.useFormFieldControl)();
-  const internalFieldLabelID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
-  const internalFieldID = `${ID_PREFIX2}-field-${(0, import_react7.useId)()}`;
-  const id = field.id || internalFieldID;
-  const labelId = field.labelId || internalFieldLabelID;
-  const state = field.state || stateProp;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const [hasPopover, setHasPopover] = (0, import_react7.useState)(
-    hasChildComponent(children, "Combobox.Popover")
-  );
-  const [areSelectedItemsInTrigger, setAreSelectedItemsInTrigger] = (0, import_react7.useState)(false);
-  const [lastInteractionType, setLastInteractionType] = (0, import_react7.useState)("mouse");
-  (0, import_react7.useEffect)(() => {
-    setFilteredItems(shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap);
-  }, [inputValue, itemsMap]);
-  const multiselect = (0, import_downshift3.useMultipleSelection)({
-    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_react7.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_react7.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_react7.Fragment, {}];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    ComboboxContext.Provider,
-    {
-      value: {
-        // Data
-        itemsMap,
-        filteredItemsMap,
-        highlightedItem: getElementByIndex(filteredItemsMap, downshift.highlightedIndex),
-        // State
-        multiple,
-        disabled,
-        readOnly,
-        areSelectedItemsInTrigger,
-        setAreSelectedItemsInTrigger,
-        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_runtime16.jsx)(WrapperComponent, { ...wrapperProps, children })
-    }
-  );
-};
-var useComboboxContext = () => {
-  const context = (0, import_react7.useContext)(ComboboxContext);
-  if (!context) {
-    throw Error("useComboboxContext must be used within a Combobox provider");
-  }
-  return context;
-};
-
-// src/combobox/Combobox.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Combobox = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ComboboxProvider, { ...props, children });
-};
-Combobox.displayName = "Combobox";
-
-// src/combobox/ComboboxClearButton.tsx
-var import_DeleteOutline = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime18 = 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_runtime18.jsx)(
-    "button",
-    {
-      ref,
-      className: (0, import_class_variance_authority10.cx)(className, "h-sz-44 text-neutral hover:text-neutral-hovered"),
-      tabIndex,
-      onClick: handleClick,
-      type: "button",
-      ...others,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DeleteOutline.DeleteOutline, {}) })
-    }
-  );
-};
-ClearButton.displayName = "Combobox.ClearButton";
-
-// src/combobox/ComboboxDisclosure.tsx
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime19 = 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_runtime19.jsx)(
-    IconButton,
-    {
-      ref,
-      className: (0, import_class_variance_authority11.cx)(className, "ml-sm mt-[calc((44px-32px)/2)]"),
-      intent,
-      design,
-      size,
-      ...downshiftDisclosureProps,
-      ...props,
-      "aria-label": isExpanded ? openedLabel : closedLabel,
-      disabled: ctx.disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        Icon,
-        {
-          className: (0, import_class_variance_authority11.cx)("shrink-0", "rotate-0 transition duration-100 ease-in", {
-            "rotate-180": isExpanded
-          }),
-          size: "sm",
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
-        }
-      )
-    }
-  );
-};
-Disclosure.displayName = "Combobox.Disclosure";
-
-// src/combobox/ComboboxEmpty.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Empty = ({ className, children, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const hasNoItemVisible = ctx.filteredItemsMap.size === 0;
-  return hasNoItemVisible ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "div",
-    {
-      ref: forwardedRef,
-      className: (0, import_class_variance_authority12.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_authority13 = require("class-variance-authority");
-var import_react9 = require("react");
-
-// src/combobox/ComboboxItemsGroupContext.tsx
-var import_react8 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ComboboxGroupContext = (0, import_react8.createContext)(null);
-var ComboboxGroupProvider = ({ children }) => {
-  const groupLabelId = `${ID_PREFIX2}-group-label-${(0, import_react8.useId)()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComboboxGroupContext.Provider, { value: { groupLabelId }, children });
-};
-var useComboboxGroupContext = () => {
-  const context = (0, import_react8.useContext)(ComboboxGroupContext);
-  if (!context) {
-    throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
-  }
-  return context;
-};
-
-// src/combobox/ComboboxGroup.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComboboxGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const groupCtx = useComboboxGroupContext();
-  const hasVisibleOptions = import_react9.Children.toArray(children).some((child) => {
-    return (0, import_react9.isValidElement)(child) && ctx.filteredItemsMap.get(child.props.value);
-  });
-  return hasVisibleOptions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "div",
-    {
-      ref: forwardedRef,
-      role: "group",
-      "aria-labelledby": groupCtx.groupLabelId,
-      className: (0, import_class_variance_authority13.cx)(className),
-      children
-    }
-  ) : null;
-};
-Group.displayName = "Combobox.Group";
-
-// src/combobox/ComboboxInput.tsx
-var import_form_field2 = require("@spark-ui/components/form-field");
-var import_use_combined_state2 = require("@spark-ui/hooks/use-combined-state");
-var import_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
-var import_class_variance_authority14 = require("class-variance-authority");
-var import_react10 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Input = ({
-  "aria-label": ariaLabel,
-  className,
-  placeholder,
-  value,
-  defaultValue,
-  onValueChange,
-  ref: forwardedRef,
-  ...props
-}) => {
-  const ctx = useComboboxContext();
-  const field = (0, import_form_field2.useFormFieldControl)();
-  const [inputValue] = (0, import_use_combined_state2.useCombinedState)(value, defaultValue);
-  const { isInvalid, description } = field;
-  (0, import_react10.useEffect)(() => {
-    if (inputValue != null) {
-      ctx.setInputValue(inputValue);
-    }
-  }, [inputValue]);
-  (0, import_react10.useEffect)(() => {
-    if (onValueChange) {
-      ctx.setOnInputValueChange(() => onValueChange);
-    }
-    if (!ctx.multiple && ctx.selectedItem) {
-      ctx.setInputValue(ctx.selectedItem.text);
-    }
-  }, []);
-  const PopoverTrigger = ctx.hasPopover ? Popover2.Trigger : import_react10.Fragment;
-  const popoverTriggerProps = ctx.hasPopover ? {
-    asChild: true,
-    type: void 0
-  } : {};
-  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.areSelectedItemsInTrigger || 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_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { ...ctx.getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverTrigger, { ...popoverTriggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "input",
-      {
-        "data-spark-component": "combobox-input",
-        type: "text",
-        ...hasPlaceholder && { placeholder },
-        className: (0, import_class_variance_authority14.cx)(
-          "max-w-full shrink-0 grow basis-[80px]",
-          "h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden",
-          "disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent",
-          "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,
-        "aria-invalid": isInvalid,
-        "aria-describedby": description
-      }
-    ) })
-  ] });
-};
-Input.displayName = "Combobox.Input";
-
-// src/combobox/ComboboxItem.tsx
-var import_use_merge_refs3 = require("@spark-ui/hooks/use-merge-refs");
-var import_class_variance_authority15 = require("class-variance-authority");
-
-// src/combobox/ComboboxItemContext.tsx
-var import_react11 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var ComboboxItemContext = (0, import_react11.createContext)(null);
-var ComboboxItemProvider = ({
-  value,
-  disabled = false,
-  children
-}) => {
-  const ctx = useComboboxContext();
-  const [textId, setTextId] = (0, import_react11.useState)(void 0);
-  const index = getIndexByKey(ctx.filteredItemsMap, value);
-  const itemData = { disabled, value, text: getItemText(children) };
-  const isSelected = ctx.multiple ? ctx.selectedItems.some((selectedItem) => selectedItem.value === value) : ctx.selectedItem?.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    ComboboxItemContext.Provider,
-    {
-      value: { textId, setTextId, isSelected, itemData, index, disabled },
-      children
-    }
-  );
-};
-var useComboboxItemContext = () => {
-  const context = (0, import_react11.useContext)(ComboboxItemContext);
-  if (!context) {
-    throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
-  }
-  return context;
-};
-
-// src/combobox/ComboboxItem.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Item = ({ children, ref: forwardedRef, ...props }) => {
-  const { value, disabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComboboxItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
-};
-var styles2 = (0, import_class_variance_authority15.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,
-  ...rest
-}) => {
-  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_runtime25.jsx)(
-    "li",
-    {
-      ref,
-      className: (0, import_class_variance_authority15.cx)(
-        styles2({
-          selected: itemCtx.isSelected,
-          disabled,
-          highlighted: ctx.highlightedItem?.value === value,
-          interactionType: ctx.lastInteractionType,
-          className
-        })
-      ),
-      ...downshiftItemProps,
-      ...rest,
-      "aria-selected": itemCtx.isSelected,
-      "aria-labelledby": itemCtx.textId,
-      children
-    },
-    value
-  );
-};
-Item.displayName = "Combobox.Item";
-
-// src/combobox/ComboboxItemIndicator.tsx
-var import_Check = require("@spark-ui/icons/Check");
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ItemIndicator = ({
-  className,
-  children,
-  label,
-  ref: forwardedRef
-}) => {
-  const { disabled, isSelected } = useComboboxItemContext();
-  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_Check.Check, { "aria-label": label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    "span",
-    {
-      ref: forwardedRef,
-      className: (0, import_class_variance_authority16.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/hooks/use-merge-refs");
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_react12 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Items = ({ children, className, ref: forwardedRef, ...props }) => {
-  const ctx = useComboboxContext();
-  const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
-    onMouseMove: () => {
-      ctx.setLastInteractionType("mouse");
-    }
-  });
-  const innerRef = (0, import_react12.useRef)(null);
-  const ref = (0, import_use_merge_refs4.useMergeRefs)(forwardedRef, downshiftRef, innerRef);
-  const isOpen = ctx.hasPopover ? ctx.isOpen : true;
-  const isPointerEventsDisabled = ctx.hasPopover && !isOpen;
-  (0, import_react12.useLayoutEffect)(() => {
-    if (innerRef.current?.parentElement) {
-      innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
-      innerRef.current.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
-    }
-  }, [isPointerEventsDisabled]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    "ul",
-    {
-      ref,
-      className: (0, import_class_variance_authority17.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_runtime27.jsx)(Spinner, { size: "sm" }) : children
-    }
-  );
-};
-Items.displayName = "Combobox.Items";
-
-// src/combobox/ComboboxItemText.tsx
-var import_class_variance_authority18 = require("class-variance-authority");
-var import_react13 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var ItemText = ({ children, className, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX2}-item-text-${(0, import_react13.useId)()}`;
-  const { setTextId } = useComboboxItemContext();
-  (0, import_react13.useEffect)(() => {
-    setTextId(id);
-    return () => setTextId(void 0);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id, className: (0, import_class_variance_authority18.cx)("inline", className), ref: forwardedRef, children });
-};
-ItemText.displayName = "Combobox.ItemText";
-
-// src/combobox/ComboboxLabel.tsx
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Label = ({ children, className, ref: forwardedRef }) => {
-  const groupCtx = useComboboxGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    "div",
-    {
-      ref: forwardedRef,
-      id: groupCtx.groupLabelId,
-      className: (0, import_class_variance_authority19.cx)("px-md py-sm text-body-2 text-neutral italic", className),
-      children
-    }
-  );
-};
-Label.displayName = "Combobox.Label";
-
-// src/combobox/ComboboxLeadingIcon.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { size: "sm", className: "h-sz-44 shrink-0", children });
-};
-LeadingIcon.displayName = "Combobox.LeadingIcon";
-
-// src/combobox/ComboboxPopover.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
-var import_react14 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Popover3 = ({
-  children,
-  matchTriggerWidth = true,
-  sideOffset = 4,
-  className,
-  ref: forwardedRef,
-  ...props
-}) => {
-  const ctx = useComboboxContext();
-  (0, import_react14.useEffect)(() => {
-    ctx.setHasPopover(true);
-    return () => ctx.setHasPopover(false);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    Popover2.Content,
-    {
-      ref: forwardedRef,
-      inset: true,
-      asChild: true,
-      matchTriggerWidth,
-      className: (0, import_class_variance_authority20.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_runtime32 = require("react/jsx-runtime");
-var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popover2.Portal, { ...rest, children });
-Portal2.displayName = "Combobox.Portal";
-
-// src/combobox/ComboboxSelectedItems.tsx
-var import_DeleteOutline2 = require("@spark-ui/icons/DeleteOutline");
-var import_class_variance_authority21 = require("class-variance-authority");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var SelectedItem = ({ item: selectedItem, index }) => {
-  const ctx = useComboboxContext();
-  const isCleanable = !ctx.disabled && !ctx.readOnly;
-  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_runtime33.jsxs)(
-    Element,
-    {
-      role: "presentation",
-      "data-spark-component": "combobox-selected-item",
-      className: (0, import_class_variance_authority21.cx)(
-        "h-sz-28 bg-neutral-container flex items-center rounded-md align-middle",
-        "text-body-2 text-on-neutral-container",
-        "disabled:opacity-dim-3 disabled:cursor-not-allowed",
-        "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_runtime33.jsx)(
-          "span",
-          {
-            className: (0, import_class_variance_authority21.cx)("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
-              "w-max": !ctx.wrap
-            }),
-            children: selectedItem.text
-          }
-        ),
-        ctx.disabled,
-        isCleanable && /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_DeleteOutline2.DeleteOutline, {}) })
-          }
-        )
-      ]
-    },
-    `selected-item-${index}`
-  );
-};
-var SelectedItems = () => {
-  const ctx = useComboboxContext();
-  return ctx.multiple && ctx.selectedItems.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: ctx.selectedItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectedItem, { item, index }, item.value)) }) : null;
-};
-SelectedItems.displayName = "Combobox.SelectedItems";
-
-// src/combobox/ComboboxTrigger.tsx
-var import_form_field3 = require("@spark-ui/components/form-field");
-var import_use_merge_refs5 = require("@spark-ui/hooks/use-merge-refs");
-var import_class_variance_authority23 = require("class-variance-authority");
-var import_react16 = require("react");
-
-// src/combobox/ComboboxTrigger.styles.tsx
-var import_class_variance_authority22 = require("class-variance-authority");
-var styles3 = (0, import_class_variance_authority22.cva)(
-  [
-    "flex items-start gap-md min-h-sz-44 text-body-1",
-    "h-fit rounded-lg px-lg",
-    // outline styles
-    "ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"
-  ],
-  {
-    variants: {
-      allowWrap: {
-        true: "",
-        false: "h-sz-44"
-      },
-      state: {
-        undefined: "ring-outline",
-        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: "default: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_react15 = require("react");
-var useWidthIncreaseCallback = (elementRef, callback) => {
-  const prevWidthRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
-    const checkWidthIncrease = () => {
-      const currentWidth = elementRef.current?.scrollWidth || null;
-      if (prevWidthRef.current && currentWidth && currentWidth > prevWidthRef.current) {
-        callback();
-      }
-      prevWidthRef.current = currentWidth;
-      requestAnimationFrame(checkWidthIncrease);
-    };
-    const interval = requestAnimationFrame(checkWidthIncrease);
-    return () => cancelAnimationFrame(interval);
-  }, [elementRef]);
-};
-
-// src/combobox/ComboboxTrigger.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Trigger2 = ({ className, children, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const field = (0, import_form_field3.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_react16.Fragment, {}];
-  const ref = (0, import_use_merge_refs5.useMergeRefs)(forwardedRef, ctx.triggerAreaRef);
-  const scrollableAreaRef = (0, import_react16.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);
-  const hasSelectedItems = !!selectedItems;
-  (0, import_react16.useEffect)(() => {
-    ctx.setAreSelectedItemsInTrigger(hasSelectedItems);
-  }, [hasSelectedItems]);
-  (0, import_react16.useEffect)(() => {
-    const resizeObserver = new ResizeObserver(scrollToRight);
-    if (scrollableAreaRef.current) {
-      resizeObserver.observe(scrollableAreaRef.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverAnchor, { ...popoverAnchorProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    "div",
-    {
-      ref,
-      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_runtime34.jsxs)(
-          "div",
-          {
-            ref: scrollableAreaRef,
-            className: (0, import_class_variance_authority23.cx)(
-              "min-w-none gap-sm py-md inline-flex grow items-start",
-              ctx.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
-            ),
-            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,
-  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";
-Label.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
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),J=require("@spark-ui/components/form-field"),we=require("@spark-ui/hooks/use-combined-state"),I=require("downshift"),l=require("react"),M=require("../popover/index.js"),Pe=require("@spark-ui/icons/DeleteOutline"),x=require("class-variance-authority"),A=require("../Icon-CF0W0LKr.js"),L=require("@spark-ui/hooks/use-merge-refs"),Ze=require("@spark-ui/icons/ArrowHorizontalDown"),et=require("../IconButton-D3g86WpZ.js"),tt=require("../VisuallyHidden-CB6Nx76j.js"),ot=require("@spark-ui/icons/Check"),st=require("../Spinner-_Kffli3B.js");function Ne(e,o){let t=0;for(const[s]of e.entries()){if(s===o)return t;t++}return-1}const nt=(e,o)=>{let t=0;for(const s of e.keys()){if(t===o)return s;t++}},rt=(e,o)=>{const t=nt(e,o);return t!==void 0?e.get(t):void 0},$=e=>e?e.type.displayName:"",Se=(e,o=[])=>(l.Children.forEach(e,t=>{if(l.isValidElement(t)){if($(t)==="Combobox.Item"){const s=t.props;o.push({value:s.value,disabled:!!s.disabled,text:je(s.children)})}t.props.children&&Se(t.props.children,o)}}),o),Te=e=>{if(!e)return"";for(const o of l.Children.toArray(e))if(l.isValidElement(o)){const t=o;if($(t)==="Combobox.ItemText")return t.props.children;const s=Te(t.props.children);if(s)return s}return""},je=e=>typeof e=="string"?e:Te(e),ve=e=>{const o=new Map;return Se(e).forEach(t=>{o.set(t.value,t)}),o},Ee=(e,o)=>l.Children.toArray(e).some(t=>l.isValidElement(t)?$(t)===o?!0:t.props.children?Ee(t.props.children,o):!1:!1),F=(e,o)=>l.Children.toArray(e).filter(l.isValidElement).find(t=>o===$(t)||""),lt=({multiselect:e,selectedItems:o,allowCustomValue:t=!1,setSelectedItems:s,triggerAreaRef:a,items:r})=>(c,{changes:n,type:p})=>{const m=a.current?.contains?.(document.activeElement);switch(p){case I.useCombobox.stateChangeTypes.InputClick:return{...n,isOpen:!0};case I.useCombobox.stateChangeTypes.InputKeyDownEnter:case I.useCombobox.stateChangeTypes.ItemClick:{const f={...n};if(n.selectedItem!=null){f.inputValue="",f.isOpen=!0;const T=Ne(r,n.selectedItem.value);f.highlightedIndex=T;const j=e.selectedItems.some(y=>y.value===n.selectedItem?.value)?o.filter(y=>y.value!==n.selectedItem?.value):[...o,n.selectedItem];s(j)}return f}case I.useCombobox.stateChangeTypes.ToggleButtonClick:return{...n,inputValue:t?n.inputValue:""};case I.useCombobox.stateChangeTypes.InputChange:return{...n,selectedItem:n.highlightedIndex===-1?null:n.selectedItem};case I.useCombobox.stateChangeTypes.InputBlur:return{...n,inputValue:t?n.inputValue:"",isOpen:m};default:return n}},at=({filteredItems:e,allowCustomValue:o=!1,setSelectedItem:t})=>(a,{changes:r,type:u})=>{const c=e.find(n=>n.text.toLowerCase()===a.inputValue.toLowerCase());switch(u){case I.useCombobox.stateChangeTypes.InputKeyDownEscape:return r.selectedItem||t(null),r;case I.useCombobox.stateChangeTypes.ItemClick:case I.useCombobox.stateChangeTypes.InputKeyDownEnter:return r.selectedItem&&t(r.selectedItem),r;case I.useCombobox.stateChangeTypes.InputClick:return{...r,isOpen:!0};case I.useCombobox.stateChangeTypes.ToggleButtonClick:case I.useCombobox.stateChangeTypes.InputBlur:return o?r:a.inputValue===""?(t(null),{...r,selectedItem:null}):c?(t(c),{...r,selectedItem:c,inputValue:c.text}):a.selectedItem?{...r,inputValue:a.selectedItem.text}:{...r,inputValue:""};default:return r}},Oe=l.createContext(null),U=(e,o)=>o?new Map(Array.from(e).filter(([t,{text:s}])=>s.toLowerCase().includes(o.toLowerCase()))):e,K=":combobox",ke=({children:e,state:o,allowCustomValue:t=!1,filtering:s="auto",disabled:a=!1,multiple:r=!1,readOnly:u=!1,wrap:c=!0,value:n,defaultValue:p,onValueChange:m,open:f,defaultOpen:T,onOpenChange:C,isLoading:j})=>{const y=l.useRef(!1),[P,N]=l.useState(""),[k,w]=l.useState(s==="strict"),R=l.useRef(null),E=l.useRef(null),[W,B]=l.useState(null),[O]=we.useCombinedState(n,p),G=s==="strict"||s==="auto"&&k,[h,Ae]=l.useState(ve(e)),[z,me]=l.useState(G?U(h,P):h),[pe,be]=l.useState(h.get(O)||null),[xe,fe]=l.useState(O?[...h.values()].filter(d=>O.includes(d.value)):[]),Ie=d=>{w(!1),d?.value!==pe?.value&&(be(d),setTimeout(()=>{m?.(d?.value)},0))},H=d=>{fe(d),setTimeout(()=>{m?.(d.map(g=>g.value))},0)};l.useEffect(()=>{if(!y.current){y.current=!0;return}if(r){const d=O.reduce((g,b)=>{const S=h.get(b);return S?[...g,S]:g},[]);fe(O?d:[])}else be(h.get(O)||null)},[r?JSON.stringify(O):O]);const D=J.useFormFieldControl(),Le=`${K}-label-${l.useId()}`,Be=`${K}-field-${l.useId()}`,Ce=D.id||Be,ze=D.labelId||Le,qe=D.state||o,Ke=D.disabled??a,$e=D.readOnly??u,[ye,We]=l.useState(Ee(e,"Combobox.Popover")),[Ge,He]=l.useState(!1),[_e,Ue]=l.useState("mouse");l.useEffect(()=>{me(G?U(h,P):h)},[P,h]);const ge=I.useMultipleSelection({selectedItems:xe,stateReducer:(d,{type:g,changes:b})=>{const S=I.useMultipleSelection.stateChangeTypes;switch(g){case S.SelectedItemKeyDownBackspace:case S.SelectedItemKeyDownDelete:{H(b.selectedItems||[]);let V;return g===S.SelectedItemKeyDownDelete?V=d?.activeIndex===b.selectedItems?.length?-1:d.activeIndex:V=(b?.activeIndex||0)-1>=0?d.activeIndex-1:b?.activeIndex,{...b,activeIndex:V}}case S.SelectedItemClick:return E.current&&E.current.focus(),{...b,activeIndex:-1};case S.FunctionRemoveSelectedItem:return{...b,activeIndex:-1};case S.DropdownKeyDownNavigationPrevious:return _.closeMenu(),b;default:return b}}}),he=Array.from(z.values());l.useEffect(()=>{W?.(P||"")},[P]);const _=I.useCombobox({inputId:Ce,items:he,selectedItem:r?void 0:pe,id:Ce,labelId:ze,inputValue:P,onInputValueChange:({inputValue:d})=>{if(N(d),G){const g=U(h,d||"");me(g)}},initialIsOpen:T,...f!=null&&{isOpen:f},onIsOpenChange:d=>{d.isOpen!=null&&C?.(d.isOpen)},itemToString:d=>d?.text,isItemDisabled:d=>{const g=!!P&&!he.some(b=>d.value===b.value);return d.disabled||g},stateReducer:r?lt({multiselect:ge,selectedItems:xe,allowCustomValue:t,setSelectedItems:H,triggerAreaRef:R,items:h}):at({allowCustomValue:t,setSelectedItem:Ie,filteredItems:[...z.values()]}),scrollIntoView:d=>{d&&d.scrollIntoView({block:"nearest"})}});l.useEffect(()=>{const d=ve(e),g=[...h.values()],b=[...d.values()];(g.length!==b.length||g.some((V,q)=>{const Qe=V.value!==b[q]?.value,Ye=V.text!==b[q]?.text;return Qe||Ye}))&&Ae(d)},[e]);const[Je,Xe]=ye?[M.Popover,{open:!0}]:[l.Fragment,{}];return i.jsx(Oe.Provider,{value:{itemsMap:h,filteredItemsMap:z,highlightedItem:rt(z,_.highlightedIndex),multiple:r,disabled:Ke,readOnly:$e,areSelectedItemsInTrigger:Ge,setAreSelectedItemsInTrigger:He,hasPopover:ye,setHasPopover:We,state:qe,lastInteractionType:_e,setLastInteractionType:Ue,wrap:c,innerInputRef:E,triggerAreaRef:R,..._,...ge,setInputValue:N,selectItem:Ie,setSelectedItems:H,isLoading:j,setOnInputValueChange:B,isTyping:k,setIsTyping:w},children:i.jsx(Je,{...Xe,children:e})})},v=()=>{const e=l.useContext(Oe);if(!e)throw Error("useComboboxContext must be used within a Combobox provider");return e},Re=({children:e,...o})=>i.jsx(ke,{...o,children:e});Re.displayName="Combobox";const X=({className:e,tabIndex:o=-1,onClick:t,ref:s,...a})=>{const r=v(),u=c=>{c.stopPropagation(),r.multiple?r.setSelectedItems([]):r.selectItem(null),r.setInputValue(""),r.innerInputRef.current&&r.innerInputRef.current.focus(),t&&t(c)};return i.jsx("button",{ref:s,className:x.cx(e,"h-sz-44 text-neutral hover:text-neutral-hovered"),tabIndex:o,onClick:u,type:"button",...a,children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})};X.displayName="Combobox.ClearButton";const Q=({className:e,closedLabel:o,openedLabel:t,intent:s="neutral",design:a="ghost",size:r="sm",ref:u,...c})=>{const n=v(),{ref:p,...m}=n.getToggleButtonProps({disabled:n.disabled||n.readOnly,onClick:C=>{C.stopPropagation()}}),f=m["aria-expanded"],T=L.useMergeRefs(u,p);return i.jsx(et.IconButton,{ref:T,className:x.cx(e,"ml-sm mt-[calc((44px-32px)/2)]"),intent:s,design:a,size:r,...m,...c,"aria-label":f?t:o,disabled:n.disabled,children:i.jsx(A.Icon,{className:x.cx("shrink-0","rotate-0 transition duration-100 ease-in",{"rotate-180":f}),size:"sm",children:i.jsx(Ze.ArrowHorizontalDown,{})})})};Q.displayName="Combobox.Disclosure";const Y=({className:e,children:o,ref:t})=>v().filteredItemsMap.size===0?i.jsx("div",{ref:t,className:x.cx("px-lg py-md text-body-1 text-on-surface/dim-1",e),children:o}):null;Y.displayName="Combobox.Empty";const Ve=l.createContext(null),it=({children:e})=>{const o=`${K}-group-label-${l.useId()}`;return i.jsx(Ve.Provider,{value:{groupLabelId:o},children:e})},De=()=>{const e=l.useContext(Ve);if(!e)throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");return e},Z=({children:e,ref:o,...t})=>i.jsx(it,{children:i.jsx(ct,{ref:o,...t,children:e})}),ct=({children:e,className:o,ref:t})=>{const s=v(),a=De();return l.Children.toArray(e).some(u=>l.isValidElement(u)&&s.filteredItemsMap.get(u.props.value))?i.jsx("div",{ref:t,role:"group","aria-labelledby":a.groupLabelId,className:x.cx(o),children:e}):null};Z.displayName="Combobox.Group";const ee=({"aria-label":e,className:o,placeholder:t,value:s,defaultValue:a,onValueChange:r,ref:u,...c})=>{const n=v(),p=J.useFormFieldControl(),[m]=we.useCombinedState(s,a),{isInvalid:f,description:T}=p;l.useEffect(()=>{m!=null&&n.setInputValue(m)},[m]),l.useEffect(()=>{r&&n.setOnInputValueChange(()=>r),!n.multiple&&n.selectedItem&&n.setInputValue(n.selectedItem.text)},[]);const C=n.hasPopover?M.Popover.Trigger:l.Fragment,j=n.hasPopover?{asChild:!0,type:void 0}:{},y=n.getDropdownProps(),P=L.useMergeRefs(u,n.innerInputRef,y.ref),N=n.getInputProps({disabled:n.disabled||n.readOnly,...y,onKeyDown:E=>{y.onKeyDown?.(E),n.setLastInteractionType("keyboard"),n.setIsTyping(!0)},onChange:E=>{n.setInputValue(E.target.value)},ref:P}),k=n.multiple?!n.areSelectedItemsInTrigger||n.selectedItems.length===0:n.selectedItem===null;function w(E,W){return B=>{E?.(B),W?.(B)}}const R={onBlur:w(c.onBlur,N.onBlur),onChange:w(c.onChange,N.onChange),onClick:w(c.onClick,N.onClick),onKeyDown:w(c.onKeyDown,N.onKeyDown)};return i.jsxs(i.Fragment,{children:[e&&i.jsx(tt.VisuallyHidden,{children:i.jsx("label",{...n.getLabelProps(),children:e})}),i.jsx(C,{...j,children:i.jsx("input",{"data-spark-component":"combobox-input",type:"text",...k&&{placeholder:t},className:x.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",o),...c,...N,...R,value:n.inputValue,"aria-label":e,disabled:n.disabled,readOnly:n.readOnly,"aria-invalid":f,"aria-describedby":T})})]})};ee.displayName="Combobox.Input";const Fe=l.createContext(null),ut=({value:e,disabled:o=!1,children:t})=>{const s=v(),[a,r]=l.useState(void 0),u=Ne(s.filteredItemsMap,e),c={disabled:o,value:e,text:je(t)},n=s.multiple?s.selectedItems.some(p=>p.value===e):s.selectedItem?.value===e;return i.jsx(Fe.Provider,{value:{textId:a,setTextId:r,isSelected:n,itemData:c,index:u,disabled:o},children:t})},te=()=>{const e=l.useContext(Fe);if(!e)throw Error("useComboboxItemContext must be used within a ComboboxItem provider");return e},oe=({children:e,ref:o,...t})=>{const{value:s,disabled:a}=t;return i.jsx(ut,{value:s,disabled:a,children:i.jsx(mt,{ref:o,...t,children:e})})},dt=x.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:!0,interactionType:"mouse",class:"bg-surface-hovered"},{highlighted:!0,interactionType:"keyboard",class:"u-outline"}]}),mt=({className:e,disabled:o=!1,value:t,children:s,ref:a,...r})=>{const u=v(),c=te(),n=!!u.filteredItemsMap.get(t),{ref:p,...m}=u.getItemProps({item:c.itemData,index:c.index}),f=L.useMergeRefs(a,p);return n?i.jsx("li",{ref:f,className:x.cx(dt({selected:c.isSelected,disabled:o,highlighted:u.highlightedItem?.value===t,interactionType:u.lastInteractionType,className:e})),...m,...r,"aria-selected":c.isSelected,"aria-labelledby":c.textId,children:s},t):null};oe.displayName="Combobox.Item";const se=({className:e,children:o,label:t,ref:s})=>{const{disabled:a,isSelected:r}=te(),u=o||i.jsx(A.Icon,{size:"sm",children:i.jsx(ot.Check,{"aria-label":t})});return i.jsx("span",{ref:s,className:x.cx("min-h-sz-16 min-w-sz-16 flex",a&&"opacity-dim-3",e),children:r&&u})};se.displayName="Combobox.ItemIndicator";const ne=({children:e,className:o,ref:t,...s})=>{const a=v(),{ref:r,...u}=a.getMenuProps({onMouseMove:()=>{a.setLastInteractionType("mouse")}}),c=l.useRef(null),n=L.useMergeRefs(t,r,c),p=a.hasPopover?a.isOpen:!0,m=a.hasPopover&&!p;return l.useLayoutEffect(()=>{c.current?.parentElement&&(c.current.parentElement.style.pointerEvents=m?"none":"",c.current.style.pointerEvents=m?"none":"")},[m]),i.jsx("ul",{ref:n,className:x.cx(o,"flex flex-col",p?"block":"pointer-events-none invisible opacity-0",a.hasPopover&&"p-lg",a.isLoading&&"items-center overflow-y-auto"),...s,...u,"aria-busy":a.isLoading,"data-spark-component":"combobox-items",children:a.isLoading?i.jsx(st.Spinner,{size:"sm"}):e})};ne.displayName="Combobox.Items";const re=({children:e,className:o,ref:t})=>{const s=`${K}-item-text-${l.useId()}`,{setTextId:a}=te();return l.useEffect(()=>(a(s),()=>a(void 0))),i.jsx("span",{id:s,className:x.cx("inline",o),ref:t,children:e})};re.displayName="Combobox.ItemText";const le=({children:e,className:o,ref:t})=>{const s=De();return i.jsx("div",{ref:t,id:s.groupLabelId,className:x.cx("px-md py-sm text-body-2 text-neutral italic",o),children:e})};le.displayName="Combobox.Label";const ae=({children:e})=>i.jsx(A.Icon,{size:"sm",className:"h-sz-44 shrink-0",children:e});ae.displayName="Combobox.LeadingIcon";const ie=({children:e,matchTriggerWidth:o=!0,sideOffset:t=4,className:s,ref:a,...r})=>{const u=v();return l.useEffect(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),i.jsx(M.Popover.Content,{ref:a,inset:!0,asChild:!0,matchTriggerWidth:o,className:x.cx("z-dropdown! relative",s),sideOffset:t,onOpenAutoFocus:c=>{c.preventDefault()},...r,"data-spark-component":"combobox-popover",children:e})};ie.displayName="Combobox.Popover";const ce=({children:e,...o})=>i.jsx(M.Popover.Portal,{...o,children:e});ce.displayName="Combobox.Portal";const pt=({item:e,index:o})=>{const t=v(),s=!t.disabled&&!t.readOnly,a=n=>{const p=n.target;t.lastInteractionType==="keyboard"&&p.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},{disabled:r,...u}=t.getSelectedItemProps({disabled:t.disabled||t.readOnly,selectedItem:e,index:o}),c=r?"button":"span";return i.jsxs(c,{role:"presentation","data-spark-component":"combobox-selected-item",className:x.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":!s,"pl-md":s}),...u,tabIndex:-1,...r&&{disabled:!0},onFocus:a,children:[i.jsx("span",{className:x.cx("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis",{"w-max":!t.wrap}),children:e.text}),t.disabled,s&&i.jsx("button",{type:"button",tabIndex:-1,"aria-hidden":!0,className:"px-md h-full cursor-pointer",onClick:n=>{n.stopPropagation();const p=t.selectedItems.filter(m=>m.value!==e.value);t.setSelectedItems(p),t.innerInputRef.current&&t.innerInputRef.current.focus({preventScroll:!0})},children:i.jsx(A.Icon,{size:"sm",children:i.jsx(Pe.DeleteOutline,{})})})]},`selected-item-${o}`)},ue=()=>{const e=v();return e.multiple&&e.selectedItems.length?i.jsx(i.Fragment,{children:e.selectedItems.map((o,t)=>i.jsx(pt,{item:o,index:t},o.value))}):null};ue.displayName="Combobox.SelectedItems";const bt=x.cva(["flex items-start gap-md min-h-sz-44 text-body-1","h-fit rounded-lg px-lg","ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"],{variants:{allowWrap:{true:"",false:"h-sz-44"},state:{undefined:"ring-outline",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:!1,state:void 0,class:"default:hover:ring-outline-high"},{disabled:!1,readOnly:!1,class:"bg-surface text-on-surface cursor-text"}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),xt=(e,o)=>{const t=l.useRef(null);l.useEffect(()=>{const s=()=>{const r=e.current?.scrollWidth||null;t.current&&r&&r>t.current&&o(),t.current=r,requestAnimationFrame(s)},a=requestAnimationFrame(s);return()=>cancelAnimationFrame(a)},[e])},de=({className:e,children:o,ref:t})=>{const s=v(),a=J.useFormFieldControl(),r=F(o,"Combobox.LeadingIcon"),u=F(o,"Combobox.SelectedItems"),c=F(o,"Combobox.Input"),n=F(o,"Combobox.ClearButton"),p=F(o,"Combobox.Disclosure"),[m,f]=s.hasPopover?[M.Popover.Anchor,{asChild:!0,type:void 0}]:[l.Fragment,{}],T=L.useMergeRefs(t,s.triggerAreaRef),C=l.useRef(null),j=a.disabled||s.disabled,y=a.readOnly||s.readOnly,P=!!n&&!j&&!y,N=()=>{if(C.current&&!s.wrap){const{scrollWidth:w,clientWidth:R}=C.current;C.current.scrollLeft=w-R}};xt(C,N);const k=!!u;return l.useEffect(()=>{s.setAreSelectedItemsInTrigger(k)},[k]),l.useEffect(()=>{const w=new ResizeObserver(N);return C.current&&w.observe(C.current),()=>{w.disconnect()}},[]),i.jsx(i.Fragment,{children:i.jsx(m,{...f,children:i.jsxs("div",{ref:T,className:bt({className:e,state:s.state,disabled:j,readOnly:y,allowWrap:s.wrap}),onClick:()=>{!s.isOpen&&!j&&!y&&(s.openMenu(),s.innerInputRef.current&&s.innerInputRef.current.focus())},children:[r,i.jsxs("div",{ref:C,className:x.cx("min-w-none gap-sm py-md inline-flex grow items-start",s.wrap?"flex-wrap":"u-no-scrollbar overflow-x-auto p-[2px]"),children:[u,c]}),P&&n,p]})})})};de.displayName="Combobox.Trigger";const Me=Object.assign(Re,{Group:Z,Item:oe,Items:ne,ItemText:re,ItemIndicator:se,Label:le,Popover:ie,Trigger:de,LeadingIcon:ae,Empty:Y,Input:ee,Disclosure:Q,SelectedItems:ue,ClearButton:X,Portal:ce});Me.displayName="Combobox";Z.displayName="Combobox.Group";ne.displayName="Combobox.Items";oe.displayName="Combobox.Item";re.displayName="Combobox.ItemText";se.displayName="Combobox.ItemIndicator";le.displayName="Combobox.Label";ie.displayName="Combobox.Popover";de.displayName="Combobox.Trigger";ae.displayName="Combobox.LeadingIcon";Y.displayName="Combobox.Empty";ee.displayName="Combobox.Input";Q.displayName="Combobox.Disclosure";ue.displayName="Combobox.SelectedItems";X.displayName="Combobox.ClearButton";ce.displayName="Combobox.Portal";exports.Combobox=Me;exports.ComboboxProvider=ke;exports.useComboboxContext=v;
+//# sourceMappingURL=index.js.map