@avenue-ticketing/ui 0.10.0 → 0.12.0-beta.1

package/dist/react/multi-select.js

@@ -0,0 +1,1036 @@
+import { createContext, useState, useRef, useCallback, useContext, isValidElement, useLayoutEffect } from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
+import { useFilter } from 'react-aria';
+import { DialogTrigger, Button as Button$1, Popover, Dialog, Autocomplete, SearchField, Input, ListBox, Label as Label$1, Text, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Link } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import '@phosphor-icons/react/dist/csr/Info';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import '@phosphor-icons/react/dist/csr/Plus';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary hover:*:data-icon:text-fg-quaternary_hover"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
+  }
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
+var HintText = ({ isInvalid, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Size
+        size === "sm" && "text-xs",
+        "in-data-[input-size=sm]:text-xs",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    }
+  );
+};
+HintText.displayName = "HintText";
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button$1, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      "data-label": "true",
+      ...props,
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "hidden text-brand-tertiary",
+              isRequired && "block",
+              typeof isRequired === "undefined" && "group-required:block",
+              isInvalid && "text-error-primary",
+              typeof isInvalid === "undefined" && "group-invalid:text-error-primary"
+            ),
+            children: "*"
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Label.displayName = "Label";
+var iconsSizes = {
+  sm: "*:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+  md: "*:data-icon:size-5",
+  lg: "*:data-icon:size-6",
+  xl: "*:data-icon:size-7"
+};
+var styles2 = sortCx({
+  light: {
+    base: "rounded-full",
+    sizes: {
+      sm: "size-8",
+      md: "size-10",
+      lg: "size-12",
+      xl: "size-14"
+    },
+    colors: {
+      brand: "bg-brand-secondary text-featured-icon-light-fg-brand",
+      gray: "bg-tertiary text-featured-icon-light-fg-gray",
+      error: "bg-error-secondary text-featured-icon-light-fg-error",
+      warning: "bg-warning-secondary text-featured-icon-light-fg-warning",
+      success: "bg-success-secondary text-featured-icon-light-fg-success"
+    }
+  },
+  gradient: {
+    base: "rounded-full text-fg-white before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+    sizes: {
+      sm: "size-8 after:size-6 *:data-icon:size-4",
+      md: "size-10 after:size-7 *:data-icon:size-4",
+      lg: "size-12 after:size-8 *:data-icon:size-5",
+      xl: "size-14 after:size-10 *:data-icon:size-5"
+    },
+    colors: {
+      brand: "before:border-utility-brand-200 before:bg-utility-brand-50 after:bg-brand-solid",
+      gray: "before:border-utility-neutral-200 before:bg-utility-neutral-50 after:bg-secondary-solid",
+      error: "before:border-utility-red-200 before:bg-utility-red-50 after:bg-error-solid",
+      warning: "before:border-utility-yellow-200 before:bg-utility-yellow-50 after:bg-warning-solid",
+      success: "before:border-utility-green-200 before:bg-utility-green-50 after:bg-success-solid"
+    }
+  },
+  dark: {
+    base: "text-fg-white shadow-xs-skeuomorphic before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%",
+    sizes: {
+      sm: "size-8 rounded-md before:rounded-[5px]",
+      md: "size-10 rounded-lg before:rounded-[7px]",
+      lg: "size-12 rounded-[10px] before:rounded-[9px]",
+      xl: "size-14 rounded-xl before:rounded-[11px]"
+    },
+    colors: {
+      brand: "bg-brand-solid before:border-utility-brand-200/12",
+      gray: "bg-secondary-solid before:border-utility-neutral-200/12",
+      error: "bg-error-solid before:border-utility-red-200/12",
+      warning: "bg-warning-solid before:border-utility-yellow-200/12",
+      success: "bg-success-solid before:border-utility-green-200/12"
+    }
+  },
+  modern: {
+    base: "bg-primary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset",
+    sizes: {
+      sm: "size-8 rounded-md",
+      md: "size-10 rounded-lg",
+      lg: "size-12 rounded-[10px]",
+      xl: "size-14 rounded-xl"
+    },
+    colors: {
+      brand: "text-fg-brand-primary",
+      gray: "text-fg-secondary",
+      error: "text-fg-error-primary",
+      warning: "text-fg-warning-primary",
+      success: "text-fg-success-primary"
+    }
+  },
+  "modern-neue": {
+    base: [
+      "bg-primary_alt ring-1 ring-inset before:absolute before:inset-1",
+      // Shadow
+      "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-secondary_alt"
+    ].join(" "),
+    sizes: {
+      sm: "size-8 rounded-[8px] before:rounded-[4px]",
+      md: "size-10 rounded-[10px] before:rounded-[6px]",
+      lg: "size-12 rounded-[12px] before:rounded-[8px]",
+      xl: "size-14 rounded-[14px] before:rounded-[10px]"
+    },
+    colors: {
+      brand: "",
+      gray: "text-fg-secondary ring-primary",
+      error: "",
+      warning: "",
+      success: ""
+    }
+  },
+  outline: {
+    base: "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+    sizes: {
+      sm: "size-4 before:size-6 after:size-8.5",
+      md: "size-5 before:size-7 after:size-9.5",
+      lg: "size-6 before:size-8 after:size-10.5",
+      xl: "size-7 before:size-9 after:size-11.5"
+    },
+    colors: {
+      brand: "text-fg-brand-primary before:border-fg-brand-primary/30 after:border-fg-brand-primary/10",
+      gray: "text-fg-tertiary before:border-fg-tertiary/30 after:border-fg-tertiary/10",
+      error: "text-fg-error-primary before:border-fg-error-primary/30 after:border-fg-error-primary/10",
+      warning: "text-fg-warning-primary before:border-fg-warning-primary/30 after:border-fg-warning-primary/10",
+      success: "text-fg-success-primary before:border-fg-success-primary/30 after:border-fg-success-primary/10"
+    }
+  }
+});
+var FeaturedIcon = (props) => {
+  const { size = "sm", theme: variant = "light", color = "brand", icon: Icon, ...otherProps } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...otherProps,
+      "data-featured-icon": true,
+      className: cx(
+        "relative flex shrink-0 items-center justify-center",
+        iconsSizes[size],
+        styles2[variant].base,
+        styles2[variant].sizes[size],
+        styles2[variant].colors[color],
+        props.className
+      ),
+      children: [
+        isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, { "data-icon": true, className: "z-1" }),
+        isValidElement(Icon) && /* @__PURE__ */ jsx("div", { className: "z-1", children: Icon }),
+        props.children
+      ]
+    }
+  );
+};
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
+  }
+);
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var AvatarCount = ({ count, className }) => /* @__PURE__ */ jsx("div", { className: cx("absolute right-0 bottom-0 p-px", className), children: /* @__PURE__ */ jsx("div", { className: "flex size-3.5 items-center justify-center rounded-full bg-fg-error-primary text-center text-[10px] leading-[13px] font-bold text-white", children: count }) });
+var styles3 = {
+  xs: { root: "size-6", rootWithBorder: "p-px", initials: "text-xs font-semibold", icon: "size-4" },
+  sm: { root: "size-8", rootWithBorder: "p-px", initials: "text-sm font-semibold", icon: "size-5" },
+  md: { root: "size-10", rootWithBorder: "p-px", initials: "text-md font-semibold", icon: "size-6" },
+  lg: { root: "size-12", rootWithBorder: "p-[1.5px]", initials: "text-lg font-semibold", icon: "size-7" },
+  xl: { root: "size-14", rootWithBorder: "p-0.5", initials: "text-xl font-semibold", icon: "size-8" },
+  "2xl": { root: "size-16", rootWithBorder: "p-0.5", initials: "text-display-xs font-semibold", icon: "size-8" }
+};
+var Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
+  className,
+  contentClassName
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const canShowImage = src && !isFailed;
+  const renderMainContent = () => {
+    if (canShowImage) {
+      return /* @__PURE__ */ jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src, alt, onError: () => setIsFailed(true) });
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles3[size].initials), children: initials });
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles3[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles3[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
+    }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-avatar": true,
+      className: cx(
+        "relative inline-flex shrink-0 rounded-[7px]",
+        rounded && "rounded-full",
+        // Focus styles
+        focusable && "outline-none group-focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+        border && "ring-1 ring-secondary_alt",
+        border && styles3[size].rootWithBorder,
+        styles3[size].root,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "relative inline-flex size-full shrink-0 items-center justify-center overflow-hidden rounded-md bg-tertiary outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:inset-[0.5px]",
+              rounded && "rounded-full",
+              canShowImage && size !== "xs" && "before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+              contentClassName
+            ),
+            children: renderMainContent()
+          }
+        ),
+        renderBadgeContent()
+      ]
+    }
+  );
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx("block shrink-0", className), children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
+  const isChecked = isSelected || isIndeterminate;
+  const iconClassName = size === "sm" ? "size-2.5" : "size-3.5";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: cx("pointer-events-none block shrink-0 text-fg-white", iconClassName),
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          }
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { className: cx("pointer-events-none text-fg-white", iconClassName) })
+      ]
+    }
+  );
+};
+CheckboxBase.displayName = "CheckboxBase";
+var sizes3 = {
+  sm: {
+    root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    withIcon: "",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    shortcut: "pr-2.5"
+  },
+  md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
+  lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" }
+};
+var SelectContext = createContext({ size: "md" });
+var sizes4 = {
+  sm: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    check: "size-4 stroke-[2.25px]",
+    checkbox: "sm"
+  },
+  md: {
+    root: "p-2 pr-2.5 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "sm"
+  },
+  lg: {
+    root: "p-2.5 pl-2 gap-2 *:data-icon:size-5",
+    text: "text-md",
+    textContainer: "gap-x-2",
+    check: "size-5",
+    checkbox: "md"
+  }
+};
+var SelectItem = ({
+  label,
+  id,
+  value,
+  avatarUrl,
+  supportingText,
+  isDisabled,
+  icon: Icon,
+  className,
+  children,
+  selectionIndicator = "checkmark",
+  selectionIndicatorAlign = "right",
+  ...props
+}) => {
+  const { size } = useContext(SelectContext);
+  const labelOrChildren = label || (typeof children === "string" ? children : "");
+  const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+  const isLeft = selectionIndicatorAlign === "left";
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      id,
+      value: value ?? {
+        id,
+        label: labelOrChildren,
+        avatarUrl,
+        supportingText,
+        isDisabled,
+        icon: Icon
+      },
+      textValue,
+      isDisabled,
+      ...props,
+      className: (state) => cx("w-full py-px outline-hidden", size === "sm" ? "px-1" : "px-1.5", typeof className === "function" ? className(state) : className),
+      children: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "flex cursor-pointer items-center rounded-md outline-hidden select-none",
+            (state.isFocused || state.isHovered || state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover",
+            state.isDisabled && "cursor-not-allowed opacity-50",
+            // Icon styles
+            "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+            sizes4[size].root
+          ),
+          children: [
+            isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled }),
+            avatarUrl ? /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: cx(size === "sm" && "size-5") }) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement(Icon) ? Icon : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("flex w-full min-w-0 flex-1 flex-wrap", sizes4[size].textContainer), children: [
+              /* @__PURE__ */ jsx(Text, { slot: "label", className: cx("truncate font-medium whitespace-nowrap text-primary", sizes4[size].text), children: label || (typeof children === "function" ? children(state) : children) }),
+              supportingText && /* @__PURE__ */ jsx(Text, { slot: "description", className: cx("whitespace-nowrap text-tertiary", sizes4[size].text), children: supportingText })
+            ] }),
+            state.isSelected && selectionIndicator === "checkmark" && /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true", className: cx("ml-auto text-fg-brand-primary", sizes4[size].check) }),
+            !isLeft && selectionIndicator === "checkbox" && /* @__PURE__ */ jsx(CheckboxBase, { size: sizes4[size].checkbox, isSelected: state.isSelected, isDisabled: state.isDisabled, className: "ml-auto" })
+          ]
+        }
+      )
+    }
+  );
+};
+var searchSizes = {
+  sm: { wrapper: "py-1", root: "px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]", text: "text-sm" },
+  md: { wrapper: "py-0.5", root: "px-3 py-2 gap-2 *:data-icon:size-5", text: "text-md" },
+  lg: { wrapper: "py-0.5", root: "px-3.5 py-2.5 gap-2 *:data-icon:size-5", text: "text-md" }
+};
+var footerButtonSize = {
+  sm: "xs",
+  md: "sm",
+  lg: "sm"
+};
+var popoverMaxHeights = {
+  sm: "max-h-68",
+  md: "max-h-76",
+  lg: "max-h-92"
+};
+var MultiSelectFooter = ({ size = "sm", onReset, onSelectAll, className }) => {
+  const btnSize = footerButtonSize[size];
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex items-center justify-between border-t border-secondary p-3", className), children: [
+    /* @__PURE__ */ jsx(Button, { size: btnSize, color: "secondary", onClick: onReset, children: "Reset" }),
+    /* @__PURE__ */ jsx(Button, { size: btnSize, color: "secondary", onClick: onSelectAll, children: "Select all" })
+  ] });
+};
+var MultiSelectEmptyState = ({
+  title = "No results found",
+  description = "Please try a different search term.",
+  onClearSearch,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col items-center gap-3 px-4 py-4", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsx(FeaturedIcon, { icon: MagnifyingGlassIcon, size: "sm", color: "gray", theme: "modern" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-0.5 text-center text-sm", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold text-primary", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-tertiary", children: description })
+    ] })
+  ] }),
+  onClearSearch && /* @__PURE__ */ jsx(Button, { size: "sm", color: "link-color", onClick: onClearSearch, children: "Clear search" })
+] });
+var MultiSelectRoot = ({
+  items,
+  children,
+  size = "md",
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  isDisabled,
+  isRequired,
+  isInvalid,
+  placeholder = "Select",
+  label,
+  hint,
+  tooltip,
+  hideRequiredIndicator,
+  popoverClassName,
+  className,
+  onReset,
+  onSelectAll,
+  showFooter = true,
+  showSearch = true,
+  emptyStateTitle,
+  emptyStateDescription,
+  selectedCountFormatter,
+  supportingText
+}) => {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const [searchValue, setSearchValue] = useState("");
+  const triggerRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setPopoverWidth(rect.width + "px");
+  }, []);
+  const selectedCount = selectedKeys instanceof Set ? selectedKeys.size : selectedKeys === "all" ? items?.length ?? 0 : 0;
+  const hasSelection = selectedCount > 0;
+  const handleClearSearch = useCallback(() => {
+    setSearchValue("");
+  }, []);
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid, tooltip, children: label }),
+    /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          ref: triggerRef,
+          isDisabled,
+          onClick: onResize,
+          className: (state) => cx(
+            "relative flex w-full cursor-pointer items-center rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+            !isInvalid && (state.isFocusVisible || state.isPressed) && inputFocusRingShadow,
+            isInvalid && !state.isFocusVisible && !state.isPressed && "border-error_subtle",
+            isInvalid && (state.isFocusVisible || state.isPressed) && inputErrorFocusRingShadow,
+            state.isDisabled && "cursor-not-allowed opacity-50"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cx(
+                "flex w-full items-center truncate text-left",
+                sizes3[size].root,
+                "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary"
+              ),
+              children: [
+                hasSelection ? /* @__PURE__ */ jsxs("span", { className: cx("flex items-center", sizes3[size].textContainer), children: [
+                  /* @__PURE__ */ jsx("span", { className: cx("font-medium text-primary", sizes3[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }),
+                  supportingText && /* @__PURE__ */ jsx("span", { className: cx("text-tertiary", sizes3[size].text), children: supportingText })
+                ] }) : /* @__PURE__ */ jsx("span", { className: cx("text-placeholder", sizes3[size].text), children: placeholder }),
+                /* @__PURE__ */ jsx(
+                  CaretDownIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: cx("ml-auto shrink-0 text-fg-quaternary", size === "lg" ? "size-5" : "size-4 stroke-[2.25px]")
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          placement: "bottom",
+          offset: 4,
+          containerPadding: 0,
+          style: { width: popoverWidth || void 0 },
+          className: (state) => cx(
+            "w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+            state.isEntering && "duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+            state.isExiting && "duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+            popoverClassName
+          ),
+          children: /* @__PURE__ */ jsxs(Dialog, { className: "outline-hidden", children: [
+            /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, inputValue: searchValue, onInputChange: setSearchValue, children: [
+              showSearch && /* @__PURE__ */ jsx("div", { className: cx("border-b border-secondary", searchSizes[size].wrapper), children: /* @__PURE__ */ jsx(SearchField, { "aria-label": "Search", value: searchValue, onChange: setSearchValue, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { className: cx("flex items-center", searchSizes[size].root), children: [
+                /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: "Search",
+                    className: cx(
+                      "w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder",
+                      searchSizes[size].text
+                    )
+                  }
+                )
+              ] }) }) }),
+              /* @__PURE__ */ jsx(
+                ListBox,
+                {
+                  "aria-label": label || "Options",
+                  items,
+                  selectionMode: "multiple",
+                  selectedKeys,
+                  defaultSelectedKeys,
+                  onSelectionChange,
+                  renderEmptyState: () => /* @__PURE__ */ jsx(
+                    MultiSelectEmptyState,
+                    {
+                      title: emptyStateTitle,
+                      description: emptyStateDescription,
+                      onClearSearch: searchValue ? handleClearSearch : void 0
+                    }
+                  ),
+                  className: cx("overflow-y-auto py-1 outline-hidden", popoverMaxHeights[size]),
+                  children
+                }
+              )
+            ] }),
+            showFooter && /* @__PURE__ */ jsx(MultiSelectFooter, { size, onReset, onSelectAll })
+          ] })
+        }
+      )
+    ] }),
+    hint && /* @__PURE__ */ jsx(HintText, { isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+  ] }) });
+};
+var MultiSelect = MultiSelectRoot;
+MultiSelect.Item = SelectItem;
+MultiSelect.Footer = MultiSelectFooter;
+MultiSelect.EmptyState = MultiSelectEmptyState;
+
+export { MultiSelect };
+//# sourceMappingURL=multi-select.js.map
+//# sourceMappingURL=multi-select.js.map