@spark-ui/components 10.0.0

package/dist/dropdown/index.js

@@ -0,0 +1,2402 @@
+"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_react12 = require("react");
+
+// src/form-field/FormField.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react4 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+var wrapPolymorphicSlot = (asChild, children, callback) => {
+  if (!asChild) return callback(children);
+  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
+    children,
+    void 0,
+    callback(children.props.children)
+  ) : null;
+};
+
+// src/form-field/FormFieldContext.tsx
+var import_react2 = require("react");
+var FormFieldContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":form-field";
+var useFormField = () => {
+  const context = (0, import_react2.useContext)(FormFieldContext);
+  if (!context) {
+    throw Error("useFormField must be used within a FormField provider");
+  }
+  return context;
+};
+
+// src/form-field/FormFieldProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormFieldProvider = ({
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  state,
+  isRequired,
+  children
+}) => {
+  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
+  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
+  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
+  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => [...ids, msgId]);
+  }, []);
+  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => ids.filter((current) => current !== msgId));
+  }, []);
+  const value = (0, import_react3.useMemo)(() => {
+    const isInvalid = state === "error";
+    return {
+      id,
+      labelId,
+      name,
+      disabled,
+      readOnly,
+      state,
+      isRequired,
+      isInvalid,
+      description,
+      onMessageIdAdd: handleMessageIdAdd,
+      onMessageIdRemove: handleMessageIdRemove
+    };
+  }, [
+    id,
+    labelId,
+    name,
+    disabled,
+    readOnly,
+    description,
+    state,
+    isRequired,
+    handleMessageIdAdd,
+    handleMessageIdRemove
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
+};
+FormFieldProvider.displayName = "FormFieldProvider";
+
+// src/form-field/FormField.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
+}) => {
+  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormFieldProvider,
+    {
+      id,
+      name,
+      isRequired,
+      disabled,
+      readOnly,
+      state,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          ref,
+          "data-spark-component": "form-field",
+          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
+          ...others
+        }
+      )
+    }
+  );
+};
+FormField.displayName = "FormField";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
+var import_Check = require("@spark-ui/icons/Check");
+var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
+var import_class_variance_authority4 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/form-field/FormFieldMessage.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormFieldMessage = ({
+  id: idProp,
+  className,
+  ref,
+  ...others
+}) => {
+  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
+  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
+  const id = idProp || currentId;
+  (0, import_react6.useEffect)(() => {
+    onMessageIdAdd(id);
+    return () => {
+      onMessageIdRemove(id);
+    };
+  }, [id, onMessageIdAdd, onMessageIdRemove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      ref,
+      id,
+      "data-spark-component": "form-field-message",
+      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
+      ...others
+    }
+  );
+};
+FormFieldMessage.displayName = "FormField.Message";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormFieldStateMessage = ({
+  className,
+  state,
+  children,
+  ref,
+  ...others
+}) => {
+  const field = useFormField();
+  if (field.state !== state) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-state-message",
+      "aria-live": "polite",
+      className: (0, import_class_variance_authority4.cx)(
+        "gap-sm flex items-center",
+        state === "error" ? "text-error" : "text-on-surface/dim-1",
+        className
+      ),
+      ...others,
+      children: [
+        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
+        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
+        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
+        children
+      ]
+    }
+  );
+};
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+
+// src/form-field/FormFieldAlertMessage.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldAlertMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-alert-message",
+      state: "alert",
+      ...props
+    }
+  );
+};
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+
+// src/form-field/FormFieldCharactersCount.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormFieldCharactersCount = ({
+  className,
+  value = "",
+  maxLength,
+  ref,
+  ...others
+}) => {
+  const displayValue = `${value.length}/${maxLength}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "form-field-characters-count",
+      className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
+      ...others,
+      children: displayValue
+    }
+  );
+};
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/form-field/FormFieldControl.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useFormFieldControl = () => {
+  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react7.useContext)(FormFieldContext) || {};
+  return {
+    id,
+    name,
+    description,
+    disabled,
+    readOnly,
+    state,
+    labelId,
+    isInvalid,
+    isRequired
+  };
+};
+var FormFieldControl = ({ children }) => {
+  const props = useFormFieldControl();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
+};
+FormFieldControl.displayName = "FormField.Control";
+
+// src/form-field/FormFieldErrorMessage.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormFieldErrorMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-error-message",
+      state: "error",
+      ...props
+    }
+  );
+};
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+
+// src/form-field/FormFieldHelperMessage.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormFieldHelperMessage = ({
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-helper-message",
+      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
+      ...others
+    }
+  );
+};
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+
+// src/form-field/FormFieldLabel.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+
+// src/label/Label.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Label = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui2.Label.Label,
+    {
+      ref,
+      "data-spark-component": "label",
+      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
+      ...others
+    }
+  );
+};
+Label.displayName = "Label";
+
+// src/label/LabelRequiredIndicator.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var LabelRequiredIndicator = ({
+  className,
+  children = "*",
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "label-required-indicator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_class_variance_authority8.cx)(className, "text-caption text-on-surface/dim-1"),
+      ...others,
+      children
+    }
+  );
+};
+LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
+
+// src/label/index.ts
+var Label2 = Object.assign(Label, {
+  RequiredIndicator: LabelRequiredIndicator
+});
+Label2.displayName = "Label";
+LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
+
+// src/form-field/FormFieldRequiredIndicator.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FormFieldRequiredIndicator = ({
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
+};
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+
+// src/form-field/FormFieldLabel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormFieldLabel = ({
+  htmlFor: htmlForProp,
+  className,
+  children,
+  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
+  asChild,
+  ref,
+  ...others
+}) => {
+  const control = useFormField();
+  const { disabled, labelId, isRequired } = control;
+  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Label2,
+    {
+      ref,
+      id: labelId,
+      "data-spark-component": "form-field-label",
+      htmlFor,
+      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+      asChild,
+      ...others,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
+        isRequired && requiredIndicator
+      ] })
+    }
+  );
+};
+FormFieldLabel.displayName = "FormField.Label";
+
+// src/form-field/FormFieldSuccessMessage.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FormFieldSuccessMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-success-message",
+      state: "success",
+      ...props
+    }
+  );
+};
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+
+// src/form-field/index.ts
+var FormField2 = Object.assign(FormField, {
+  Label: FormFieldLabel,
+  Control: FormFieldControl,
+  StateMessage: FormFieldStateMessage,
+  SuccessMessage: FormFieldSuccessMessage,
+  AlertMessage: FormFieldAlertMessage,
+  ErrorMessage: FormFieldErrorMessage,
+  HelperMessage: FormFieldHelperMessage,
+  RequiredIndicator: FormFieldRequiredIndicator,
+  CharactersCount: FormFieldCharactersCount
+});
+FormField2.displayName = "FormField";
+FormFieldLabel.displayName = "FormField.Label";
+FormFieldControl.displayName = "FormField.Control";
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/popover/Popover.tsx
+var import_radix_ui3 = require("radix-ui");
+
+// src/popover/PopoverContext.tsx
+var import_react8 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var PopoverContext = (0, import_react8.createContext)(null);
+var ID_PREFIX2 = ":popover";
+var PopoverProvider = ({
+  children,
+  intent
+}) => {
+  const [headerId, setHeaderId] = (0, import_react8.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    PopoverContext.Provider,
+    {
+      value: {
+        headerId,
+        setHeaderId,
+        intent
+      },
+      children
+    }
+  );
+};
+var usePopover = () => {
+  const context = (0, import_react8.useContext)(PopoverContext);
+  if (!context) {
+    throw Error("usePopover must be used within a Popover provider");
+  }
+  return context;
+};
+
+// src/popover/Popover.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui3.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
+};
+Popover.displayName = "Popover";
+
+// src/popover/PopoverAnchor.tsx
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui4.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
+Anchor.displayName = "Popover.Anchor";
+
+// src/popover/PopoverArrow.tsx
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Arrow = ({
+  asChild = false,
+  width = 16,
+  height = 8,
+  className,
+  ref,
+  ...rest
+}) => {
+  const { intent } = usePopover();
+  const styles4 = (0, import_class_variance_authority11.cva)("visible", {
+    variants: {
+      intent: {
+        surface: "fill-surface",
+        main: "fill-main-container",
+        support: "fill-support-container",
+        accent: "fill-accent-container",
+        basic: "fill-basic-container",
+        success: "fill-success-container",
+        alert: "fill-alert-container",
+        danger: "fill-error-container",
+        info: "fill-info-container",
+        neutral: "fill-neutral-container"
+      }
+    },
+    defaultVariants: {
+      intent: "surface"
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_radix_ui5.Popover.Arrow,
+    {
+      "data-spark-component": "popover-arrow",
+      ref,
+      className: styles4({ intent, className }),
+      asChild,
+      width,
+      height,
+      ...rest
+    }
+  );
+};
+Arrow.displayName = "Popover.Arrow";
+
+// src/popover/PopoverCloseButton.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_radix_ui6 = require("radix-ui");
+
+// src/button/Button.tsx
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_react9 = require("react");
+
+// src/spinner/Spinner.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority12 = require("class-variance-authority");
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = (0, import_class_variance_authority12.cva)(
+  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
+  {
+    variants: {
+      /**
+       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
+       */
+      size: {
+        current: ["u-current-font-size"],
+        sm: ["w-sz-20", "h-sz-20"],
+        md: ["w-sz-28", "h-sz-28"],
+        full: ["w-full", "h-full"]
+      },
+      /**
+       * Color scheme of the spinner.
+       */
+      intent: (0, import_internal_utils2.makeVariants)({
+        current: ["border-current"],
+        main: ["border-main"],
+        support: ["border-support"],
+        accent: ["border-accent"],
+        basic: ["border-basic"],
+        success: ["border-success"],
+        alert: ["border-alert"],
+        error: ["border-error"],
+        info: ["border-info"],
+        neutral: ["border-neutral"]
+      }),
+      /**
+       * Size of the button.
+       */
+      isBackgroundVisible: {
+        true: ["border-b-neutral-container", "border-l-neutral-container"],
+        false: ["border-b-transparent", "border-l-transparent"]
+      }
+    },
+    defaultVariants
+  }
+);
+
+// src/spinner/Spinner.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VisuallyHidden, { children: label })
+    }
+  );
+};
+
+// src/button/Button.styles.tsx
+var import_internal_utils8 = require("@spark-ui/internal-utils");
+var import_class_variance_authority13 = require("class-variance-authority");
+
+// src/button/variants/filled.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var filledVariants = [
+  // Main
+  {
+    intent: "main",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-main",
+      "text-on-main",
+      "hover:bg-main-hovered",
+      "enabled:active:bg-main-hovered",
+      "focus-visible:bg-main-hovered"
+    ])
+  },
+  // Support
+  {
+    intent: "support",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-support",
+      "text-on-support",
+      "hover:bg-support-hovered",
+      "enabled:active:bg-support-hovered",
+      "focus-visible:bg-support-hovered"
+    ])
+  },
+  // Accent
+  {
+    intent: "accent",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-accent",
+      "text-on-accent",
+      "hover:bg-accent-hovered",
+      "enabled:active:bg-accent-hovered",
+      "focus-visible:bg-accent-hovered"
+    ])
+  },
+  // Basic
+  {
+    intent: "basic",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-basic",
+      "text-on-basic",
+      "hover:bg-basic-hovered",
+      "enabled:active:bg-basic-hovered",
+      "focus-visible:bg-basic-hovered"
+    ])
+  },
+  // Success
+  {
+    intent: "success",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-success",
+      "text-on-success",
+      "hover:bg-success-hovered",
+      "enabled:active:bg-success-hovered",
+      "focus-visible:bg-success-hovered"
+    ])
+  },
+  // Alert
+  {
+    intent: "alert",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-alert",
+      "text-on-alert",
+      "hover:bg-alert-hovered",
+      "enabled:active:bg-alert-hovered",
+      "focus-visible:bg-alert-hovered"
+    ])
+  },
+  // Danger
+  {
+    intent: "danger",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-error",
+      "hover:bg-error-hovered enabled:active:bg-error-hovered",
+      "focus-visible:bg-error-hovered"
+    ])
+  },
+  // Info
+  {
+    intent: "info",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-info",
+      "hover:bg-info-hovered enabled:active:bg-info-hovered",
+      "focus-visible:bg-info-hovered"
+    ])
+  },
+  // Neutral
+  {
+    intent: "neutral",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-neutral",
+      "text-on-neutral",
+      "hover:bg-neutral-hovered",
+      "enabled:active:bg-neutral-hovered",
+      "focus-visible:bg-neutral-hovered"
+    ])
+  },
+  // Surface
+  {
+    intent: "surface",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/variants/ghost.ts
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var ghostVariants = [
+  {
+    intent: "main",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-main",
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5"
+    ])
+  },
+  {
+    intent: "support",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-support",
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-accent",
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-basic",
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5"
+    ])
+  },
+  {
+    intent: "success",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-success",
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-alert",
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-error",
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5"
+    ])
+  },
+  {
+    intent: "info",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-info",
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-neutral",
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface",
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5"
+    ])
+  }
+];
+
+// src/button/variants/outlined.ts
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "text-support"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "text-surface"
+    ])
+  }
+];
+
+// src/button/variants/tinted.ts
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-main-container",
+      "text-on-main-container",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-support-container",
+      "text-on-support-container",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-accent-container",
+      "text-on-accent-container",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-basic-container",
+      "text-on-basic-container",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-success-container",
+      "text-on-success-container",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-alert-container",
+      "text-on-alert-container",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-error-container",
+      "text-on-error-container",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-info-container",
+      "text-on-info-container",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-neutral-container",
+      "text-on-neutral-container",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/variants/contrast.ts
+var import_internal_utils7 = require("@spark-ui/internal-utils");
+var contrastVariants = [
+  {
+    intent: "main",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-main",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-support",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-accent",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-basic",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-success",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-alert",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-error",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-info",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-neutral",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  }
+];
+
+// src/button/Button.styles.tsx
+var buttonStyles = (0, import_class_variance_authority13.cva)(
+  [
+    "u-shadow-border-transition",
+    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+    "px-lg",
+    "text-body-1 font-bold",
+    "focus-visible:u-outline"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the button.
+       *
+       * - `filled`: Button will be plain.
+       *
+       * - `outlined`: Button will be transparent with an outline.
+       *
+       * - `tinted`: Button will be filled but using a lighter color scheme.
+       *
+       * - `ghost`: Button will look like a link. No borders, plain text.
+       *
+       * - `contrast`: Button will be surface filled. No borders, plain text.
+       *
+       */
+      design: (0, import_internal_utils8.makeVariants)({
+        filled: [],
+        outlined: ["bg-transparent", "border-sm", "border-current"],
+        tinted: [],
+        ghost: [],
+        contrast: ["bg-surface"]
+      }),
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils8.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: []
+      }),
+      /**
+       * Size of the button.
+       */
+      size: (0, import_internal_utils8.makeVariants)({
+        sm: ["min-w-sz-32", "h-sz-32"],
+        md: ["min-w-sz-44", "h-sz-44"],
+        lg: ["min-w-sz-56", "h-sz-56"]
+      }),
+      /**
+       * Shape of the button.
+       */
+      shape: (0, import_internal_utils8.makeVariants)({
+        rounded: ["rounded-lg"],
+        square: ["rounded-0"],
+        pill: ["rounded-full"]
+      }),
+      /**
+       * Disable the button, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"],
+        false: ["cursor-pointer"]
+      }
+    },
+    compoundVariants: [
+      ...filledVariants,
+      ...outlinedVariants,
+      ...tintedVariants,
+      ...ghostVariants,
+      ...contrastVariants
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "main",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+
+// src/button/Button.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var blockedEventHandlers = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseOver",
+  "onMouseOut",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onSubmit"
+];
+var Button = ({
+  children,
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = "rounded",
+  size = "md",
+  asChild,
+  className,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "button";
+  const shouldNotInteract = !!disabled || isLoading;
+  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
+    const result = {};
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
+    }
+    return result;
+  }, [shouldNotInteract]);
+  const spinnerProps = {
+    size: "current",
+    className: loadingText ? "inline-block" : "absolute",
+    ...loadingLabel && { "aria-label": loadingLabel }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Component,
+    {
+      "data-spark-component": "button",
+      ...Component === "button" && { type: "button" },
+      ref,
+      className: buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size
+      }),
+      disabled: !!disabled,
+      "aria-busy": isLoading,
+      "aria-live": isLoading ? "assertive" : "off",
+      ...others,
+      ...disabledEventHandlers,
+      children: wrapPolymorphicSlot(
+        asChild,
+        children,
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Spinner, { ...spinnerProps }),
+          loadingText && loadingText,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: (0, import_class_variance_authority14.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              children: slotted
+            }
+          )
+        ] }) : slotted
+      )
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/icon-button/IconButton.styles.tsx
+var import_internal_utils9 = require("@spark-ui/internal-utils");
+var import_class_variance_authority15 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority15.cva)(["pl-0 pr-0"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Button,
+    {
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/popover/PopoverCloseButton.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CloseButton = ({
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_radix_ui6.Popover.Close,
+    {
+      "data-spark-component": "popover-close-button",
+      ref,
+      className: (0, import_class_variance_authority16.cx)("right-md top-md absolute", className),
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_Close.Close, {}) }) })
+    }
+  );
+};
+CloseButton.displayName = "Popover.CloseButton";
+
+// src/popover/PopoverContent.tsx
+var import_radix_ui7 = require("radix-ui");
+
+// src/popover/PopoverContent.styles.ts
+var import_class_variance_authority17 = require("class-variance-authority");
+var styles = (0, import_class_variance_authority17.cva)(
+  [
+    "rounded-md",
+    "shadow-sm",
+    "focus-visible:outline-hidden focus-visible:u-outline",
+    "max-h-(--radix-popper-available-height) overflow-y-auto"
+  ],
+  {
+    variants: {
+      intent: {
+        surface: "bg-surface text-on-surface",
+        main: "bg-main-container text-on-main-container",
+        support: "bg-support-container text-on-support-container",
+        accent: "bg-accent-container text-on-accent-container",
+        basic: "bg-basic-container text-on-basic-container",
+        success: "bg-success-container text-on-success-container",
+        alert: "bg-alert-container text-on-alert-container",
+        danger: "bg-error-container text-on-error-container",
+        info: "bg-info-container text-on-info-container",
+        neutral: "bg-neutral-container text-on-neutral-container"
+      },
+      matchTriggerWidth: {
+        true: "w-(--radix-popper-anchor-width)"
+      },
+      enforceBoundaries: {
+        true: ["max-w-(--radix-popper-available-width)"]
+      },
+      inset: {
+        true: "overflow-hidden",
+        false: "p-lg"
+      },
+      elevation: {
+        dropdown: "z-dropdown",
+        popover: "z-popover"
+      }
+    },
+    compoundVariants: [
+      {
+        inset: false,
+        /**
+         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
+         */
+        class: "has-data-[spark-component=popover-close-button]:pr-3xl"
+      },
+      {
+        enforceBoundaries: false,
+        matchTriggerWidth: false,
+        class: "max-w-[min(var(--spacing-sz-384),100vw)]"
+      }
+    ],
+    defaultVariants: {
+      matchTriggerWidth: false,
+      enforceBoundaries: false,
+      inset: false,
+      intent: "surface",
+      elevation: "popover"
+    }
+  }
+);
+
+// src/popover/PopoverContent.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Content = ({
+  // Spark props
+  className,
+  children,
+  matchTriggerWidth = false,
+  // Radix props
+  align = "center",
+  arrowPadding = 16,
+  // In order not to overlap the arrow on the rounded corners of the popover.
+  asChild = false,
+  avoidCollisions = true,
+  "aria-labelledby": ariaLabelledBy,
+  collisionBoundary,
+  collisionPadding = 0,
+  hideWhenDetached = false,
+  side = "bottom",
+  sideOffset = 8,
+  sticky = "partial",
+  inset = false,
+  elevation = "popover",
+  ref,
+  ...rest
+}) => {
+  const { headerId, intent } = usePopover();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_radix_ui7.Popover.Content,
+    {
+      "aria-labelledby": headerId || ariaLabelledBy,
+      className: styles({
+        enforceBoundaries: !!collisionBoundary,
+        matchTriggerWidth,
+        inset,
+        elevation,
+        intent,
+        className
+      }),
+      "data-spark-component": "popover-content",
+      ref,
+      ...{
+        align,
+        arrowPadding,
+        asChild,
+        avoidCollisions,
+        collisionBoundary,
+        collisionPadding,
+        hideWhenDetached,
+        side,
+        sideOffset,
+        sticky
+      },
+      ...rest,
+      children
+    }
+  );
+};
+Content.displayName = "Popover.Content";
+
+// src/popover/PopoverHeader.tsx
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_react10 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Header = ({ children, className, ref, ...rest }) => {
+  const id = `${ID_PREFIX2}-header-${(0, import_react10.useId)()}`;
+  const { setHeaderId } = usePopover();
+  (0, import_react10.useLayoutEffect)(() => {
+    setHeaderId(id);
+    return () => setHeaderId(null);
+  }, [id, setHeaderId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("header", { id, ref, className: (0, import_class_variance_authority18.cx)("mb-md text-headline-2", className), ...rest, children });
+};
+Header.displayName = "Popover.Header";
+
+// src/popover/PopoverPortal.tsx
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_radix_ui8.Popover.Portal, { ...rest, children });
+Portal.displayName = "Popover.Portal";
+
+// src/popover/PopoverTrigger.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  import_radix_ui9.Popover.Trigger,
+  {
+    "data-spark-component": "popover-trigger",
+    ref,
+    asChild,
+    ...rest,
+    children
+  }
+);
+Trigger.displayName = "Popover.Trigger";
+
+// src/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Anchor,
+  Arrow,
+  CloseButton,
+  Content,
+  Header,
+  Portal,
+  Trigger
+});
+Popover2.displayName = "Popover";
+Anchor.displayName = "Popover.Anchor";
+Arrow.displayName = "Popover.Arrow";
+CloseButton.displayName = "Popover.CloseButton";
+Content.displayName = "Popover.Content";
+Header.displayName = "Popover.Header";
+Portal.displayName = "Popover.Portal";
+Trigger.displayName = "Popover.Trigger";
+
+// src/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_react11 = require("react");
+function getIndexByKey(map, targetKey) {
+  let index = 0;
+  for (const [key] of map.entries()) {
+    if (key === targetKey) {
+      return index;
+    }
+    index++;
+  }
+  return -1;
+}
+var getKeyAtIndex = (map, index) => {
+  let i = 0;
+  for (const key of map.keys()) {
+    if (i === index) return key;
+    i++;
+  }
+  return void 0;
+};
+var getElementByIndex = (map, index) => {
+  const key = getKeyAtIndex(map, index);
+  return key !== void 0 ? map.get(key) : void 0;
+};
+var getElementDisplayName = (element) => {
+  return element ? element.type.displayName : "";
+};
+var getOrderedItems = (children, result = []) => {
+  import_react11.Children.forEach(children, (child) => {
+    if (!(0, import_react11.isValidElement)(child)) return;
+    if (getElementDisplayName(child) === "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_react11.Children.forEach(children, (child) => {
+    if (!(0, import_react11.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_react11.Children.toArray(children).some((child) => {
+    if (!(0, import_react11.isValidElement)(child)) return false;
+    if (getElementDisplayName(child) === displayName) {
+      return true;
+    } else if (child.props.children) {
+      return hasChildComponent(child.props.children, displayName);
+    }
+    return false;
+  });
+};
+
+// src/dropdown/DropdownContext.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DropdownContext = (0, import_react12.createContext)(null);
+var ID_PREFIX3 = ":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_react12.useState)(getItemsFromChildren(children));
+  const [hasPopover, setHasPopover] = (0, import_react12.useState)(
+    hasChildComponent(children, "Dropdown.Popover")
+  );
+  const [lastInteractionType, setLastInteractionType] = (0, import_react12.useState)("mouse");
+  const field = useFormFieldControl();
+  const state = field.state || stateProp;
+  const internalFieldLabelID = `${ID_PREFIX3}-label-${(0, import_react12.useId)()}`;
+  const internalFieldID = `${ID_PREFIX3}-input-${(0, import_react12.useId)()}`;
+  const 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_react12.useEffect)(() => {
+    const newMap = getItemsFromChildren(children);
+    const previousItems = [...itemsMap.values()];
+    const newItems = [...newMap.values()];
+    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
+      const hasUpdatedValue = item.value !== newItems[index]?.value;
+      const hasUpdatedText = item.text !== newItems[index]?.text;
+      return hasUpdatedValue || hasUpdatedText;
+    });
+    if (hasItemsChanges) {
+      setItemsMap(newMap);
+    }
+  }, [children]);
+  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover2, { open: true }] : [import_react12.Fragment, {}];
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    DropdownContext.Provider,
+    {
+      value: {
+        multiple,
+        disabled,
+        readOnly,
+        ...dropdownState,
+        itemsMap,
+        highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),
+        hasPopover,
+        setHasPopover,
+        state,
+        lastInteractionType,
+        setLastInteractionType
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(WrapperComponent, { ...wrapperProps, children })
+    }
+  );
+};
+var useDropdownContext = () => {
+  const context = (0, import_react12.useContext)(DropdownContext);
+  if (!context) {
+    throw Error("useDropdownContext must be used within a Dropdown provider");
+  }
+  return context;
+};
+
+// src/dropdown/Dropdown.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Dropdown = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DropdownProvider, { ...props, children });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/dropdown/DropdownDivider.tsx
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Divider = ({ className, ref: forwardedRef }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: forwardedRef, className: (0, import_class_variance_authority19.cx)("my-md border-b-sm border-outline", className) });
+};
+Divider.displayName = "Dropdown.Divider";
+
+// src/dropdown/DropdownGroup.tsx
+var import_class_variance_authority20 = require("class-variance-authority");
+
+// src/dropdown/DropdownItemsGroupContext.tsx
+var import_react13 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var DropdownGroupContext = (0, import_react13.createContext)(null);
+var DropdownGroupProvider = ({ children }) => {
+  const labelId = `${ID_PREFIX3}-group-label-${(0, import_react13.useId)()}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownGroupContext.Provider, { value: { labelId }, children });
+};
+var useDropdownGroupContext = () => {
+  const context = (0, import_react13.useContext)(DropdownGroupContext);
+  if (!context) {
+    throw Error("useDropdownGroupContext must be used within a DropdownGroup provider");
+  }
+  return context;
+};
+
+// src/dropdown/DropdownGroup.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Group = ({ children, ref: forwardedRef, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GroupContent, { ref: forwardedRef, ...props, children }) });
+};
+var GroupContent = ({ children, className, ref: forwardedRef }) => {
+  const { labelId } = useDropdownGroupContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: forwardedRef, role: "group", "aria-labelledby": labelId, className: (0, import_class_variance_authority20.cx)(className), children });
+};
+Group.displayName = "Dropdown.Group";
+
+// src/dropdown/DropdownItem.tsx
+var import_use_merge_refs = require("@spark-ui/use-merge-refs");
+var import_class_variance_authority21 = require("class-variance-authority");
+
+// src/dropdown/DropdownItemContext.tsx
+var import_react14 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var DropdownItemContext = (0, import_react14.createContext)(null);
+var DropdownItemProvider = ({
+  value,
+  disabled = false,
+  children
+}) => {
+  const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext();
+  const [textId, setTextId] = (0, import_react14.useState)(void 0);
+  const index = getIndexByKey(itemsMap, value);
+  const itemData = { disabled, value, text: getItemText(children) };
+  const isSelected = multiple ? selectedItems.some((selectedItem2) => selectedItem2.value === value) : selectedItem?.value === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    DropdownItemContext.Provider,
+    {
+      value: { textId, setTextId, isSelected, itemData, index, disabled },
+      children
+    }
+  );
+};
+var useDropdownItemContext = () => {
+  const context = (0, import_react14.useContext)(DropdownItemContext);
+  if (!context) {
+    throw Error("useDropdownItemContext must be used within a DropdownItem provider");
+  }
+  return context;
+};
+
+// src/dropdown/DropdownItem.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Item = ({ children, ref: forwardedRef, ...props }) => {
+  const { value, disabled } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemContent, { ref: forwardedRef, ...props, children }) });
+};
+var styles2 = (0, import_class_variance_authority21.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_runtime36.jsx)(
+    "li",
+    {
+      ref,
+      className: (0, import_class_variance_authority21.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_Check2 = require("@spark-ui/icons/Check");
+var import_class_variance_authority22 = require("class-variance-authority");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ItemIndicator = ({
+  className,
+  children,
+  label,
+  ref: forwardedRef
+}) => {
+  const { disabled, isSelected } = useDropdownItemContext();
+  const childElement = children || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Check2.Check, { "aria-label": label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      className: (0, import_class_variance_authority22.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/use-merge-refs");
+var import_class_variance_authority23 = require("class-variance-authority");
+var import_react15 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Items = ({ children, className, ref: forwardedRef, ...props }) => {
+  const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext();
+  const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({
+    onMouseMove: () => {
+      setLastInteractionType("mouse");
+    }
+  });
+  const innerRef = (0, import_react15.useRef)(null);
+  const ref = (0, import_use_merge_refs2.useMergeRefs)(forwardedRef, downshiftRef, innerRef);
+  (0, import_react15.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_runtime38.jsx)(
+    "ul",
+    {
+      ref,
+      className: (0, import_class_variance_authority23.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_authority24 = require("class-variance-authority");
+var import_react16 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ItemText = ({ children, ref: forwardedRef }) => {
+  const id = `${ID_PREFIX3}-item-text-${(0, import_react16.useId)()}`;
+  const { setTextId } = useDropdownItemContext();
+  (0, import_react16.useEffect)(() => {
+    setTextId(id);
+    return () => setTextId(void 0);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id, className: (0, import_class_variance_authority24.cx)("inline"), ref: forwardedRef, children });
+};
+ItemText.displayName = "Dropdown.ItemText";
+
+// src/dropdown/DropdownLabel.tsx
+var import_class_variance_authority25 = require("class-variance-authority");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Label3 = ({ children, className, ref: forwardedRef }) => {
+  const { labelId } = useDropdownGroupContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      id: labelId,
+      className: (0, import_class_variance_authority25.cx)("px-md py-sm text-body-2 text-neutral italic", className),
+      children
+    }
+  );
+};
+Label3.displayName = "Dropdown.Label";
+
+// src/dropdown/DropdownLeadingIcon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var LeadingIcon = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { size: "sm", className: "shrink-0", children });
+};
+LeadingIcon.displayName = "Dropdown.LeadingIcon";
+
+// src/dropdown/DropdownPopover.tsx
+var import_class_variance_authority26 = require("class-variance-authority");
+var import_react17 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var Popover3 = ({
+  children,
+  matchTriggerWidth = true,
+  sideOffset = 4,
+  className,
+  elevation = "dropdown",
+  ref: forwardedRef,
+  ...props
+}) => {
+  const ctx = useDropdownContext();
+  (0, import_react17.useEffect)(() => {
+    ctx.setHasPopover(true);
+    return () => ctx.setHasPopover(false);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Popover2.Content,
+    {
+      ref: forwardedRef,
+      inset: true,
+      asChild: true,
+      matchTriggerWidth,
+      elevation,
+      className: (0, import_class_variance_authority26.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_runtime43 = require("react/jsx-runtime");
+var Portal2 = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Popover2.Portal, { ...rest, children });
+Portal2.displayName = "Dropdown.Portal";
+
+// src/dropdown/DropdownTrigger.tsx
+var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
+var import_use_merge_refs3 = require("@spark-ui/use-merge-refs");
+var import_class_variance_authority28 = require("class-variance-authority");
+var import_react18 = require("react");
+
+// src/dropdown/DropdownTrigger.styles.tsx
+var import_class_variance_authority27 = require("class-variance-authority");
+var styles3 = (0, import_class_variance_authority27.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"
+  ],
+  {
+    variants: {
+      state: {
+        undefined: "ring-outline focus:ring-outline-high",
+        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: "hover:ring-outline-high"
+      }
+    ]
+  }
+);
+
+// src/dropdown/DropdownTrigger.tsx
+var import_jsx_runtime44 = 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_react18.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_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    ariaLabel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { ...getLabelProps(), children: ariaLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WrapperComponent, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      "button",
+      {
+        type: "button",
+        ref,
+        disabled: disabled || readOnly,
+        className: styles3({ className, state, disabled, readOnly }),
+        ...downshiftTriggerProps,
+        "data-spark-component": "dropdown-trigger",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "gap-md flex items-center justify-start", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            Icon,
+            {
+              className: (0, import_class_variance_authority28.cx)("ml-md shrink-0 rotate-0 transition duration-100 ease-in", {
+                "rotate-180": isExpanded
+              }),
+              size: "sm",
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+Trigger2.displayName = "Dropdown.Trigger";
+
+// src/dropdown/DropdownValue.tsx
+var import_class_variance_authority29 = require("class-variance-authority");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Value = ({ children, className, placeholder, ref: forwardedRef }) => {
+  const { selectedItem, multiple, selectedItems } = useDropdownContext();
+  const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem);
+  const text = multiple ? selectedItems[0]?.text : selectedItem?.text;
+  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { ref: forwardedRef, className: (0, import_class_variance_authority29.cx)("flex shrink items-center text-left", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "span",
+      {
+        className: (0, import_class_variance_authority29.cx)(
+          "line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis",
+          !hasSelectedItems && "text-on-surface/dim-1"
+        ),
+        children: !hasSelectedItems ? placeholder : children || text
+      }
+    ),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: suffix })
+  ] });
+};
+Value.displayName = "Dropdown.Value";
+
+// src/dropdown/index.ts
+var Dropdown2 = Object.assign(Dropdown, {
+  Group,
+  Item,
+  Items,
+  ItemText,
+  ItemIndicator,
+  Label: Label3,
+  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";
+Label3.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