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

package/dist/react/dropdown.js

@@ -1,1428 +1,481 @@
-import * as React3 from 'react';
-import React3__default, { useState, useCallback, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { X, ChevronDown, Check, ChevronRight } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { createContext, useCallback, useState, useRef, useLayoutEffect } from 'react';
+import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
+import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
+import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical';
+import { Header, MenuSection, MenuTrigger, MenuItem, Menu, Popover, Separator, Button } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import '@phosphor-icons/react/dist/csr/Plus';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-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 roundedClass = {
-  full: "rounded-full",
-  lg: "rounded-lg",
-  md: "rounded-md"
-};
-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 Button = React3.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
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var CHECKBOX_TICK_DELAY_MS = 60;
-var CHECKBOX_TICK_DRAW_MS = 100;
-function CheckboxAnimatedCheckMark() {
-  const lineRef = useRef(null);
-  useLayoutEffect(() => {
-    const poly = lineRef.current;
-    if (!poly || typeof poly.getTotalLength !== "function") return;
-    const len = poly.getTotalLength();
-    if (len <= 0) return;
-    poly.style.strokeDasharray = `${len}`;
-    poly.style.strokeDashoffset = `${len}`;
-    if (typeof poly.animate !== "function") {
-      poly.style.strokeDashoffset = "0";
-      return;
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
     }
-    const anim = poly.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",
-    {
-      className: "size-4 shrink-0 overflow-visible",
-      viewBox: "0 0 24 24",
-      "aria-hidden": true,
-      children: /* @__PURE__ */ jsx(
-        "polyline",
+  }
+});
+var cx = twMerge;
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
         {
-          ref: lineRef,
-          points: "4 12 9 17 20 6",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          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"
         }
-      )
-    }
-  );
-}
-var Checkbox = React3.forwardRef(
-  ({
-    checked: checkedProp,
-    defaultChecked = false,
-    onCheckedChange,
-    indeterminate = false,
-    disabled = false,
-    className,
-    onClick,
-    ...rest
-  }, ref) => {
-    const isControlled = checkedProp !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
-    const checked = isControlled ? checkedProp : uncontrolledChecked;
-    const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "checkbox",
-        "data-slot": "checkbox",
-        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
-        disabled,
-        "aria-checked": ariaChecked,
-        className: cn(
-          "ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
-          "focus-visible:ring-2 focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed",
-          className
-        ),
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          if (disabled) return;
-          if (isControlled) {
-            onCheckedChange?.(!checked);
-            return;
-          }
-          setUncontrolledChecked((prev) => {
-            const next = !prev;
-            onCheckedChange?.(next);
-            return next;
-          });
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
-              !disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
-              disabled && (indeterminate ? "border-transparent bg-primary/45 text-primary-foreground" : checked ? "border-transparent bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
-            ),
-            children: indeterminate ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
-                "aria-hidden": true
-              }
-            ) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
-          }
-        ) })
-      }
-    );
+      ),
+      /* @__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" })
+      ] }) })
+    ] })
   }
 );
-Checkbox.displayName = "Checkbox";
-
-// 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;
-    }
-  }
-  if (focusedIndex !== -1) {
-    const nextAfterFocus = matches.find(({ index }) => index > focusedIndex);
-    if (nextAfterFocus) {
-      nextAfterFocus.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"
     }
-  }
-  matches[0]?.item.focus();
-  return true;
-}
-var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
-var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
-var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
-var DROPDOWN_FLIP_MIN_SPACE_PX = 100;
-var DROPDOWN_MOBILE_SHEET_MAX_PX = 1024;
-var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
-var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
-var DROPDOWN_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
-var DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
-function resolveDropdownMobileSheet(mobileOptions) {
-  return {
-    sheet: mobileOptions?.sheet ?? true,
-    title: mobileOptions?.title,
-    sheetExtraClassName: mobileOptions?.className,
-    contentClassName: mobileOptions?.contentClassName
-  };
-}
-var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
-var DROPDOWN_PANEL_SHADOW = "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.18),0_2px_6px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_12px_32px_-8px_rgba(0,0,0,0.55),0_2px_6px_-2px_rgba(0,0,0,0.35)]";
-var DROPDOWN_PANEL_SCROLL = "[&_*]:[scrollbar-width:none] [&_*::-webkit-scrollbar]:hidden [&_*]:overscroll-contain";
-function preventMenuWheelChain(menu, e) {
-  let el = e.target;
-  while (el && menu.contains(el)) {
-    const oy = getComputedStyle(el).overflowY;
-    if ((oy === "auto" || oy === "scroll") && el.scrollHeight > el.clientHeight) {
-      const atTop = el.scrollTop <= 0;
-      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
-      if (e.deltaY < 0 && !atTop || e.deltaY > 0 && !atBottom) return;
-      break;
+  ),
+  /* @__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"
     }
-    el = el.parentElement;
-  }
-  e.preventDefault();
-}
-var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
-var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
-var DROPDOWN_SHEET_MENU_LABEL_TEXT = "max-[1024px]:text-sm";
-var DROPDOWN_CONTENT_ORIGIN = {
-  bottom: "top center",
-  top: "bottom center",
-  left: "right center",
-  right: "left center"
-};
-var DROPDOWN_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" }
 };
-var SUB_CONTENT_ORIGIN = {
-  bottom: "top center",
-  top: "bottom center",
-  left: "right top",
-  right: "left top"
-};
-function computePos(trigger, menu, side, align, offset, pad) {
-  const tr = trigger.getBoundingClientRect();
-  const mr = menu.getBoundingClientRect();
-  const contentHeight = menu.scrollHeight;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  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 calc = (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;
-    }
-  };
-  calc(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);
-      calc(side, maxHeight);
+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 (contentHeight > primarySpace && primarySpace < DROPDOWN_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
-      effectiveSide = alternateSide;
-      maxHeight = Math.min(contentHeight, alternateSpace);
-      calc(alternateSide, maxHeight);
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials });
     }
-  } else if (side === "right" && left + mr.width > vw + sx - pad) {
-    const fl = tr.left + sx - mr.width - offset;
-    if (fl >= sx + pad) {
-      effectiveSide = "left";
-      left = fl;
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
     }
-  } else if (side === "left" && left < sx + pad) {
-    const fl = tr.right + sx + offset;
-    if (fl + mr.width <= vw + sx - pad) {
-      effectiveSide = "right";
-      left = fl;
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
     }
-  }
-  return { top, left, side: effectiveSide, maxHeight };
-}
-function useIsMobile(breakpoint = 1025) {
-  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 DropdownContext = React3__default.createContext(void 0);
-function useDropdown() {
-  const ctx = React3__default.useContext(DropdownContext);
-  if (!ctx)
-    throw new Error("Dropdown components must be used within <Dropdown />");
-  return ctx;
-}
-var SubContext = React3__default.createContext(void 0);
-var Dropdown = ({
-  children,
-  open: controlledOpen,
-  onOpenChange
-}) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const triggerRef = useRef(null);
-  const [radioValues, setRadioValues] = useState({});
-  const setOpen = useCallback(
-    (v) => {
-      if (!isControlled) setInternalOpen(v);
-      onOpenChange?.(v);
-    },
-    [isControlled, onOpenChange]
-  );
-  const setRadioValue = useCallback((group, value) => {
-    setRadioValues((prev) => ({ ...prev, [group]: value }));
-  }, []);
-  const ctx = useMemo(
-    () => ({ open, setOpen, triggerRef, radioValues, setRadioValue }),
-    [open, setOpen, radioValues, setRadioValue]
-  );
-  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
-};
-function mergeTriggerRef(triggerRef, node, childRef) {
-  triggerRef.current = node;
-  if (typeof childRef === "function") childRef(node);
-  else if (childRef && typeof childRef === "object")
-    childRef.current = node;
-}
-var DropdownTrigger = React3__default.forwardRef(
-  ({
-    children,
-    asChild,
-    className,
-    onClick: onClickProp,
-    disabled,
-    ...buttonProps
-  }, ref) => {
-    const { open, setOpen, triggerRef } = useDropdown();
-    const handleClick = useCallback(
-      (e) => {
-        onClickProp?.(e);
-        e.stopPropagation();
-        if (disabled) return;
-        setOpen(!open);
-      },
-      [disabled, onClickProp, open, setOpen]
-    );
-    const setButtonRef = useCallback(
-      (el) => {
-        triggerRef.current = el;
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      },
-      [ref, triggerRef]
-    );
-    if (asChild && React3__default.isValidElement(children)) {
-      const child = children;
-      return React3__default.cloneElement(child, {
-        ref: (node) => {
-          mergeTriggerRef(
-            triggerRef,
-            node,
-            child.ref
-          );
-        },
-        className: cn("group", child.props.className),
-        onClick: (e) => {
-          child.props.onClick?.(e);
-          handleClick(e);
-        },
-        "aria-expanded": open,
-        "aria-haspopup": "menu",
-        "data-state": open ? "open" : "closed",
-        ...disabled !== void 0 ? {
-          disabled
-        } : {}
-      });
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
     }
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        ref: setButtonRef,
-        type: "button",
-        ...buttonProps,
-        disabled,
-        className: cn("group", className),
-        "aria-expanded": open,
-        "aria-haspopup": "menu",
-        "data-state": open ? "open" : "closed",
-        onClick: handleClick,
-        children
-      }
-    );
-  }
-);
-DropdownTrigger.displayName = "DropdownTrigger";
-function DropdownChevron({
-  className,
-  ...props
-}) {
-  const { open } = useDropdown();
-  return /* @__PURE__ */ jsx(
-    ChevronDown,
-    {
-      "aria-hidden": true,
-      className: cn("size-4 shrink-0", open && "rotate-180", className),
-      ...props
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
     }
-  );
-}
-var DropdownMobileClose = React3__default.forwardRef(({ className, type = "button", ...props }, ref) => {
+    return badge;
+  };
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      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]",
+      "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
       ),
