@dxos/react-ui 0.6.14-main.2b6a0f3 → 0.6.14-main.69511f5

package/dist/lib/node/index.cjs

@@ -42,7 +42,7 @@ __export(node_exports, {
   DensityContext: () => DensityContext,
   DensityProvider: () => DensityProvider,
   Dialog: () => Dialog,
-  DropdownMenu: () => DropdownMenu2,
+  DropdownMenu: () => DropdownMenu,
   ElevationContext: () => ElevationContext,
   ElevationProvider: () => ElevationProvider,
   Icon: () => Icon,
@@ -72,14 +72,16 @@ __export(node_exports, {
   Tree: () => Tree,
   TreeItem: () => TreeItem,
   Treegrid: () => Treegrid,
+  createDropdownMenuScope: () => createDropdownMenuScope,
+  createPopoverScope: () => createPopoverScope,
   hasIosKeyboard: () => hasIosKeyboard,
   isLabel: () => isLabel,
   toLocalizedString: () => toLocalizedString,
   useAvatarContext: () => useAvatarContext,
   useButtonGroupContext: () => useButtonGroupContext,
   useDensityContext: () => useDensityContext,
-  useDropdownMenuContext: () => useDropdownMenuContext2,
-  useDropdownMenuMenuScope: () => useDropdownMenuMenuScope2,
+  useDropdownMenuContext: () => useDropdownMenuContext,
+  useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
   useElevationContext: () => useElevationContext,
   useListContext: () => import_react_list.useListContext,
   useListItemContext: () => import_react_list.useListItemContext,
@@ -142,14 +144,20 @@ var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
 var import_react_primitive6 = require("@radix-ui/react-primitive");
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_react20 = __toESM(require("react"));
-var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_primitive = require("@radix-ui/primitive");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react_context5 = require("@radix-ui/react-context");
+var import_react_id = require("@radix-ui/react-id");
+var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
+var import_react_menu = require("@radix-ui/react-menu");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
 var import_react_slot7 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react21 = __toESM(require("react"));
 var import_react22 = require("@phosphor-icons/react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
 var import_react_switch = require("@radix-ui/react-switch");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
 var import_react23 = __toESM(require("react"));
 var import_react_input = require("@dxos/react-input");
 var import_react24 = require("@phosphor-icons/react");
@@ -159,31 +167,44 @@ var import_react_list = require("@dxos/react-list");
 var import_react26 = __toESM(require("react"));
 var import_react27 = __toESM(require("react"));
 var import_react_tabster = require("@fluentui/react-tabster");
-var import_react_context5 = require("@radix-ui/react-context");
+var import_react_context6 = require("@radix-ui/react-context");
 var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_react_slot9 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
+var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
 var import_react28 = __toESM(require("react"));
 var import_react_tabster2 = require("@fluentui/react-tabster");
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react_context6 = require("@radix-ui/react-context");
+var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
+var import_react_context7 = require("@radix-ui/react-context");
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 var import_react_primitive9 = require("@radix-ui/react-primitive");
 var import_react_slot10 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
+var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
 var import_react29 = __toESM(require("react"));
 var import_log = require("@dxos/log");
 var import_react_hooks3 = require("@dxos/react-hooks");
 var import_react30 = require("react");
-var import_react_context7 = require("@radix-ui/react-context");
+var import_react_context8 = require("@radix-ui/react-context");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react_slot11 = require("@radix-ui/react-slot");
 var import_react31 = __toESM(require("react"));
 var import_react_hooks4 = require("@dxos/react-hooks");
-var import_react_popover = require("@radix-ui/react-popover");
+var import_primitive2 = require("@radix-ui/primitive");
+var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
+var import_react_context9 = require("@radix-ui/react-context");
+var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
+var import_react_focus_guards = require("@radix-ui/react-focus-guards");
+var import_react_focus_scope = require("@radix-ui/react-focus-scope");
+var import_react_id2 = require("@radix-ui/react-id");
+var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
+var import_react_popper = require("@radix-ui/react-popper");
+var import_react_portal = require("@radix-ui/react-portal");
+var import_react_presence = require("@radix-ui/react-presence");
 var import_react_primitive11 = require("@radix-ui/react-primitive");
 var import_react_slot12 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state5 = require("@radix-ui/react-use-controllable-state");
+var import_aria_hidden = require("aria-hidden");
 var import_react32 = __toESM(require("react"));
+var import_react_remove_scroll = require("react-remove-scroll");
 var import_react33 = __toESM(require("react"));
 var import_react_scroll_area = require("@radix-ui/react-scroll-area");
 var import_react34 = __toESM(require("react"));
@@ -294,8 +315,8 @@ var useVisualViewport = (deps) => {
 };
 var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
-  return /* @__PURE__ */ import_react.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
+  return /* @__PURE__ */ import_react.default.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
@@ -304,8 +325,8 @@ var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChi
 });
 var AnchoredOverflowAnchor = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
-  return /* @__PURE__ */ import_react.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
+  return /* @__PURE__ */ import_react.default.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
@@ -316,7 +337,7 @@ var AnchoredOverflow = {
   Root: AnchoredOverflowRoot,
   Anchor: AnchoredOverflowAnchor
 };
-var Icon = /* @__PURE__ */ (0, import_react9.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
+var Icon = /* @__PURE__ */ (0, import_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ import_react9.default.createElement("svg", {
     ...props,
@@ -327,7 +348,7 @@ var Icon = /* @__PURE__ */ (0, import_react9.forwardRef)(({ icon, classNames, si
   }, /* @__PURE__ */ import_react9.default.createElement("use", {
     href: `/icons.svg#${icon}`
   }));
-});
+}));
 var AVATAR_NAME = "Avatar";
 var [AvatarProvider, useAvatarContext] = (0, import_react_context.createContext)(AVATAR_NAME);
 var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
@@ -419,10 +440,10 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, c
   }));
 });
 var AvatarLabel = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
