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

package/dist/react/dropdown.js

@@ -1,391 +1,78 @@
-import * as React3 from 'react';
-import React3__default, { useState, useCallback, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import { createContext, useCallback, useMemo, useContext, useEffect, useState, useLayoutEffect, useRef } 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 { jsx, jsxs } from 'react/jsx-runtime';
+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 { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { Header, MenuSection, MenuTrigger, MenuItem, Menu, OverlayTriggerStateContext, 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, Fragment } 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;
-    }
-    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",
-        {
-          ref: lineRef,
-          points: "4 12 9 17 20 6",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
-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
-          }
-        ) })
-      }
-    );
-  }
-);
-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;
-    }
-  }
-  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) {
+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: mobileOptions?.sheet ?? true,
     title: mobileOptions?.title,
-    sheetExtraClassName: mobileOptions?.className,
+    sheetClassName: 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;
-    }
-    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 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);
-    }
-    if (contentHeight > primarySpace && primarySpace < DROPDOWN_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
-      effectiveSide = alternateSide;
-      maxHeight = Math.min(contentHeight, alternateSpace);
-      calc(alternateSide, maxHeight);
-    }
-  } 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;
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
     }
-  } else if (side === "left" && left < sx + pad) {
-    const fl = tr.right + sx + offset;
-    if (fl + mr.width <= vw + sx - pad) {
-      effectiveSide = "right";
-      left = fl;
+    if (open) {
+      setShouldRender(true);
     }
-  }
-  return { top, left, side: effectiveSide, maxHeight };
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
+  useEffect(() => {
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [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 useIsMobile(breakpoint = 1025) {
+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;
@@ -398,1031 +85,562 @@ function useIsMobile(breakpoint = 1025) {
   }, [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
-        } : {}
-      });
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
     }
-    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
-      }
-    );
+  }
+});
+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",
+        {
+          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" })
+      ] }) })
+    ] })
   }
 );
-DropdownTrigger.displayName = "DropdownTrigger";
-function DropdownChevron({
-  className,
-  ...props
-}) {
-  const { open } = useDropdown();
-  return /* @__PURE__ */ jsx(
-    ChevronDown,
+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",
     {
-      "aria-hidden": true,
-      className: cn("size-4 shrink-0", open && "rotate-180", className),
-      ...props
+      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"
     }
-  );
-}
-var DropdownMobileClose = React3__default.forwardRef(({ className, type = "button", ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    "button",
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
     {
-      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
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ]
+      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"
     }
-  );
-});
-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,
+  )
+] });
+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 Avatar = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  border,
+  badge,
+  status,
+  verified,
+  count,
+  focusable = false,
+  rounded = true,
   className,
-  style,
-  ...props
+  contentClassName
 }) => {
-  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;
+  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 (!isMobileSheet) {
-      setShouldRender(false);
-      return;
+    if (initials) {
+      return /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials });
     }
-    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 || !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();
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
     }
-  }, [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);
+    return placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) });
   };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleClick(e);
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size, className: cx("absolute right-0 bottom-0", size === "xs" && "-right-px -bottom-px") });
     }
+    if (count) {
+      return /* @__PURE__ */ jsx(AvatarCount, { count });
+    }
+    return badge;
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ...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",
+      "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: [
-        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",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            className: cn(
-              "ml-auto text-xs tracking-widest",
-              DROPDOWN_SHEET_MENU_SHORTCUT,
-              destructive ? "text-destructive/70 dark:text-destructive-foreground/80" : "opacity-40"
+            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: shortcut
+            children: renderMainContent()
           }
-        ) : null
+        ),
+        renderBadgeContent()
       ]
     }
   );
 };
-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);
+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",
     {
-      ...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 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: "mr-1 inline-flex shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-          Checkbox,
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
           {
-            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
+            "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" })
           }
-        )
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
       ]
     }
   );
 };
-var DropdownRadioGroup = ({ children, value, onValueChange, group }) => {
-  const { setRadioValue, radioValues } = useDropdown();
-  const resolvedValue = value ?? radioValues[group] ?? "";
-  const handleValueChange = useCallback(
-    (v) => {
-      setRadioValue(group, v);
-      onValueChange?.(v);
-    },
-    [group, onValueChange, setRadioValue]
-  );
-  const radioCtx = useMemo(
-    () => ({
-      group,
-      value: resolvedValue,
-      onValueChange: handleValueChange
-    }),
-    [group, resolvedValue, handleValueChange]
+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;
+    }
+    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",
+    {
+      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",
+        !isSelected && !isDisabled && "group-hover:bg-primary_hover",
+        isDisabled && "cursor-not-allowed opacity-50",
+        isDisabled && !isSelected && "bg-tertiary",
+        isFocusVisible && !isDisabled && focusRingShadow2,
+        className
+      ),
+      children: isSelected && /* @__PURE__ */ jsx(RadioAnimatedDot, { className: cx("pointer-events-none", dotClassName) })
+    }
   );
-  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);
+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"
+      }
+    },
+    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 "bg-secondary_hover";
+    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);
+var DropdownSheetDepthContext = createContext(0);
+function DropdownSheetCloseButton({ onClose }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
-      ...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);
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
       },
-      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: "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: [
-        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" })
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
       ]
     }
   );
-};
-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]);
+}
+function DropdownSheetChrome({ title, 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(DropdownSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-[max(2.5rem,calc(env(safe-area-inset-bottom)+2rem))]", children })
+  ] });
+}
+var DropdownPopover = ({ mobileOptions, children, className, style, ...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 parentDepth = useContext(DropdownSheetDepthContext);
+  const depth = parentDepth + 1;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
   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);
+    if (!useMobileSheet || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     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();
-    }
-  }, [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.body.style.overflow = prev;
     };
-    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) {
+  }, [useMobileSheet, open]);
+  if (!useMobileSheet) {
     return /* @__PURE__ */ jsx(
-      DropdownMobileBottomSheetPortal,
+      Popover,
       {
+        placement: "bottom right",
         ...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": "",
+        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 className === "function" ? className(state) : className
+        ),
         children
       }
     );
   }
-  return createPortal(
+  const close = () => overlayState?.close();
+  const showMobileSheet = shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const scrimZIndex = 50 + (depth - 1) * 10;
+  const sheetZIndex = scrimZIndex + 1;
+  const mobileScrim = shouldRender && typeof document !== "undefined" ? 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
+        className: "fixed inset-0 bg-overlay/70",
+        style: { ...backdropStyle, zIndex: scrimZIndex },
+        onClick: close,
+        "aria-hidden": "true"
       }
     ),
     document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(DropdownSheetDepthContext.Provider, { value: depth, children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 0,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        "data-dropdown-mobile-sheet": true,
+        style: { ...panelStyle, zIndex: sheetZIndex, ...style },
+        className: (state) => cx(
+          "fixed! inset-x-0! bottom-0! top-auto! right-0! left-0! flex max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] 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 outline-hidden",
+          resolvedMobile.sheetClassName,
+          typeof className === "function" ? className(state) : className
+        ),
+        children: /* @__PURE__ */ jsx(DropdownSheetChrome, { title: resolvedMobile.title, onClose: close, children: typeof children === "function" ? null : children })
+      }
+    )
+  ] });
+};
+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" })
+    }
   );
 };
+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