-      ...props,
       children: [
-        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        /* @__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()
       ]
     }
   );
-});
-DropdownMobileClose.displayName = "DropdownMobileClose";
-function DropdownMobileBottomSheetPortal({
-  open,
-  isAnimating,
-  slideEntrance,
-  slideOffsetPx,
-  sheetTitle,
-  sheetExtraClassName,
-  contentClassName,
-  onRequestClose,
-  menuRef,
-  portalZClassName = "z-50",
-  isSubPortal = false,
-  children,
-  className,
-  style,
-  ...panelProps
-}) {
-  const sheetMotion = open ? DROPDOWN_MOBILE_SHEET_ENTRY_EASING : DROPDOWN_MOBILE_SHEET_EXIT_EASING;
-  const sheetHiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...isSubPortal ? { [DROPDOWN_SUB_CONTENT_ATTR]: "" } : {},
-        className: cn(
-          "fixed inset-0 flex items-end justify-center p-0",
-          portalZClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "fixed inset-0 bg-black/40 dark:bg-primary/4",
-                isAnimating ? "opacity-100" : "opacity-0"
-              ),
-              style: {
-                transitionProperty: "opacity",
-                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
-                transitionTimingFunction: sheetMotion
-              },
-              onClick: onRequestClose
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ...panelProps,
-              ref: menuRef,
-              className: cn(
-                "bg-background border-primary/8 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",
-                DROPDOWN_PANEL_SCROLL,
-                sheetExtraClassName,
-                className
-              ),
-              style: {
-                transform: isAnimating ? "translateY(0)" : sheetHiddenTransform,
-                opacity: isAnimating ? 1 : 0,
-                transitionProperty: "transform, opacity",
-                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
-                transitionTimingFunction: sheetMotion,
-                ...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(
-                        DropdownMobileClose,
-                        {
-                          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
-  );
-}
-var DropdownContent = ({
-  children,
-  side = "bottom",
-  align = "start",
-  offset = 10,
-  duration = 80,
-  viewportPadding = 8,
-  closeOnEscape = true,
-  minWidth = "trigger",
-  loop = true,
-  typeahead = true,
-  mobileOptions,
-  slideEntrance = true,
-  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
-  className,
-  style,
-  ...props
-}) => {
-  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
-  const { open, setOpen, triggerRef } = useDropdown();
-  const [shouldRender, setShouldRender] = useState(false);
-  const [isAnimating, setIsAnimating] = 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 resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
-  const isMobileSheet = isMobile && resolvedMobile.sheet;
-  const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
-  useEffect(() => {
-    if (open) {
-      setShouldRender(true);
-      return;
-    }
-    if (!isMobileSheet) {
-      setShouldRender(false);
+};
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark({ className }) {
+  const pathRef = useRef(null);
+  useLayoutEffect(() => {
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
+    if (len <= 0) return;
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
       return;
     }
-    setIsAnimating(false);
-    const t = setTimeout(
-      () => setShouldRender(false),
-      DROPDOWN_MOBILE_SHEET_MOTION_MS
-    );
-    return () => clearTimeout(t);
-  }, [open, isMobileSheet]);
-  useEffect(() => {
-    if (!shouldRender || !open) return;
-    let raf2 = 0;
-    const raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setIsAnimating(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(raf1);
-      if (raf2) cancelAnimationFrame(raf2);
-    };
-  }, [shouldRender, open]);
-  useLayoutEffect(() => {
-    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
-    const update = () => {
-      if (!triggerRef.current || !menuRef.current) return;
-      setTriggerW(triggerRef.current.getBoundingClientRect().width);
-      setPos(
-        computePos(
-          triggerRef.current,
-          menuRef.current,
-          side,
-          align,
-          offset,
-          viewportPadding
-        )
-      );
-    };
-    update();
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-    };
-  }, [shouldRender, side, align, offset, viewportPadding]);
-  useEffect(() => {
-    if (!open || isMobileSheet) return;
-    const isInsideMenu = (t) => t instanceof Node && (!!menuRef.current?.contains(t) || !!triggerRef.current?.contains(t) || t instanceof Element && !!t.closest(`[${DROPDOWN_SUB_CONTENT_ATTR}]`));
-    const onScroll = (e) => {
-      if (!isInsideMenu(e.target)) setOpen(false);
-    };
-    window.addEventListener("scroll", onScroll, true);
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [open, isMobileSheet, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!shouldRender || isMobileSheet) return;
-    const menu = menuRef.current;
-    if (!menu) return;
-    const onWheel = (e) => preventMenuWheelChain(menu, e);
-    menu.addEventListener("wheel", onWheel, { passive: false });
-    return () => menu.removeEventListener("wheel", onWheel);
-  }, [shouldRender, isMobileSheet]);
-  useEffect(() => {
-    if (isAnimating && menuRef.current) {
-      menuRef.current.focus();
+    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"
     }
-  }, [isAnimating]);
-  useEffect(() => {
-    if (!open) resetTypeahead(typeaheadStateRef.current);
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const t = e.target;
-      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
-        return;
-      const el = e.target instanceof Element ? e.target : null;
-      if (el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const menu = menuRef.current;
-      if (!menu) return;
-      const focusedEl = document.activeElement;
-      if (focusedEl && !menu.contains(focusedEl)) return;
-      const items = getItems(menu);
-      const idx = items.indexOf(focusedEl);
-      switch (e.key) {
-        case "Escape":
-          if (closeOnEscape) {
-            e.preventDefault();
-            setOpen(false);
-            triggerRef.current?.focus();
-          }
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (items.length === 0) break;
-          if (idx === -1 || idx === items.length - 1 && loop)
-            items[0]?.focus();
-          else if (idx < items.length - 1) items[idx + 1]?.focus();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (items.length === 0) break;
-          if (idx <= 0 && loop) items[items.length - 1]?.focus();
-          else if (idx > 0) items[idx - 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", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [open, closeOnEscape, loop, typeahead, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!open || !isMobileSheet) return;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open, isMobileSheet]);
-  if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobileSheet) {
-    return /* @__PURE__ */ jsx(
-      DropdownMobileBottomSheetPortal,
-      {
-        ...props,
-        open,
-        isAnimating,
-        slideEntrance,
-        slideOffsetPx,
-        sheetTitle: resolvedMobile.title,
-        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
-        contentClassName: resolvedMobile.contentClassName,
-        onRequestClose: () => setOpen(false),
-        menuRef,
-        portalZClassName: "z-50",
-        className,
-        style,
-        role: "menu",
-        "aria-orientation": "vertical",
-        tabIndex: -1,
-        children
-      }
-    );
-  }
-  const resolvedMinW = minWidth === "trigger" ? Math.max(triggerW, DROPDOWN_MENU_MIN_WIDTH_PX) : minWidth;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...props,
-        ref: menuRef,
-        role: "menu",
-        "aria-orientation": "vertical",
-        tabIndex: -1,
-        className: cn(
-          "bg-background border-primary/8 absolute z-50 rounded-xl border py-1.5 outline-none",
-          DROPDOWN_PANEL_SHADOW,
-          DROPDOWN_PANEL_SCROLL,
-          className,
-          pos.maxHeight != null ? "overflow-y-auto" : "overflow-hidden"
-        ),
-        style: {
-          position: "absolute",
-          top: pos.top,
-          left: pos.left,
-          minWidth: resolvedMinW,
-          maxHeight: pos.maxHeight,
-          transformOrigin: DROPDOWN_CONTENT_ORIGIN[pos.side],
-          transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
-          opacity: isAnimating ? 1 : 0,
-          transitionProperty: "opacity, transform",
-          transitionDuration: `${duration}ms`,
-          transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
-          ...style
-        },
-        children
-      }
-    ),
-    document.body
-  );
-};
-function getItems(menu) {
-  return Array.from(
-    menu.querySelectorAll(
-      '[role="menuitem"]:not([aria-disabled="true"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]),[role="menuitemradio"]:not([aria-disabled="true"])'
-    )
-  );
+  ) });
 }