+  const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ import_react8.default.createElement(Root3, {
+  return /* @__PURE__ */ import_react8.default.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -432,10 +453,10 @@ var AvatarLabel = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOn
   });
 });
 var AvatarDescription = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
+  const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ import_react8.default.createElement(Root3, {
+  return /* @__PURE__ */ import_react8.default.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -583,8 +604,8 @@ var AvatarGroupItem = {
 };
 var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
-  return /* @__PURE__ */ import_react13.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -594,8 +615,8 @@ var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, c
 });
 var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
-  return /* @__PURE__ */ import_react12.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -604,8 +625,8 @@ var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild,
 });
 var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
-  return /* @__PURE__ */ import_react12.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -614,8 +635,8 @@ var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild,
 });
 var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
-  return /* @__PURE__ */ import_react12.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -623,16 +644,16 @@ var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChi
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? import_react_slot3.Slot : Link;
-  return /* @__PURE__ */ import_react12.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot3.Slot : Link;
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot3.Slot : "h1";
-  return /* @__PURE__ */ import_react12.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot3.Slot : "h1";
+  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -663,13 +684,13 @@ var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = (0, import_react_context2.createContext)(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root3 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
-  return /* @__PURE__ */ import_react14.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
+  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -686,13 +707,13 @@ var Button = /* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, child
       disabled: true
     }
   }, children);
-});
+}));
 Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
-  return /* @__PURE__ */ import_react14.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
+  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
@@ -893,8 +914,8 @@ var ContextMenuContent = /* @__PURE__ */ (0, import_react20.forwardRef)(({ class
 });
 var ContextMenuViewport = /* @__PURE__ */ (0, import_react20.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot6.Slot : import_react_primitive6.Primitive.div;
-  return /* @__PURE__ */ import_react20.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot6.Slot : import_react_primitive6.Primitive.div;
+  return /* @__PURE__ */ import_react20.default.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
@@ -956,88 +977,347 @@ var ContextMenu2 = {
   Separator: ContextMenuSeparator,
   GroupLabel: ContextMenuGroupLabel
 };
-var DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-var useDropdownMenuContext2 = DropdownMenuPrimitive.useDropdownMenuContext;
-var useDropdownMenuMenuScope2 = DropdownMenuPrimitive.useDropdownMenuMenuScope;
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.Content, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
-    className: tx("menu.content", "menu", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ import_react21.default.createElement(ElevationProvider, {
-    elevation: "chrome"
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context5.createContextScope)(DROPDOWN_MENU_NAME, [
+  import_react_menu.createMenuScope
+]);
+var useMenuScope = (0, import_react_menu.createMenuScope)();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenuRoot = (props) => {
+  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = (0, import_react21.useRef)(null);
+  const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: (0, import_react_id.useId)(),
+    triggerRef,
+    contentId: (0, import_react_id.useId)(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: (0, import_react21.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen,
+    dir,
+    modal
   }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ import_react21.default.createElement(import_react_primitive7.Primitive.button, {
+    type: "button",
+    id: context.triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": context.open,
+    "aria-controls": context.open ? context.contentId : void 0,
+    "data-state": context.open ? "open" : "closed",
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    ...triggerProps,
+    ref: (0, import_react_compose_refs.composeRefs)(forwardedRef, context.triggerRef),
+    onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
+      if (!disabled && event.button === 0 && event.ctrlKey === false) {
+        context.onOpenToggle();
+        if (!context.open) {
+          event.preventDefault();
+        }
+      }
+    }),
+    onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
+      if (disabled) {
+        return;
+      }
+      if ([
+        "Enter",
+        " "
+      ].includes(event.key)) {
+        context.onOpenToggle();
+      }
+      if (event.key === "ArrowDown") {
+        context.onOpenChange(true);
+      }
+      if ([
+        "Enter",
+        " ",
+        "ArrowDown"
+      ].includes(event.key)) {
+        event.preventDefault();
+      }
+    })
+  }));
 });
