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

package/dist/react/select.js

@@ -1,983 +1,941 @@
-import * as React2 from 'react';
-import { useCallback, useState, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
+import { createContext, isValidElement, useMemo, useContext, useEffect, useRef, useState, useCallback, 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, OverlayTriggerStateContext, 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 { 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 { XIcon } from '@phosphor-icons/react/dist/csr/X';
+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
-    ]
   );
-  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]
+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
+      )
+    }
   );
-  const triggerRef = useRef(null);
-  const ctx = useMemo(
-    () => ({ open, setOpen, triggerRef }),
-    [open, setOpen]
+};
+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" })
+          }
+        ) })
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx(OpenContext.Provider, { value: ctx, children });
+};
+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 MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
 }
-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) {
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function resolveSelectMobileOptions(mobileOptions) {
   return {
-    sheet: o?.sheet ?? true,
-    title: o?.title,
-    panelClass: o?.className,
-    bodyClass: o?.contentClassName
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
   };
 }
-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
-        }
-      ),
-      /* @__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();
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
-                  contentClassName
-                ),
-                children
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-function listFocusableItems(host) {
-  return Array.from(
-    host.querySelectorAll(
-      '[data-select-item="true"]:not([aria-disabled="true"])'
-    )
-  );
-}
-var SelectContent = ({
-  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
-}) => {
-  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);
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
   useLayoutEffect(() => {
-    setPortalReady(true);
-  }, []);
-  useEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
     if (open) {
-      setShow(true);
-    } else {
-      setAnim(false);
-      const t = setTimeout(() => setShow(false), closeMs);
-      return () => clearTimeout(t);
+      setShouldRender(true);
     }
-  }, [open, closeMs]);
+  }, [open, enabled]);
   useEffect(() => {
-    if (!show || !open) return;
-    let r2 = 0;
-    const r1 = requestAnimationFrame(() => {
-      r2 = requestAnimationFrame(() => setAnim(true));
-    });
-    return () => {
-      cancelAnimationFrame(r1);
-      if (r2) cancelAnimationFrame(r2);
-    };
-  }, [show, open]);
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
   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]);
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
   useEffect(() => {
-    if (!open) return;
-    const onDoc = (e) => {
-      const t = e.target;
-      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t)) return;
-      setOpen(false);
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
     };
-    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;
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+function MobileSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileSheetChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cx("flex w-full shrink-0 items-center py-2 pl-4 pr-2", title ? "justify-between gap-3" : "justify-end"), children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+      /* @__PURE__ */ jsx(MobileSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+          contentClassName
+        ),
+        children
       }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, closeOnEscape, loop, typeahead, setOpen, triggerRef]);
-  const lockBodyScroll = (open || show) && narrow && sheet.sheet;
+    )
+  ] });
+}
+var Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
   useEffect(() => {
-    if (!lockBodyScroll) return;
+    if (!useMobileSheet || !open) 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 /* @__PURE__ */ jsx(
-      MobileSheetPortal,
+  }, [useMobileSheet, open]);
+  const close = () => overlayState?.close();
+  const showMobileSheet = useMobileSheet && shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const mobileScrim = useMobileSheet && shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        ...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
+        className: "fixed inset-0 z-50 bg-overlay/70",
+        style: backdropStyle,
+        onClick: close,
+        "aria-hidden": "true"
       }