-var DropdownItem = ({
-  children,
-  disabled = false,
-  destructive = false,
-  icon,
-  shortcut,
-  closeOnSelect = true,
-  inset = false,
-  className,
-  onClick,
-  ...props
-}) => {
-  const { setOpen } = useDropdown();
-  const handleClick = (e) => {
-    if (disabled) return;
-    onClick?.(e);
-    if (closeOnSelect) setOpen(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleClick(e);
-    }
-  };
+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",
     {
-      ...props,
-      role: "menuitem",
-      tabIndex: disabled ? void 0 : -1,
-      "aria-disabled": disabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      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",
-        DROPDOWN_SHEET_MENU_TEXT,
-        inset && "pl-9",
-        !disabled && "cursor-pointer",
-        disabled && "lg:cursor-not-allowed",
-        !disabled && !destructive && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
-        !disabled && destructive && "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 dark:text-destructive-foreground dark:hover:bg-destructive-foreground/18 dark:focus-visible:bg-destructive-foreground/18",
-        disabled && !destructive && "text-foreground/45 dark:text-foreground/50",
-        disabled && destructive && "bg-destructive/5 text-destructive/75 dark:bg-destructive-foreground/12 dark:text-destructive-foreground/78",
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary",
+        size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
+        isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isChecked && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow,
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        shortcut ? /* @__PURE__ */ jsx(
-          "span",
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
           {
-            className: cn(
-              "ml-auto text-xs tracking-widest",
-              DROPDOWN_SHEET_MENU_SHORTCUT,
-              destructive ? "text-destructive/70 dark:text-destructive-foreground/80" : "opacity-40"
-            ),
-            children: shortcut
+            "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" })
           }
-        ) : null
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { className: cx("pointer-events-none text-fg-white", iconClassName) })
       ]
     }
   );
 };
