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

package/dist/react/select.js

@@ -1,983 +1,685 @@
-import * as React2 from 'react';
-import { useCallback, useState, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { X, ChevronDown, Check } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, isValidElement, useRef, useState, useCallback, useContext, useEffect, useLayoutEffect } from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
+import { Select as Select$1, ListBox, Label as Label$1, Button, SelectValue as SelectValue$1, Popover as Popover$1, Text, ComboBox as ComboBox$1, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, ComboBoxStateContext, Group, Input } from 'react-aria-components';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { extendTailwindMerge } from 'tailwind-merge';
+import '@phosphor-icons/react/dist/csr/Plus';
+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 { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var sizeClass = {
-  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
-  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
-  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
-};
-var iconOnlySizeClass = {
-  xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
-  default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
-  lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+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 roundedClass = {
-  full: "rounded-full",
-  lg: "rounded-lg",
-  md: "rounded-md"
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
 };
-var variantClass = {
-  primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
-  secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
-  destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
-  success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
+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 Button = React2.forwardRef(
-  ({
-    className,
-    type = "button",
-    variant = "secondary",
-    rounded: roundedProp,
-    size = "default",
-    iconOnly = false,
-    disabled,
-    ...props
-  }, ref) => {
-    const rounded = roundedProp ?? (iconOnly ? "md" : "full");
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type,
-        disabled,
-        "data-slot": "button",
-        "data-icon-only": iconOnly ? "" : void 0,
-        className: cn(
-          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
-          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
-          roundedClass[rounded],
-          variantClass[variant],
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
+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" })
+      ] }) })
+    ] })
   }
 );