-    );
-  }
-  const resolvedMin = minWidth === "trigger" ? triggerW > 0 ? triggerW : void 0 : minWidth;
-  const listbox = /* @__PURE__ */ jsx(
-    "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"
-      ),
-      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
-    }
-  );
-  if (!portalReady) {
-    return listbox;
-  }
-  return createPortal(listbox, document.body);
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 4,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        ...useMobileSheet ? { "data-select-mobile-sheet": true } : {},
+        style: useMobileSheet ? { ...panelStyle, ...style } : style,
+        className: (state) => cx(
+          "outline-hidden",
+          !useMobileSheet && [
+            "w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+            compoundContent ? "overflow-hidden outline-hidden" : "overflow-x-hidden overflow-y-auto py-1 outline-hidden",
+            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",
+            !compoundContent && size === "sm" && "max-h-56!",
+            !compoundContent && size === "md" && "max-h-64!",
+            !compoundContent && size === "lg" && "max-h-80!"
+          ],
+          useMobileSheet && [
+            "fixed! inset-x-0! bottom-0! top-auto! left-0! right-0! z-[51] flex w-full! max-w-none! flex-col overflow-hidden rounded-t-2xl rounded-b-none border-x-0 border-t border-secondary bg-primary shadow-xl",
+            "max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]",
+            resolvedMobile.sheetClassName
+          ],
+          typeof className === "function" ? className(state) : className
+        ),
+        children: (state) => {
+          const content = typeof children === "function" ? children(state) : children;
+          if (useMobileSheet) {
+            return /* @__PURE__ */ jsx(
+              MobileSheetChrome,
+              {
+                title: resolvedMobile.title,
+                contentClassName: resolvedMobile.contentClassName,
+                onClose: close,
+                children: content
+              }
+            );
+          }
+          return content;
+        }
+      }
+    )
+  ] });
+};
+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 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" }
 };
-function mergeRef(store, node, fromChild) {
-  store.current = node;
-  if (typeof fromChild === "function") fromChild(node);
-  else if (fromChild && typeof fromChild === "object")
-    fromChild.current = node;
+var SelectContext = createContext({ size: "md" });
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
 }
-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 } : {}
+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);
+        }
+      };
     }
-    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
-      }
-    );
-  }
-);
-SelectTrigger.displayName = "SelectTrigger";
-var SelectChevron = ({
-  className,
-  ...props
-}) => {
-  const { open } = useSelectOpen();
-  return /* @__PURE__ */ jsx(
-    ChevronDown,
+  }, [onResize, ref, box]);
+}
+var ComboBoxMobileTrigger = ({ size, placeholder, icon: IconProp, isInvalid, onPointerEnter, ref }) => {
+  const state = useContext(ComboBoxStateContext);
+  const selectedItem = state?.selectedItem?.value ?? null;
+  return /* @__PURE__ */ jsxs(
+    Button,
     {
-      "aria-hidden": true,
-      className: cn("size-4 shrink-0", open && "rotate-180", className),
-      ...props
+      ref,
+      onPress: () => state?.open(),
+      onPointerEnter,
+      className: ({ isFocusVisible, isDisabled }) => cx(
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-lg border border-solid border-primary bg-primary text-left shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isInvalid && (isFocusVisible || state?.isOpen) && inputFocusRingShadow,
+        isInvalid && !(isFocusVisible || state?.isOpen) && "border-error_subtle",
+        isInvalid && (isFocusVisible || state?.isOpen) && inputErrorFocusRingShadow,
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root
+      ),
+      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" }),
+        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("truncate text-placeholder", sizes3[size].text), children: placeholder })
+      ]
     }
   );
 };
-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;
-  return /* @__PURE__ */ jsx(
-    "span",
+var ComboBoxSheetSearch = ({ size, placeholder, icon: IconProp }) => /* @__PURE__ */ jsx("div", { className: cx("shrink-0 border-b border-secondary", searchSizes[size].wrapper), children: /* @__PURE__ */ jsxs("div", { className: cx("flex items-center", searchSizes[size].root), children: [
+  isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }),
+  /* @__PURE__ */ jsx(
+    Input,
     {
-      "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
+      placeholder,
+      className: cx(
+        "w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder",
+        searchSizes[size].text
+      )
+    }
+  )
+] }) });
+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: ({ 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 && state?.isOpen && inputFocusRingShadow,
+        !isGroupInvalid && "has-[input:focus-visible]:border-brand has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-brand",
+        isGroupInvalid && !state?.isOpen && "border-error_subtle",
+        isGroupInvalid && state?.isOpen && inputErrorFocusRingShadow,
+        isGroupInvalid && "has-[input:focus-visible]:border-error has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-error",
+        // Icon styles
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes3[size].root
       ),
-      children: text != null ? text : ph
+      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
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                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"
+              }
+            )
+          }
+        )
+      ]
     }
   );
 };