-var DropdownSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    role: "separator",
-    className: cn("border-primary/10 my-1.5 border-t", className),
-    ...props
-  }
-);
-var DropdownLabel = ({ className, inset, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "text-primary/50 px-4 py-2 text-xs font-medium",
-      DROPDOWN_SHEET_MENU_LABEL_TEXT,
-      inset && "pl-9",
-      className
-    ),
-    ...props
-  }
-);
-var DropdownCheckboxItem = ({
-  children,
-  checked = false,
-  onCheckedChange,
-  disabled = false,
-  shortcut,
-  closeOnSelect = false,
-  className,
-  onClick,
-  ...props
-}) => {
-  const { setOpen } = useDropdown();
-  const handleClick = (e) => {
-    if (disabled) return;
-    onCheckedChange?.(!checked);
-    onClick?.(e);
-    if (closeOnSelect) setOpen(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleClick(e);
+CheckboxBase.displayName = "CheckboxBase";
+var RADIO_DOT_DELAY_MS = 60;
+var RADIO_DOT_POP_MS = 100;
+function RadioAnimatedDot({ className }) {
+  const dotRef = useRef(null);
+  useLayoutEffect(() => {
+    const dot = dotRef.current;
+    if (!dot) return;
+    if (typeof dot.animate !== "function") {
+      dot.style.opacity = "1";
+      dot.style.transform = "scale(1)";
+      return;
     }
-  };
-  return /* @__PURE__ */ jsxs(
+    const anim = dot.animate(
+      [
+        { opacity: 0, transform: "scale(0)" },
+        { opacity: 1, transform: "scale(1)" }
+      ],
+      {
+        duration: RADIO_DOT_POP_MS,
+        delay: RADIO_DOT_DELAY_MS,
+        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: dotRef, "aria-hidden": "true", className: cx("rounded-full bg-fg-white", className), style: { opacity: 0, transform: "scale(0)" } });
+}
+var focusRingShadow2 = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+createContext(null);
+var RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = "sm" }) => {
+  const dotClassName = size === "sm" ? "size-1.5" : "size-2";
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...props,
-      role: "menuitemcheckbox",
-      "aria-checked": checked,
-      tabIndex: disabled ? void 0 : -1,
-      "aria-disabled": disabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
-        DROPDOWN_SHEET_MENU_TEXT,
-        !disabled && "cursor-pointer 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",
+      className: cx(
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary",
+        size === "sm" ? "size-4" : "size-5",
+        isSelected && "border-transparent bg-brand-solid",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isSelected && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow2,
         className
       ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "mr-1 inline-flex shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked,
-            disabled,
-            tabIndex: -1,
-            className: "pointer-events-none"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        shortcut && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "ml-auto text-xs tracking-widest opacity-40",
-              DROPDOWN_SHEET_MENU_SHORTCUT
-            ),
-            children: shortcut
-          }
-        )
-      ]
+      children: isSelected && /* @__PURE__ */ jsx(RadioAnimatedDot, { className: cx("pointer-events-none", dotClassName) })
     }
   );
 };