-Button.displayName = "Button";
-
-// src/lib/typeahead.ts
-var TYPEAHEAD_TIMEOUT_MS = 500;
-function createTypeaheadState() {
-  return { search: "", timer: null };
-}
-function resetTypeahead(state) {
-  state.search = "";
-  if (state.timer) {
-    clearTimeout(state.timer);
-    state.timer = null;
-  }
-}
-function getItemLabel(item) {
-  const aria = item.getAttribute("aria-label")?.trim();
-  if (aria) return aria;
-  const marked = item.querySelector("[data-menu-label]");
-  if (marked?.textContent) return marked.textContent.replace(/\s+/g, " ").trim();
-  return (item.textContent ?? "").replace(/\s+/g, " ").trim();
-}
-function normalizeSearch(value) {
-  return value.trim().toLocaleLowerCase();
-}
-function isTypeaheadTarget(target) {
-  if (!(target instanceof HTMLElement)) return true;
-  if (target.isContentEditable) return false;
-  const tag = target.tagName;
-  return tag !== "INPUT" && tag !== "TEXTAREA" && tag !== "SELECT";
-}
-function handleTypeaheadKeyDown(event, items, state, options) {
-  if (options?.enabled === false || items.length === 0) return false;
-  if (event.ctrlKey || event.metaKey || event.altKey) return false;
-  if (event.key.length !== 1 || !isTypeaheadTarget(event.target)) return false;
-  event.preventDefault();
-  const timeoutMs = options?.timeoutMs ?? TYPEAHEAD_TIMEOUT_MS;
-  const char = event.key;
-  const prevSearch = state.search;
-  const repeatSingleChar = prevSearch.length === 1 && prevSearch === char;
-  if (repeatSingleChar) {
-    state.search = prevSearch;
-  } else {
-    state.search = prevSearch + char;
-  }
-  if (state.timer) clearTimeout(state.timer);
-  state.timer = setTimeout(() => {
-    state.search = "";
-    state.timer = null;
-  }, timeoutMs);
-  const labels = items.map((item) => normalizeSearch(getItemLabel(item)));
-  let needle = normalizeSearch(state.search);
-  let matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
-  if (matches.length === 0 && state.search.length > 1) {
-    state.search = char;
-    needle = normalizeSearch(char);
-    matches = items.map((item, index) => ({ item, index, label: labels[index] })).filter(({ label }) => label.startsWith(needle));
-  }
-  if (matches.length === 0) return true;
-  const focused = document.activeElement;
-  const focusedIndex = focused ? items.indexOf(focused) : -1;
-  if (repeatSingleChar && focusedIndex !== -1) {
-    const currentMatch = matches.findIndex(
-      ({ index }) => index === focusedIndex
-    );
-    if (currentMatch !== -1) {
-      const next = matches[(currentMatch + 1) % matches.length];
-      next?.item.focus();
-      return true;
+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"
     }
-  }
-  if (focusedIndex !== -1) {
-    const nextAfterFocus = matches.find(({ index }) => index > focusedIndex);
-    if (nextAfterFocus) {
-      nextAfterFocus.item.focus();
-      return true;
+  ),
+  /* @__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"
     }
-  }
-  matches[0]?.item.focus();
-  return true;
-}
-var PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
-var PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
-var MOBILE_SHEET_MAX_PX = 1024;
-var MOBILE_SHEET_MS = 175;
-var MOBILE_SHEET_IN = "cubic-bezier(0.85, 0, 0.15, 1)";
-var MOBILE_SHEET_OUT = "cubic-bezier(0.85, 0, 1, 0.15)";
-var SLIDE_DEFAULT_PX = 120;
-var SHEET_MENU_TEXT = "max-[1024px]:text-base";
-var SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
-var SELECT_FLIP_MIN_SPACE_PX = 100;
-var CONTENT_ORIGIN = {
-  bottom: "top center",
-  top: "bottom center",
-  left: "right center",
-  right: "left center"
-};
-var CONTENT_HIDDEN = {
-  bottom: "translateY(-4px) scale(0.97)",
-  top: "translateY(4px) scale(0.97)",
-  left: "translateX(4px) scale(0.97)",
-  right: "translateX(-4px) scale(0.97)"
+  )
+] });
+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 styles = {
+  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" }
 };
-function computeMenuPosition(trigger, menu, side, align, offset, pad) {
-  const tr = trigger.getBoundingClientRect();
-  const mr = menu.getBoundingClientRect();
-  const contentHeight = menu.scrollHeight;
-  const vh = window.innerHeight;
-  const vw = window.innerWidth;
-  const sx = window.scrollX;
-  const sy = window.scrollY;
-  let top = 0;
-  let left = 0;
-  let effectiveSide = side;
-  let maxHeight;
-  const placeVertical = (s, height) => {
-    if (s === "bottom") top = tr.bottom + sy + offset;
-    else top = tr.top + sy - height - offset;
-    if (align === "start") left = tr.left + sx;
-    else if (align === "end") left = tr.right + sx - mr.width;
-    else left = tr.left + sx + tr.width / 2 - mr.width / 2;
-  };
-  const place = (s, height = contentHeight) => {
-    switch (s) {
-      case "bottom":
-      case "top":
-        placeVertical(s, height);
-        break;
-      case "right":
-        left = tr.right + sx + offset;
-        if (align === "start") top = tr.top + sy;
-        else if (align === "end") top = tr.bottom + sy - mr.height;
-        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
-        break;
-      case "left":
-        left = tr.left + sx - mr.width - offset;
-        if (align === "start") top = tr.top + sy;
-        else if (align === "end") top = tr.bottom + sy - mr.height;
-        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
-        break;
+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", styles[size].initials), children: initials });
     }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+    }
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
   };
-  place(side);
-  const spaceBelow = Math.max(0, vh - pad - tr.bottom - offset);
-  const spaceAbove = Math.max(0, tr.top - offset - pad);
-  if (side === "bottom" || side === "top") {
-    const primarySpace = side === "bottom" ? spaceBelow : spaceAbove;
-    const alternateSpace = side === "bottom" ? spaceAbove : spaceBelow;
-    const alternateSide = side === "bottom" ? "top" : "bottom";
-    if (contentHeight > primarySpace) {
-      maxHeight = Math.min(contentHeight, primarySpace);
-      place(side, maxHeight);
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
     }
-    if (contentHeight > primarySpace && primarySpace < SELECT_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
-      effectiveSide = alternateSide;
-      maxHeight = Math.min(contentHeight, alternateSpace);
-      place(alternateSide, maxHeight);
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
     }
-  } else if (side === "right" && left + mr.width > vw + sx - pad) {
-    const flip = tr.left + sx - mr.width - offset;
-    if (flip >= sx + pad) {
-      effectiveSide = "left";
-      left = flip;
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
     }
-  } else if (side === "left" && left < sx + pad) {
-    const flip = tr.right + sx + offset;
-    if (flip + mr.width <= vw + sx - pad) {
-      effectiveSide = "right";
-      left = flip;
+    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 && styles[size].rootWithBorder,
+        styles[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()
+      ]
     }
-  }
-  return { top, left, side: effectiveSide, maxHeight };
-}
-function useNarrowSheetViewport(breakpoint = 1025) {
-  const [narrow, setNarrow] = useState(false);
-  useEffect(() => {
-    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-    setNarrow(mq.matches);
-    const h = (e) => setNarrow(e.matches);
-    mq.addEventListener("change", h);
-    return () => mq.removeEventListener("change", h);
-  }, [breakpoint]);
-  return narrow;
-}
-function plainTextFromNode(node) {
-  if (node == null || node === false || node === true) return "";
-  if (typeof node === "string" || typeof node === "number")
-    return String(node);
-  if (Array.isArray(node)) return node.map(plainTextFromNode).join("");
-  if (React2.isValidElement(node)) {
-    return plainTextFromNode(
-      node.props.children
-    );
-  }
-  return "";
-}
-var ValueContext = React2.createContext(null);
-function useSelectValue() {
-  const c = React2.useContext(ValueContext);
-  if (!c) throw new Error("Select subcomponents must be used within <Select>");
-  return c;
-}
-var OpenContext = React2.createContext(null);
-function useSelectOpen() {
-  const c = React2.useContext(OpenContext);
-  if (!c)
-    throw new Error(
-      "Select.Trigger, SelectContent, and SelectItem need <Select> without native"
-    );
-  return c;
-}
-var Select = ({
-  children,
-  className,
-  value: valueProp,
-  defaultValue = "",
-  onValueChange,
-  native: nativeProp = false,
-  disabled = false,
-  name,
-  id: idAttr,
-  placeholder = "Select",
-  open: openProp,
-  onOpenChange
-}) => {
-  const isValueControlled = valueProp !== void 0;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const value = isValueControlled ? valueProp : internalValue;
-  const [labels, setLabels] = useState({});
-  const [nativeMeta, setNativeMeta] = useState({});
-  const [nativeOrder, setNativeOrder] = useState([]);
-  const setValue = useCallback(
-    (v) => {
-      if (!isValueControlled) setInternalValue(v);
-      onValueChange?.(v);
-    },
-    [isValueControlled, onValueChange]
   );
-  const setLabel = useCallback((v, n) => {
-    setLabels((p) => p[v] === n ? p : { ...p, [v]: n });
-  }, []);
-  const clearLabel = useCallback((v) => {
-    setLabels((p) => {
-      if (!(v in p)) return p;
-      const n = { ...p };
-      delete n[v];
-      return n;
-    });
-  }, []);
-  const labelsRef = useRef(labels);
-  labelsRef.current = labels;
-  const labelFor = useCallback(
-    (v) => labelsRef.current[v],
-    []
-  );
-  const registerNativeItem = useCallback(
-    (e) => {
-      setLabel(e.value, e.label);
-      setNativeMeta((p) => ({ ...p, [e.value]: { label: e.label, disabled: e.disabled } }));
-      setNativeOrder((o) => o.includes(e.value) ? o : [...o, e.value]);
-    },
-    [setLabel]
-  );
-  const unregisterNativeItem = useCallback(
-    (v) => {
-      setNativeMeta((p) => {
-        if (!(v in p)) return p;
-        const n = { ...p };
-        delete n[v];
-        return n;
-      });
-      setNativeOrder((o) => o.filter((x) => x !== v));
-      clearLabel(v);
-    },
-    [clearLabel]
-  );
-  const valueCtx = useMemo(
-    () => ({
-      native: nativeProp,
-      value,
-      setValue,
-      disabled,
-      setLabel,
-      clearLabel,
-      registerNativeItem,
-      unregisterNativeItem,
-      labelFor,
-      placeholder
-    }),
-    [
-      nativeProp,
-      value,
-      setValue,
-      disabled,
-      labels,
-      setLabel,
-      clearLabel,
-      registerNativeItem,
-      unregisterNativeItem,
-      labelFor,
-      placeholder
-    ]
+};
+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
+      )
+    }
   );
-  if (nativeProp) {
-    return /* @__PURE__ */ jsxs(ValueContext.Provider, { value: valueCtx, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "group relative inline-block w-max min-w-0 max-w-full",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                id: idAttr,
-                name,
-                className: cn(
-                  "peer",
-                  "border-primary/10 bg-background text-primary w-full min-w-0 max-w-full cursor-pointer appearance-none border pr-9 pl-3 outline-none",
-                  "h-10 min-h-10 text-sm font-medium",
-                  "rounded-full transition-[color,background-color,box-shadow,transform] duration-150",
-                  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-                  "active:scale-[0.99]",
-                  "disabled:cursor-not-allowed disabled:opacity-50"
-                ),
-                value,
-                disabled,
-                onChange: (ev) => setValue(ev.target.value),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
-                  nativeOrder.map((key) => {
-                    const m = nativeMeta[key];
-                    if (!m) return null;
-                    return /* @__PURE__ */ jsx("option", { value: key, disabled: m.disabled, children: plainTextFromNode(m.label) }, key);
-                  })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                "aria-hidden": true,
-                className: "text-primary/50 pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 peer-disabled:opacity-50"
-              }
-            )
-          ]
-        }
-      ),
-      children
-    ] });
-  }
-  return /* @__PURE__ */ jsx(ValueContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsx(SelectOpenBridge, { open: openProp, onOpenChange, children: /* @__PURE__ */ jsx("div", { className: cn("inline-block min-w-0 max-w-full", className), children }) }) });
 };