+DropdownMenuTrigger.displayName = TRIGGER_NAME;
+var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
+var DropdownMenuVirtualTrigger = (props) => {
+  const { __scopeDropdownMenu, virtualRef } = props;
+  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  (0, import_react21.useEffect)(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Anchor, {
+    ...menuScope,
+    virtualRef
+  });
+};
+DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
+var PORTAL_NAME = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
+  });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
 var DropdownMenuViewport = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot7.Slot : import_react_primitive7.Primitive.div;
-  return /* @__PURE__ */ import_react21.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive7.Primitive.div;
+  return /* @__PURE__ */ import_react21.default.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var DropdownMenuArrow = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+  const { tx } = useThemeContext();
+  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const hasInteractedOutsideRef = (0, import_react21.useRef)(false);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    ref: forwardedRef,
+    onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+      if (!hasInteractedOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+      hasInteractedOutsideRef.current = false;
+      event.preventDefault();
+    }),
+    onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, (event) => {
+      const originalEvent = event.detail.originalEvent;
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+      if (!context.modal || isRightClick) {
+        hasInteractedOutsideRef.current = true;
+      }
+    }),
+    className: tx("menu.content", "menu", {}, classNames),
+    style: {
+      ...props.style,
+      // re-namespace exposed content custom properties
+      ...{
+        "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    }
+  });
+});
+DropdownMenuContent.displayName = CONTENT_NAME;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.Arrow, {
-    ...props,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Label, {
+    ...menuScope,
+    ...labelProps,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroup = DropdownMenuPrimitive.Group;
-var DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.Item, {
-    ...props,
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.CheckboxItem, {
-    ...props,
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.CheckboxItem, {
+    ...menuScope,
+    ...checkboxItemProps,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.RadioItem, {
+    ...menuScope,
+    ...radioItemProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.Separator, {
-    ...props,
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react21.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react21.default.createElement(DropdownMenuPrimitive.Label, {
-    ...props,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Arrow, {
+    ...menuScope,
+    ...arrowProps,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenu2 = {
+DropdownMenuArrow.displayName = ARROW_NAME;
+var DropdownMenuSub = (props) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react21.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react21.default.createElement(MenuPrimitive.SubContent, {
+    ...menuScope,
+    ...subContentProps,
+    ref: forwardedRef,
+    style: {
+      ...props.style,
+      // re-namespace exposed content custom properties
+      ...{
+        "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    }
+  });
+});
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+var DropdownMenu = {
   Root: DropdownMenuRoot,
   Trigger: DropdownMenuTrigger,
+  VirtualTrigger: DropdownMenuVirtualTrigger,
   Portal: DropdownMenuPortal,
   Content: DropdownMenuContent,
   Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
   Group: DropdownMenuGroup,
+  GroupLabel: DropdownMenuGroupLabel,
   Item: DropdownMenuItem,
   CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
   ItemIndicator: DropdownMenuItemIndicator,
   Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel
+  Arrow: DropdownMenuArrow,
+  Sub: DropdownMenuSub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent
 };
+var useDropdownMenuMenuScope = useMenuScope;
 var Label3 = /* @__PURE__ */ (0, import_react23.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ import_react23.default.createElement(import_react_input.Label, {
@@ -1155,7 +1435,7 @@ var TextArea = /* @__PURE__ */ (0, import_react23.forwardRef)(({ __inputScope, c
   });
 });
 var Checkbox = /* @__PURE__ */ (0, import_react23.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
@@ -1188,7 +1468,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react23.forwardRef)(({ __inputScope, c
 });
 var Switch = /* @__PURE__ */ (0, import_react23.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
@@ -1246,10 +1526,10 @@ var List = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, childre
   }, children));
 });
 var ListItemEndcap = /* @__PURE__ */ (0, import_react25.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? import_react_slot8.Slot : "div";
+  const Root5 = asChild ? import_react_slot8.Slot : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react25.default.createElement(Root3, {
+  return /* @__PURE__ */ import_react25.default.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1355,19 +1635,19 @@ var TreeItem = {
   MockOpenTrigger: MockTreeItemOpenTrigger
 };
 var TREEGRID_ROW_NAME = "TreegridRow";
-var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context5.createContextScope)(TREEGRID_ROW_NAME, []);
+var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context6.createContextScope)(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
 var TreegridRoot = /* @__PURE__ */ (0, import_react28.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
+  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
   const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
     axis: "vertical",
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ import_react28.default.createElement(Root3, {
+  return /* @__PURE__ */ import_react28.default.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1381,10 +1661,10 @@ var TreegridRoot = /* @__PURE__ */ (0, import_react28.forwardRef)(({ asChild, cl
 });
 var TreegridRow = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
+  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
-  const [open, onOpenChange] = (0, import_react_use_controllable_state2.useControllableState)({
+  const [open, onOpenChange] = (0, import_react_use_controllable_state3.useControllableState)({
     prop: propsOpen,
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
@@ -1402,7 +1682,7 @@ var TreegridRow = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __treegridRo
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ import_react28.default.createElement(Root3, {
+  }, /* @__PURE__ */ import_react28.default.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1572,7 +1852,7 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     ...focusableAttrs
   };
 };
-var [MainProvider, useMainContext] = (0, import_react_context6.createContext)(MAIN_NAME, {
+var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
   resizing: false,
   navigationSidebarOpen: false,
   setNavigationSidebarOpen: (nextOpen) => {
@@ -1627,12 +1907,12 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   const [isLg] = (0, import_react_hooks3.useMediaQuery)("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = (0, import_react_use_controllable_state3.useControllableState)({
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
     prop: propsNavigationSidebarOpen,
     defaultProp: defaultNavigationSidebarOpen,
     onChange: onNavigationSidebarOpenChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = (0, import_react_use_controllable_state3.useControllableState)({
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
     prop: propsComplementarySidebarOpen,
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
@@ -1686,11 +1966,11 @@ var MainSidebar = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames,
   }, [
     props.onKeyDown
   ]);
-  const Root3 = isLg ? import_react_primitive9.Primitive.div : import_react_dialog2.DialogContent;
+  const Root5 = isLg ? import_react_primitive9.Primitive.div : import_react_dialog2.DialogContent;
   return /* @__PURE__ */ import_react29.default.createElement(import_react_dialog2.Root, {
     open,
     modal: false
-  }, /* @__PURE__ */ import_react29.default.createElement(Root3, {
+  }, /* @__PURE__ */ import_react29.default.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1741,9 +2021,9 @@ MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ (0, import_react29.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
+  const Root5 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ import_react29.default.createElement(Root3, {
+  return /* @__PURE__ */ import_react29.default.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
@@ -1785,7 +2065,7 @@ var MainNotch = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, ..
   const { tx } = useThemeContext();
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
   const notchElement = (0, import_react29.useRef)(null);
-  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, notchElement);
+  const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, notchElement);
   const handleKeyDown = (0, import_react29.useCallback)((event) => {
     switch (event.key) {
       case "Escape":
@@ -1814,17 +2094,17 @@ var Main = {
   Notch: MainNotch
 };
 var MESSAGE_NAME = "Message";
-var [MessageProvider, useMessageContext] = (0, import_react_context7.createContext)(MESSAGE_NAME);
+var [MessageProvider, useMessageContext] = (0, import_react_context8.createContext)(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ (0, import_react31.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = (0, import_react_hooks4.useId)("message__title", propsTitleId);
   const descriptionId = (0, import_react_hooks4.useId)("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
+  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
   return /* @__PURE__ */ import_react31.default.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ import_react31.default.createElement(Root3, {
+  }, /* @__PURE__ */ import_react31.default.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1840,8 +2120,8 @@ var MESSAGE_TITLE_NAME = "MessageTitle";
 var MessageTitle = /* @__PURE__ */ (0, import_react31.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root3 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.h2;
-  return /* @__PURE__ */ import_react31.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.h2;
+  return /* @__PURE__ */ import_react31.default.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1853,8 +2133,8 @@ var MESSAGE_BODY_NAME = "MessageBody";
 var MessageBody = /* @__PURE__ */ (0, import_react31.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root3 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.p;
-  return /* @__PURE__ */ import_react31.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.p;
+  return /* @__PURE__ */ import_react31.default.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1867,35 +2147,281 @@ var Message = {
   Title: MessageTitle,
   Body: MessageBody
 };
-var PopoverRoot = import_react_popover.Root;
-var PopoverPortal = import_react_popover.PopoverPortal;
-var PopoverTrigger = import_react_popover.PopoverTrigger;
-var PopoverAnchor = import_react_popover.PopoverAnchor;
-var PopoverClose = import_react_popover.PopoverClose;
-var PopoverArrow = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react32.default.createElement(import_react_popover.PopoverArrow, {
-    ...props,
-    className: tx("popover.arrow", "popover__arrow", {}, classNames),
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = (0, import_react_context9.createContextScope)(POPOVER_NAME, [
+  import_react_popper.createPopperScope
+]);
+var usePopperScope = (0, import_react_popper.createPopperScope)();
+var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+var PopoverRoot = (props) => {
+  const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const triggerRef = (0, import_react32.useRef)(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = (0, import_react32.useState)(false);
+  const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react32.default.createElement(PopoverProvider, {
+    scope: __scopePopover,
+    contentId: (0, import_react_id2.useId)(),
+    triggerRef,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: (0, import_react32.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    hasCustomAnchor,
+    onCustomAnchorAdd: (0, import_react32.useCallback)(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: (0, import_react32.useCallback)(() => setHasCustomAnchor(false), []),
+    modal
+  }, children));
+};
+PopoverRoot.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const { __scopePopover, ...anchorProps } = props;
+  const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+  (0, import_react32.useEffect)(() => {
+    onCustomAnchorAdd();
+    return () => onCustomAnchorRemove();
+  }, [
+    onCustomAnchorAdd,
+    onCustomAnchorRemove
+  ]);
+  return /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    ...anchorProps,
+    ref: forwardedRef
+  });
+});
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME2 = "PopoverTrigger";
+var PopoverTrigger = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const { __scopePopover, ...triggerProps } = props;
+  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const composedTriggerRef = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ import_react32.default.createElement(import_react_primitive11.Primitive.button, {
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context.open,
+    "aria-controls": context.contentId,
+    "data-state": getState(context.open),
+    ...triggerProps,
+    ref: composedTriggerRef,
+    onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, context.onOpenToggle)
+  });
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Anchor, {
+    asChild: true,
+    ...popperScope
+  }, trigger);
+});
+PopoverTrigger.displayName = TRIGGER_NAME2;
+var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
+var PopoverVirtualTrigger = (props) => {
+  const { __scopePopover, virtualRef } = props;
+  const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  (0, import_react32.useEffect)(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    virtualRef
+  });
+};
+PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
+var PORTAL_NAME2 = "PopoverPortal";
+var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
+  forceMount: void 0
+});
+var PopoverPortal = (props) => {
+  const { __scopePopover, forceMount, children, container } = props;
+  const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
+  return /* @__PURE__ */ import_react32.default.createElement(PortalProvider, {
+    scope: __scopePopover,
+    forceMount
+  }, /* @__PURE__ */ import_react32.default.createElement(import_react_presence.Presence, {
+    present: forceMount || context.open
+  }, /* @__PURE__ */ import_react32.default.createElement(import_react_portal.Portal, {
+    asChild: true,
+    container
+  }, children)));
+};
+PopoverPortal.displayName = PORTAL_NAME2;
+var CONTENT_NAME2 = "PopoverContent";
+var PopoverContent = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_presence.Presence, {
+    present: forceMount || context.open
+  }, context.modal ? /* @__PURE__ */ import_react32.default.createElement(PopoverContentModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }) : /* @__PURE__ */ import_react32.default.createElement(PopoverContentNonModal, {
+    ...contentProps,
     ref: forwardedRef
+  }));
+});
+PopoverContent.displayName = CONTENT_NAME2;
+var PopoverContentModal = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const contentRef = (0, import_react32.useRef)(null);
+  const composedRefs = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, contentRef);
+  const isRightClickOutsideRef = (0, import_react32.useRef)(false);
+  (0, import_react32.useEffect)(() => {
+    const content = contentRef.current;
+    if (content) {
+      return (0, import_aria_hidden.hideOthers)(content);
+    }
+  }, []);
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_remove_scroll.RemoveScroll, {
+    as: import_react_slot12.Slot,
+    allowPinchZoom: true
+  }, /* @__PURE__ */ import_react32.default.createElement(PopoverContentImpl, {
+    ...props,
+    ref: composedRefs,
+    // we make sure we're not trapping once it's been closed
+    // (closed !== unmounted when animating out)
+    trapFocus: context.open,
+    disableOutsidePointerEvents: true,
+    onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+      event.preventDefault();
+      if (!isRightClickOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+    }),
+    onPointerDownOutside: (0, import_primitive2.composeEventHandlers)(props.onPointerDownOutside, (event) => {
+      const originalEvent = event.detail.originalEvent;
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+      isRightClickOutsideRef.current = isRightClick;
+    }, {
+      checkForDefaultPrevented: false
+    }),
+    // When focus is trapped, a `focusout` event may still happen.
+    // We make sure we don't trigger our `onDismiss` in such case.
+    onFocusOutside: (0, import_primitive2.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), {
+      checkForDefaultPrevented: false
+    })
+  }));
+});
+var PopoverContentNonModal = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const hasInteractedOutsideRef = (0, import_react32.useRef)(false);
+  const hasPointerDownOutsideRef = (0, import_react32.useRef)(false);
+  return /* @__PURE__ */ import_react32.default.createElement(PopoverContentImpl, {
+    ...props,
+    ref: forwardedRef,
+    trapFocus: false,
+    disableOutsidePointerEvents: false,
+    onCloseAutoFocus: (event) => {
+      props.onCloseAutoFocus?.(event);
+      if (!event.defaultPrevented) {
+        if (!hasInteractedOutsideRef.current) {
+          context.triggerRef.current?.focus();
+        }
+        event.preventDefault();
+      }
+      hasInteractedOutsideRef.current = false;
+      hasPointerDownOutsideRef.current = false;
+    },
+    onInteractOutside: (event) => {
+      props.onInteractOutside?.(event);
+      if (!event.defaultPrevented) {
+        hasInteractedOutsideRef.current = true;
+        if (event.detail.originalEvent.type === "pointerdown") {
+          hasPointerDownOutsideRef.current = true;
+        }
+      }
+      const target = event.target;
+      const targetIsTrigger = context.triggerRef.current?.contains(target);
+      if (targetIsTrigger) {
+        event.preventDefault();
+      }
+      if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+        event.preventDefault();
+      }
+    }
   });
 });
-var PopoverContent = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, classNames, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react32.default.createElement(import_react_popover.PopoverContent, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
+  (0, import_react_focus_guards.useFocusGuards)();
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_focus_scope.FocusScope, {
+    asChild: true,
+    loop: true,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: onCloseAutoFocus
+  }, /* @__PURE__ */ import_react32.default.createElement(import_react_dismissable_layer.DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onDismiss: () => context.onOpenChange(false)
+  }, /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Content, {
+    "data-state": getState(context.open),
+    role: "dialog",
+    id: context.contentId,
+    ...popperScope,
+    ...contentProps,
     className: tx("popover.content", "popover", {}, classNames),
+    ref: forwardedRef,
+    style: {
+      ...contentProps.style,
+      // re-namespace exposed content custom properties
+      ...{
+        "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    }
+  })));
+});
+var CLOSE_NAME = "PopoverClose";
+var PopoverClose = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const { __scopePopover, ...closeProps } = props;
+  const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_primitive11.Primitive.button, {
+    type: "button",
+    ...closeProps,
+    ref: forwardedRef,
+    onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
+  });
+});
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME2 = "PopoverArrow";
+var PopoverArrow = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  const { __scopePopover, classNames, ...arrowProps } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react32.default.createElement(PopperPrimitive.Arrow, {
+    ...popperScope,
+    ...arrowProps,
+    className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react32.default.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  });
 });
+PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
-  return /* @__PURE__ */ import_react32.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
+  return /* @__PURE__ */ import_react32.default.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1904,14 +2430,16 @@ var PopoverViewport = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNam
     ref: forwardedRef
   }, children);
 });
+var getState = (open) => open ? "open" : "closed";
 var Popover = {
   Root: PopoverRoot,
-  Portal: PopoverPortal,
-  Trigger: PopoverTrigger,
   Anchor: PopoverAnchor,
-  Arrow: PopoverArrow,
-  Close: PopoverClose,
+  Trigger: PopoverTrigger,
+  VirtualTrigger: PopoverVirtualTrigger,
+  Portal: PopoverPortal,
   Content: PopoverContent,
+  Close: PopoverClose,
+  Arrow: PopoverArrow,
   Viewport: PopoverViewport
 };
 var Status = /* @__PURE__ */ (0, import_react33.forwardRef)(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
@@ -2113,8 +2641,8 @@ var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
 };
 var Tag = /* @__PURE__ */ (0, import_react38.forwardRef)(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.span;
-  return /* @__PURE__ */ import_react38.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.span;
+  return /* @__PURE__ */ import_react38.default.createElement(Root5, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -2142,8 +2670,8 @@ var ToastRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, ch
 });
 var ToastBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
-  return /* @__PURE__ */ import_react39.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -2151,8 +2679,8 @@ var ToastBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, class
 });
 var ToastTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot14.Slot : import_react_toast.ToastTitle;
-  return /* @__PURE__ */ import_react39.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot14.Slot : import_react_toast.ToastTitle;
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -2160,8 +2688,8 @@ var ToastTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, clas
 });
 var ToastDescription = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot14.Slot : import_react_toast.ToastDescription;
-  return /* @__PURE__ */ import_react39.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot14.Slot : import_react_toast.ToastDescription;
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -2169,8 +2697,8 @@ var ToastDescription = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild
 });
 var ToastActions = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
-  return /* @__PURE__ */ import_react39.default.createElement(Root3, {
+  const Root5 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2372,6 +2900,8 @@ var handleInputModalityChange = (isUsingKeyboard) => {
   Tree,
   TreeItem,
   Treegrid,
+  createDropdownMenuScope,
+  createPopoverScope,
   hasIosKeyboard,
   isLabel,
   toLocalizedString,