-var SelectItemRow = ({
-  value: v,
+var ComboBox = ({
+  placeholder = "Search",
+  shortcut = true,
+  size = "md",
   children,
-  disabled,
-  shortcut,
-  className,
-  onClick: userClick,
-  ...divProps
+  items,
+  shortcutClassName,
+  icon,
+  hideRequiredIndicator,
+  mobileOptions,
+  ...otherProps
 }) => {
-  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);
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const triggerRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!triggerRef.current) return;
+    const divRect = triggerRef.current.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, []);
+  useResizeObserver({
+    ref: triggerRef,
+    box: "border-box",
+    onResize
+  });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(ComboBox$1, { menuTrigger: useMobileSheet ? "manual" : "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 }),
+    useMobileSheet ? /* @__PURE__ */ jsx(
+      ComboBoxMobileTrigger,
+      {
+        ref: triggerRef,
+        placeholder,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onPointerEnter: onResize
+      }
+    ) : /* @__PURE__ */ jsx(
+      ComboBoxValue,
+      {
+        ref: triggerRef,
+        placeholder,
+        shortcut,
+        shortcutClassName,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onFocus: onResize,
+        onPointerEnter: onResize
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        size,
+        triggerRef,
+        compoundContent: useMobileSheet,
+        style: useMobileSheet ? void 0 : { width: popoverWidth },
+        className: otherProps.popoverClassName,
+        mobileOptions: { title: otherProps.label, ...mobileOptions },
+        children: useMobileSheet ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden outline-hidden", children: [
+          /* @__PURE__ */ jsx(ComboBoxSheetSearch, { size, placeholder, icon }),
+          /* @__PURE__ */ jsx(ListBox, { items, className: "min-h-0 flex-1 overflow-y-auto py-1 outline-hidden", 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({ pixelSize, 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", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", 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 iconPixelSize = size === "sm" ? 10 : 14;
   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: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        !isChecked && !isDisabled && "group-hover:bg-primary_hover",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        shortcut ? /* @__PURE__ */ jsx(
-          "span",
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
           {
-            className: cn(
-              "shrink-0 text-xs tracking-widest opacity-40",
-              SHEET_MENU_SHORTCUT
-            ),
-            children: shortcut
+            "aria-hidden": "true",
+            width: iconPixelSize,
+            height: iconPixelSize,
+            viewBox: "0 0 14 14",
+            fill: "none",
+            className: "pointer-events-none block text-fg-white",
+            children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
           }
-        ) : 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 })
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
       ]
     }
   );
 };
+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"
+  }
+};
 var SelectItem = ({
-  value: v,
+  label,
+  id,
+  value,
+  avatarUrl,
+  supportingText,
+  isDisabled,
+  icon: Icon,
+  className,
   children,
-  disabled,
-  ...rest
+  selectionIndicator = "checkmark",
+  selectionIndicatorAlign = "right",
+  ...props
 }) => {
-  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 });
+  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.isSelected && selectionIndicator !== "checkbox" && "bg-brand-primary_alt",
+            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 = ({ isOpen, isFocusVisible, isDisabled, isInvalid, size, placeholder, icon, ref }) => {
+  const isActive = isOpen || isFocusVisible;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      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: /* @__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]")
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+};
+var Select = ({ placeholder = "Select", icon, size = "md", children, items, label, hint, tooltip, hideRequiredIndicator, mobileOptions, 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, mobileOptions: { title: label, ...mobileOptions }, 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