-function SelectOpenBridge({
-  children,
-  open: controlled,
-  onOpenChange
-}) {
-  const [inner, setInner] = useState(false);
-  const isControlled = controlled !== void 0;
-  const open = isControlled ? controlled : inner;
-  const setOpen = useCallback(
-    (o) => {
-      if (!isControlled) setInner(o);
-      onOpenChange?.(o);
-    },
-    [isControlled, onOpenChange]
+HintText.displayName = "HintText";
+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" })
+          }
+        ) })
+      ]
+    }
   );
-  const triggerRef = useRef(null);
-  const ctx = useMemo(
-    () => ({ open, setOpen, triggerRef }),
-    [open, setOpen]
+};
+Label.displayName = "Label";
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+
+// ../../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 Popover = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      placement: "bottom",
+      containerPadding: 0,
+      offset: 4,
+      ...props,
+      className: (state) => cx(
+        "w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform",
+        state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 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-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+        props.size === "sm" && "max-h-56!",
+        props.size === "md" && "max-h-64!",
+        props.size === "lg" && "max-h-80!",
+        typeof props.className === "function" ? props.className(state) : props.className
+      )
+    }
   );
-  return /* @__PURE__ */ jsx(OpenContext.Provider, { value: ctx, children });
-}
-var SheetClose = React2.forwardRef(({ className, type = "button", ...p }, ref) => /* @__PURE__ */ jsxs(
-  "button",
-  {
-    ref,
-    type,
-    className: cn(
-      "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
-      className
-    ),
-    ...p,
-    children: [
-      /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-    ]
-  }
-));
-SheetClose.displayName = "SelectSheetClose";
-function resolveSheetOpts(o) {
-  return {
-    sheet: o?.sheet ?? true,
-    title: o?.title,
-    panelClass: o?.className,
-    bodyClass: o?.contentClassName
-  };
+};
+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" });
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
 }
