@enonic/ui 0.12.0 → 0.13.0

package/dist/enonic-ui.es.js

@@ -1,6 +1,8 @@
 import { options, Fragment } from "preact";
-import { forwardRef, createContext, useId, useContext, createElement, useState, isValidElement, Children, useRef, useEffect, useCallback, createPortal, useMemo } from "react";
-import { Root } from "@radix-ui/react-slot";
+import { createContext, useContext, useId, useCallback, forwardRef, useState, useMemo, useEffect, createElement, useRef, isValidElement, Children, createPortal as createPortal$1 } from "react";
+import { Slot, Root } from "@radix-ui/react-slot";
+import { FocusTrap } from "focus-trap-react";
+import { createPortal } from "react-dom";
 import { useState as useState$1 } from "preact/hooks";
 var f = 0;
 function u(e, t, n, o, i, u2) {
@@ -11,6 +13,75 @@ function u(e, t, n, o, i, u2) {
   if ("function" == typeof e && (a = e.defaultProps)) for (c in a) void 0 === p[c] && (p[c] = a[c]);
   return options.vnode && options.vnode(l), l;
 }
+const AvatarContext = createContext(null);
+const AvatarProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(AvatarContext.Provider, { value, children });
+};
+AvatarProvider.displayName = "AvatarProvider";
+const useAvatar = () => {
+  const ctx = useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error("useAvatar must be used within an Avatar");
+  }
+  return ctx;
+};
+const ComboboxContext = createContext(null);
+const ComboboxProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(ComboboxContext.Provider, { value, children });
+};
+ComboboxProvider.displayName = "ComboboxProvider";
+const useCombobox = () => {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error("useCombobox must be used within a ComboboxProvider");
+  }
+  return ctx;
+};
+const DialogContext = createContext(void 0);
+const DialogProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
+};
+DialogProvider.displayName = "DialogProvider";
+const useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("useDialog must be used within a DialogProvider");
+  }
+  return context;
+};
+const IdContext = createContext(void 0);
+const IdProvider = ({ children, prefix }) => {
+  return /* @__PURE__ */ u(IdContext.Provider, { value: { prefix }, children });
+};
+IdProvider.displayName = "IdProvider";
+const usePrefixedId = (providedId, prefix) => {
+  const baseId = providedId ?? useId();
+  const context = useContext(IdContext);
+  return [context?.prefix, prefix, baseId].filter(Boolean).join("-");
+};
+const ListboxContext = createContext(null);
+const ListboxProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(ListboxContext.Provider, { value, children });
+};
+ListboxProvider.displayName = "ListboxProvider";
+const useListbox = () => {
+  const ctx = useContext(ListboxContext);
+  if (!ctx) {
+    throw new Error("useListbox must be used within a Listbox");
+  }
+  return ctx;
+};
+const MenuContext = createContext(void 0);
+const MenuProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(MenuContext.Provider, { value, children });
+};
+const useMenu = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error("useMenu must be used within a MenuProvider");
+  }
+  return context;
+};
 function r(e) {
   var t, f2, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -2978,6 +3049,22 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function setRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    try {
+      ref.current = value;
+    } catch {
+    }
+  }
+}
+function useComposedRefs(...refs) {
+  return useCallback((node) => {
+    refs.forEach((ref) => setRef(ref, node));
+  }, refs);
+}
 function isSignal(v) {
   return !!(v && typeof v === "object" && "value" in v && "peek" in v && typeof v.peek === "function" && "subscribe" in v && typeof v.subscribe === "function");
 }
@@ -3024,6 +3111,125 @@ const cva = (base, config) => (props) => {
   }, []);
   return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
