@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/components-c96g82th.js

@@ -0,0 +1,1444 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  FluidHoverHighlight2
+} from "./components-qdm3yh26.js";
+import {
+  shapeMap2
+} from "./components-78x40gee.js";
+import {
+  FocusRing2
+} from "./components-8nwsqjn8.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  popupScrollAreaClass2,
+  popupViewportClass2,
+  isDisabledRow2
+} from "./components-h6p86be3.js";
+import {
+  RowOrderContext2,
+  useRowOrder2,
+  useRowSlot2
+} from "./components-4bwsd46w.js";
+import {
+  useSize2
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
+import {
+  useSurface2,
+  SurfaceProvider2
+} from "./components-dhgk6mbt.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-yhgq0qxx.js";
+import {
+  useSelectionRuns2,
+  useMergeSplitBlocks2,
+  SelectionBackgrounds2
+} from "./components-8tt3xbb5.js";
+import {
+  ScrollArea2
+} from "./components-2z48g4fp.js";
+import {
+  SizeProvider2
+} from "./components-dcc02hs2.js";
+import {
+  Elevated2
+} from "./components-9as3rf68.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  useKeyboardNavGate2
+} from "./components-tz4gaf1v.js";
+
+// components/overlays/dropdown/index.tsx
+import { Menu as Menu2 } from "@base-ui/react/menu";
+import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
+import {
+  Children,
+  cloneElement,
+  createContext as createContext4,
+  forwardRef as forwardRef4,
+  isValidElement,
+  useCallback as useCallback3,
+  useContext as useContext4,
+  useEffect as useEffect4,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+
+// components/overlays/dropdown/dropdown-search.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownSearchHostContext = createContext(null);
+var DropdownFilterContext = createContext(null);
+var ROW_SELECTOR = [
+  '[role="menuitem"]:not([aria-disabled="true"])',
+  '[role="menuitemradio"]:not([aria-disabled="true"])',
+  '[role="menuitemcheckbox"]:not([aria-disabled="true"])'
+].join(", ");
+function menuRows(from) {
+  const menu = from?.closest('[role="menu"]');
+  return menu ? Array.from(menu.querySelectorAll(ROW_SELECTOR)) : [];
+}
+function useDropdownSearchHost(open, { containerRef, setActiveIndex }) {
+  const handleRef = useRef(null);
+  const [searchMounted, setSearchMounted] = useState(false);
+  const register = useCallback((handle) => {
+    handleRef.current = handle;
+    setSearchMounted(true);
+    return () => {
+      if (handleRef.current === handle) {
+        handleRef.current = null;
+        setSearchMounted(false);
+      }
+    };
+  }, []);
+  const highlightFirst = useCallback(() => {
+    const first = containerRef.current?.querySelector(ROW_SELECTOR);
+    const index = first?.getAttribute("data-fluid-hover-index");
+    setActiveIndex(index != null ? Number(index) : null);
+  }, [containerRef, setActiveIndex]);
+  const isSearchField = useCallback((target) => target !== null && target === handleRef.current?.input, []);
+  const host = useMemo(() => ({ register, open, highlightFirst }), [register, open, highlightFirst]);
+  const onKeyDownCapture = useCallback((e) => {
+    const handle = handleRef.current;
+    if (!handle?.input)
+      return;
+    if (e.target === handle.input)
+      return;
+    if (e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    if (e.key.length === 1 && e.key !== " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      handle.input.focus();
+      handle.append(e.key);
+    } else if (e.key === "Backspace") {
+      e.preventDefault();
+      e.stopPropagation();
+      handle.input.focus();
+      handle.deleteBackward();
+    }
+  }, []);
+  const hasSearch = useCallback(() => handleRef.current !== null, []);
+  return {
+    host,
+    hasSearch,
+    searchMounted,
+    onKeyDownCapture,
+    isSearchField,
+    highlightFirst
+  };
+}
+var DropdownSearch2 = forwardRef(({
+  value,
+  onValueChange,
+  filter = false,
+  placeholder = "Search…",
+  clearOnClose = true,
+  autoFocus = true,
+  className,
+  onKeyDown,
+  ...props
+}, ref) => {
+  const SearchIcon = useIcon2("search");
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  const host = useContext(DropdownSearchHostContext);
+  const open = host?.open ?? true;
+  const panel = useContext(DropdownFilterContext);
+  const managed = filter ? panel : null;
+  const query = managed ? managed.query : value ?? "";
+  const setQuery = useCallback((next) => {
+    managed?.setQuery(next);
+    onValueChange?.(next);
+  }, [managed, onValueChange]);
+  const surface = useSurface2();
+  const inputRef = useRef(null);
+  const valueRef = useRef(query);
+  valueRef.current = query;
+  const onValueChangeRef = useRef(setQuery);
+  onValueChangeRef.current = setQuery;
+  const clearOnCloseRef = useRef(clearOnClose);
+  clearOnCloseRef.current = clearOnClose;
+  useEffect(() => {
+    if (!host)
+      return;
+    return host.register({
+      get input() {
+        return inputRef.current;
+      },
+      append: (text) => onValueChangeRef.current(valueRef.current + text),
+      deleteBackward: () => onValueChangeRef.current(valueRef.current.slice(0, -1))
+    });
+  }, [host]);
+  useEffect(() => {
+    if (!open)
+      return;
+    if (clearOnCloseRef.current && valueRef.current !== "") {
+      onValueChangeRef.current("");
+    }
+    if (!autoFocus)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => inputRef.current?.focus());
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      if (inner !== undefined)
+        cancelAnimationFrame(inner);
+    };
+  }, [open, autoFocus]);
+  useEffect(() => {
+    if (!host || document.activeElement !== inputRef.current)
+      return;
+    host.highlightFirst();
+  }, [host, query]);
+  useEffect(() => () => {
+    if (clearOnCloseRef.current && valueRef.current !== "") {
+      onValueChangeRef.current("");
+    }
+  }, []);
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape" || e.key === "Tab")
+      return;
+    e.stopPropagation();
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      const rows = menuRows(e.currentTarget);
+      if (rows.length === 0)
+        return;
+      e.preventDefault();
+      (e.key === "ArrowDown" ? rows[0] : rows[rows.length - 1])?.focus();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      menuRows(e.currentTarget)[0]?.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn2("group/search sticky top-0 z-20 -mx-1 -mt-1 mb-0.5 flex shrink-0 items-center border-b border-border/60", SURFACE_BG2[surface], sizeClasses.control, sizeClasses.gap, compact ? "px-2.5" : "px-3", className),
+    children: [
+      /* @__PURE__ */ jsx(SearchIcon, {
+        size: sizeClasses.icon,
+        strokeWidth: 1.5,
+        className: "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-focus-within/search:text-foreground group-focus-within/search:stroke-[2]"
+      }),
+      /* @__PURE__ */ jsx("input", {
+        ref: (node) => {
+          inputRef.current = node;
+          if (typeof ref === "function")
+            ref(node);
+          else if (ref)
+            ref.current = node;
+        },
+        type: "text",
+        role: "searchbox",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: cn2("min-w-0 flex-1 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, compact ? "leading-5" : "leading-6"),
+        ...props
+      })
+    ]
+  });
+});
+DropdownSearch2.displayName = "DropdownSearch";
+var DropdownEmpty2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    role: "status",
+    "aria-live": "polite",
+    className: cn2("px-2 py-6 text-center text-muted-foreground", sizeClasses.text, className),
+    ...props
+  });
+});
+DropdownEmpty2.displayName = "DropdownEmpty";
+
+// components/overlays/dropdown/menu-item.tsx
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var shape = shapeMap2.rounded;
+var DropdownContext = createContext2(null);
+function useDropdown2() {
+  const ctx = useContext2(DropdownContext);
+  if (!ctx)
+    throw new Error("useDropdown must be used within a Dropdown");
+  return ctx;
+}
+function useDropdownMaybe2() {
+  return useContext2(DropdownContext);
+}
+var INSET_PX = { default: "pl-8 pr-2", compact: "pl-6 pr-1.5" };
+var FREEFORM_SVG = {
+  default: "[&>svg]:size-4 [&>svg]:shrink-0",
+  compact: "[&>svg]:size-3.5 [&>svg]:shrink-0"
+};
+var DropdownShortcut2 = forwardRef2(({ className, ...props }, ref) => {
+  const compact = useSize2().variant === "compact";
+  return /* @__PURE__ */ jsx2("kbd", {
+    ref,
+    className: cn2("ml-auto shrink-0 pl-4 font-sans text-muted-foreground", compact ? "text-caption-compact" : "text-caption", className),
+    ...props
+  });
+});
+DropdownShortcut2.displayName = "DropdownShortcut";
+var MenuItem2 = forwardRef2(({
+  icon: Icon,
+  label,
+  index: indexProp,
+  children,
+  checked,
+  onSelect,
+  disabled,
+  closeOnClick,
+  inset,
+  shortcut,
+  sourceIndex,
+  kind,
+  value,
+  pinned,
+  className,
+  onClick,
+  ...props
+}, ref) => {
+  const internalRef = useRef2(null);
+  const hasMounted = useRef2(false);
+  const {
+    registerItem,
+    activeIndex,
+    checkedIndex,
+    multiple,
+    checkedIndices,
+    renderMenuItem,
+    selfManaged,
+    toggleIndex,
+    reportChecked,
+    pin
+  } = useDropdown2();
+  const { index, firstRow } = useRowSlot2(internalRef, indexProp);
+  const authored = indexProp !== undefined;
+  const panelChecked = multiple ? checkedIndices?.includes(indexProp ?? -1) ?? false : checkedIndex === indexProp;
+  const isChecked = checked ?? (selfManaged && authored ? panelChecked : undefined);
+  const isCheckbox = kind ? kind === "checkbox" : !!multiple && typeof isChecked === "boolean";
+  const isRadio = kind ? kind === "radio" : !isCheckbox && typeof isChecked === "boolean";
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  useEffect2(() => {
+    if (!kind || !isChecked || index === undefined || !reportChecked)
+      return;
+    reportChecked(index, true);
+    return () => reportChecked(index, false);
+  }, [kind, isChecked, index, reportChecked]);
+  useEffect2(() => {
+    if (!pinned || index === undefined || !pin)
+      return;
+    pin(index, true);
+    return () => pin(index, false);
+  }, [pinned, index, pin]);
+  useEffect2(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = index !== undefined && activeIndex === index;
+  const skipAnimation = !hasMounted.current;
+  const sizeClasses = useSize2();
+  const text = label ?? (typeof children === "string" ? children : undefined);
+  const freeform = label === undefined && text === undefined;
+  const lit = isActive || isChecked;
+  const mergeRef = (node) => {
+    internalRef.current = node;
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  };
+  const activate = () => {
+    const event = new Event("select", { cancelable: true });
+    onSelect?.(event);
+    if (selfManaged && authored && !kind)
+      toggleIndex?.(sourceIndex ?? indexProp);
+    return event.defaultPrevented;
+  };
+  const handleActivate = disabled ? undefined : (e) => {
+    onClick?.(e);
+    if (activate())
+      e.preventBaseUIHandler?.();
+  };
+  const itemClassName = cn2(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${inset ? INSET_PX[sizeClasses.variant] : sizeClasses.itemPx} cursor-pointer outline-none`, freeform && [
+    sizeClasses.text,
+    FREEFORM_SVG[sizeClasses.variant],
+    "min-w-0 transition-[color,font-variation-settings] duration-fast",
+    lit ? "text-foreground" : "text-muted-foreground",
+    isChecked ? "weight-semibold" : "weight-normal"
+  ], disabled && "opacity-50 pointer-events-none", className);
+  const content = /* @__PURE__ */ jsxs2(Fragment, {
+    children: [
+      Icon && /* @__PURE__ */ jsxs2("span", {
+        className: "inline-grid",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "col-start-1 row-start-1 invisible",
+            children: /* @__PURE__ */ jsx2(Icon, {
+              size: sizeClasses.icon,
+              strokeWidth: 2
+            })
+          }),
+          /* @__PURE__ */ jsx2(Icon, {
+            size: sizeClasses.icon,
+            strokeWidth: lit ? 2 : 1.5,
+            className: cn2("col-start-1 row-start-1 transition-[color,stroke-width] duration-fast", lit ? "text-foreground" : "text-muted-foreground")
+          })
+        ]
+      }),
+      text !== undefined && /* @__PURE__ */ jsxs2("span", {
+        className: cn2("inline-grid min-w-0 flex-1", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "col-start-1 row-start-1 invisible truncate [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: text
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: cn2("col-start-1 row-start-1 truncate transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", lit ? "text-foreground" : "text-muted-foreground", isChecked ? "weight-semibold" : "weight-normal"),
+            children: text
+          })
+        ]
+      }),
+      label !== undefined || freeform ? children : null,
+      shortcut != null && /* @__PURE__ */ jsx2(DropdownShortcut2, {
+        children: shortcut
+      }),
+      /* @__PURE__ */ jsx2(AnimatePresence, {
+        children: isChecked && /* @__PURE__ */ jsx2(motion.svg, {
+          width: sizeClasses.icon,
+          height: sizeClasses.icon,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn2("text-foreground shrink-0", freeform && shortcut == null && "ml-auto"),
+          initial: { opacity: 1 },
+          animate: { opacity: 1 },
+          exit: { opacity: 1 },
+          children: /* @__PURE__ */ jsx2(motion.path, {
+            d: "M4 12L9 17L20 6",
+            initial: { pathLength: skipAnimation ? 1 : 0 },
+            animate: {
+              pathLength: 1,
+              transition: { duration: spring2.fast.duration, ease: "easeOut" }
+            },
+            exit: {
+              pathLength: 0,
+              transition: { duration: 0.04, ease: "easeIn" }
+            }
+          })
+        }, "check")
+      })
+    ]
+  });
+  if (renderMenuItem) {
+    return renderMenuItem({
+      radio: isRadio,
+      checkbox: isCheckbox,
+      checked: isChecked,
+      value: kind === "radio" ? value : index,
+      disabled,
+      label: text,
+      closeOnClick: closeOnClick ?? (kind ? kind === "radio" : !multiple),
+      onClick: handleActivate,
+      element: /* @__PURE__ */ jsx2("div", {
+        ref: mergeRef,
+        "data-fluid-hover-index": index,
+        "aria-label": label,
+        className: itemClassName,
+        ...props
+      }),
+      children: content
+    });
+  }
+  const tabStop = authored ? checkedIndex ?? checkedIndices?.[0] ?? 0 : firstRow;
+  return /* @__PURE__ */ jsx2("div", {
+    ref: mergeRef,
+    "data-fluid-hover-index": index,
+    tabIndex: !disabled && index === tabStop ? 0 : -1,
+    role: isCheckbox ? "menuitemcheckbox" : isRadio ? "menuitemradio" : "menuitem",
+    "aria-checked": typeof isChecked === "boolean" ? isChecked : undefined,
+    "aria-disabled": disabled || undefined,
+    "aria-label": label,
+    onClick: handleActivate,
+    onKeyDown: (e) => {
+      if (disabled)
+        return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        activate();
+      }
+    },
+    className: itemClassName,
+    ...props,
+    children: content
+  });
+});
+MenuItem2.displayName = "MenuItem";
+
+// components/overlays/dropdown/menu-parts.tsx
+import { Menu } from "@base-ui/react/menu";
+import {
+  createContext as createContext3,
+  forwardRef as forwardRef3,
+  useCallback as useCallback2,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var shape2 = shapeMap2.rounded;
+var NO_INDICES = [];
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    }
+  };
+}
+var ownEvent = (e) => e.currentTarget.contains(e.target);
+function renderPopupItem({
+  radio,
+  checkbox,
+  checked,
+  value,
+  disabled,
+  label,
+  closeOnClick,
+  onClick,
+  element,
+  children
+}) {
+  if (checkbox)
+    return /* @__PURE__ */ jsx3(Menu.CheckboxItem, {
+      checked: !!checked,
+      disabled,
+      label,
+      closeOnClick,
+      onClick,
+      render: element,
+      children
+    });
+  if (radio)
+    return /* @__PURE__ */ jsx3(Menu.RadioItem, {
+      value,
+      disabled,
+      label,
+      closeOnClick,
+      onClick,
+      render: element,
+      children
+    });
+  return /* @__PURE__ */ jsx3(Menu.Item, {
+    disabled,
+    label,
+    closeOnClick,
+    onClick,
+    render: element,
+    children
+  });
+}
+function useValueChecked() {
+  const [valueChecked, setValueChecked] = useState2(NO_INDICES);
+  const reportChecked = useCallback2((index, on) => setValueChecked((prev) => on === prev.includes(index) ? prev : on ? [...prev, index] : prev.filter((i) => i !== index)), []);
+  return { valueChecked, reportChecked };
+}
+function useMenuPanel(containerRef, open) {
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
+  const { activeIndex, setActiveIndex, itemRects, isMeasured } = hover;
+  const rowOrder = useRowOrder2();
+  const [focusedIndex, setFocusedIndex] = useState2(null);
+  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate2(open);
+  const [pinned, setPinned] = useState2(null);
+  const pin = useCallback2((index, on) => setPinned((p) => on ? index : p === index ? null : p), []);
+  const { valueChecked, reportChecked } = useValueChecked();
+  useEffect3(() => {
+    if (open)
+      return;
+    setFocusedIndex(null);
+    setActiveIndex(null);
+  }, [open, setActiveIndex]);
+  const lit = activeIndex ?? pinned;
+  const shownHover = useMemo2(() => ({ ...hover, activeIndex: lit }), [hover, lit]);
+  const focusRect = isMeasured && focusedIndex !== null ? itemRects[focusedIndex] ?? null : null;
+  const focusRow = useCallback2((e) => {
+    const row = e.target.closest("[data-fluid-hover-index]");
+    if (!row)
+      return false;
+    const index = Number(row.getAttribute("data-fluid-hover-index"));
+    setActiveIndex(isDisabledRow2(row) ? null : index);
+    setFocusedIndex(keyboardNavRef.current && e.target.matches(":focus-visible") ? index : null);
+    return true;
+  }, [keyboardNavRef, setActiveIndex]);
+  return {
+    hover,
+    shownHover,
+    lit,
+    rowOrder,
+    focusRect,
+    setFocusedIndex,
+    focusRow,
+    trackKeyboardNav,
+    pin,
+    valueChecked,
+    reportChecked
+  };
+}
+var DropdownGroupContext = createContext3(false);
+var DropdownGroup2 = forwardRef3(({ className, ...props }, ref) => {
+  const own = useRef3(null);
+  useRowSlot2(own, undefined, true);
+  return /* @__PURE__ */ jsx3(DropdownGroupContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx3(Menu.Group, {
+      ref: mergeRefs(own, ref),
+      className: cn2("flex flex-col", className),
+      ...props
+    })
+  });
+});
+DropdownGroup2.displayName = "DropdownGroup";
+var DropdownCheckboxItem2 = forwardRef3(({ checked, defaultChecked = false, onCheckedChange, onSelect, closeOnClick = false, ...props }, ref) => {
+  const [on, setOn] = useControllableState2(checked, defaultChecked, onCheckedChange);
+  return /* @__PURE__ */ jsx3(MenuItem2, {
+    ref,
+    kind: "checkbox",
+    checked: on,
+    closeOnClick,
+    onSelect: (event) => {
+      onSelect?.(event);
+      setOn((prev) => !prev);
+    },
+    ...props
+  });
+});
+DropdownCheckboxItem2.displayName = "DropdownCheckboxItem";
+var RadioValueContext = createContext3(null);
+var DropdownRadioGroup2 = forwardRef3(({ value, defaultValue, onValueChange, className, ...props }, ref) => {
+  const [current, setCurrent] = useControllableState2(value, defaultValue, (next) => {
+    if (next !== undefined)
+      onValueChange?.(next);
+  });
+  const own = useRef3(null);
+  useRowSlot2(own, undefined, true);
+  const ctx = useMemo2(() => ({ value: current, select: (next) => setCurrent(next) }), [current, setCurrent]);
+  return /* @__PURE__ */ jsx3(RadioValueContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx3(DropdownGroupContext.Provider, {
+      value: false,
+      children: /* @__PURE__ */ jsx3(Menu.RadioGroup, {
+        ref: mergeRefs(own, ref),
+        value: current ?? null,
+        className: cn2("flex flex-col", className),
+        ...props
+      })
+    })
+  });
+});
+DropdownRadioGroup2.displayName = "DropdownRadioGroup";
+var DropdownRadioItem2 = forwardRef3(({ value, onSelect, ...props }, ref) => {
+  const group = useContext3(RadioValueContext);
+  return /* @__PURE__ */ jsx3(MenuItem2, {
+    ref,
+    kind: "radio",
+    value,
+    checked: group?.value === value,
+    onSelect: (event) => {
+      onSelect?.(event);
+      group?.select(value);
+    },
+    ...props
+  });
+});
+DropdownRadioItem2.displayName = "DropdownRadioItem";
+var SubContext = createContext3(null);
+function useSubContext() {
+  const ctx = useContext3(SubContext);
+  if (!ctx)
+    throw new Error("Dropdown.SubTrigger and Dropdown.SubContent must be inside <Dropdown.Sub>");
+  return ctx;
+}
+function DropdownSub2({ children, open, defaultOpen = false, onOpenChange, disabled = false }) {
+  const [current, setCurrent] = useControllableState2(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin2();
+  const ctx = useMemo2(() => ({ open: current, origin }), [current, origin]);
+  return /* @__PURE__ */ jsx3(SubContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx3(Menu.SubmenuRoot, {
+      open: current,
+      disabled,
+      onOpenChange: (next, details) => {
+        if (next)
+          capture(details);
+        setCurrent(next);
+      },
+      children
+    })
+  });
+}
+DropdownSub2.displayName = "DropdownSub";
+var DropdownSubTrigger2 = forwardRef3(({ openOnHover, delay, closeDelay, ...props }, ref) => {
+  const { open, origin } = useSubContext();
+  const parent = useDropdown2();
+  const Chevron = useIcon2("chevron-right");
+  const size = useSize2();
+  const ctx = useMemo2(() => ({
+    ...parent,
+    renderMenuItem: ({ disabled, label, onClick, element, children }) => /* @__PURE__ */ jsxs3(Menu.SubmenuTrigger, {
+      disabled,
+      label,
+      onClick,
+      openOnHover,
+      delay,
+      closeDelay,
+      render: element,
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(Chevron, {
+          size: size.icon,
+          strokeWidth: open ? 2 : 1.5,
+          className: cn2("ml-auto shrink-0 transition-[color,stroke-width] duration-fast", open ? "text-foreground" : "text-muted-foreground")
+        })
+      ]
+    })
+  }), [parent, openOnHover, delay, closeDelay, Chevron, size.icon, open]);
+  const setTrigger = useCallback2((node) => {
+    if (node)
+      origin.current = { ...origin.current, trigger: node };
+  }, [origin]);
+  return /* @__PURE__ */ jsx3(DropdownContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx3(MenuItem2, {
+      ref: mergeRefs(setTrigger, ref),
+      pinned: open,
+      ...props
+    })
+  });
+});
+DropdownSubTrigger2.displayName = "DropdownSubTrigger";
+var DropdownSubContent2 = forwardRef3(({
+  children,
+  className,
+  side = "inline-end",
+  align = "start",
+  sideOffset = 8,
+  alignOffset = -4,
+  from,
+  effect,
+  tier = "moderate",
+  keepMounted = false
+}, ref) => {
+  const { open, origin } = useSubContext();
+  const morph = useMorph2(open, origin, { from, effect, tier });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const level = Math.min(useSurface2() + 2, 8);
+  const containerRef = useRef3(null);
+  const panel = useMenuPanel(containerRef, open);
+  const { hover, focusRow, setFocusedIndex } = panel;
+  const { handlers, setActiveIndex, registerItem, itemRects, remeasure } = hover;
+  useEffect3(() => {
+    if (open)
+      remeasure();
+  }, [open, remeasure]);
+  const runs = useSelectionRuns2(panel.valueChecked);
+  const blocks = useMergeSplitBlocks2(runs, itemRects, shape2.bgRadius);
+  const ctx = useMemo2(() => ({
+    registerItem,
+    activeIndex: panel.lit,
+    inMenu: true,
+    renderMenuItem: renderPopupItem,
+    pin: panel.pin,
+    reportChecked: panel.reportChecked
+  }), [registerItem, panel.lit, panel.pin, panel.reportChecked]);
+  return /* @__PURE__ */ jsx3(Menu.Portal, {
+    keepMounted,
+    children: /* @__PURE__ */ jsx3(Menu.Positioner, {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx3(Menu.Popup, {
+        ref: morph.popupRef,
+        onKeyDownCapture: (e) => ownEvent(e) && panel.trackKeyboardNav(e),
+        onMouseEnter: () => {
+          handlers.onMouseEnter();
+          setFocusedIndex(null);
+        },
+        onMouseMove: (e) => ownEvent(e) && handlers.onMouseMove(e),
+        onMouseLeave: handlers.onMouseLeave,
+        onClick: (e) => ownEvent(e) && handlers.onClick(e),
+        onFocus: (e) => {
+          if (!ownEvent(e) || focusRow(e))
+            return;
+          if (e.target !== e.currentTarget)
+            setActiveIndex(null);
+        },
+        onBlur: (e) => {
+          if (!ownEvent(e) || e.currentTarget.contains(e.relatedTarget))
+            return;
+          setFocusedIndex(null);
+          setActiveIndex(null);
+        },
+        className: "relative select-none outline-none",
+        children: /* @__PURE__ */ jsx3(SurfaceProvider2, {
+          value: level,
+          children: /* @__PURE__ */ jsx3(MorphSurface2, {
+            morph,
+            bg: SURFACE_BG2[level],
+            shadow: SURFACE_SHADOW2[3],
+            radius: shape2.container,
+            className: cn2("flex w-56 max-w-[var(--available-width)] max-h-[min(480px,var(--available-height))] flex-col overflow-hidden", shape2.container, className),
+            children: /* @__PURE__ */ jsx3(ScrollArea2, {
+              className: popupScrollAreaClass2,
+              viewportClassName: cn2(popupViewportClass2, "scroll-fade"),
+              children: /* @__PURE__ */ jsxs3("div", {
+                ref: containerRef,
+                className: "relative flex flex-col p-1",
+                children: [
+                  /* @__PURE__ */ jsx3(SelectionBackgrounds2, {
+                    blocks
+                  }),
+                  /* @__PURE__ */ jsx3(FluidHoverHighlight2, {
+                    hover: panel.shownHover,
+                    hidden: !open,
+                    className: shape2.bg
+                  }),
+                  /* @__PURE__ */ jsx3(FocusRing2, {
+                    rect: open ? panel.focusRect : null,
+                    shape: "rounded"
+                  }),
+                  /* @__PURE__ */ jsx3(RowOrderContext2.Provider, {
+                    value: panel.rowOrder,
+                    children: /* @__PURE__ */ jsx3(DropdownContext.Provider, {
+                      value: ctx,
+                      children
+                    })
+                  })
+                ]
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DropdownSubContent2.displayName = "DropdownSubContent";
+
+// components/overlays/dropdown/index.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var shape3 = shapeMap2.rounded;
+var NONE = -1;
+var NO_INDICES2 = [];
+var NO_RECTS = [];
+function usePanelSelection({
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange
+}, sourceOf, filtering) {
+  const [single, setSingle] = useControllableState2(defaultCheckedIndex === undefined ? checkedIndex ?? NONE : undefined, defaultCheckedIndex ?? NONE, (index) => onCheckedIndexChange?.(index === NONE ? undefined : index));
+  const [many, setMany] = useControllableState2(defaultCheckedIndices === undefined ? checkedIndices ?? NO_INDICES2 : undefined, defaultCheckedIndices ?? NO_INDICES2, (indices) => onCheckedIndicesChange?.(indices));
+  const multiple = checkedIndices != null || defaultCheckedIndices != null;
+  const selfManaged = defaultCheckedIndex !== undefined || defaultCheckedIndices !== undefined;
+  const toggleIndex = useCallback3((source) => {
+    if (multiple) {
+      setMany((prev) => prev.includes(source) ? prev.filter((i) => i !== source) : [...prev, source].sort((a, b) => a - b));
+      return;
+    }
+    setSingle(source);
+  }, [multiple, setMany, setSingle]);
+  const renderedIndex = useMemo3(() => {
+    if (single === NONE)
+      return;
+    const i = filtering ? sourceOf.indexOf(single) : single;
+    return i === -1 ? undefined : i;
+  }, [single, filtering, sourceOf]);
+  const renderedIndices = useMemo3(() => {
+    if (!multiple)
+      return;
+    if (!filtering)
+      return many;
+    return many.map((s) => sourceOf.indexOf(s)).filter((i) => i !== -1);
+  }, [multiple, many, filtering, sourceOf]);
+  return {
+    checkedIndex: renderedIndex,
+    checkedIndices: renderedIndices,
+    multiple,
+    selfManaged,
+    toggleIndex
+  };
+}
+function usePanelRows(children) {
+  const [query, setQuery] = useState3("");
+  const filtering = useMemo3(() => Children.toArray(children).some((child) => isValidElement(child) && child.type === DropdownSearch2 && child.props.filter), [children]);
+  const filterCtx = useMemo3(() => ({ query, setQuery }), [query]);
+  const { content, sourceOf } = useMemo3(() => {
+    if (!filtering)
+      return { content: children, sourceOf: NO_INDICES2 };
+    const needle = query.trim().toLowerCase();
+    const rendered = [];
+    const empties = [];
+    const sources = [];
+    for (const child of Children.toArray(children)) {
+      if (!isValidElement(child)) {
+        rendered.push(child);
+        continue;
+      }
+      if (child.type === DropdownEmpty2) {
+        empties.push(child);
+        continue;
+      }
+      const rowProps = child.props;
+      if (typeof rowProps.label !== "string" || typeof rowProps.index !== "number") {
+        rendered.push(child);
+        continue;
+      }
+      if (needle && !rowProps.label.toLowerCase().includes(needle))
+        continue;
+      rendered.push(cloneElement(child, {
+        index: sources.length,
+        sourceIndex: rowProps.index
+      }));
+      sources.push(rowProps.index);
+    }
+    if (sources.length === 0)
+      rendered.push(...empties);
+    return { content: rendered, sourceOf: sources };
+  }, [children, filtering, query]);
+  return { content, sourceOf, filtering, filterCtx: filtering ? filterCtx : null };
+}
+var Dropdown2 = forwardRef4(({
+  children,
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef4(null);
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow2 });
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const [focusedIndex, setFocusedIndex] = useState3(null);
+  const rowOrder = useRowOrder2();
+  const { valueChecked, reportChecked } = useValueChecked();
+  const rows = usePanelRows(children);
+  const selection = usePanelSelection({
+    checkedIndex,
+    defaultCheckedIndex,
+    onCheckedIndexChange,
+    checkedIndices,
+    defaultCheckedIndices,
+    onCheckedIndicesChange
+  }, rows.sourceOf, rows.filtering);
+  const multiple = selection.multiple;
+  const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null;
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const runs = useSelectionRuns2(useMemo3(() => [...selection.checkedIndices ?? NO_INDICES2, ...valueChecked], [selection.checkedIndices, valueChecked]));
+  const blocks = useMergeSplitBlocks2(runs, itemRects, shape3.bgRadius);
+  const panelCtx = useMemo3(() => ({
+    registerItem,
+    activeIndex,
+    checkedIndex: selection.checkedIndex,
+    multiple,
+    checkedIndices: selection.checkedIndices,
+    selfManaged: selection.selfManaged,
+    toggleIndex: selection.toggleIndex,
+    reportChecked
+  }), [
+    registerItem,
+    activeIndex,
+    selection.checkedIndex,
+    multiple,
+    selection.checkedIndices,
+    selection.selfManaged,
+    selection.toggleIndex,
+    reportChecked
+  ]);
+  const panel = /* @__PURE__ */ jsx4(RowOrderContext2.Provider, {
+    value: rowOrder,
+    children: /* @__PURE__ */ jsx4(DropdownContext.Provider, {
+      value: panelCtx,
+      children: /* @__PURE__ */ jsx4(DropdownFilterContext.Provider, {
+        value: rows.filterCtx,
+        children: /* @__PURE__ */ jsxs4(Elevated2, {
+          offset: 2,
+          shadowLevel: 3,
+          ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+              ref(node);
+            else if (ref)
+              ref.current = node;
+          },
+          onMouseEnter: handlers.onMouseEnter,
+          onMouseMove: handlers.onMouseMove,
+          onMouseLeave: handlers.onMouseLeave,
+          onClick: handlers.onClick,
+          onFocus: (e) => {
+            const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+            if (indexAttr != null) {
+              const idx = Number(indexAttr);
+              setActiveIndex(idx);
+              setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+            }
+          },
+          onBlur: (e) => {
+            if (containerRef.current?.contains(e.relatedTarget))
+              return;
+            setFocusedIndex(null);
+            setActiveIndex(null);
+          },
+          onKeyDown: (e) => {
+            const items = Array.from(containerRef.current?.querySelectorAll('[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]') ?? []);
+            const currentIdx = items.indexOf(e.target);
+            if (currentIdx === -1)
+              return;
+            if (["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) {
+              e.preventDefault();
+              const next = ["ArrowDown", "ArrowRight"].includes(e.key) ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+              items[next]?.focus();
+            } else if (e.key === "Home") {
+              e.preventDefault();
+              items[0]?.focus();
+            } else if (e.key === "End") {
+              e.preventDefault();
+              items[items.length - 1]?.focus();
+            }
+          },
+          role: "group",
+          className: cn2(`relative flex flex-col w-72 max-w-full  p-1 select-none`, className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx4(SelectionBackgrounds2, {
+              blocks
+            }),
+            /* @__PURE__ */ jsx4(AnimatePresence2, {
+              children: checkedRect && /* @__PURE__ */ jsx4(motion2.div, {
+                className: `absolute ${shape3.bg} bg-active pointer-events-none`,
+                initial: false,
+                animate: {
+                  top: checkedRect.top,
+                  left: checkedRect.left,
+                  width: checkedRect.width,
+                  height: checkedRect.height,
+                  opacity: 1
+                },
+                exit: { opacity: 0, transition: spring2.moderate.exit },
+                transition: {
+                  ...spring2.moderate,
+                  opacity: { duration: spring2.fast.duration }
+                }
+              })
+            }),
+            /* @__PURE__ */ jsx4(FluidHoverHighlight2, {
+              hover,
+              from: checkedRect,
+              className: shape3.bg
+            }),
+            /* @__PURE__ */ jsx4(AnimatePresence2, {
+              children: focusRect && /* @__PURE__ */ jsx4(motion2.div, {
+                className: `absolute ${shape3.focusRing} pointer-events-none z-20 border border-focus-ring`,
+                initial: false,
+                animate: {
+                  left: focusRect.left - 2,
+                  top: focusRect.top - 2,
+                  width: focusRect.width + 4,
+                  height: focusRect.height + 4
+                },
+                exit: { opacity: 0, transition: spring2.fast.exit },
+                transition: {
+                  ...spring2.fast,
+                  opacity: { duration: spring2.fast.duration }
+                }
+              })
+            }),
+            rows.content
+          ]
+        })
+      })
+    })
+  });
+  return size ? /* @__PURE__ */ jsx4(SizeProvider2, {
+    size,
+    children: panel
+  }) : panel;
+});
+Dropdown2.displayName = "Dropdown";
+var DropdownMenuContext = createContext4(null);
+function useDropdownMenuContext() {
+  const ctx = useContext4(DropdownMenuContext);
+  if (!ctx)
+    throw new Error("DropdownMenu compound components must be inside <DropdownMenu>");
+  return ctx;
+}
+function DropdownMenu2({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  size
+}) {
+  const [internalOpen, setInternalOpen] = useState3(defaultOpen);
+  const open = openProp !== undefined ? openProp : internalOpen;
+  const { origin, capture } = useMorphOrigin2();
+  const handleOpenChange = useCallback3((next, details) => {
+    if (next)
+      capture(details);
+    if (openProp === undefined)
+      setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [openProp, onOpenChange, capture]);
+  const ctx = useMemo3(() => ({ open, origin }), [open, origin]);
+  const root = /* @__PURE__ */ jsx4(DropdownMenuContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx4(Menu2.Root, {
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+      modal: false,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx4(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+}
+DropdownMenu2.displayName = "DropdownMenu";
+var DropdownTrigger2 = forwardRef4(({ asChild, render, children, ...props }, ref) => asChild && isValidElement(children) ? /* @__PURE__ */ jsx4(Menu2.Trigger, {
+  ref,
+  render: children,
+  ...props
+}) : /* @__PURE__ */ jsx4(Menu2.Trigger, {
+  ref,
+  render,
+  ...props,
+  children
+}));
+DropdownTrigger2.displayName = "DropdownTrigger";
+var DropdownContent2 = forwardRef4(({
+  className,
+  children,
+  checkedIndex,
+  defaultCheckedIndex,
+  onCheckedIndexChange,
+  checkedIndices,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  from,
+  effect,
+  hideSource,
+  tier = "moderate",
+  keepMounted = false
+}, ref) => {
+  const { open, origin } = useDropdownMenuContext();
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  useImperativeHandle2(ref, () => morph.popup, [morph.popup]);
+  const level = Math.min(useSurface2() + 2, 8);
+  const containerRef = useRef4(null);
+  const panel = useMenuPanel(containerRef, open);
+  const { hover, focusRow, setFocusedIndex } = panel;
+  const { setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
+  const rows = usePanelRows(children);
+  const selection = usePanelSelection({
+    checkedIndex,
+    defaultCheckedIndex,
+    onCheckedIndexChange,
+    checkedIndices,
+    defaultCheckedIndices,
+    onCheckedIndicesChange
+  }, rows.sourceOf, rows.filtering);
+  const {
+    host: searchHost,
+    hasSearch,
+    searchMounted,
+    onKeyDownCapture: redirectTypingToSearch,
+    isSearchField,
+    highlightFirst
+  } = useDropdownSearchHost(open, { containerRef, setActiveIndex });
+  useEffect4(() => {
+    if (!open)
+      return;
+    let inner;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => {
+        if (hasSearch())
+          return;
+        const container = containerRef.current;
+        if (!container || container.contains(document.activeElement) && document.activeElement !== container)
+          return;
+        const first = container.querySelector('[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"])');
+        first?.focus();
+      });
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      if (inner !== undefined)
+        cancelAnimationFrame(inner);
+    };
+  }, [open, hasSearch]);
+  useEffect4(() => {
+    if (!open)
+      return;
+    remeasure();
+  }, [open, remeasure]);
+  const multiple = selection.multiple;
+  const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null;
+  const runs = useSelectionRuns2(useMemo3(() => [...selection.checkedIndices ?? NO_INDICES2, ...panel.valueChecked], [selection.checkedIndices, panel.valueChecked]));
+  const blocks = useMergeSplitBlocks2(runs, open ? itemRects : NO_RECTS, shape3.bgRadius);
+  const contentCtx = useMemo3(() => ({
+    registerItem,
+    activeIndex: panel.lit,
+    checkedIndex: selection.checkedIndex,
+    multiple,
+    checkedIndices: selection.checkedIndices,
+    inMenu: true,
+    renderMenuItem: renderPopupItem,
+    selfManaged: selection.selfManaged,
+    toggleIndex: selection.toggleIndex,
+    pin: panel.pin,
+    reportChecked: panel.reportChecked
+  }), [
+    registerItem,
+    panel.lit,
+    selection.checkedIndex,
+    multiple,
+    selection.checkedIndices,
+    selection.selfManaged,
+    selection.toggleIndex,
+    panel.pin,
+    panel.reportChecked
+  ]);
+  return /* @__PURE__ */ jsx4(Menu2.Portal, {
+    keepMounted,
+    children: /* @__PURE__ */ jsx4(Menu2.Positioner, {
+      side,
+      align,
+      sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx4(DropdownContext.Provider, {
+        value: contentCtx,
+        children: /* @__PURE__ */ jsx4(DropdownFilterContext.Provider, {
+          value: rows.filterCtx,
+          children: /* @__PURE__ */ jsx4(DropdownSearchHostContext.Provider, {
+            value: searchHost,
+            children: /* @__PURE__ */ jsx4(Menu2.Popup, {
+              ref: morph.popupRef,
+              onKeyDownCapture: (e) => {
+                if (!ownEvent(e))
+                  return;
+                panel.trackKeyboardNav(e);
+                redirectTypingToSearch(e);
+              },
+              onMouseEnter: () => {
+                handlers.onMouseEnter();
+                setFocusedIndex(null);
+              },
+              onMouseMove: (e) => ownEvent(e) && handlers.onMouseMove(e),
+              onClick: (e) => ownEvent(e) && handlers.onClick(e),
+              onMouseLeave: () => {
+                handlers.onMouseLeave();
+                if (isSearchField(document.activeElement))
+                  highlightFirst();
+              },
+              onFocus: (e) => {
+                if (!ownEvent(e) || focusRow(e))
+                  return;
+                if (isSearchField(e.target)) {
+                  highlightFirst();
+                } else if (e.target !== e.currentTarget) {
+                  setActiveIndex(null);
+                }
+              },
+              onBlur: (e) => {
+                if (!ownEvent(e) || e.currentTarget.contains(e.relatedTarget))
+                  return;
+                setFocusedIndex(null);
+                setActiveIndex(null);
+              },
+              className: "relative select-none outline-none",
+              children: /* @__PURE__ */ jsx4(SurfaceProvider2, {
+                value: level,
+                children: /* @__PURE__ */ jsx4(MorphSurface2, {
+                  morph,
+                  bg: SURFACE_BG2[level],
+                  shadow: SURFACE_SHADOW2[3],
+                  radius: shape3.container,
+                  className: cn2(`flex flex-col w-72 max-w-full min-w-[var(--anchor-width)] max-h-[min(480px,var(--available-height))] overflow-hidden ${shape3.container}`, className),
+                  children: /* @__PURE__ */ jsx4(ScrollArea2, {
+                    className: popupScrollAreaClass2,
+                    viewportClassName: cn2(popupViewportClass2, !searchMounted && "scroll-fade"),
+                    children: /* @__PURE__ */ jsxs4("div", {
+                      ref: containerRef,
+                      className: "relative flex flex-col p-1",
+                      children: [
+                        /* @__PURE__ */ jsx4(SelectionBackgrounds2, {
+                          blocks
+                        }),
+                        /* @__PURE__ */ jsx4(AnimatePresence2, {
+                          children: checkedRect && /* @__PURE__ */ jsx4(motion2.div, {
+                            className: `absolute ${shape3.bg} bg-active pointer-events-none`,
+                            initial: false,
+                            animate: {
+                              top: checkedRect.top,
+                              left: checkedRect.left,
+                              width: checkedRect.width,
+                              height: checkedRect.height,
+                              opacity: 1
+                            },
+                            exit: { opacity: 0, transition: spring2.moderate.exit },
+                            transition: {
+                              ...spring2.moderate,
+                              opacity: { duration: spring2.fast.duration }
+                            }
+                          })
+                        }),
+                        /* @__PURE__ */ jsx4(FluidHoverHighlight2, {
+                          hover: panel.shownHover,
+                          from: checkedRect,
+                          className: shape3.bg
+                        }),
+                        /* @__PURE__ */ jsx4(FocusRing2, {
+                          rect: open ? panel.focusRect : null,
+                          shape: "rounded"
+                        }),
+                        /* @__PURE__ */ jsx4(RowOrderContext2.Provider, {
+                          value: panel.rowOrder,
+                          children: /* @__PURE__ */ jsx4(Menu2.RadioGroup, {
+                            value: selection.checkedIndex ?? null,
+                            className: "contents",
+                            children: rows.content
+                          })
+                        })
+                      ]
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DropdownContent2.displayName = "DropdownContent";
+var DropdownLabel2 = forwardRef4(({ className, inset, ...props }, ref) => {
+  const size = useSize2();
+  const own = useRef4(null);
+  useRowSlot2(own, undefined, true);
+  const classes = cn2("py-1.5 shrink-0 text-muted-foreground", inset ? INSET_PX[size.variant] : "px-2", size.variant === "compact" ? "text-caption-compact" : "text-caption", className);
+  return useContext4(DropdownGroupContext) ? /* @__PURE__ */ jsx4(Menu2.GroupLabel, {
+    ref: mergeRefs(own, ref),
+    className: classes,
+    ...props
+  }) : /* @__PURE__ */ jsx4("div", {
+    ref: mergeRefs(own, ref),
+    className: classes,
+    ...props
+  });
+});
+DropdownLabel2.displayName = "DropdownLabel";
+var DropdownSeparator2 = forwardRef4(({ className, ...props }, ref) => {
+  const own = useRef4(null);
+  useRowSlot2(own, undefined, true);
+  return /* @__PURE__ */ jsx4("div", {
+    ref: mergeRefs(own, ref),
+    role: "separator",
+    className: cn2("my-1 -mx-1 h-px shrink-0 bg-border/60", className),
+    ...props
+  });
+});
+DropdownSeparator2.displayName = "DropdownSeparator";
+Object.assign(Dropdown2, {
+  Menu: DropdownMenu2,
+  Trigger: DropdownTrigger2,
+  Content: DropdownContent2,
+  Item: MenuItem2,
+  Label: DropdownLabel2,
+  Separator: DropdownSeparator2,
+  Search: DropdownSearch2,
+  Empty: DropdownEmpty2,
+  Group: DropdownGroup2,
+  Shortcut: DropdownShortcut2,
+  CheckboxItem: DropdownCheckboxItem2,
+  RadioGroup: DropdownRadioGroup2,
+  RadioItem: DropdownRadioItem2,
+  Sub: DropdownSub2,
+  SubTrigger: DropdownSubTrigger2,
+  SubContent: DropdownSubContent2
+});
+var dropdown_default = Dropdown2;
+
+export { DropdownSearch2, DropdownEmpty2, DropdownContext, useDropdown2, useDropdownMaybe2, DropdownShortcut2, MenuItem2, DropdownGroup2, DropdownCheckboxItem2, DropdownRadioGroup2, DropdownRadioItem2, DropdownSub2, DropdownSubTrigger2, DropdownSubContent2, Dropdown2, DropdownMenu2, DropdownTrigger2, DropdownContent2, DropdownLabel2, DropdownSeparator2, dropdown_default };