-function MobileSheetPortal({
-  open,
-  isAnimating,
-  slideEntrance,
-  slideOffsetPx,
-  sheetTitle,
-  sheetPanelClassName,
-  contentClassName,
-  onRequestClose,
-  menuRef,
-  children,
-  className,
-  style,
-  ...rest
-}) {
-  const ease = open ? MOBILE_SHEET_IN : MOBILE_SHEET_OUT;
-  const hiddenY = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
-  return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-end justify-center p-0", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "fixed inset-0 bg-black/40 dark:bg-primary/4",
-            isAnimating ? "opacity-100" : "opacity-0"
-          ),
-          style: {
-            transition: `opacity ${MOBILE_SHEET_MS}ms ${ease}`
-          },
-          onClick: onRequestClose
+function useResizeObserver(options) {
+  const { ref, box, onResize } = options;
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize, false);
+      return () => {
+        window.removeEventListener("resize", onResize, false);
+      };
+    } else {
+      const resizeObserverInstance = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
         }
+        onResize();
+      });
+      resizeObserverInstance.observe(element, { box });
+      return () => {
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
+      };
+    }
+  }, [onResize, ref, box]);
+}
+var ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, isInvalid, ref, ...otherProps }) => {
+  const state = useContext(ComboBoxStateContext);
+  const value = state?.selectedItem?.value || null;
+  const inputValue = state?.inputValue || null;
+  const first = inputValue?.split(value?.supportingText)?.[0] || "";
+  const last = inputValue?.split(first)[1];
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ref,
+      ...otherProps,
+      isInvalid,
+      className: ({ isFocusWithin, isDisabled, isInvalid: isGroupInvalid }) => cx(
+        "relative flex w-full items-center gap-2 rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isGroupInvalid && isFocusWithin && inputFocusRingShadow,
+        isGroupInvalid && !isFocusWithin && "border-error_subtle",
+        isGroupInvalid && isFocusWithin && inputErrorFocusRingShadow,
+        // Icon styles
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root
       ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ...rest,
-          ref: menuRef,
-          className: cn(
-            "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
-            "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
-            sheetPanelClassName,
-            className
-          ),
-          style: {
-            transform: isAnimating ? "translateY(0)" : hiddenY,
-            opacity: isAnimating ? 1 : 0,
-            transition: `transform ${MOBILE_SHEET_MS}ms ${ease}, opacity ${MOBILE_SHEET_MS}ms ${ease}`,
-            ...style
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
-                  sheetTitle ? "justify-between gap-3" : "justify-end"
-                ),
-                children: [
-                  sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
-                  /* @__PURE__ */ jsx(
-                    SheetClose,
-                    {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onRequestClose();
-                      }
-                    }
-                  )
-                ]
-              }
+      children: [
+        isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+          inputValue && /* @__PURE__ */ jsxs("span", { className: cx("absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate", sizes3[size].textContainer), "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("p", { className: cx("font-medium text-primary", sizes3[size].text), children: first }),
+            last && /* @__PURE__ */ jsx("p", { className: cx("-ml-0.75 text-tertiary", sizes3[size].text), children: last })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder,
+              className: cx(
+                "z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+                sizes3[size].text
+              )
+            }
+          )
+        ] }),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+              sizes3[size].shortcut,
+              shortcutClassName
             ),
