@spark-ui/components 13.1.4 → 13.2.0

package/dist/dropdown/index.js

@@ -1,2051 +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/dropdown/index.ts
-var dropdown_exports = {};
-__export(dropdown_exports, {
-  Dropdown: () => Dropdown2,
-  DropdownProvider: () => DropdownProvider,
-  useDropdownContext: () => useDropdownContext
-});
-module.exports = __toCommonJS(dropdown_exports);
-
-// src/dropdown/DropdownContext.tsx
-var import_form_field = require("@spark-ui/components/form-field");
-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/dropdown/useDropdown.ts
-var import_downshift = require("downshift");
-var useDropdown = ({
-  itemsMap,
-  defaultValue,
-  value,
-  onValueChange,
-  open,
-  onOpenChange,
-  defaultOpen,
-  multiple,
-  id,
-  labelId
-}) => {
-  const items = [...itemsMap.values()];
-  const downshiftMultipleSelection = (0, import_downshift.useMultipleSelection)({
-    selectedItems: value != null && multiple ? items.filter(
-      (item) => multiple ? value.includes(item.value) : value === item.value
-    ) : void 0,
-    initialSelectedItems: defaultValue != null && multiple ? items.filter(
-      (item) => multiple ? defaultValue.includes(item.value) : defaultValue === item.value
-    ) : void 0,
-    onSelectedItemsChange: ({ selectedItems }) => {
-      if (selectedItems != null && multiple) {
-        onValueChange?.(selectedItems.map((item) => item.value));
-      }
-    }
-  });
-  const stateReducer = (state, { changes, type }) => {
-    if (!multiple) return changes;
-    const { selectedItems, removeSelectedItem, addSelectedItem } = downshiftMultipleSelection;
-    switch (type) {
-      case import_downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-      case import_downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-      case import_downshift.useSelect.stateChangeTypes.ItemClick:
-        if (changes.selectedItem != null) {
-          const isAlreadySelected = selectedItems.some(
-            (selectedItem) => selectedItem.value === changes.selectedItem?.value
-          );
-          if (isAlreadySelected) removeSelectedItem(changes.selectedItem);
-          else addSelectedItem(changes.selectedItem);
-        }
-        return {
-          ...changes,
-          isOpen: true,
-          // keep the menu open after selection.
-          highlightedIndex: state.highlightedIndex
-          // preserve highlighted index position
-        };
-      default:
-        return changes;
-    }
-  };
-  const downshift = (0, import_downshift.useSelect)({
-    items,
-    isItemDisabled: (item) => item.disabled,
-    itemToString: (item) => item ? item.text : "",
-    // a11y attributes
-    id,
-    labelId,
-    // Controlled open state
-    isOpen: open,
-    // undefined must be passed for stateful behaviour (uncontrolled)
-    onIsOpenChange: ({ isOpen }) => {
-      if (isOpen != null) onOpenChange?.(isOpen);
-    },
-    initialIsOpen: defaultOpen ?? false,
-    stateReducer,
-    // Controlled mode (single selection)
-    selectedItem: value != null && !multiple ? itemsMap.get(value) || null : void 0,
-    initialSelectedItem: (defaultValue != null || value != null) && !multiple ? itemsMap.get(defaultValue) || null : void 0,
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (selectedItem?.value != null && !multiple) {
-        onValueChange?.(selectedItem?.value);
-      }
-    },
-    /**
-     * 1. 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;
-    }
-  });
-  return {
-    ...downshift,
-    ...downshiftMultipleSelection,
-    /** There is a Downshift bug in React 19, it duplicates some selectedItems */
-    selectedItems: [...new Set(downshiftMultipleSelection.selectedItems)]
-  };
-};
-
-// src/dropdown/utils.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) === "Dropdown.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 getItemText = (children, itemText = "") => {
-  if (typeof children === "string") {
-    return children;
-  }
-  import_react6.Children.forEach(children, (child) => {
-    if (!(0, import_react6.isValidElement)(child)) return;
-    if (getElementDisplayName(child) === "Dropdown.ItemText") {
-      itemText = child.props.children;
-    }
-    if (child.props.children) {
-      getItemText(child.props.children, itemText);
-    }
-  });
-  return itemText;
-};
-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;
-  });
-};
-
-// src/dropdown/DropdownContext.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var DropdownContext = (0, import_react7.createContext)(null);
-var ID_PREFIX2 = ":dropdown";
-var DropdownProvider = ({
-  children,
-  defaultValue,
-  value,
-  onValueChange,
-  open,
-  onOpenChange,
-  defaultOpen,
-  multiple = false,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
-  state: stateProp
-}) => {
-  const [itemsMap, setItemsMap] = (0, import_react7.useState)(getItemsFromChildren(children));
-  const [hasPopover, setHasPopover] = (0, import_react7.useState)(
-    hasChildComponent(children, "Dropdown.Popover")
-  );
-  const [lastInteractionType, setLastInteractionType] = (0, import_react7.useState)("mouse");
-  const field = (0, import_form_field.useFormFieldControl)();
-  const state = field.state || stateProp;
-  const internalFieldLabelID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
-  const internalFieldID = `${ID_PREFIX2}-input-${(0, import_react7.useId)()}`;
-  const id = field.id || internalFieldID;
-  const labelId = field.labelId || internalFieldLabelID;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const dropdownState = useDropdown({
-    itemsMap,
-    defaultValue,
-    value,
-    onValueChange,
-    open,
-    onOpenChange,
-    defaultOpen,
-    multiple,
-    id,
-    labelId
-  });
-  (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)(
-    DropdownContext.Provider,
-    {
-      value: {
-        multiple,
-        disabled,
-        readOnly,
-        ...dropdownState,
-        itemsMap,
-        highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),
-        hasPopover,
-        setHasPopover,
-        state,
-        lastInteractionType,
-        setLastInteractionType
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WrapperComponent, { ...wrapperProps, children })
-    }
-  );
-};
-var useDropdownContext = () => {
-  const context = (0, import_react7.useContext)(DropdownContext);
-  if (!context) {
-    throw Error("useDropdownContext must be used within a Dropdown provider");
-  }
-  return context;
-};
-
-// src/dropdown/Dropdown.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Dropdown = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownProvider, { ...props, children });
-};
-Dropdown.displayName = "Dropdown";
-
-// src/dropdown/DropdownDivider.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Divider = ({ className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: forwardedRef, className: (0, import_class_variance_authority10.cx)("my-md border-b-sm border-outline", className) });
-};
-Divider.displayName = "Dropdown.Divider";
-
-// src/dropdown/DropdownGroup.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-
-// src/dropdown/DropdownItemsGroupContext.tsx
-var import_react8 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var DropdownGroupContext = (0, import_react8.createContext)(null);
-var DropdownGroupProvider = ({ children }) => {
-  const labelId = `${ID_PREFIX2}-group-label-${(0, import_react8.useId)()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DropdownGroupContext.Provider, { value: { labelId }, children });
-};
-var useDropdownGroupContext = () => {
-  const context = (0, import_react8.useContext)(DropdownGroupContext);
-  if (!context) {
-    throw Error("useDropdownGroupContext must be used within a DropdownGroup provider");
-  }
-  return context;
-};
-
-// src/dropdown/DropdownGroup.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: forwardedRef, role: "group", "aria-labelledby": labelId, className: (0, import_class_variance_authority11.cx)(className), children });
-};
-Group.displayName = "Dropdown.Group";
-
-// src/dropdown/DropdownItem.tsx
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_class_variance_authority12 = require("class-variance-authority");
-
-// src/dropdown/DropdownItemContext.tsx
-var import_react9 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var DropdownItemContext = (0, import_react9.createContext)(null);
-var DropdownItemProvider = ({
-  value,
-  disabled = false,
-  children
-}) => {
-  const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext();
-  const [textId, setTextId] = (0, import_react9.useState)(void 0);
-  const index = getIndexByKey(itemsMap, value);
-  const itemData = { disabled, value, text: getItemText(children) };
-  const isSelected = multiple ? selectedItems.some((selectedItem2) => selectedItem2.value === value) : selectedItem?.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    DropdownItemContext.Provider,
-    {
-      value: { textId, setTextId, isSelected, itemData, index, disabled },
-      children
-    }
-  );
-};
-var useDropdownItemContext = () => {
-  const context = (0, import_react9.useContext)(DropdownItemContext);
-  if (!context) {
-    throw Error("useDropdownItemContext must be used within a DropdownItem provider");
-  }
-  return context;
-};
-
-// src/dropdown/DropdownItem.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Item = ({ children, ref: forwardedRef, ...props }) => {
-  const { value, disabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
-};
-var styles2 = (0, import_class_variance_authority12.cva)("px-lg py-md text-body-1", {
-  variants: {
-    selected: {
-      true: "font-bold"
-    },
-    disabled: {
-      true: "opacity-dim-3 cursor-not-allowed",
-      false: "cursor-pointer"
-    },
-    highlighted: {
-      true: ""
-    },
-    interactionType: {
-      mouse: "",
-      keyboard: ""
-    }
-  },
-  compoundVariants: [
-    {
-      highlighted: true,
-      interactionType: "mouse",
-      class: "bg-surface-hovered"
-    },
-    {
-      highlighted: true,
-      interactionType: "keyboard",
-      class: "u-outline"
-    }
-  ]
-});
-var ItemContent = ({
-  className,
-  disabled = false,
-  value,
-  children,
-  ref: forwardedRef
-}) => {
-  const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext();
-  const { textId, index, itemData, isSelected } = useDropdownItemContext();
-  const isHighlighted = highlightedItem?.value === value;
-  const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index });
-  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    "li",
-    {
-      ref,
-      className: (0, import_class_variance_authority12.cx)(
-        styles2({
-          selected: isSelected,
-          disabled,
-          highlighted: isHighlighted,
-          interactionType: lastInteractionType,
-          className
-        })
-      ),
-      ...downshiftItemProps,
-      "aria-selected": isSelected,
-      "aria-labelledby": textId,
-      children
-    },
-    value
-  );
-};
-Item.displayName = "Dropdown.Item";
-
-// src/dropdown/DropdownItemIndicator.tsx
-var import_Check = require("@spark-ui/icons/Check");
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ItemIndicator = ({
-  className,
-  children,
-  label,
-  ref: forwardedRef
-}) => {
-  const { disabled, isSelected } = useDropdownItemContext();
-  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Check.Check, { "aria-label": label }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "span",
-    {
-      ref: forwardedRef,
-      className: (0, import_class_variance_authority13.cx)("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
-      children: isSelected && childElement
-    }
-  );
-};
-ItemIndicator.displayName = "Dropdown.ItemIndicator";
-
-// src/dropdown/DropdownItems.tsx
-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_runtime24 = require("react/jsx-runtime");
-var Items = ({ children, className, ref: forwardedRef, ...props }) => {
-  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext();
-  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
-    onMouseMove: () => {
-      setLastInteractionType("mouse");
-    }
-  });
-  const innerRef = (0, import_react10.useRef)(null);
-  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, downshiftRef, innerRef);
-  (0, import_react10.useLayoutEffect)(() => {
-    if (!hasPopover) return;
-    if (!innerRef.current) return;
-    if (innerRef.current.parentElement) {
-      innerRef.current.parentElement.style.pointerEvents = isOpen ? "" : "none";
-      innerRef.current.style.pointerEvents = isOpen ? "" : "none";
-    }
-  }, [isOpen, hasPopover]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "ul",
-    {
-      ref,
-      className: (0, import_class_variance_authority14.cx)(
-        className,
-        "flex flex-col",
-        isOpen ? "pointer-events-auto! block" : "pointer-events-none invisible absolute opacity-0",
-        hasPopover && "p-lg"
-      ),
-      ...props,
-      ...downshiftMenuProps,
-      "data-spark-component": "dropdown-items",
-      children
-    }
-  );
-};
-Items.displayName = "Dropdown.Items";
-
-// src/dropdown/DropdownItemText.tsx
-var import_class_variance_authority15 = require("class-variance-authority");
-var import_react11 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var ItemText = ({ children, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX2}-item-text-${(0, import_react11.useId)()}`;
-  const { setTextId } = useDropdownItemContext();
-  (0, import_react11.useEffect)(() => {
-    setTextId(id);
-    return () => setTextId(void 0);
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id, className: (0, import_class_variance_authority15.cx)("inline"), ref: forwardedRef, children });
-};
-ItemText.displayName = "Dropdown.ItemText";
-
-// src/dropdown/DropdownLabel.tsx
-var import_class_variance_authority16 = require("class-variance-authority");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Label = ({ children, className, ref: forwardedRef }) => {
-  const { labelId } = useDropdownGroupContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    "div",
-    {
-      ref: forwardedRef,
-      id: labelId,
-      className: (0, import_class_variance_authority16.cx)("px-md py-sm text-body-2 text-neutral italic", className),
-      children
-    }
-  );
-};
-Label.displayName = "Dropdown.Label";
-
-// src/dropdown/DropdownLeadingIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { size: "sm", className: "shrink-0", children });
-};
-LeadingIcon.displayName = "Dropdown.LeadingIcon";
-
-// src/dropdown/DropdownPopover.tsx
-var import_class_variance_authority17 = require("class-variance-authority");
-var import_react12 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Popover3 = ({
-  children,
-  matchTriggerWidth = true,
-  sideOffset = 4,
-  className,
-  elevation = "dropdown",
-  ref: forwardedRef,
-  ...props
-}) => {
-  const ctx = useDropdownContext();
-  (0, import_react12.useEffect)(() => {
-    ctx.setHasPopover(true);
-    return () => ctx.setHasPopover(false);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    Popover2.Content,
-    {
-      ref: forwardedRef,
-      inset: true,
-      asChild: true,
-      matchTriggerWidth,
-      elevation,
-      className: (0, import_class_variance_authority17.cx)("relative", className),
-      sideOffset,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
-      },
-      ...props,
-      "data-spark-component": "dropdown-popover",
-      children
-    }
-  );
-};
-Popover3.displayName = "Dropdown.Popover";
-
-// src/dropdown/DropdownPortal.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Popover2.Portal, { ...rest, children });
-Portal2.displayName = "Dropdown.Portal";
-
-// src/dropdown/DropdownTrigger.tsx
-var import_use_merge_refs3 = require("@spark-ui/hooks/use-merge-refs");
-var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_react13 = require("react");
-
-// src/dropdown/DropdownTrigger.styles.tsx
-var import_class_variance_authority18 = require("class-variance-authority");
-var styles3 = (0, import_class_variance_authority18.cva)(
-  [
-    "flex w-full items-center justify-between",
-    "min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg",
-    "text-body-1",
-    // outline styles
-    "ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus"
-  ],
-  {
-    variants: {
-      state: {
-        undefined: "ring-outline",
-        error: "ring-error",
-        alert: "ring-alert",
-        success: "ring-success"
-      },
-      disabled: {
-        true: "disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3"
-      },
-      readOnly: {
-        true: "disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3"
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        state: void 0,
-        class: "default:hover:ring-outline-high"
-      }
-    ]
-  }
-);
-
-// src/dropdown/DropdownTrigger.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Trigger2 = ({
-  "aria-label": ariaLabel,
-  children,
-  className,
-  ref: forwardedRef
-}) => {
-  const {
-    getToggleButtonProps,
-    getDropdownProps,
-    getLabelProps,
-    hasPopover,
-    disabled,
-    readOnly,
-    state,
-    setLastInteractionType
-  } = useDropdownContext();
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2.Trigger, { asChild: true }] : [import_react13.Fragment, {}];
-  const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({
-    ...getDropdownProps(),
-    onKeyDown: () => {
-      setLastInteractionType("keyboard");
-    }
-  });
-  const isExpanded = downshiftTriggerProps["aria-expanded"];
-  const ref = (0, import_use_merge_refs3.useMergeRefs)(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { ...getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      "button",
-      {
-        type: "button",
-        ref,
-        disabled: disabled || readOnly,
-        className: styles3({ className, state, disabled, readOnly }),
-        ...downshiftTriggerProps,
-        "data-spark-component": "dropdown-trigger",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            Icon,
-            {
-              className: (0, import_class_variance_authority19.cx)("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
-                "rotate-180": isExpanded
-              }),
-              size: "sm",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-};
-Trigger2.displayName = "Dropdown.Trigger";
-
-// src/dropdown/DropdownValue.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Value = ({ children, className, placeholder, ref: forwardedRef }) => {
-  const { selectedItem, multiple, selectedItems } = useDropdownContext();
-  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem);
-  const text = multiple ? selectedItems[0]?.text : selectedItem?.text;
-  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { ref: forwardedRef, className: (0, import_class_variance_authority20.cx)("flex shrink items-center text-left", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "span",
-      {
-        className: (0, import_class_variance_authority20.cx)(
-          "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
-          !hasSelectedItems && "text-on-surface/dim-1"
-        ),
-        children: !hasSelectedItems ? placeholder : children || text
-      }
-    ),
-    suffix && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: suffix })
-  ] });
-};
-Value.displayName = "Dropdown.Value";
-
-// src/dropdown/index.ts
-var Dropdown2 = Object.assign(Dropdown, {
-  Group,
-  Item,
-  Items,
-  ItemText,
-  ItemIndicator,
-  Label,
-  Popover: Popover3,
-  Divider,
-  Trigger: Trigger2,
-  Value,
-  LeadingIcon,
-  Portal: Portal2
-});
-Dropdown2.displayName = "Dropdown";
-Group.displayName = "Dropdown.Group";
-Items.displayName = "Dropdown.Items";
-Item.displayName = "Dropdown.Item";
-ItemText.displayName = "Dropdown.ItemText";
-ItemIndicator.displayName = "Dropdown.ItemIndicator";
-Label.displayName = "Dropdown.Label";
-Popover3.displayName = "Dropdown.Popover";
-Divider.displayName = "Dropdown.Divider";
-Trigger2.displayName = "Dropdown.Trigger";
-Value.displayName = "Dropdown.Value";
-LeadingIcon.displayName = "Dropdown.LeadingIcon";
-Portal2.displayName = "Dropdown.Portal";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dropdown,
-  DropdownProvider,
-  useDropdownContext
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),xe=require("@spark-ui/components/form-field"),a=require("react"),N=require("../popover/index.js"),D=require("downshift"),w=require("class-variance-authority"),T=require("@spark-ui/hooks/use-merge-refs"),we=require("@spark-ui/icons/Check"),E=require("../Icon-CF0W0LKr.js"),ge=require("@spark-ui/icons/ArrowHorizontalDown"),Ie=require("../VisuallyHidden-CB6Nx76j.js"),he=({itemsMap:e,defaultValue:o,value:t,onValueChange:n,open:d,onOpenChange:c,defaultOpen:l,multiple:i,id:m,labelId:x})=>{const p=[...e.values()],u=D.useMultipleSelection({selectedItems:t!=null&&i?p.filter(r=>i?t.includes(r.value):t===r.value):void 0,initialSelectedItems:o!=null&&i?p.filter(r=>i?o.includes(r.value):o===r.value):void 0,onSelectedItemsChange:({selectedItems:r})=>{r!=null&&i&&n?.(r.map(f=>f.value))}}),g=(r,{changes:f,type:v})=>{if(!i)return f;const{selectedItems:I,removeSelectedItem:C,addSelectedItem:P}=u;switch(v){case D.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:case D.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:case D.useSelect.stateChangeTypes.ItemClick:return f.selectedItem!=null&&(I.some(j=>j.value===f.selectedItem?.value)?C(f.selectedItem):P(f.selectedItem)),{...f,isOpen:!0,highlightedIndex:r.highlightedIndex};default:return f}};return{...D.useSelect({items:p,isItemDisabled:r=>r.disabled,itemToString:r=>r?r.text:"",id:m,labelId:x,isOpen:d,onIsOpenChange:({isOpen:r})=>{r!=null&&c?.(r)},initialIsOpen:l??!1,stateReducer:g,selectedItem:t!=null&&!i?e.get(t)||null:void 0,initialSelectedItem:(o!=null||t!=null)&&!i?e.get(o)||null:void 0,onSelectedItemChange:({selectedItem:r})=>{r?.value!=null&&!i&&n?.(r?.value)},scrollIntoView:r=>{r&&r.scrollIntoView({block:"nearest"})}}),...u,selectedItems:[...new Set(u.selectedItems)]}};function ye(e,o){let t=0;for(const[n]of e.entries()){if(n===o)return t;t++}return-1}const ve=(e,o)=>{let t=0;for(const n of e.keys()){if(t===o)return n;t++}},De=(e,o)=>{const t=ve(e,o);return t!==void 0?e.get(t):void 0},k=e=>e?e.type.displayName:"",Z=(e,o=[])=>(a.Children.forEach(e,t=>{if(a.isValidElement(t)){if(k(t)==="Dropdown.Item"){const n=t.props;o.push({value:n.value,disabled:!!n.disabled,text:M(n.children)})}t.props.children&&Z(t.props.children,o)}}),o),M=(e,o="")=>typeof e=="string"?e:(a.Children.forEach(e,t=>{a.isValidElement(t)&&(k(t)==="Dropdown.ItemText"&&(o=t.props.children),t.props.children&&M(t.props.children,o))}),o),Y=e=>{const o=new Map;return Z(e).forEach(t=>{o.set(t.value,t)}),o},ee=(e,o)=>a.Children.toArray(e).some(t=>a.isValidElement(t)?k(t)===o?!0:t.props.children?ee(t.props.children,o):!1:!1),te=a.createContext(null),b=":dropdown",oe=({children:e,defaultValue:o,value:t,onValueChange:n,open:d,onOpenChange:c,defaultOpen:l,multiple:i=!1,disabled:m=!1,readOnly:x=!1,state:p})=>{const[u,g]=a.useState(Y(e)),[h,r]=a.useState(ee(e,"Dropdown.Popover")),[f,v]=a.useState("mouse"),I=xe.useFormFieldControl(),C=I.state||p,P=`${b}-label-${a.useId()}`,U=`${b}-input-${a.useId()}`,j=I.id||U,de=I.labelId||P,le=I.disabled??m,ce=I.readOnly??x,W=he({itemsMap:u,defaultValue:o,value:t,onValueChange:n,open:d,onOpenChange:c,defaultOpen:l,multiple:i,id:j,labelId:de});a.useEffect(()=>{const X=Y(e),_=[...u.values()],S=[...X.values()];(_.length!==S.length||_.some((J,Q)=>{const me=J.value!==S[Q]?.value,fe=J.text!==S[Q]?.text;return me||fe}))&&g(X)},[e]);const[pe,ue]=h?[N.Popover,{open:!0}]:[a.Fragment,{}];return s.jsx(te.Provider,{value:{multiple:i,disabled:le,readOnly:ce,...W,itemsMap:u,highlightedItem:De(u,W.highlightedIndex),hasPopover:h,setHasPopover:r,state:C,lastInteractionType:f,setLastInteractionType:v},children:s.jsx(pe,{...ue,children:e})})},y=()=>{const e=a.useContext(te);if(!e)throw Error("useDropdownContext must be used within a Dropdown provider");return e},ne=({children:e,...o})=>s.jsx(oe,{...o,children:e});ne.displayName="Dropdown";const O=({className:e,ref:o})=>s.jsx("div",{ref:o,className:w.cx("my-md border-b-sm border-outline",e)});O.displayName="Dropdown.Divider";const se=a.createContext(null),be=({children:e})=>{const o=`${b}-group-label-${a.useId()}`;return s.jsx(se.Provider,{value:{labelId:o},children:e})},re=()=>{const e=a.useContext(se);if(!e)throw Error("useDropdownGroupContext must be used within a DropdownGroup provider");return e},R=({children:e,ref:o,...t})=>s.jsx(be,{children:s.jsx(Ne,{ref:o,...t,children:e})}),Ne=({children:e,className:o,ref:t})=>{const{labelId:n}=re();return s.jsx("div",{ref:t,role:"group","aria-labelledby":n,className:w.cx(o),children:e})};R.displayName="Dropdown.Group";const ae=a.createContext(null),Ce=({value:e,disabled:o=!1,children:t})=>{const{multiple:n,itemsMap:d,selectedItem:c,selectedItems:l}=y(),[i,m]=a.useState(void 0),x=ye(d,e),p={disabled:o,value:e,text:M(t)},u=n?l.some(g=>g.value===e):c?.value===e;return s.jsx(ae.Provider,{value:{textId:i,setTextId:m,isSelected:u,itemData:p,index:x,disabled:o},children:t})},$=()=>{const e=a.useContext(ae);if(!e)throw Error("useDropdownItemContext must be used within a DropdownItem provider");return e},q=({children:e,ref:o,...t})=>{const{value:n,disabled:d}=t;return s.jsx(Ce,{value:n,disabled:d,children:s.jsx(je,{ref:o,...t,children:e})})},Pe=w.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"}]}),je=({className:e,disabled:o=!1,value:t,children:n,ref:d})=>{const{getItemProps:c,highlightedItem:l,lastInteractionType:i}=y(),{textId:m,index:x,itemData:p,isSelected:u}=$(),g=l?.value===t,{ref:h,...r}=c({item:p,index:x}),f=T.useMergeRefs(d,h);return s.jsx("li",{ref:f,className:w.cx(Pe({selected:u,disabled:o,highlighted:g,interactionType:i,className:e})),...r,"aria-selected":u,"aria-labelledby":m,children:n},t)};q.displayName="Dropdown.Item";const F=({className:e,children:o,label:t,ref:n})=>{const{disabled:d,isSelected:c}=$(),l=o||s.jsx(E.Icon,{size:"sm",children:s.jsx(we.Check,{"aria-label":t})});return s.jsx("span",{ref:n,className:w.cx("min-h-sz-16 min-w-sz-16 flex",d&&"opacity-dim-3",e),children:c&&l})};F.displayName="Dropdown.ItemIndicator";const L=({children:e,className:o,ref:t,...n})=>{const{isOpen:d,getMenuProps:c,hasPopover:l,setLastInteractionType:i}=y(),{ref:m,...x}=c({onMouseMove:()=>{i("mouse")}}),p=a.useRef(null),u=T.useMergeRefs(t,m,p);return a.useLayoutEffect(()=>{l&&p.current&&p.current.parentElement&&(p.current.parentElement.style.pointerEvents=d?"":"none",p.current.style.pointerEvents=d?"":"none")},[d,l]),s.jsx("ul",{ref:u,className:w.cx(o,"flex flex-col",d?"pointer-events-auto! block":"pointer-events-none invisible absolute opacity-0",l&&"p-lg"),...n,...x,"data-spark-component":"dropdown-items",children:e})};L.displayName="Dropdown.Items";const G=({children:e,ref:o})=>{const t=`${b}-item-text-${a.useId()}`,{setTextId:n}=$();return a.useEffect(()=>(n(t),()=>n(void 0))),s.jsx("span",{id:t,className:w.cx("inline"),ref:o,children:e})};G.displayName="Dropdown.ItemText";const V=({children:e,className:o,ref:t})=>{const{labelId:n}=re();return s.jsx("div",{ref:t,id:n,className:w.cx("px-md py-sm text-body-2 text-neutral italic",o),children:e})};V.displayName="Dropdown.Label";const z=({children:e})=>s.jsx(E.Icon,{size:"sm",className:"shrink-0",children:e});z.displayName="Dropdown.LeadingIcon";const A=({children:e,matchTriggerWidth:o=!0,sideOffset:t=4,className:n,elevation:d="dropdown",ref:c,...l})=>{const i=y();return a.useEffect(()=>(i.setHasPopover(!0),()=>i.setHasPopover(!1)),[]),s.jsx(N.Popover.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:o,elevation:d,className:w.cx("relative",n),sideOffset:t,onOpenAutoFocus:m=>{m.preventDefault()},...l,"data-spark-component":"dropdown-popover",children:e})};A.displayName="Dropdown.Popover";const H=({children:e,...o})=>s.jsx(N.Popover.Portal,{...o,children:e});H.displayName="Dropdown.Portal";const Se=w.cva(["flex w-full items-center justify-between","min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg","text-body-1","ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus"],{variants:{state:{undefined:"ring-outline",error:"ring-error",alert:"ring-alert",success:"ring-success"},disabled:{true:"disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3"},readOnly:{true:"disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3"}},compoundVariants:[{disabled:!1,state:void 0,class:"default:hover:ring-outline-high"}]}),B=({"aria-label":e,children:o,className:t,ref:n})=>{const{getToggleButtonProps:d,getDropdownProps:c,getLabelProps:l,hasPopover:i,disabled:m,readOnly:x,state:p,setLastInteractionType:u}=y(),[g,h]=i?[N.Popover.Trigger,{asChild:!0}]:[a.Fragment,{}],{ref:r,...f}=d({...c(),onKeyDown:()=>{u("keyboard")}}),v=f["aria-expanded"],I=T.useMergeRefs(n,r);return s.jsxs(s.Fragment,{children:[e&&s.jsx(Ie.VisuallyHidden,{children:s.jsx("label",{...l(),children:e})}),s.jsx(g,{...h,children:s.jsxs("button",{type:"button",ref:I,disabled:m||x,className:Se({className:t,state:p,disabled:m,readOnly:x}),...f,"data-spark-component":"dropdown-trigger",children:[s.jsx("span",{className:"gap-md flex items-center justify-start",children:o}),s.jsx(E.Icon,{className:w.cx("ml-md shrink-0 rotate-0 transition duration-100 ease-in",{"rotate-180":v}),size:"sm",children:s.jsx(ge.ArrowHorizontalDown,{})})]})})]})};B.displayName="Dropdown.Trigger";const K=({children:e,className:o,placeholder:t,ref:n})=>{const{selectedItem:d,multiple:c,selectedItems:l}=y(),i=!!(c?l.length:d),m=c?l[0]?.text:d?.text,x=l.length>1?`, +${l.length-1}`:"";return s.jsxs("span",{ref:n,className:w.cx("flex shrink items-center text-left",o),children:[s.jsx("span",{className:w.cx("line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",!i&&"text-on-surface/dim-1"),children:i?e||m:t}),x&&s.jsx("span",{children:x})]})};K.displayName="Dropdown.Value";const ie=Object.assign(ne,{Group:R,Item:q,Items:L,ItemText:G,ItemIndicator:F,Label:V,Popover:A,Divider:O,Trigger:B,Value:K,LeadingIcon:z,Portal:H});ie.displayName="Dropdown";R.displayName="Dropdown.Group";L.displayName="Dropdown.Items";q.displayName="Dropdown.Item";G.displayName="Dropdown.ItemText";F.displayName="Dropdown.ItemIndicator";V.displayName="Dropdown.Label";A.displayName="Dropdown.Popover";O.displayName="Dropdown.Divider";B.displayName="Dropdown.Trigger";K.displayName="Dropdown.Value";z.displayName="Dropdown.LeadingIcon";H.displayName="Dropdown.Portal";exports.Dropdown=ie;exports.DropdownProvider=oe;exports.useDropdownContext=y;
+//# sourceMappingURL=index.js.map