-var DropdownRadioGroup = ({ children, value, onValueChange, group }) => {
-  const { setRadioValue, radioValues } = useDropdown();
-  const resolvedValue = value ?? radioValues[group] ?? "";
-  const handleValueChange = useCallback(
-    (v) => {
-      setRadioValue(group, v);
-      onValueChange?.(v);
+RadioButtonBase.displayName = "RadioButtonBase";
+var focusRingShadow3 = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }) => {
+  const styles2 = {
+    default: {
+      sm: {
+        track: "h-5 w-9 p-0.5",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-[calc(100%-1rem-0.125rem)]" : "left-0.5"
+      },
+      md: {
+        track: "h-6 w-11 p-0.5",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-[calc(100%-1.25rem-0.125rem)]" : "left-0.5"
+      }
     },
-    [group, onValueChange, setRadioValue]
-  );
-  const radioCtx = useMemo(
-    () => ({
-      group,
-      value: resolvedValue,
-      onValueChange: handleValueChange
-    }),
-    [group, resolvedValue, handleValueChange]
-  );
-  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: radioCtx, children });
-};
-var RadioGroupContext = React3__default.createContext(
-  void 0
-);
-function useRadioGroup() {
-  const ctx = React3__default.useContext(RadioGroupContext);
-  if (!ctx)
-    throw new Error("DropdownRadioItem must be inside DropdownRadioGroup");
-  return ctx;
-}
-var DropdownRadioItem = ({
-  children,
-  value,
-  disabled = false,
-  shortcut,
-  closeOnSelect = false,
-  className,
-  onClick,
-  ...props
-}) => {
-  const { setOpen } = useDropdown();
-  const { value: groupValue, onValueChange } = useRadioGroup();
-  const checked = groupValue === value;
-  const handleClick = (e) => {
-    if (disabled) return;
-    onValueChange(value);
-    onClick?.(e);
-    if (closeOnSelect) setOpen(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleClick(e);
+    slim: {
+      sm: {
+        track: "h-4 w-8",
+        thumb: "size-4",
+        thumbPosition: isSelected ? "left-4" : "left-0"
+      },
+      md: {
+        track: "h-5 w-10",
+        thumb: "size-5",
+        thumbPosition: isSelected ? "left-5" : "left-0"
+      }
     }
   };
-  return /* @__PURE__ */ jsxs(
+  const classes = slim ? styles2.slim[size] : styles2.default[size];
+  const offTrackBackground = (() => {
+    if (isDisabled) return "bg-tertiary";
+    if (isHovered) return slim ? "bg-tertiary" : "bg-brand-primary";
+    return "bg-quaternary";
+  })();
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...props,
-      role: "menuitemradio",
-      "aria-checked": checked,
-      tabIndex: disabled ? void 0 : -1,
-      "aria-disabled": disabled,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      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",
-        DROPDOWN_SHEET_MENU_TEXT,
-        !disabled && "cursor-pointer 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",
+      className: cx(
+        "relative inline-flex shrink-0 cursor-pointer overflow-clip rounded-full outline-none transition duration-150 ease-linear",
+        !isSelected && offTrackBackground,
+        !slim && "ring-[0.5px] ring-secondary ring-inset",
+        slim && "ring-1 ring-secondary ring-inset",
+        isSelected && "bg-brand-solid",
+        isSelected && isHovered && "bg-brand-solid_hover",
+        isSelected && "ring-transparent",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isFocusVisible && !isDisabled && focusRingShadow3,
+        classes.track,
         className
       ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        shortcut ? /* @__PURE__ */ jsx(
-          "span",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "absolute rounded-full bg-fg-white shadow-sm transition-[left] duration-150 ease-in-out",
+            slim ? "top-0 shadow-xs" : "top-0.5",
+            slim && "border border-toggle-border",
+            slim && isSelected && "border-toggle-slim-border_pressed",
+            slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+            classes.thumb,
+            classes.thumbPosition
+          )
+        }
+      )
+    }
+  );
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowInset = "[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = "checkmark", ...props }) => {
+  const SelectionIndicator = useCallback(
+    (state) => {
+      if (selectionIndicator === "checkmark") {
+        return /* @__PURE__ */ jsx(
+          CheckIcon,
           {
-            className: cn(
-              "shrink-0 text-xs tracking-widest opacity-40",
-              DROPDOWN_SHEET_MENU_SHORTCUT
-            ),
-            children: shortcut
+            "aria-hidden": "true",
+            className: cx("size-4 shrink-0 stroke-[2.25px] text-fg-brand-primary", !state.isSelected && "invisible", state.className)
           }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          "span",
+        );
+      }
+      if (selectionIndicator === "checkbox") {
+        return /* @__PURE__ */ jsx(
+          CheckboxBase,
           {
-            className: "flex size-4 shrink-0 items-center justify-center",
-            "aria-hidden": true,
-            children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 2.5 }) : null
+            isSelected: state.isSelected && !state.hasSubmenu,
+            isIndeterminate: state.isSelected && state.hasSubmenu,
+            size: "sm",
+            className: cx("shrink-0", state.className)
           }
-        )
-      ]
+        );
+      }
+      if (selectionIndicator === "radio") {
+        return /* @__PURE__ */ jsx(RadioButtonBase, { isSelected: state.isSelected, className: cx("shrink-0", state.className) });
+      }
+      if (selectionIndicator === "toggle") {
+        return /* @__PURE__ */ jsx(ToggleBase, { slim: true, size: "sm", isSelected: state.isSelected, className: cx("shrink-0", state.className) });
+      }
+      return null;
+    },
+    [selectionIndicator]
+  );
+  if (unstyled) {
+    return /* @__PURE__ */ jsx(MenuItem, { id: label, textValue: label, ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...props,
+      className: (state) => cx(
+        "group block cursor-pointer px-1.5 py-px outline-hidden",
+        state.isDisabled && "cursor-not-allowed opacity-50",
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      children: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "relative flex items-center rounded-md px-2.5 py-2 transition duration-100 ease-linear",
+            !state.isDisabled && "group-hover:bg-primary_hover",
+            state.isFocused && "bg-primary_hover",
+            state.isFocusVisible && focusShadowInset,
+            state.hasSubmenu && "pr-1.5"
+          ),
+          children: [
+            state.selectionMode !== "none" && !avatarUrl && !Icon && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "mr-2" }),
+            avatarUrl && /* @__PURE__ */ jsx("div", { className: "mr-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: "size-5" }) }),
+            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" }),
+            /* @__PURE__ */ jsx("span", { className: cx("grow truncate text-sm font-semibold text-secondary", state.isFocused && "text-secondary_hover"), children: label || (typeof children === "function" ? children(state) : children) }),
+            addon && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary", children: addon }),
+            state.selectionMode !== "none" && (avatarUrl || Icon) && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "ml-1" }),
+            state.hasSubmenu && /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" })
+          ]
+        }
+      )
     }
   );
 };