-            /* @__PURE__ */ jsx(
-              "div",
+            children: /* @__PURE__ */ jsx(
+              "span",
               {
-                className: cn(
-                  "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
-                  contentClassName
-                ),
-                children
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                "aria-hidden": "true",
+                children: "\u2318K"
               }
             )
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-function listFocusableItems(host) {
-  return Array.from(
-    host.querySelectorAll(
-      '[data-select-item="true"]:not([aria-disabled="true"])'
-    )
+          }
+        )
+      ]
+    }
   );
-}
-var SelectContent = ({
+};
+var ComboBox = ({
+  placeholder = "Search",
+  shortcut = true,
+  size = "md",
   children,
-  side = "bottom",
-  align = "start",
-  offset = 10,
-  duration = 80,
-  viewportPadding = 8,
-  closeOnEscape = true,
-  minWidth = "trigger",
-  loop = true,
-  typeahead = true,
-  mobileOptions,
-  slideEntrance = true,
-  slideEntranceOffsetPx: slidePxProp,
-  className,
-  style,
-  ...rest
+  items,
+  shortcutClassName,
+  icon,
+  hideRequiredIndicator,
+  ...otherProps
 }) => {
-  const narrow = useNarrowSheetViewport(MOBILE_SHEET_MAX_PX + 1);
-  const { open, setOpen, triggerRef } = useSelectOpen();
-  const [show, setShow] = useState(false);
-  const [anim, setAnim] = useState(false);
-  const [pos, setPos] = useState({ top: -9999, left: -9999, side });
-  const [triggerW, setTriggerW] = useState(0);
-  const menuRef = useRef(null);
-  const typeaheadStateRef = useRef(createTypeaheadState());
-  const sheet = useMemo(() => resolveSheetOpts(mobileOptions), [mobileOptions]);
-  const slidePx = slidePxProp ?? SLIDE_DEFAULT_PX;
-  const closeMs = narrow && sheet.sheet ? MOBILE_SHEET_MS : duration;
-  const close = useCallback(() => setOpen(false), [setOpen]);
-  const [portalReady, setPortalReady] = useState(false);
+  const placeholderRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!placeholderRef.current) return;
+    const divRect = placeholderRef.current?.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, [placeholderRef, setPopoverWidth]);
+  useResizeObserver({
+    ref: placeholderRef,
+    box: "border-box",
+    onResize
+  });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(ComboBox$1, { menuTrigger: "focus", ...otherProps, children: (state) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    otherProps.label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: otherProps.tooltip, children: otherProps.label }),
+    /* @__PURE__ */ jsx(
+      ComboBoxValue,
+      {
+        ref: placeholderRef,
+        placeholder,
+        shortcut,
+        shortcutClassName,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onFocus: onResize,
+        onPointerEnter: onResize
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover, { size, triggerRef: placeholderRef, style: { width: popoverWidth }, className: otherProps.popoverClassName, children: /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children }) }),
+    otherProps.hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: otherProps.hint })
+  ] }) }) });
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ className }) {
+  const pathRef = useRef(null);
   useLayoutEffect(() => {
-    setPortalReady(true);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setShow(true);
-    } else {
-      setAnim(false);
-      const t = setTimeout(() => setShow(false), closeMs);
-      return () => clearTimeout(t);
+    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;
     }
-  }, [open, closeMs]);
-  useEffect(() => {
-    if (!show || !open) return;
-    let r2 = 0;
-    const r1 = requestAnimationFrame(() => {
-      r2 = requestAnimationFrame(() => setAnim(true));
+    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 () => {
-      cancelAnimationFrame(r1);
-      if (r2) cancelAnimationFrame(r2);
-    };
-  }, [show, open]);
-  useLayoutEffect(() => {
-    if (!triggerRef.current || !menuRef.current) return;
-    if (!open && !show) return;
-    const run = () => {
-      if (!triggerRef.current || !menuRef.current) return;
-      setTriggerW(triggerRef.current.getBoundingClientRect().width);
-      setPos(
-        computeMenuPosition(
-          triggerRef.current,
-          menuRef.current,
-          side,
-          align,
-          offset,
-          viewportPadding
-        )
-      );
-    };
-    run();
-    window.addEventListener("resize", run);
-    window.addEventListener("scroll", run, true);
-    return () => {
-      window.removeEventListener("resize", run);
-      window.removeEventListener("scroll", run, true);
-    };
-  }, [open, show, side, align, offset, viewportPadding, triggerRef]);
-  useEffect(() => {
-    if (anim && menuRef.current) menuRef.current.focus();
-  }, [anim]);
-  useEffect(() => {
-    if (!open) resetTypeahead(typeaheadStateRef.current);
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const onDoc = (e) => {
-      const t = e.target;
-      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", onDoc);
-    return () => document.removeEventListener("mousedown", onDoc);
-  }, [open, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      const m = menuRef.current;
-      if (!m) return;
-      const active = document.activeElement;
-      if (active && !m.contains(active) && !triggerRef.current?.contains(active))
-        return;
-      const items = listFocusableItems(m);
-      const i = items.indexOf(active);
-      switch (e.key) {
-        case "Escape":
-          if (closeOnEscape) {
-            e.preventDefault();
-            setOpen(false);
-            triggerRef.current?.focus();
-          }
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (!items.length) break;
-          if (i === -1 || i === items.length - 1 && loop) items[0]?.focus();
-          else if (i < items.length - 1) items[i + 1]?.focus();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (!items.length) break;
-          if (i <= 0 && loop) items[items.length - 1]?.focus();
-          else if (i > 0) items[i - 1]?.focus();
-          break;
-        case "Home":
-          e.preventDefault();
-          items[0]?.focus();
-          break;
-        case "End":
-          e.preventDefault();
-          items[items.length - 1]?.focus();
-          break;
-        case "Tab":
-          setOpen(false);
-          break;
-        default:
-          handleTypeaheadKeyDown(e, items, typeaheadStateRef.current, {
-            enabled: typeahead
-          });
-          break;
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, closeOnEscape, loop, typeahead, setOpen, triggerRef]);
-  const lockBodyScroll = (open || show) && narrow && sheet.sheet;
-  useEffect(() => {
-    if (!lockBodyScroll) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [lockBodyScroll]);
-  if (narrow && sheet.sheet) {
-    if (!open && !show) {
-      const registrationSlot = /* @__PURE__ */ jsx("div", { className: "sr-only pointer-events-none", "aria-hidden": true, children });
-      if (!portalReady) return registrationSlot;
-      return createPortal(registrationSlot, document.body);
+    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"
     }
-    return /* @__PURE__ */ jsx(
-      MobileSheetPortal,
-      {
-        ...rest,
-        open,
-        isAnimating: anim,
-        slideEntrance,
-        slideOffsetPx: slidePx,
-        sheetTitle: sheet.title,
-        sheetPanelClassName: sheet.panelClass,
-        contentClassName: sheet.bodyClass,
-        onRequestClose: close,
-        menuRef,
-        className,
-        style,
-        role: "listbox",
-        tabIndex: -1,
-        "aria-label": sheet.title,
-        children
-      }
-    );
-  }
-  const resolvedMin = minWidth === "trigger" ? triggerW > 0 ? triggerW : void 0 : minWidth;
-  const listbox = /* @__PURE__ */ jsx(
+  ) });
+}
+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",
     {
-      ...rest,
-      ref: menuRef,
-      role: "listbox",
-      tabIndex: -1,
-      "aria-hidden": !open,
-      className: cn(
-        "bg-background border-primary/10 absolute z-50 rounded-xl border py-1.5 shadow-xl outline-none",
-        className,
-        pos.maxHeight != null ? "overflow-y-auto overscroll-contain" : "overflow-hidden"
+      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
       ),
-      style: {
-        position: "absolute",
-        top: pos.top,
-        left: pos.left,
-        ...typeof resolvedMin === "number" ? { minWidth: resolvedMin } : {},
-        maxHeight: pos.maxHeight,
-        transformOrigin: CONTENT_ORIGIN[pos.side],
-        transform: anim ? "none" : CONTENT_HIDDEN[pos.side],
-        opacity: anim ? 1 : 0,
-        pointerEvents: !open ? "none" : "auto",
-        transitionProperty: "opacity, transform",
-        transitionDuration: `${duration}ms`,
-        transitionTimingFunction: anim ? PANEL_OPEN_EASING : PANEL_CLOSE_EASING,
-        ...style
-      },
-      children
+      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) })
+      ]
     }
   );