+const avatarVariants = cva("relative flex shrink-0 overflow-hidden", {
+  variants: {
+    size: {
+      sm: "w-6 h-6 text-xs",
+      md: "w-8 h-8 text-sm",
+      lg: "w-12 h-12 text-base"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle"
+  }
+});
+const AvatarRoot = forwardRef(
+  ({ children, className, size, shape, ...props }, ref) => {
+    const [imageLoadingStatus, setImageLoadingStatus] = useState("idle");
+    const handleImageLoadingStatusChange = useCallback((status) => {
+      setImageLoadingStatus(status);
+    }, []);
+    const contextValue = useMemo(
+      () => ({
+        imageLoadingStatus,
+        onImageLoadingStatusChange: handleImageLoadingStatusChange
+      }),
+      [imageLoadingStatus, handleImageLoadingStatusChange]
+    );
+    return /* @__PURE__ */ u(AvatarProvider, { value: contextValue, children: /* @__PURE__ */ u("span", { ref, className: cn(avatarVariants({ size, shape }), className), ...props, children }) });
+  }
+);
+AvatarRoot.displayName = "AvatarRoot";
+const AvatarImage = forwardRef(
+  ({ src, alt, className, onLoadingStatusChange, ...props }, ref) => {
+    const { imageLoadingStatus, onImageLoadingStatusChange } = useAvatar();
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+      setHasError(false);
+      if (!src) {
+        return;
+      }
+      onImageLoadingStatusChange("loading");
+      onLoadingStatusChange?.("loading");
+      const img = new Image();
+      const handleLoad = () => {
+        onImageLoadingStatusChange("loaded");
+        onLoadingStatusChange?.("loaded");
+      };
+      const handleError = () => {
+        setHasError(true);
+        onImageLoadingStatusChange("error");
+        onLoadingStatusChange?.("error");
+      };
+      img.addEventListener("load", handleLoad);
+      img.addEventListener("error", handleError);
+      img.src = src;
+      return () => {
+        img.removeEventListener("load", handleLoad);
+        img.removeEventListener("error", handleError);
+      };
+    }, [src, onImageLoadingStatusChange, onLoadingStatusChange]);
+    if (!src || hasError || imageLoadingStatus === "error") {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "img",
+      {
+        ref,
+        src,
+        alt,
+        className: cn("aspect-square h-full w-full object-cover", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = forwardRef(
+  ({ children, className, delayMs = 0, ...props }, ref) => {
+    const { imageLoadingStatus } = useAvatar();
+    const [canRender, setCanRender] = useState(delayMs === 0);
+    useEffect(() => {
+      if (delayMs === 0) {
+        return;
+      }
+      const timerId = setTimeout(() => {
+        setCanRender(true);
+      }, delayMs);
+      return () => {
+        clearTimeout(timerId);
+      };
+    }, [delayMs]);
+    const shouldRender = canRender && (imageLoadingStatus === "idle" || imageLoadingStatus === "error");
+    if (!shouldRender) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "span",
+      {
+        ref,
+        className: cn(
+          "flex h-full w-full items-center justify-center",
+          "bg-surface-secondary text-alt font-medium uppercase cursor-default",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
 const buttonVariants = cva(
   [
     "inline-flex items-center justify-center",
@@ -3036,10 +3242,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main",
-        filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-rev dark:active:text-main",
-        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active dark:active:text-main",
-        outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main border border-bdr-strong"
+        text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt",
+        filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-alt",
+        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active",
+        outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt border border-bdr-strong"
       },
       size: {
         sm: "h-9 px-3.5 gap-2 text-sm",
@@ -3101,20 +3307,6 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-const IdContext = createContext(void 0);
-const IdProvider = ({ children, prefix }) => {
-  return /* @__PURE__ */ u(IdContext.Provider, { value: { prefix }, children });
-};
-IdProvider.displayName = "IdProvider";
-const usePrefixedId = (providedId) => {
-  const baseId = useId();
-  const context = useContext(IdContext);
-  if (providedId) {
-    return providedId;
-  }
-  const id = context?.prefix ? `${context.prefix}-${baseId}` : baseId;
-  return id;
-};
 /**
  * @license lucide-react v0.545.0 - ISC
  *
@@ -3220,19 +3412,27 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$8);
+/**
+ * @license lucide-react v0.545.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$7);
 /**
  * @license lucide-react v0.545.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$6);
+const __iconNode$6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$6);
 /**
  * @license lucide-react v0.545.0 - ISC
  *
@@ -3487,96 +3687,746 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
-const inputContainerVariants = cva(
+const ComboboxRoot = ({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  closeOnBlur = true,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  selectionMode = "single",
+  selection: controlledSelection,
+  onSelectionChange
+}) => {
+  const baseId = usePrefixedId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpenControlled = controlledOpen !== void 0;
+  const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isOpenControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const [uncontrolledSelection, setUncontrolledSelection] = useState([]);
+  const isSelectionControlled = controlledSelection !== void 0;
+  const selectedItems = isSelectionControlled ? controlledSelection : uncontrolledSelection;
+  const onSelectionChangeInner = useCallback(
+    (newSelection) => {
+      if (!isSelectionControlled) {
+        setUncontrolledSelection(newSelection);
+      }
+      onSelectionChange?.(newSelection);
+      if (selectionMode === "single") {
+        setOpen(false);
+      }
+    },
+    [isSelectionControlled, selectionMode, setOpen, onSelectionChange, selectedItems]
+  );
+  const [uncontrolledInput, setUncontrolledInput] = useState("");
+  const isInputControlled = value !== void 0;
+  const inputValue = isInputControlled ? value : uncontrolledInput;
+  const setInputValue = useCallback(
+    (next) => {
+      if (!isInputControlled) {
+        setUncontrolledInput(next);
+      }
+      onChange?.(next);
+      setOpen(true);
+    },
+    [isInputControlled, onChange, setOpen]
+  );
+  const toggleValueSelection = useCallback(
+    (value2) => {
+      let newSelection = [];
+      if (selectionMode === "multiple") {
+        if (selectedItems.includes(value2)) {
+          newSelection = selectedItems.filter((item) => item !== value2);
+        } else {
+          newSelection = [...selectedItems, value2];
+        }
+      } else {
+        newSelection = [value2];
+      }
+      onSelectionChangeInner(newSelection);
+    },
+    [selectionMode, selectedItems, onSelectionChangeInner]
+  );
+  const [active, setActive] = useState(void 0);
+  const innerRef = useRef(null);
+  const getItems = useCallback(() => {
+    const container = innerRef.current;
+    if (!container) {
+      return [];
+    }
+    const optionNodes = container.querySelectorAll('[role="option"][data-value]');
+    return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
+  }, []);
+  const moveActive = useCallback(
+    (delta) => {
+      const items = getItems();
+      if (!items.length) {
+        return;
+      }
+      const currentIndex = active ? items.indexOf(active) : -1;
+      const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
+      setActive(items[newIndex]);
+    },
+    [active, setActive, getItems]
+  );
+  const keyHandler = useCallback(
+    (e) => {
+      if (disabled) {
+        return;
+      }
+      const items = getItems();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+        moveActive(1);
+      } else if (e.key === "ArrowUp") {
+        setOpen(true);
+        moveActive(-1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(items[0]);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(items[items.length - 1]);
+      } else if (e.key === "Enter") {
+        if (open) {
+          e.preventDefault();
+          if (active) {
+            toggleValueSelection(active);
+          }
+          setOpen(false);
+          setActive(items[0]);
+        }
+      } else if (e.key === "Escape") {
+        setOpen(false);
+        setActive(items[0]);
+      }
+    },
+    [disabled, moveActive, setOpen, toggleValueSelection, open]
+  );
+  useEffect(() => {
+    if (open && active === void 0) {
+      const items = getItems();
+      if (items.length > 0) {
+        setActive(items[0]);
+      }
+    }
+  }, [open, active, getItems]);
+  const context = useMemo(
+    () => ({
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      baseId,
+      active,
+      disabled,
+      error,
+      closeOnBlur,
+      keyHandler,
+      selection: selectedItems
+    }),
+    [open, setOpen, closeOnBlur, keyHandler, inputValue, setInputValue, active, baseId, disabled, error, selectedItems]
+  );
+  return /* @__PURE__ */ u("div", { ref: innerRef, children: /* @__PURE__ */ u(ComboboxProvider, { value: context, children: /* @__PURE__ */ u(
+    Listbox.Root,
+    {
+      selectionMode,
+      selection: selectedItems,
+      onSelectionChange: onSelectionChangeInner,
+      disabled,
+      active,
+      focusable: false,
+      baseId,
+      setActive,
+      keyHandler,
+      children
+    }
+  ) }) });
+};
+ComboboxRoot.displayName = "Combobox.Root";
+const ComboboxContent = forwardRef(
+  ({ className, children }, ref) => {
+    const { setOpen, baseId, closeOnBlur } = useCombobox();
+    const innerRef = useRef(null);
+    const handleFocusOut = closeOnBlur ? useCallback(
+      (e) => {
+        const nextTarget = e.relatedTarget;
+        if (nextTarget && innerRef.current?.contains(nextTarget)) {
+          return;
+        }
+        setOpen(false);
+      },
+      [baseId, setOpen]
+    ) : void 0;
+    return (
+      // eslint-disable-next-line react/no-unknown-property
+      /* @__PURE__ */ u("div", { onFocusOut: handleFocusOut, ref: useComposedRefs(ref, innerRef), className, children })
+    );
+  }
+);
+const comboboxControlVariants = cva(
   [
-    "relative flex rounded-sm overflow-hidden",
-    "h-12 border focus-within:border-bdr-solid",
+    "flex items-center",
+    "h-12 rounded-sm border bg-surface-neutral",
     "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
     "transition-highlight"
   ],
   {
     variants: {
-      state: {
-        default: "border-bdr-subtle focus-within:border-bdr-strong",
-        error: "border-error focus-within:border-error focus-within:ring-error/50"
+      error: {
+        true: "border-error focus-within:border-error focus-within:ring-error/50",
+        false: "border-bdr-subtle focus-within:border-bdr-strong"
+      },
+      open: {
+        true: "border-bdr-strong",
+        false: null
       },
       disabled: {
-        true: "select-none"
+        true: "pointer-events-none select-none opacity-30",
+        false: null
       }
     },
     defaultVariants: {
-      state: "default",
+      error: false,
+      open: false,
       disabled: false
     }
   }
 );
-const Addon = ({ children, error }) => /* @__PURE__ */ u(
-  "div",
-  {
-    className: cn(
-      "flex items-center justify-center shrink-0 min-w-12 px-4",
-      "text-sm text-subtle bg-surface-primary",
-      "first:rounded-l-sm first:border-r first:border-bdr-subtle",
-      "last:rounded-r-sm last:border-l last:border-bdr-subtle",
-      error && "first:border-error last:border-error"
-    ),
-    children
+const ComboboxControl = ({ children, className }) => {
+  const { open, disabled, error } = useCombobox();
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        comboboxControlVariants({
+          error,
+          open,
+          disabled
+        }),
+        className
+      ),
+      "data-open": open ? "true" : void 0,
+      children
+    }
+  );
+};
+ComboboxControl.displayName = "Combobox.Control";
+const ComboboxInput = forwardRef(
+  ({ className, placeholder, ...props }, ref) => {
+    const { inputValue, setInputValue, open, keyHandler, selection, baseId, active, disabled } = useCombobox();
+    const innerRef = useRef(null);
+    useEffect(() => {
+      if (open && !disabled) {
+        innerRef.current?.focus();
+      }
+    }, [open, selection, disabled]);
+    return /* @__PURE__ */ u(
+      SearchInput,
+      {
+        ref: useComposedRefs(ref, innerRef),
+        id: `${baseId}-input`,
+        className: "border-none focus:outline-none focus-within:outline-none h-auto focus-within:ring-0 grow",
+        value: inputValue,
+        onChange: setInputValue,
+        onKeyDown: keyHandler,
+        placeholder,
+        disabled,
+        "aria-disabled": disabled,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": `${baseId}-listbox`,
+        "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
+        showClearButton: false,
+        ...props
+      }
+    );
   }
 );
-const Input = forwardRef(
-  ({ className, label, description, error, startAddon, endAddon, id, disabled, readOnly, ...props }, ref) => {
-    const inputId = usePrefixedId(unwrap(id));
-    const state = error ? "error" : "default";
-    const hasError = state === "error";
-    return /* @__PURE__ */ u("div", { className: cn("w-full", disabled && "opacity-30", className), children: [
-      /* @__PURE__ */ u("div", { className: "mb-2", children: [
-        label && /* @__PURE__ */ u(
-          "label",
-          {
-            htmlFor: inputId,
-            className: cn("block text-base font-semibold text-main", disabled && "opacity-30"),
-            children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
-              readOnly && /* @__PURE__ */ u(LockKeyhole, { size: 16, strokeWidth: 2.5 }),
-              label
-            ] })
-          }
-        ),
-        description && /* @__PURE__ */ u("div", { className: cn("text-sm text-subtle", disabled && "opacity-30"), children: description })
-      ] }),
-      /* @__PURE__ */ u("div", { className: cn(inputContainerVariants({ state, disabled })), children: [
-        startAddon && /* @__PURE__ */ u(Addon, { error: hasError, children: startAddon }),
-        /* @__PURE__ */ u(
-          "input",
-          {
-            ref,
-            id: inputId,
-            className: cn(
-              "flex-1 w-full px-4.5 text-base",
-              "text-main bg-surface-neutral placeholder:text-subtle",
-              "border-0 focus:outline-none",
-              "disabled:select-none read-only:bg-surface-primary",
-              startAddon && "rounded-l-none",
-              endAddon && "rounded-r-none"
-            ),
-            disabled,
-            readOnly,
-            ...props
-          }
-        ),
-        endAddon && /* @__PURE__ */ u(Addon, { error: hasError, children: endAddon })
-      ] }),
-      error && /* @__PURE__ */ u("div", { className: "flex items-center gap-2 mt-2 leading-5 text-error", children: [
-        /* @__PURE__ */ u(OctagonAlert, { size: 16, strokeWidth: 2.5 }),
-        error
-      ] })
-    ] });
+ComboboxInput.displayName = "Combobox.Input";
+const ComboboxToggle = ({ className }) => {
+  const { open, setOpen, disabled } = useCombobox();
+  return /* @__PURE__ */ u(
+    IconButton,
+    {
+      type: "button",
+      variant: "text",
+      size: "md",
+      icon: ChevronDown,
+      "aria-label": "Toggle",
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+        setOpen(!open);
+      },
+      disabled,
+      tabIndex: -1,
+      className: cn(
+        "h-10 w-10 text-subtle transition-transform hover:bg-surface-primary-hover mr-1",
+        open && "rotate-180",
+        className
+      )
+    }
+  );
+};
+ComboboxToggle.displayName = "Combobox.Toggle";
+const ComboboxPopup = ({ children, className }) => {
+  const { open } = useCombobox();
+  if (!open) {
+    return null;
   }
-);
-Input.displayName = "Input";
-function isExternalHref(href) {
-  try {
-    if (href.startsWith("mailto:") || href.startsWith("tel:")) return true;
-    const location = typeof window !== "undefined" ? window.location : void 0;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        "absolute left-0 right-0 z-50 mt-1 rounded-sm bg-surface-neutral shadow-lg ring-1 ring-bdr-subtle",
+        className
+      ),
+      children
+    }
+  );
+};
+ComboboxPopup.displayName = "Combobox.Popup";
+const Combobox = Object.assign(ComboboxRoot, {
+  Root: ComboboxRoot,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Toggle: ComboboxToggle,
+  Popup: ComboboxPopup
+});
+const useScrollLock = (lock, element) => {
+  useEffect(() => {
+    if (!lock) {
+      return;
+    }
+    const target = element ?? document.body;
+    const originalOverflow = target.style.overflow;
+    target.style.overflow = "hidden";
+    return () => {
+      target.style.overflow = originalOverflow;
+    };
+  }, [lock, element]);
+};
+const DialogRoot = ({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const value = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+  return /* @__PURE__ */ u(DialogProvider, { value, children });
+};
+DialogRoot.displayName = "Dialog.Root";
+const DialogTrigger = forwardRef(
+  ({ asChild, children, onClick, ...props }, ref) => {
+    const { setOpen } = useDialog();
+    const handleClick = (e) => {
+      onClick?.(e);
+      setOpen(true);
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogTrigger.displayName = "Dialog.Trigger";
+const DialogPortal = ({ children, container, forceMount }) => {
+  const { open } = useDialog();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || !forceMount && !open) {
+    return null;
+  }
+  return createPortal(children, container ?? document.body);
+};
+DialogPortal.displayName = "Dialog.Portal";
+const DialogOverlay = forwardRef(
+  ({ className, forceMount, ...props }, ref) => {
+    const { open } = useDialog();
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "fixed inset-0 z-30 bg-overlay backdrop-blur-xs",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogOverlay.displayName = "Dialog.Overlay";
+const DialogContent = forwardRef(
+  ({
+    children,
+    className,
+    forceMount,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    ...props
+  }, ref) => {
+    const { open, setOpen } = useDialog();
+    const contentRef = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    useEffect(() => {
+      if (typeof ref === "function") {
+        ref(contentRef.current);
+      } else if (ref) {
+        ref.current = contentRef.current;
+      }
+    }, [ref]);
+    useScrollLock(open);
+    const handleEscapeKey = useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          onEscapeKeyDown?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onEscapeKeyDown, setOpen]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("keydown", handleEscapeKey);
+      return () => document.removeEventListener("keydown", handleEscapeKey);
+    }, [open, handleEscapeKey]);
+    const handlePointerDownOutside = useCallback(
+      (e) => {
+        const target = e.target;
+        if (contentRef.current && !contentRef.current.contains(target)) {
+          onPointerDownOutside?.(e);
+          onInteractOutside?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onPointerDownOutside, onInteractOutside, setOpen]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("pointerdown", handlePointerDownOutside);
+      return () => document.removeEventListener("pointerdown", handlePointerDownOutside);
+    }, [open, handlePointerDownOutside]);
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      FocusTrap,
+      {
+        active: open,
+        focusTrapOptions: {
+          initialFocus: false,
+          fallbackFocus: () => contentRef.current ?? document.body,
+          escapeDeactivates: false,
+          clickOutsideDeactivates: false,
+          returnFocusOnDeactivate: true,
+          allowOutsideClick: true,
+          preventScroll: false,
+          onActivate: () => {
+            requestAnimationFrame(() => {
+              const event = new Event("openautofocus");
+              onOpenAutoFocus?.(event);
+              if (!event.defaultPrevented && contentRef.current) {
+                contentRef.current.focus();
+              }
+            });
+          },
+          onDeactivate: () => {
+            requestAnimationFrame(() => {
+              const event = new Event("closeautofocus");
+              onCloseAutoFocus?.(event);
+            });
+          }
+        },
+        children: /* @__PURE__ */ u("div", { className: "fixed inset-0 z-40 flex items-center justify-center p-4", children: /* @__PURE__ */ u(
+          "div",
+          {
+            ref: contentRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            "data-state": open ? "open" : "closed",
+            tabIndex: -1,
+            className: cn(
+              "relative rounded-lg shadow-xl bg-surface-neutral",
+              "flex flex-col max-w-lg w-full max-h-[90vh] gap-10 p-10",
+              "border border-bdr-subtle outline-none overflow-hidden",
+              "data-[state=open]:animate-in data-[state=closed]:animate-out",
+              "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              className
+            ),
+            ...props,
+            children
+          }
+        ) })
+      }
+    );
+  }
+);
+DialogContent.displayName = "Dialog.Content";
+const DialogHeader = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("header", { ref, className: cn("relative grid gap-2.5 self-stretch", className), ...props, children });
+  }
+);
+DialogHeader.displayName = "Dialog.Header";
+const DialogClose = forwardRef(
+  ({ children, asChild, onClick, ...props }, ref) => {
+    const { setOpen } = useDialog();
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+          setOpen(false);
+        }
+      },
+      [onClick, setOpen]
+    );
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogClose.displayName = "Dialog.Close";
+const DialogTitle = forwardRef(
+  ({ children, className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "h2";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        className: cn("text-2xl font-semibold", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogTitle.displayName = "Dialog.Title";
+const DialogDescription = forwardRef(
+  ({ children, className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        className: cn("", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogDescription.displayName = "Dialog.Description";
+const DialogBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("div", { ref, className: cn("min-h-0 flex-1 overflow-y-auto", className), ...props, children });
+  }
+);
+DialogBody.displayName = "Dialog.Body";
+const DialogFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("footer", { ref, className: cn("flex justify-end gap-2.5", className), ...props, children });
+  }
+);
+DialogFooter.displayName = "Dialog.Footer";
+const DialogDefaultClose = forwardRef((props, ref) => {
+  return /* @__PURE__ */ u(DialogClose, { asChild: true, ref, ...props, children: /* @__PURE__ */ u(
+    IconButton,
+    {
+      "aria-label": "Close",
+      "data-area": "close",
+      icon: X,
+      size: "lg",
+      iconSize: 36,
+      iconStrokeWidth: 1,
+      shape: "round",
+      variant: "filled"
+    }
+  ) });
+});
+DialogDefaultClose.displayName = "Dialog.DefaultClose";
+const DialogDefaultHeader = forwardRef(
+  ({ title, description, withClose, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u(DialogHeader, { ref, className: cn(withClose && "grid-cols-[minmax(0,1fr)_auto]", className), ...props, children: [
+      /* @__PURE__ */ u(DialogTitle, { className: cn(withClose && "col-start-1 row-start-1 min-w-0"), children: title }),
+      withClose && /* @__PURE__ */ u(DialogDefaultClose, { className: "col-start-2 row-start-1 row-span-2 self-start justify-self-end" }),
+      description && /* @__PURE__ */ u(DialogDescription, { className: cn(withClose && "row-start-2"), children: description }),
+      children
+    ] });
+  }
+);
+DialogDefaultHeader.displayName = "Dialog.DefaultHeader";
+const Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Close: DialogClose,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  DefaultClose: DialogDefaultClose,
+  DefaultHeader: DialogDefaultHeader
+});
+const inputContainerVariants = cva(
+  [
+    "relative flex rounded-sm overflow-hidden",
+    "h-12 border focus-within:border-bdr-solid",
+    "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+    "transition-highlight"
+  ],
+  {
+    variants: {
+      state: {
+        default: "border-bdr-subtle focus-within:border-bdr-strong",
+        error: "border-error focus-within:border-error focus-within:ring-error/50"
+      },
+      disabled: {
+        true: "select-none"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      disabled: false
+    }
+  }
+);
+const Addon = ({ children, error }) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-center shrink-0 min-w-12 px-4",
+      "text-sm text-subtle bg-surface-primary",
+      "first:rounded-l-sm first:border-r first:border-bdr-subtle",
+      "last:rounded-r-sm last:border-l last:border-bdr-subtle",
+      error && "first:border-error last:border-error"
+    ),
+    children
+  }
+);
+const Input = forwardRef(
+  ({ className, label, description, error, startAddon, endAddon, id, disabled, readOnly, ...props }, ref) => {
+    const inputId = usePrefixedId(unwrap(id));
+    const state = error ? "error" : "default";
+    const hasError = state === "error";
+    return /* @__PURE__ */ u("div", { className: cn("w-full", disabled && "opacity-30", className), children: [
+      /* @__PURE__ */ u("div", { className: "mb-2", children: [
+        label && /* @__PURE__ */ u(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn("block text-base font-semibold text-main", disabled && "opacity-30"),
+            children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+              readOnly && /* @__PURE__ */ u(LockKeyhole, { size: 16, strokeWidth: 2.5 }),
+              label
+            ] })
+          }
+        ),
+        description && /* @__PURE__ */ u("div", { className: cn("text-sm text-subtle", disabled && "opacity-30"), children: description })
+      ] }),
+      /* @__PURE__ */ u("div", { className: cn(inputContainerVariants({ state, disabled })), children: [
+        startAddon && /* @__PURE__ */ u(Addon, { error: hasError, children: startAddon }),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref,
+            id: inputId,
+            className: cn(
+              "flex-1 w-full px-4.5 text-base",
+              "text-main bg-surface-neutral placeholder:text-subtle",
+              "border-0 focus:outline-none",
+              "disabled:select-none read-only:bg-surface-primary",
+              startAddon && "rounded-l-none",
+              endAddon && "rounded-r-none"
+            ),
+            disabled,
+            readOnly,
+            ...props
+          }
+        ),
+        endAddon && /* @__PURE__ */ u(Addon, { error: hasError, children: endAddon })
+      ] }),
+      error && /* @__PURE__ */ u("div", { className: "flex items-center gap-2 mt-2 leading-5 text-error", children: [
+        /* @__PURE__ */ u(OctagonAlert, { size: 16, strokeWidth: 2.5 }),
+        error
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function isExternalHref(href) {
+  try {
+    if (href.startsWith("mailto:") || href.startsWith("tel:")) return true;
+    const location = typeof window !== "undefined" ? window.location : void 0;
     if (!location) return true;
     const url = new URL(href, location.origin);
     return url.origin !== location.origin;
@@ -3618,74 +4468,847 @@ const Link = forwardRef(
     );
   }
 );
-Link.displayName = "Link";
-function isOfType(node, Comp) {
-  return isValidElement(node) && node.type === Comp;
-}
-function findComponentByType(children, Comp) {
-  return Children.toArray(children).find((child) => isOfType(child, Comp));
-}
-const ListItemLeft = ({ children, className, ...props }) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2.5 flex-shrink-0", className), ...props, children });
-const ListItemContent = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ u("div", { className: cn("flex-1 min-w-0", className), ...props, children });
-};
-ListItemContent.displayName = "ListItem.Content";
-const ListItemDefaultContent = ({
-  className,
-  label,
-  description,
-  metadata,
-  icon
-}) => {
-  return /* @__PURE__ */ u(ListItemContent, { className: cn(icon && "grid grid-cols-[auto_1fr] gap-2.5 items-center", className), children: [
-    icon && /* @__PURE__ */ u("div", { className: "flex items-center justify-center flex-shrink-0 group-data-[tone=inverse]:text-alt", children: icon }),
-    /* @__PURE__ */ u("div", { className: "min-w-0 text-left", children: [
-      label && /* @__PURE__ */ u("h1", { className: "truncate font-semibold group-data-[tone=inverse]:text-alt", children: label }),
-      description && /* @__PURE__ */ u("p", { className: "truncate text-sm text-subtle group-data-[tone=inverse]:text-alt", children: description }),
-      metadata && /* @__PURE__ */ u("p", { className: "text-xs text-subtle group-data-[tone=inverse]:text-alt", children: metadata })
-    ] })
-  ] });
-};
-const ListItemRight = ({
-  children,
-  className,
-  ...props
-}) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-5 flex-shrink-0", className), ...props, children });
-ListItemRight.displayName = "ListItem.Right";
-const ListItemRoot = ({ children, className, selected, ...props }) => {
-  const left = findComponentByType(children, ListItemLeft);
-  const content = findComponentByType(children, ListItemContent) ?? findComponentByType(children, ListItemDefaultContent);
-  const right = findComponentByType(children, ListItemRight);
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: cn(
-        "group flex items-center px-2.5 py-1 gap-2.5",
-        selected && "bg-surface-primary-selected text-alt",
-        className
-      ),
-      "data-tone": selected && "inverse",
-      role: "listitem",
-      ...props,
-      children: [
-        left,
-        content,
-        right
-      ]
-    }
-  );
-};
-ListItemRoot.displayName = "ListItem";
-const ListItem = Object.assign(ListItemRoot, {
-  Left: ListItemLeft,
-  Content: ListItemContent,
-  DefaultContent: ListItemDefaultContent,
-  Right: ListItemRight
-});
+Link.displayName = "Link";
+function isOfType(node, Comp) {
+  return isValidElement(node) && node.type === Comp;
+}
+function findComponentByType(children, Comp) {
+  return Children.toArray(children).find((child) => isOfType(child, Comp));
+}
+const ListItemLeft = ({ children, className, ...props }) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-2.5 flex-shrink-0", className), ...props, children });
+const ListItemContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ u("div", { className: cn("flex-1 min-w-0", className), ...props, children });
+};
+ListItemContent.displayName = "ListItem.Content";
+const ListItemDefaultContent = ({
+  className,
+  label,
+  description,
+  metadata,
+  icon
+}) => {
+  return /* @__PURE__ */ u(ListItemContent, { className: cn(icon && "grid grid-cols-[auto_1fr] gap-2.5 items-center", className), children: [
+    icon && /* @__PURE__ */ u("div", { className: "flex items-center justify-center flex-shrink-0 group-data-[tone=inverse]:text-alt", children: icon }),
+    /* @__PURE__ */ u("div", { className: "min-w-0 text-left", children: [
+      label && /* @__PURE__ */ u("h1", { className: "truncate font-semibold group-data-[tone=inverse]:text-alt", children: label }),
+      description && /* @__PURE__ */ u("p", { className: "truncate text-sm text-subtle group-data-[tone=inverse]:text-alt", children: description }),
+      metadata && /* @__PURE__ */ u("p", { className: "text-xs text-subtle group-data-[tone=inverse]:text-alt", children: metadata })
+    ] })
+  ] });
+};
+const ListItemRight = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ u("div", { className: cn("flex items-center gap-5 flex-shrink-0", className), ...props, children });
+ListItemRight.displayName = "ListItem.Right";
+const ListItemRoot = ({ children, className, selected, ...props }) => {
+  const left = findComponentByType(children, ListItemLeft);
+  const content = findComponentByType(children, ListItemContent) ?? findComponentByType(children, ListItemDefaultContent);
+  const right = findComponentByType(children, ListItemRight);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        "group flex items-center px-2.5 py-1 gap-2.5",
+        selected && "bg-surface-primary-selected text-alt",
+        className
+      ),
+      "data-tone": selected && "inverse",
+      role: "listitem",
+      ...props,
+      children: [
+        left,
+        content,
+        right
+      ]
+    }
+  );
+};
+ListItemRoot.displayName = "ListItem";
+const ListItem = Object.assign(ListItemRoot, {
+  Left: ListItemLeft,
+  Content: ListItemContent,
+  DefaultContent: ListItemDefaultContent,
+  Right: ListItemRight
+});
+const EMPTY_SELECTION = [];
+const ListboxRoot = ({
+  baseId,
+  selection: controlledSelection,
+  defaultSelection = EMPTY_SELECTION,
+  onSelectionChange,
+  active: controlledActive,
+  defaultActive,
+  setActive,
+  selectionMode = "single",
+  focusable = true,
+  disabled,
+  children,
+  keyHandler
+}) => {
+  const listboxBaseId = baseId ?? usePrefixedId();
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
+  const isSelectionControlled = controlledSelection !== void 0;
+  const selectionSet = useMemo(
+    () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
+    [isSelectionControlled, controlledSelection, uncontrolledSelection]
+  );
+  const [uncontrolledActive, setUncontrolledActive] = useState(defaultActive);
+  const isActiveControlled = controlledActive !== void 0;
+  const active = isActiveControlled ? controlledActive : uncontrolledActive;
+  const updateActive = useCallback(
+    (id) => {
+      if (!isActiveControlled) {
+        setUncontrolledActive(id);
+      }
+      setActive?.(id);
+    },
+    [isActiveControlled, setActive]
+  );
+  const toggleValue = useCallback(
+    (value) => {
+      const isSelected = selectionSet.has(value);
+      const newSet = new Set(selectionSet);
+      if (selectionMode === "single") {
+        newSet.clear();
+        if (!isSelected) {
+          newSet.add(value);
+        }
+      } else {
+        if (isSelected) {
+          newSet.delete(value);
+        } else {
+          newSet.add(value);
+        }
+      }
+      if (!isSelectionControlled) {
+        setUncontrolledSelection(newSet);
+      }
+      onSelectionChange?.(Array.from(newSet));
+      updateActive(value);
+    },
+    [selectionSet, selectionMode, isSelectionControlled, onSelectionChange, updateActive]
+  );
+  const contextValue = useMemo(
+    () => ({
+      active,
+      selection: selectionSet,
+      selectionMode,
+      focusable,
+      disabled,
+      setActive: updateActive,
+      toggleValue,
+      baseId: listboxBaseId,
+      keyHandler
+    }),
+    [active, selectionSet, selectionMode, focusable, disabled, updateActive, toggleValue, listboxBaseId, keyHandler]
+  );
+  return /* @__PURE__ */ u(ListboxProvider, { value: contextValue, children });
+};
+ListboxRoot.displayName = "ListboxRoot";
+const ListboxContent = forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    const {
+      active,
+      disabled,
+      setActive,
+      toggleValue,
+      baseId,
+      selectionMode,
+      keyHandler,
+      focusable = true
+    } = useListbox();
+    const innerRef = useRef(null);
+    const getItems = useCallback(() => {
+      const container = innerRef.current;
+      if (!container) {
+        return [];
+      }
+      const optionNodes = container.querySelectorAll('[role="option"][data-value]');
+      return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
+    }, []);
+    const moveActive = useCallback(
+      (delta) => {
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        const currentIndex = active ? items.indexOf(active) : -1;
+        const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
+        setActive(items[newIndex]);
+      },
+      [active, setActive, getItems]
+    );
+    const handleKeyDown = keyHandler ?? useCallback(
+      (e) => {
+        if (disabled) {
+          return;
+        }
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          moveActive(1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          moveActive(-1);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          setActive(items[0]);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          setActive(items[items.length - 1]);
+        } else if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          if (active) {
+            toggleValue(active);
+          }
+        }
+      },
+      [disabled, getItems, active, moveActive, toggleValue, setActive]
+    );
+    useEffect(() => {
+      if (!active || !innerRef.current) {
+        return;
+      }
+      const el = innerRef.current.querySelector(`#${baseId}-listbox-option-${active}`);
+      if (el) {
+        el.scrollIntoView({
+          block: "nearest",
+          behavior: "auto"
+        });
+      }
+    }, [active, baseId]);
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: useComposedRefs(ref, innerRef),
+        id: `${baseId}-listbox`,
+        className: cn(
+          "flex flex-col items-start grow shrink-0 basis-0",
+          "max-h-100 overflow-y-auto",
+          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50",
+          disabled && "pointer-events-none select-none opacity-30",
+          className
+        ),
+        role: "listbox",
+        "aria-disabled": disabled,
+        "aria-label": label,
+        "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+        "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
+        tabIndex: focusable && !disabled ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ListboxContent.displayName = "ListboxContent";
+const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5 cursor-pointer", {
+  variants: {
+    selected: {
+      true: "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover",
+      false: "hover:bg-surface-primary-hover"
+    },
+    active: {
+      true: "bg-surface-primary-hover",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      selected: true,
+      active: true,
+      class: "bg-surface-primary-selected-hover"
+    }
+  ],
+  defaultVariants: {
+    selected: false,
+    active: false
+  }
+});
+const ListboxItem = ({ value, children, className, ...props }) => {
+  const ctx = useListbox();
+  const { disabled, toggleValue, baseId } = ctx;
+  const isSelected = ctx.selection.has(value);
+  const isActive = ctx.active === value;
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      toggleValue(value);
+    }
+  }, [disabled, toggleValue, value]);
+  return (
+    // ARIA listbox pattern: options are not individually focusable
+    // Parent listbox handles all keyboard interactions via aria-activedescendant
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+    /* @__PURE__ */ u(
+      "div",
+      {
+        id: `${baseId}-listbox-option-${value}`,
+        className: cn(listboxItemVariants({ selected: isSelected, active: isActive }), className),
+        role: "option",
+        "aria-selected": isSelected,
+        "data-value": value,
+        "data-active": isActive || void 0,
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    )
+  );
+};
+ListboxItem.displayName = "ListboxItem";
+const Listbox = Object.assign(ListboxRoot, {
+  Root: ListboxRoot,
+  Content: ListboxContent,
+  Item: ListboxItem
+});
+const MenuRoot = ({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const [active, setActive] = useState(void 0);
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const triggerRef = useRef(null);
+  const triggerId = usePrefixedId(void 0, "menu-trigger");
+  const menuId = usePrefixedId(void 0, "menu");
+  const registerItem = useCallback((id, disabled = false) => {
+    itemsRef.current.set(id, { disabled });
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = useCallback(() => {
+    return Array.from(itemsRef.current.keys());
+  }, []);
+  const isItemDisabled = useCallback((id) => {
+    return itemsRef.current.get(id)?.disabled ?? false;
+  }, []);
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      active,
+      setActive,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled,
+      triggerId,
+      menuId,
+      triggerRef
+    }),
+    [open, setOpen, active, setActive, registerItem, unregisterItem, getItems, isItemDisabled, triggerId, menuId]
+  );
+  useEffect(() => {
+    if (!open && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open]);
+  return /* @__PURE__ */ u(MenuProvider, { value, children });
+};
+MenuRoot.displayName = "Menu.Root";
+const MenuTrigger = forwardRef(
+  ({ asChild, onClick, onKeyDown, className, children, ...props }, ref) => {
+    const { open, setOpen, triggerId, menuId, triggerRef } = useMenu();
+    const handleClick = (e) => {
+      onClick?.(e);
+      setOpen(!open);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "ArrowDown" && !open) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: useComposedRefs(ref, triggerRef),
+        id: triggerId,
+        type: asChild ? void 0 : "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuTrigger.displayName = "Menu.Trigger";
+const MenuPortal = ({ container, forceMount, children }) => {
+  const { open } = useMenu();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || !forceMount && !open) {
+    return null;
+  }
+  return createPortal(children, container ?? document.body);
+};
+MenuPortal.displayName = "Menu.Portal";
+const VIEWPORT_PADDING = 10;
+const MenuContent = forwardRef(
+  ({
+    forceMount,
+    align = "start",
+    loop = true,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, active, setActive, getItems, isItemDisabled, menuId, triggerRef } = useMenu();
+    const contentRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, contentRef);
+    const [position, setPosition] = useState(
+      null
+    );
+    useEffect(() => {
+      if (!open || !triggerRef?.current || !contentRef.current) {
+        return;
+      }
+      const updatePosition = () => {
+        if (!triggerRef.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let top = triggerRect.bottom;
+        if (top + contentRect.height > viewportHeight) {
+          top = triggerRect.top - contentRect.height;
+        }
+        if (top < 0) {
+          top = VIEWPORT_PADDING;
+        }
+        if (align === "start") {
+          let left = triggerRect.left;
+          if (left + contentRect.width > viewportWidth) {
+            left = triggerRect.right - contentRect.width;
+          }
+          if (left < 0) {
+            left = VIEWPORT_PADDING;
+          }
+          setPosition({ top, left });
+        } else {
+          let right = viewportWidth - triggerRect.right;
+          if (triggerRect.right - contentRect.width < 0) {
+            right = viewportWidth - (triggerRect.left + contentRect.width);
+          }
+          if (right < 0) {
+            right = VIEWPORT_PADDING;
+          }
+          setPosition({ top, right });
+        }
+      };
+      updatePosition();
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, triggerRef, align]);
+    useEffect(() => {
+      if (open && contentRef.current) {
+        contentRef.current.focus();
+        const items = getItems();
+        const firstSelectableItem = items.find((itemId) => !isItemDisabled(itemId));
+        if (firstSelectableItem) {
+          setActive(firstSelectableItem);
+        }
+      }
+    }, [open, getItems, isItemDisabled, setActive]);
+    const moveActive = useCallback(
+      (delta) => {
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        const currentIndex = active ? items.indexOf(active) : -1;
+        let newIndex;
+        let attempts = 0;
+        const maxAttempts = items.length;
+        if (currentIndex === -1) {
+          newIndex = delta > 0 ? 0 : items.length - 1;
+        } else {
+          newIndex = currentIndex + delta;
+        }
+        while (attempts < maxAttempts) {
+          if (loop) {
+            if (newIndex < 0) {
+              newIndex = items.length - 1;
+            } else if (newIndex >= items.length) {
+              newIndex = 0;
+            }
+          } else {
+            if (newIndex < 0 || newIndex >= items.length) {
+              return;
+            }
+          }
+          if (!isItemDisabled(items[newIndex])) {
+            setActive(items[newIndex]);
+            return;
+          }
+          newIndex += delta;
+          attempts++;
+        }
+      },
+      [getItems, active, setActive, loop, isItemDisabled]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            moveActive(1);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            moveActive(-1);
+            break;
+          case "Home":
+            e.preventDefault();
+            {
+              const firstEnabled = items.find((id) => !isItemDisabled(id));
+              if (firstEnabled) {
+                setActive(firstEnabled);
+              }
+            }
+            break;
+          case "End":
+            e.preventDefault();
+            {
+              const lastEnabled = [...items].reverse().find((id) => !isItemDisabled(id));
+              if (lastEnabled) {
+                setActive(lastEnabled);
+              }
+            }
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            if (active && !isItemDisabled(active)) {
+              const itemElement = document.getElementById(active);
+              if (itemElement) {
+                itemElement.click();
+              }
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            onEscapeKeyDown?.(e);
+            setOpen(false);
+            break;
+          case "Tab":
+            setOpen(false);
+            break;
+        }
+      },
+      [getItems, active, moveActive, setActive, isItemDisabled, onEscapeKeyDown, setOpen]
+    );
+    const handlePointerDownOutside = useCallback(
+      (e) => {
+        const target = e.target;
+        if (triggerRef?.current?.contains(target)) {
+          return;
+        }
+        if (contentRef.current && !contentRef.current.contains(target)) {
+          onPointerDownOutside?.(e);
+          onInteractOutside?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onPointerDownOutside, onInteractOutside, setOpen, triggerRef]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("pointerdown", handlePointerDownOutside);
+      return () => document.removeEventListener("pointerdown", handlePointerDownOutside);
+    }, [open, handlePointerDownOutside]);
+    useEffect(() => {
+      if (!active || !contentRef.current) {
+        return;
+      }
+      const el = contentRef.current.querySelector(`#${active}`);
+      if (el) {
+        el.scrollIntoView({
+          block: "nearest",
+          behavior: "auto"
+        });
+      }
+    }, [active]);
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: composedRefs,
+        id: menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-activedescendant": active,
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "fixed z-40 flex flex-col items-start w-fit py-2.5 mt-2.5 overflow-hidden",
+          "rounded-sm border border-bdr-subtle bg-surface-neutral shadow-lg outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          !position && "opacity-0 pointer-events-none",
+          className
+        ),
+        style: { ...position },
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "Menu.Content";
+const menuItemVariants = cva("flex w-full items-center px-4.5 py-2.5 gap-x-1.25 cursor-pointer text-sm outline-none", {
+  variants: {
+    active: {
+      true: "bg-surface-primary-selected",
+      false: ""
+    },
+    disabled: {
+      true: "hover:bg-transparent opacity-30 select-none pointer-events-none",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      disabled: false,
+      class: "text-alt outline-none ring-3 ring-inset ring-bdr-strong"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    disabled: false
+  }
+});
+const MenuItem = ({
+  id: providedId,
+  asChild = false,
+  disabled = false,
+  onSelect,
+  className,
+  children,
+  ...props
+}) => {
+  const id = usePrefixedId(providedId, providedId ? void 0 : "menu-item");
+  const { active, setActive, setOpen, registerItem, unregisterItem } = useMenu();
+  const isActive = active === id;
+  const isDisabled = disabled;
+  useEffect(() => {
+    registerItem(id, disabled);
+    return () => unregisterItem(id);
+  }, [id, disabled, registerItem, unregisterItem]);
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    const event = new Event("select", { bubbles: true, cancelable: true });
+    onSelect?.(event);
+    if (!event.defaultPrevented) {
+      setOpen(false);
+    }
+  }, [isDisabled, onSelect, setOpen]);
+  const handlePointerMove = useCallback(() => {
+    if (!isActive) {
+      setActive(id);
+    }
+  }, [isActive, setActive, id]);
+  const handlePointerLeave = useCallback(() => {
+    setActive(void 0);
+  }, [setActive]);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ u(
+    Comp,
+    {
+      id,
+      role: "menuitem",
+      "aria-disabled": isDisabled,
+      "data-active": isActive || void 0,
+      "data-disabled": isDisabled || void 0,
+      className: cn(menuItemVariants({ active: isActive, disabled: isDisabled }), className),
+      onClick: handleClick,
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerLeave,
+      ...props,
+      children
+    }
+  );
+};
+MenuItem.displayName = "Menu.Item";
+const MenuLabel = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ u("div", { ref, className: cn("px-3 py-1.5 text-xs font-semibold text-subtle", className), ...props, children });
+});
+MenuLabel.displayName = "Menu.Label";
+const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn("my-1 h-px bg-bdr-subtle", className),
+      ...props
+    }
+  );
+});
+MenuSeparator.displayName = "Menu.Separator";
+const Menu = Object.assign(MenuRoot, {
+  Root: MenuRoot,
+  Trigger: MenuTrigger,
+  Portal: MenuPortal,
+  Content: MenuContent,
+  Item: MenuItem,
+  Label: MenuLabel,
+  Separator: MenuSeparator
+});
+const SearchInput = forwardRef(
+  ({
+    id,
+    value,
+    defaultValue = "",
+    placeholder = "Search",
+    clearLabel = "Clear",
+    onChange,
+    disabled,
+    readOnly,
+    showSearchIcon = true,
+    showClearButton = true,
+    className,
+    ...props
+  }, ref) => {
+    const inputId = usePrefixedId(unwrap(id));
+    const [uncontrolledValue, setUncontrolledValue] = useState$1(defaultValue);
+    const isControlled = value !== void 0;
+    const inputValue = isControlled ? value : uncontrolledValue;
+    const isValueSet = inputValue.length > 0;
+    const canClear = showClearButton && isValueSet && !disabled && !readOnly;
+    const handleChange = (e) => {
+      const newValue = e.currentTarget.value;
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+    const inputRef = useRef(null);
+    const handleClear = () => {
+      const newValue = "";
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+      inputRef.current?.focus();
+    };
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: cn(
+          "relative flex items-center rounded-sm overflow-hidden",
+          "h-12 border border-bdr-subtle focus-within:border-bdr-strong",
+          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+          "transition-highlight",
+          disabled && "pointer-events-none select-none opacity-30",
+          className
+        ),
+        children: [
+          showSearchIcon && /* @__PURE__ */ u(
+            Search,
+            {
+              className: "flex items-center justify-center shrink-0 w-10 text-subtle pointer-events-none",
+              size: 20,
+              strokeWidth: 1.5
+            }
+          ),
+          /* @__PURE__ */ u(
+            "input",
+            {
+              ref: useComposedRefs(ref, inputRef),
+              id: inputId,
+              className: cn(
+                "w-full text-base border-0",
+                "text-main bg-surface-neutral",
+                "placeholder:text-subtle",
+                "focus:outline-none",
+                "read-only:bg-surface-primary",
+                !showSearchIcon && "pl-4.5",
+                "pr-4"
+              ),
+              value: inputValue,
+              onChange: handleChange,
+              readOnly,
+              disabled,
+              placeholder,
+              "aria-label": "Search",
+              "aria-disabled": disabled,
+              ...props
+            }
+          ),
+          canClear && /* @__PURE__ */ u(
+            IconButton,
+            {
+              className: "flex items-center justify-center shrink-0 h-10 w-10 mr-1 text-subtle",
+              size: "lg",
+              icon: X,
+              title: clearLabel,
+              onClick: handleClear,
+              disabled
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
 const SelectableListItem = ({
   className,
   selected,
@@ -3725,6 +5348,27 @@ const SelectableListItem = ({
   );
 };
 SelectableListItem.displayName = "SelectableListItem";
+const Separator = ({ className, label, decorative = false, ...props }) => {
+  const ariaHidden = decorative ? "true" : void 0;
+  if (!label) {
+    return /* @__PURE__ */ u("hr", { "aria-hidden": ariaHidden, className: cn("w-full border-bdr-subtle", className) });
+  }
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "aria-hidden": ariaHidden,
+      className: cn("inline-flex w-full gap-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ u("span", { className: "min-w-0 truncate text-subtle uppercase", children: label }),
+        /* @__PURE__ */ u("span", { className: "min-w-6 flex-1 border-b-1 border-bdr-subtle" })
+      ]
+    }
+  );
+};
+Separator.displayName = "Separator";
 const oppositeSide = {
   top: "bottom",
   bottom: "top",
@@ -3924,7 +5568,7 @@ function Tooltip({
         children
       }
     ),
-    isOpen && hasContent && createPortal(
+    isOpen && hasContent && createPortal$1(
       /* @__PURE__ */ u(
         TooltipContent,
         {
@@ -3939,299 +5583,14 @@ function Tooltip({
     )
   ] });
 }
-const DialogContext = createContext(void 0);
-const DialogProvider = ({ value, children }) => {
-  return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
-};
-DialogProvider.displayName = "DialogProvider";
-const useDialog = () => {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error("useDialog must be used within a DialogProvider");
-  }
-  return context;
-};
-function setRef(ref, value) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(value);
-  } else {
-    try {
-      ref.current = value;
-    } catch {
-    }
-  }
-}
-function useComposedRefs(...refs) {
-  return useCallback((node) => {
-    refs.forEach((ref) => setRef(ref, node));
-  }, refs);
-}
-const SearchInput = forwardRef(
-  ({
-    className,
-    id,
-    value,
-    defaultValue = "",
-    placeholder = "Search",
-    clearLabel = "Clear",
-    onChange,
-    disabled,
-    readOnly,
-    ...props
-  }, ref) => {
-    const inputId = usePrefixedId(unwrap(id));
-    const [uncontrolledValue, setUncontrolledValue] = useState$1(defaultValue);
-    const isControlled = value !== void 0;
-    const inputValue = isControlled ? value : uncontrolledValue;
-    const isValueSet = inputValue.length > 0;
-    const canClear = isValueSet && !disabled && !readOnly;
-    const handleChange = (e) => {
-      const newValue = e.currentTarget.value;
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
-    };
-    const inputRef = useRef(null);
-    const handleClear = () => {
-      const newValue = "";
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
-      inputRef.current?.focus();
-    };
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        className: cn(
-          "relative flex rounded-sm overflow-hidden",
-          "h-12 border border-bdr-subtle focus-within:border-bdr-strong",
-          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
-          "transition-highlight",
-          disabled && "pointer-events-none select-none opacity-30",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ u(
-            Search,
-            {
-              className: "absolute left-4.5 top-1/2 -translate-y-1/2 mt-0.25 text-subtle pointer-events-none",
-              size: 20,
-              strokeWidth: 1.5
-            }
-          ),
-          /* @__PURE__ */ u(
-            "input",
-            {
-              ref: useComposedRefs(ref, inputRef),
-              id: inputId,
-              className: cn(
-                "w-full text-base pr-1 px-12 border-0",
-                "text-main bg-surface-neutral",
-                "placeholder:text-subtle",
-                "focus:outline-none",
-                "read-only:bg-surface-primary"
-              ),
-              value: inputValue,
-              onChange: handleChange,
-              readOnly,
-              disabled,
-              placeholder,
-              "aria-label": "Search",
-              "aria-disabled": disabled,
-              ...props
-            }
-          ),
-          canClear && /* @__PURE__ */ u(
-            IconButton,
-            {
-              className: "absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 text-subtle",
-              size: "lg",
-              icon: X,
-              title: clearLabel,
-              onClick: handleClear,
-              disabled
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-SearchInput.displayName = "SearchInput";
-function ListboxImpl({
-  className,
-  selection: controlledSelection,
-  selectionMode = "single",
-  disabled = false,
-  defaultSelection = /* @__PURE__ */ new Set(),
-  setSelection,
-  active: controlledActive,
-  defaultActive,
-  onActiveChange,
-  items,
-  renderItem,
-  getValue,
-  ...props
-}, ref) {
-  const listboxId = usePrefixedId();
-  const innerRef = useRef(null);
-  const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelection);
-  const isSelectionControlled = controlledSelection !== void 0;
-  const selection = isSelectionControlled ? controlledSelection : uncontrolledSelection;
-  const [uncontrolledActive, setUncontrolledActive] = useState(
-    defaultActive ?? (items[0] ? getValue(items[0]) : void 0)
-  );
-  const isActiveControlled = controlledActive !== void 0;
-  const active = isActiveControlled ? controlledActive : uncontrolledActive;
-  const valueToIndexMap = useMemo(() => {
-    return new Map(items.map((item, idx) => [getValue(item), idx]));
-  }, [items, getValue]);
-  const updateActive = useCallback(
-    (newActive) => {
-      if (!isActiveControlled) {
-        setUncontrolledActive(newActive);
-      }
-      onActiveChange?.(newActive);
-    },
-    [isActiveControlled, onActiveChange]
-  );
-  useEffect(() => {
-    if (!active || !items.some((item) => getValue(item) === active)) {
-      updateActive(items[0] ? getValue(items[0]) : void 0);
-    }
-  }, [items, getValue, active, updateActive]);
-  useEffect(() => {
-    if (!active || !innerRef.current) return;
-    const el = innerRef.current.querySelector(`#${listboxId}-option-${active}`);
-    el?.scrollIntoView({ block: "nearest", behavior: "auto" });
-  }, [active, listboxId]);
-  const handleToggleValue = (value) => {
-    const isAlreadySelected = selection.has(value);
-    let newSelection;
-    if (selectionMode === "single") {
-      newSelection = isAlreadySelected ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]);
-    } else {
-      newSelection = new Set(selection);
-      if (isAlreadySelected) {
-        newSelection.delete(value);
-      } else {
-        newSelection.add(value);
-      }
-    }
-    if (!isSelectionControlled) {
-      setUncontrolledSelection(newSelection);
-    }
-    setSelection?.(newSelection);
-    updateActive(value);
-  };
-  const handleClickItem = ({ target }) => {
-    const li = target instanceof Element ? target.closest("li") : null;
-    const value = li?.getAttribute("data-value");
-    if (value) {
-      handleToggleValue(value);
-    }
-  };
-  const moveActive = (delta) => {
-    const activeIndex = active ? valueToIndexMap.get(active) ?? 0 : 0;
-    const newIndex = Math.max(0, Math.min(items.length - 1, activeIndex + delta));
-    updateActive(getValue(items[newIndex]));
-  };
-  const handleKeyDown = (e) => {
-    if (disabled) {
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      moveActive(1);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      moveActive(-1);
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      const firstItem = items[0];
-      updateActive(firstItem && getValue(firstItem));
-    } else if (e.key === "End") {
-      e.preventDefault();
-      const lastItem = items.at(-1);
-      updateActive(lastItem && getValue(lastItem));
-    } else if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      if (active) {
-        handleToggleValue(active);
-      }
-    }
-  };
-  return /* @__PURE__ */ u(
-    "ul",
-    {
-      id: listboxId,
-      ref: useComposedRefs(ref, innerRef),
-      tabIndex: disabled ? -1 : 0,
-      className: cn(
-        "flex flex-col items-start grow-1 shrink-0 basis-0",
-        "max-h-100 px-0 overflow-y-auto",
-        "focus-within:border-bdr-solid focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
-        "focus-within:[&>li[data-active=true]]:bg-surface-primary-hover",
-        "focus-within:[&>li[data-active=true][aria-selected=true]]:bg-surface-primary-selected-hover",
-        "transition-highlight",
-        disabled && "pointer-events-none select-none opacity-30",
-        className
-      ),
-      role: "listbox",
-      "aria-activedescendant": active ? `${listboxId}-option-${active}` : void 0,
-      "aria-disabled": disabled,
-      "aria-multiselectable": selectionMode === "multiple",
-      "aria-label": props.label ?? void 0,
-      "aria-orientation": "vertical",
-      onKeyDown: handleKeyDown,
-      onClick: handleClickItem,
-      children: items.map((item) => {
-        const value = getValue(item);
-        const selected = selection.has(value);
-        const isActive = value === active;
-        return /* @__PURE__ */ u(
-          "li",
-          {
-            id: `${listboxId}-option-${value}`,
-            "data-value": value,
-            "data-active": isActive ? "true" : "false",
-            tabIndex: -1,
-            className: cn(
-              "flex items-center w-full px-4.5 py-1 gap-x-2.5",
-              !disabled && "cursor-pointer",
-              selected ? "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover" : "hover:bg-surface-primary-hover"
-            ),
-            role: "option",
-            "aria-selected": selected,
-            children: renderItem(item, selected, isActive)
-          },
-          value
-        );
-      })
-    }
-  );
-}
-const Listbox = forwardRef(ListboxImpl);
-Listbox.displayName = "Listbox";
-const useScrollLock = (lock, element) => {
-  useEffect(() => {
-    if (!lock) {
-      return;
-    }
-    const target = element ?? document.body;
-    const originalOverflow = target.style.overflow;
-    target.style.overflow = "hidden";
-    return () => {
-      target.style.overflow = originalOverflow;
-    };
-  }, [lock, element]);
-};
 export {
+  Avatar,
+  AvatarProvider,
   Button,
   Checkbox,
+  Combobox,
+  ComboboxProvider,
+  Dialog,
   DialogProvider,
   IconButton,
   IdProvider,
@@ -4239,12 +5598,22 @@ export {
   Link,
   ListItem,
   Listbox,
+  ListboxProvider,
+  Menu,
+  MenuProvider,
   SearchInput,
   SelectableListItem,
+  Separator,
   Tooltip,
   cn,
+  setRef,
   unwrap,
+  useAvatar,
+  useCombobox,
+  useComposedRefs,
   useDialog,
+  useListbox,
+  useMenu,
   usePrefixedId,
   useScrollLock
 };