-var DropdownSub = ({ children, openOnHover = true }) => {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const subCtx = useMemo(
-    () => ({ open, setOpen, triggerRef, openOnHover }),
-    [open, setOpen, openOnHover]
+var DropdownMenu = (props) => {
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      ...props,
+      className: (state) => cx("h-min overflow-y-auto py-1 outline-hidden select-none", typeof props.className === "function" ? props.className(state) : props.className)
+    }
   );
-  return /* @__PURE__ */ jsx(SubContext.Provider, { value: subCtx, children });
 };
-var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className, ...props }) => {
-  const sub = React3__default.useContext(SubContext);
-  if (!sub) throw new Error("DropdownSubTrigger must be inside DropdownSub");
-  const { open, setOpen, triggerRef, openOnHover } = sub;
-  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
-  return /* @__PURE__ */ jsxs(
-    "div",
+var DropdownPopover = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popover,
     {
+      placement: "bottom right",
       ...props,
-      ref: (el) => {
-        triggerRef.current = el;
-      },
-      role: "menuitem",
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      tabIndex: disabled ? void 0 : -1,
-      "aria-disabled": disabled,
-      onMouseEnter: () => {
-        if (disabled || isMobile || !openOnHover) return;
-        setOpen(true);
-      },
-      onMouseLeave: () => {
-        if (isMobile || !openOnHover) return;
-        setOpen(false);
-      },
-      onKeyDown: (e) => {
-        if (disabled) return;
-        if (e.key === "ArrowRight" || e.key === "Enter") {
-          e.preventDefault();
-          setOpen(true);
-        }
-      },
-      onClick: () => {
-        if (disabled) return;
-        setOpen(!open);
-      },
-      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",
-        DROPDOWN_SHEET_MENU_TEXT,
-        inset && "pl-9",
-        !disabled && "cursor-pointer 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",
-        className
+      className: (state) => cx(
+        "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt 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",
+        typeof props.className === "function" ? props.className(state) : props.className
       ),
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", "data-menu-label": true, children }),
-        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4 shrink-0 opacity-50" })
-      ]
+      children: props.children
     }
   );
 };