-  if (!portalReady) {
-    return listbox;
-  }
-  return createPortal(listbox, document.body);
 };
-function mergeRef(store, node, fromChild) {
-  store.current = node;
-  if (typeof fromChild === "function") fromChild(node);
-  else if (fromChild && typeof fromChild === "object")
-    fromChild.current = node;
-}
-var SelectTrigger = React2.forwardRef(
-  function SelectTrigger2({ children, asChild, className, onClick, disabled, ...buttonProps }, ref) {
-    const { open, setOpen, triggerRef } = useSelectOpen();
-    const triggerVariant = buttonProps.variant ?? "secondary";
-    const onPress = useCallback(
-      (e) => {
-        onClick?.(
-          e
-        );
-        e.stopPropagation();
-        if (disabled) return;
-        setOpen(!open);
-      },
-      [onClick, disabled, open, setOpen]
-    );
-    const setBtnRef = useCallback(
-      (el) => {
-        mergeRef(triggerRef, el, null);
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      },
-      [ref, triggerRef]
-    );
-    if (asChild && React2.isValidElement(children)) {
-      const ch = children;
-      const childRef = ch.ref;
-      return React2.cloneElement(ch, {
-        ref: (n) => mergeRef(triggerRef, n, childRef),
-        className: cn("group w-fit max-w-full min-w-0 justify-start gap-2", ch.props.className),
-        onClick: (e) => {
-          ch.props.onClick?.(e);
-          onPress(e);
-        },
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "data-state": open ? "open" : "closed",
-        "data-variant": triggerVariant,
-        ...disabled !== void 0 ? { "aria-disabled": disabled } : {}
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        ref: setBtnRef,
-        type: "button",
-        ...buttonProps,
-        disabled,
-        className: cn("group w-fit max-w-full min-w-0 justify-start gap-2", className),
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "data-state": open ? "open" : "closed",
-        "data-variant": triggerVariant,
-        onClick: onPress,
-        children
-      }
-    );
+CheckboxBase.displayName = "CheckboxBase";
+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"
   }
-);
-SelectTrigger.displayName = "SelectTrigger";
-var SelectChevron = ({
+};
+var SelectItem = ({
+  label,
+  id,
+  value,
+  avatarUrl,
+  supportingText,
+  isDisabled,
+  icon: Icon,
   className,
+  children,
+  selectionIndicator = "checkmark",
+  selectionIndicatorAlign = "right",
   ...props
 }) => {
-  const { open } = useSelectOpen();
+  const { size } = useContext(SelectContext);
+  const labelOrChildren = label || (typeof children === "string" ? children : "");
+  const textValue = supportingText ? labelOrChildren + " " + supportingText : labelOrChildren;
+  const isLeft = selectionIndicatorAlign === "left";
   return /* @__PURE__ */ jsx(
-    ChevronDown,
+    ListBoxItem,
     {
-      "aria-hidden": true,
-      className: cn("size-4 shrink-0", open && "rotate-180", className),
-      ...props
+      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 SelectValue = ({ placeholder, className }) => {
-  const c = useSelectValue();
-  if (c.native) return null;
-  const ph = placeholder ?? c.placeholder;
-  const text = c.value ? c.labelFor(c.value) : void 0;
-  const isEmpty = !c.value;
+var SelectValue = ({ isOpen, isFocused, isDisabled, isInvalid, size, placeholder, icon, ref }) => {
+  const isActive = isFocused || isOpen;
   return /* @__PURE__ */ jsx(
-    "span",
+    Button,
     {
-      "data-slot": "select-value",
-      className: cn(
-        "min-w-0 flex-1 truncate text-left",
-        isEmpty && cn(
-          "group-data-[variant=primary]:!text-background/50",
-          "group-data-[variant=secondary]:!text-primary/50",
-          "group-data-[variant=destructive]:!text-red-500/50",
-          "group-data-[variant=success]:!text-green-500/50"
-        ),
-        className
+      ref,
+      className: 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 && isActive && inputFocusRingShadow,
+        isInvalid && !isActive && "border-error_subtle",
+        isInvalid && isActive && inputErrorFocusRingShadow,
+        isDisabled && "cursor-not-allowed opacity-50"
       ),
-      children: text != null ? text : ph
-    }
-  );
-};
-var SelectItemRow = ({
-  value: v,
-  children,
-  disabled,
-  shortcut,
-  className,
-  onClick: userClick,
-  ...divProps
-}) => {
-  const c = useSelectValue();
-  const { setOpen } = useSelectOpen();
-  const selected = c.value === v;
-  const click = (e) => {
-    if (disabled) return;
-    c.setValue(v);
-    userClick?.(e);
-    setOpen(false);
-  };
-  const keyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      click(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...divProps,
-      "data-select-item": "true",
-      role: "option",
-      "aria-selected": selected,
-      tabIndex: disabled ? void 0 : -1,
-      "aria-disabled": disabled,
-      onClick: click,
-      onKeyDown: keyDown,
-      className: cn(
-        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
-        SHEET_MENU_TEXT,
-        !disabled && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
-        disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
-        !disabled && "cursor-pointer",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        shortcut ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "shrink-0 text-xs tracking-widest opacity-40",
-              SHEET_MENU_SHORTCUT
-            ),
-            children: shortcut
+      children: /* @__PURE__ */ jsx(
+        SelectValue$1,
+        {
+          className: (state) => cx(
+            "flex h-max w-full items-center justify-start truncate text-left align-middle",
+            sizes3[size].root,
+            // With icon
+            (state.selectedItems[0]?.icon || icon) && sizes3[size].withIcon,
+            // Icon styles
+            "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary"
+          ),
+          children: (state) => {
+            const selectedItem = state.selectedItems[0];
+            const Icon = selectedItem?.icon || icon;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              selectedItem?.avatarUrl ? /* @__PURE__ */ jsx(Avatar, { size: "xs", src: selectedItem.avatarUrl, alt: selectedItem.label, className: cx(size === "sm" && "size-5") }) : isReactComponent(Icon) ? /* @__PURE__ */ jsx(Icon, { "data-icon": true, "aria-hidden": "true" }) : isValidElement(Icon) ? Icon : null,
+              selectedItem ? /* @__PURE__ */ jsxs("section", { className: cx("flex w-full truncate", sizes3[size].textContainer), children: [
+                /* @__PURE__ */ jsx("p", { className: cx("truncate font-medium text-primary", sizes3[size].text), children: selectedItem?.label }),
+                selectedItem?.supportingText && /* @__PURE__ */ jsx("p", { className: cx("text-tertiary", sizes3[size].text), children: selectedItem?.supportingText })
+              ] }) : /* @__PURE__ */ jsx("p", { 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]")
+                }
+              )
+            ] });
           }
-        ) : null,
-        /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", "aria-hidden": true, children: selected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 2.5 }) : null })
-      ]
+        }
+      )
     }
   );
 };