-var DropdownSubContent = ({
-  children,
-  duration = 80,
-  viewportPadding = 8,
-  mobileOptions,
-  slideEntrance = true,
-  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
-  typeahead = true,
-  className,
-  style,
-  onKeyDown: onKeyDownProp,
-  ...props
-}) => {
-  const sub = React3__default.useContext(SubContext);
-  if (!sub) throw new Error("DropdownSubContent must be inside DropdownSub");
-  const { open, setOpen, triggerRef, openOnHover } = sub;
-  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
-  const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
-  const isMobileSheet = isMobile && resolvedMobile.sheet;
-  const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
-  const [shouldRender, setShouldRender] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [pos, setPos] = useState({
-    top: -9999,
-    left: -9999,
-    side: "right"
-  });
-  const menuRef = useRef(null);
-  const typeaheadStateRef = useRef(createTypeaheadState());
-  useEffect(() => {
-    if (open) {
-      setShouldRender(true);
-      return;
-    }
-    if (!isMobileSheet) {
-      setShouldRender(false);
-      return;
-    }
-    setIsAnimating(false);
-    const t = setTimeout(
-      () => setShouldRender(false),
-      DROPDOWN_MOBILE_SHEET_MOTION_MS
-    );
-    return () => clearTimeout(t);
-  }, [open, isMobileSheet]);
-  useEffect(() => {
-    if (!shouldRender || !open) return;
-    let raf2 = 0;
-    const raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setIsAnimating(true));
-    });
-    return () => {
-      cancelAnimationFrame(raf1);
-      if (raf2) cancelAnimationFrame(raf2);
-    };
-  }, [shouldRender, open]);
-  useLayoutEffect(() => {
-    if (!shouldRender || isMobileSheet) return;
-    if (!triggerRef.current || !menuRef.current) return;
-    const update = () => {
-      if (!triggerRef.current || !menuRef.current) return;
-      setPos(
-        computePos(
-          triggerRef.current,
-          menuRef.current,
-          "right",
-          "start",
-          -8,
-          viewportPadding
-        )
-      );
-    };
-    update();
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-    };
-  }, [shouldRender, viewportPadding, isMobileSheet]);
-  useEffect(() => {
-    if (!open || isMobileSheet) return;
-    const onScroll = (e) => {
-      const t = e.target;
-      if (!(t instanceof Node) || menuRef.current?.contains(t)) return;
-      const trigger = triggerRef.current;
-      if (trigger && (t === trigger || t.contains(trigger))) setOpen(false);
-    };
-    window.addEventListener("scroll", onScroll, true);
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [open, isMobileSheet, setOpen, triggerRef]);
-  useEffect(() => {
-    if (!shouldRender || isMobileSheet) return;
-    const menu = menuRef.current;
-    if (!menu) return;
-    const onWheel = (e) => preventMenuWheelChain(menu, e);
-    menu.addEventListener("wheel", onWheel, { passive: false });
-    return () => menu.removeEventListener("wheel", onWheel);
-  }, [shouldRender, isMobileSheet]);
-  useEffect(() => {
-    if (isAnimating && menuRef.current) {
-      menuRef.current.focus();
+var DropdownSeparator = (props) => {
+  return /* @__PURE__ */ jsx(Separator, { ...props, className: cx("my-1 h-px w-full bg-border-secondary", props.className) });
+};
+var DropdownDotsButton = (props) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      "aria-label": "Open menu",
+      className: (state) => cx(
+        "cursor-pointer rounded-md text-fg-quaternary transition duration-100 ease-linear",
+        (state.isPressed || state.isHovered) && "text-fg-quaternary_hover",
+        focusShadowPlain,
+        typeof props.className === "function" ? props.className(state) : props.className
+      ),
+      children: /* @__PURE__ */ jsx(DotsThreeVerticalIcon, { className: "size-5 transition-inherit-all" })
     }
-  }, [isAnimating]);
-  useEffect(() => {
-    if (!open) resetTypeahead(typeaheadStateRef.current);
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const t = e.target;
-      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
-        return;
-      const el = e.target instanceof Element ? e.target : null;
-      const subPanel = el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`);
-      if (subPanel && subPanel !== menuRef.current) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, setOpen, triggerRef]);
-  const handleSubMenuKeyDown = useCallback(
-    (e) => {
-      onKeyDownProp?.(e);
-      if (e.defaultPrevented) return;
-      const menu = menuRef.current;
-      if (!menu) return;
-      const items = getItems(menu);
-      const focused = document.activeElement;
-      const idx = items.indexOf(focused);
-      switch (e.key) {
-        case "ArrowLeft":
-        case "Escape":
-          e.preventDefault();
-          setOpen(false);
-          triggerRef.current?.focus();
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (items.length === 0) break;
-          if (idx === -1 || idx === items.length - 1) items[0]?.focus();
-          else items[idx + 1]?.focus();
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          if (items.length === 0) break;
-          if (idx <= 0) items[items.length - 1]?.focus();
-          else items[idx - 1]?.focus();
-          break;
-        case "Home":
-          e.preventDefault();
-          items[0]?.focus();
-          break;
-        case "End":
-          e.preventDefault();
-          items[items.length - 1]?.focus();
-          break;
-        default:
-          handleTypeaheadKeyDown(e.nativeEvent, items, typeaheadStateRef.current, {
-            enabled: typeahead
-          });
-          break;
-      }
-    },
-    [onKeyDownProp, setOpen, triggerRef, typeahead]
-  );
-  if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobileSheet) {
-    return /* @__PURE__ */ jsx(
-      DropdownMobileBottomSheetPortal,
-      {
-        ...props,
-        open,
-        isAnimating,
-        slideEntrance,
-        slideOffsetPx,
-        sheetTitle: resolvedMobile.title,
-        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
-        contentClassName: resolvedMobile.contentClassName,
-        onRequestClose: () => setOpen(false),
-        menuRef,
-        portalZClassName: "z-[70]",
-        isSubPortal: true,
-        className,
-        style,
-        role: "menu",
-        tabIndex: -1,
-        onKeyDown: handleSubMenuKeyDown,
-        "data-dropdown-sub-content": "",
-        children
-      }
-    );
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...props,
-        ref: menuRef,
-        role: "menu",
-        tabIndex: -1,
-        onMouseEnter: openOnHover ? () => setOpen(true) : void 0,
-        onMouseLeave: openOnHover ? () => setOpen(false) : void 0,
-        onKeyDown: handleSubMenuKeyDown,
-        "data-dropdown-sub-content": "",
-        className: cn(
-          "bg-background border-primary/8 absolute z-60 rounded-xl border py-1.5 outline-none",
-          DROPDOWN_PANEL_SHADOW,
-          DROPDOWN_PANEL_SCROLL,
-          className,
-          pos.maxHeight != null ? "overflow-y-auto" : "overflow-hidden"
-        ),
-        style: {
-          position: "absolute",
-          top: pos.top,
-          left: pos.left,
-          minWidth: DROPDOWN_MENU_MIN_WIDTH_PX,
-          maxHeight: pos.maxHeight,
-          transformOrigin: SUB_CONTENT_ORIGIN[pos.side],
-          transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
-          opacity: isAnimating ? 1 : 0,
-          transitionProperty: "opacity, transform",
-          transitionDuration: `${duration}ms`,
-          transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
-          ...style
-        },
-        children
-      }
-    ),
-    document.body
   );
 };
+var Dropdown = {
+  Root: MenuTrigger,
+  Popover: DropdownPopover,
+  Menu: DropdownMenu,
+  Section: MenuSection,
+  SectionHeader: Header,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  DotsButton: DropdownDotsButton
+};
 
-export { Dropdown, DropdownCheckboxItem, DropdownChevron, DropdownContent, DropdownItem, DropdownLabel, DropdownMobileClose, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger };
+export { Dropdown };
 //# sourceMappingURL=dropdown.js.map
 //# sourceMappingURL=dropdown.js.map