-var SelectItem = ({
-  value: v,
-  children,
-  disabled,
-  ...rest
-}) => {
-  const {
-    native,
-    setLabel,
-    clearLabel,
-    registerNativeItem,
-    unregisterNativeItem
-  } = useSelectValue();
-  useLayoutEffect(() => {
-    setLabel(v, children);
-    if (native) registerNativeItem({ value: v, label: children, disabled });
-    return () => {
-      clearLabel(v);
-      if (native) unregisterNativeItem(v);
-    };
-  }, [
-    v,
-    children,
-    disabled,
-    native,
-    setLabel,
-    clearLabel,
-    registerNativeItem,
-    unregisterNativeItem
-  ]);
-  if (native) return null;
-  return /* @__PURE__ */ jsx(SelectItemRow, { value: v, disabled, ...rest, children });
+var Select = ({ placeholder = "Select", icon, size = "md", children, items, label, hint, tooltip, hideRequiredIndicator, className, ...rest }) => {
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(Select$1, { ...rest, className: (state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className), children: (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip, children: label }),
+    /* @__PURE__ */ jsx(SelectValue, { ...state, ...{ size, placeholder }, icon }),
+    /* @__PURE__ */ jsx(Popover, { size, className: rest.popoverClassName, children: /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children }) }),
+    hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: hint })
+  ] }) }) });
 };
-SelectItem.displayName = "SelectItem";
+var _Select = Select;
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
 
-export { Select, SelectChevron, SelectContent, SelectItem, SelectTrigger, SelectValue };
+export { _Select as Select, SelectContext, sizes3 as sizes };
 //# sourceMappingURL=select.js.map
 //# sourceMappingURL=select.js.map