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

package/dist/lib/node-esm/index.mjs

@@ -124,8 +124,8 @@ var useVisualViewport = (deps) => {
 // packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
 var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React2.createElement(Root3, {
+  const Root5 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
@@ -134,8 +134,8 @@ var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, ch
 });
 var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React2.createElement(Root3, {
+  const Root5 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
@@ -156,8 +156,8 @@ import React4, { forwardRef as forwardRef3 } from "react";
 import { useId } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Icon/Icon.tsx
-import React3, { forwardRef as forwardRef2 } from "react";
-var Icon = /* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
+import React3, { forwardRef as forwardRef2, memo } from "react";
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React3.createElement("svg", {
     ...props,
@@ -168,7 +168,7 @@ var Icon = /* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, fo
   }, /* @__PURE__ */ React3.createElement("use", {
     href: `/icons.svg#${icon}`
   }));
-});
+}));
 
 // packages/ui/react-ui/src/components/Avatars/Avatar.tsx
 var AVATAR_NAME = "Avatar";
@@ -262,10 +262,10 @@ var AvatarFrame = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props
   }));
 });
 var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot2 : Primitive2.span;
+  const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React4.createElement(Root3, {
+  return /* @__PURE__ */ React4.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -275,10 +275,10 @@ var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ..
   });
 });
 var AvatarDescription = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot2 : Primitive2.span;
+  const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React4.createElement(Root3, {
+  return /* @__PURE__ */ React4.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -441,8 +441,8 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React6, { forwardRef as forwardRef5 } from "react";
 var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot3 : Primitive3.a;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  const Root5 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React6.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -454,8 +454,8 @@ var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
 var BreadcrumbRoot = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  const Root5 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React7.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -464,8 +464,8 @@ var BreadcrumbRoot = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...prop
 });
 var BreadcrumbList = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot4 : Primitive4.ol;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  const Root5 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React7.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -474,8 +474,8 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...prop
 });
 var BreadcrumbListItem = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot4 : Primitive4.li;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  const Root5 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React7.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -483,16 +483,16 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ forwardRef6(({ asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot4 : Link;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  const Root5 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React7.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot4 : "h1";
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  const Root5 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React7.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -523,19 +523,19 @@ var Breadcrumb = {
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React8, { forwardRef as forwardRef7 } from "react";
+import React8, { forwardRef as forwardRef7, memo as memo2 } from "react";
 var BUTTON_GROUP_NAME = "ButtonGroup";
 var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ forwardRef7(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ 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 ? Slot5 : Primitive5.button;
-  return /* @__PURE__ */ React8.createElement(Root3, {
+  const Root5 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React8.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -552,13 +552,13 @@ var Button = /* @__PURE__ */ forwardRef7(({ classNames, children, density: props
       disabled: true
     }
   }, children);
-});
+}));
 Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React8.createElement(Root3, {
+  const Root5 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React8.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
@@ -788,8 +788,8 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, .
 });
 var ContextMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React14.createElement(Root3, {
+  const Root5 = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React14.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
@@ -853,99 +853,364 @@ var ContextMenu2 = {
 };
 
 // packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope } from "@radix-ui/react-context";
+import { useId as useId3 } from "@radix-ui/react-id";
+import * as MenuPrimitive from "@radix-ui/react-menu";
+import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React15, { forwardRef as forwardRef13 } from "react";
-var DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
-var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-var useDropdownMenuContext2 = DropdownMenuPrimitive.useDropdownMenuContext;
-var useDropdownMenuMenuScope2 = DropdownMenuPrimitive.useDropdownMenuMenuScope;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Content, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
-    className: tx("menu.content", "menu", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
-    elevation: "chrome"
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React15, { useRef, useCallback, forwardRef as forwardRef13, useEffect as useEffect3 } from "react";
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
+  createMenuScope
+]);
+var useMenuScope = 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 = useRef(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React15.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: useId3(),
+    triggerRef,
+    contentId: useId3(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ React15.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen,
+    dir,
+    modal
   }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ React15.createElement(Primitive7.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: composeRefs(forwardedRef, context.triggerRef),
+    onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+      if (!disabled && event.button === 0 && event.ctrlKey === false) {
+        context.onOpenToggle();
+        if (!context.open) {
+          event.preventDefault();
+        }
+      }
+    }),
+    onKeyDown: 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);
+  useEffect3(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React15.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__ */ React15.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
+  });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
 var DropdownMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React15.createElement(Root3, {
+  const Root5 = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React15.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+  const { tx } = useThemeContext();
+  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const hasInteractedOutsideRef = useRef(false);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    ref: forwardedRef,
+    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+      if (!hasInteractedOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+      hasInteractedOutsideRef.current = false;
+      event.preventDefault();
+    }),
+    onInteractOutside: 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__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Arrow, {
-    ...props,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+  return /* @__PURE__ */ React15.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__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Item, {
-    ...props,
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.CheckboxItem, {
-    ...props,
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.CheckboxItem, {
+    ...menuScope,
+    ...checkboxItemProps,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.RadioItem, {
+    ...menuScope,
+    ...radioItemProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Separator, {
-    ...props,
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Label, {
-    ...props,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+  return /* @__PURE__ */ React15.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] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef13((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React15.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;
 
 // packages/ui/react-ui/src/components/Input/Input.tsx
 import { Check, Minus } from "@phosphor-icons/react";
 import { Root as CheckboxPrimitive, Indicator as CheckboxIndicatorPrimitive } from "@radix-ui/react-checkbox";
 import { Root as SwitchPrimitive, Thumb as SwitchThumbPrimitive } from "@radix-ui/react-switch";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React16, { forwardRef as forwardRef14, Fragment, useCallback } from "react";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React16, { forwardRef as forwardRef14, Fragment, useCallback as useCallback2 } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
 var Label3 = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -994,7 +1259,7 @@ var PinInput = /* @__PURE__ */ forwardRef14(({ density: propsDensity, elevation:
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  const segmentClassName = useCallback(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = useCallback2(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
     variant: "static",
     focused,
     disabled: props.disabled,
@@ -1064,7 +1329,7 @@ var TextArea = /* @__PURE__ */ forwardRef14(({ __inputScope, classNames, density
   });
 });
 var Checkbox = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = useControllableState({
+  const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
@@ -1097,7 +1362,7 @@ var Checkbox = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsCheck
 });
 var Switch = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const [checked, onCheckedChange] = useControllableState({
+  const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
@@ -1166,10 +1431,10 @@ var List = /* @__PURE__ */ forwardRef15(({ classNames, children, ...props }, for
   }, children));
 });
 var ListItemEndcap = /* @__PURE__ */ forwardRef15(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot8 : "div";
+  const Root5 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(Root3, {
+  return /* @__PURE__ */ React18.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1280,25 +1545,25 @@ var TreeItem = {
 
 // packages/ui/react-ui/src/components/Lists/Treegrid.tsx
 import { useFocusableGroup, useArrowNavigationGroup } from "@fluentui/react-tabster";
-import { createContextScope } from "@radix-ui/react-context";
+import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
-import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
 import React20, { forwardRef as forwardRef17 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
-var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
 var TreegridRoot = /* @__PURE__ */ forwardRef17(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const Root5 = asChild ? Slot9 : Primitive8.div;
   const arrowNavigationAttrs = useArrowNavigationGroup({
     axis: "vertical",
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  return /* @__PURE__ */ React20.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1312,10 +1577,10 @@ var TreegridRoot = /* @__PURE__ */ forwardRef17(({ asChild, classNames, children
 });
 var TreegridRow = /* @__PURE__ */ forwardRef17(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const Root5 = asChild ? Slot9 : Primitive8.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
-  const [open, onOpenChange] = useControllableState2({
+  const [open, onOpenChange] = useControllableState3({
     prop: propsOpen,
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
@@ -1333,7 +1598,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef17(({ __treegridRowScope, asChild, c
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React20.createElement(Root3, {
+  }, /* @__PURE__ */ React20.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1382,13 +1647,13 @@ import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
-import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React21, { forwardRef as forwardRef18, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
+import React21, { forwardRef as forwardRef18, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef2, useState as useState4 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState3 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1405,20 +1670,20 @@ var useSwipeToDismiss = (ref, {
   const $root = ref.current;
   const [motionState, setMotionState] = useState3(0);
   const [gestureStartX, setGestureStartX] = useState3(0);
-  const setIdle = useCallback2(() => {
+  const setIdle = useCallback3(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback2(() => {
+  const setFollowing = useCallback3(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback2(({ screenX }) => {
+  const handlePointerDown = useCallback3(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -1426,7 +1691,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback2(({ screenX }) => {
+  const handlePointerMove = useCallback3(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -1450,12 +1715,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback2(() => {
+  const handlePointerUp = useCallback3(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -1464,7 +1729,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -1473,7 +1738,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -1493,7 +1758,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback3((event) => {
+  const handleKeyDown = useCallback4((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -1546,26 +1811,26 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   return {
     navigationSidebarOpen,
     setNavigationSidebarOpen,
-    toggleNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
+    toggleNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
       navigationSidebarOpen,
       setNavigationSidebarOpen
     ]),
-    openNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(true), [
+    openNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(true), [
       setNavigationSidebarOpen
     ]),
-    closeNavigationSidebar: useCallback3(() => setNavigationSidebarOpen(false), [
+    closeNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(false), [
       setNavigationSidebarOpen
     ]),
     complementarySidebarOpen,
     setComplementarySidebarOpen,
-    toggleComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
+    toggleComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
       complementarySidebarOpen,
       setComplementarySidebarOpen
     ]),
-    openComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(true), [
+    openComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(true), [
       setComplementarySidebarOpen
     ]),
-    closeComplementarySidebar: useCallback3(() => setComplementarySidebarOpen(false), [
+    closeComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(false), [
       setComplementarySidebarOpen
     ])
   };
@@ -1575,19 +1840,19 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState3({
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState4({
     prop: propsNavigationSidebarOpen,
     defaultProp: defaultNavigationSidebarOpen,
     onChange: onNavigationSidebarOpenChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState3({
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState4({
     prop: propsComplementarySidebarOpen,
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
   const [resizing, setResizing] = useState4(false);
-  const resizeInterval = useRef(null);
-  const handleResize = useCallback3(() => {
+  const resizeInterval = useRef2(null);
+  const handleResize = useCallback4(() => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -1597,7 +1862,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
       resizeInterval.current = null;
     }, resizeDebounce);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [
@@ -1622,11 +1887,11 @@ var MainSidebar = /* @__PURE__ */ forwardRef18(({ classNames, children, swipeToD
   });
   const { tx } = useThemeContext();
   const ref = useForwardedRef(forwardedRef);
-  const noopRef = useRef(null);
+  const noopRef = useRef2(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const handleKeyDown = useCallback3((event) => {
+  const handleKeyDown = useCallback4((event) => {
     if (event.key === "Escape") {
       event.target.closest("[data-tabster]")?.focus();
     }
@@ -1634,11 +1899,11 @@ var MainSidebar = /* @__PURE__ */ forwardRef18(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root3 = isLg ? Primitive9.div : DialogContent2;
+  const Root5 = isLg ? Primitive9.div : DialogContent2;
   return /* @__PURE__ */ React21.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React21.createElement(Root3, {
+  }, /* @__PURE__ */ React21.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1689,9 +1954,9 @@ MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef18(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot10 : role ? "div" : "main";
+  const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  return /* @__PURE__ */ React21.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
@@ -1732,9 +1997,9 @@ var MainOverlay = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwar
 var MainNotch = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = useRef(null);
+  const notchElement = useRef2(null);
   const ref = useComposedRefs(forwardedRef, notchElement);
-  const handleKeyDown = useCallback3((event) => {
+  const handleKeyDown = useCallback4((event) => {
     switch (event.key) {
       case "Escape":
         props?.onKeyDown?.(event);
@@ -1767,19 +2032,19 @@ import { createContext as createContext9 } from "@radix-ui/react-context";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
 import React22, { forwardRef as forwardRef19 } from "react";
-import { useId as useId3 } from "@dxos/react-hooks";
+import { useId as useId4 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ forwardRef19(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const titleId = useId3("message__title", propsTitleId);
-  const descriptionId = useId3("message__description", propsDescriptionId);
+  const titleId = useId4("message__title", propsTitleId);
+  const descriptionId = useId4("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot11 : Primitive10.div;
+  const Root5 = asChild ? Slot11 : Primitive10.div;
   return /* @__PURE__ */ React22.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React22.createElement(Root3, {
+  }, /* @__PURE__ */ React22.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1795,8 +2060,8 @@ var MESSAGE_TITLE_NAME = "MessageTitle";
 var MessageTitle = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root3 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React22.createElement(Root3, {
+  const Root5 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React22.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1808,8 +2073,8 @@ var MESSAGE_BODY_NAME = "MessageBody";
 var MessageBody = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root3 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React22.createElement(Root3, {
+  const Root5 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React22.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1824,39 +2089,298 @@ var Message = {
 };
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
-import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
+import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { useFocusGuards } from "@radix-ui/react-focus-guards";
+import { FocusScope } from "@radix-ui/react-focus-scope";
+import { useId as useId5 } from "@radix-ui/react-id";
+import * as PopperPrimitive from "@radix-ui/react-popper";
+import { createPopperScope } from "@radix-ui/react-popper";
+import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
+import { Presence } from "@radix-ui/react-presence";
 import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
-import React23, { forwardRef as forwardRef20 } from "react";
-var PopoverRoot = PopoverRootPrimitive;
-var PopoverPortal = PopoverPortalPrimitive;
-var PopoverTrigger = PopoverTriggerPrimitive;
-var PopoverAnchor = PopoverAnchorPrimitive;
-var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(PopoverArrowPrimitive, {
-    ...props,
-    className: tx("popover.arrow", "popover__arrow", {}, classNames),
+import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
+import { hideOthers } from "aria-hidden";
+import React23, { forwardRef as forwardRef20, useRef as useRef3, useCallback as useCallback5, useState as useState5, useEffect as useEffect6 } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
+  createPopperScope
+]);
+var usePopperScope = 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 = useRef3(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState5(false);
+  const [open = false, setOpen] = useControllableState5({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ React23.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React23.createElement(PopoverProvider, {
+    scope: __scopePopover,
+    contentId: useId5(),
+    triggerRef,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback5(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    hasCustomAnchor,
+    onCustomAnchorAdd: useCallback5(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback5(() => setHasCustomAnchor(false), []),
+    modal
+  }, children));
+};
+PopoverRoot.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...anchorProps } = props;
+  const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+  useEffect6(() => {
+    onCustomAnchorAdd();
+    return () => onCustomAnchorRemove();
+  }, [
+    onCustomAnchorAdd,
+    onCustomAnchorRemove
+  ]);
+  return /* @__PURE__ */ React23.createElement(PopperPrimitive.Anchor, {
+    ...popperScope,
+    ...anchorProps,
+    ref: forwardedRef
+  });
+});
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME2 = "PopoverTrigger";
+var PopoverTrigger = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...triggerProps } = props;
+  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ React23.createElement(Primitive11.button, {
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": context.open,
+    "aria-controls": context.contentId,
+    "data-state": getState(context.open),
+    ...triggerProps,
+    ref: composedTriggerRef,
+    onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
+  });
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React23.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);
+  useEffect6(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return /* @__PURE__ */ React23.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__ */ React23.createElement(PortalProvider, {
+    scope: __scopePopover,
+    forceMount
+  }, /* @__PURE__ */ React23.createElement(Presence, {
+    present: forceMount || context.open
+  }, /* @__PURE__ */ React23.createElement(PortalPrimitive, {
+    asChild: true,
+    container
+  }, children)));
+};
+PopoverPortal.displayName = PORTAL_NAME2;
+var CONTENT_NAME2 = "PopoverContent";
+var PopoverContent = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
+  const { forceMount = portalContext.forceMount, ...contentProps } = props;
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  return /* @__PURE__ */ React23.createElement(Presence, {
+    present: forceMount || context.open
+  }, context.modal ? /* @__PURE__ */ React23.createElement(PopoverContentModal, {
+    ...contentProps,
+    ref: forwardedRef
+  }) : /* @__PURE__ */ React23.createElement(PopoverContentNonModal, {
+    ...contentProps,
     ref: forwardedRef
+  }));
+});
+PopoverContent.displayName = CONTENT_NAME2;
+var PopoverContentModal = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const contentRef = useRef3(null);
+  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef3(false);
+  useEffect6(() => {
+    const content = contentRef.current;
+    if (content) {
+      return hideOthers(content);
+    }
+  }, []);
+  return /* @__PURE__ */ React23.createElement(RemoveScroll, {
+    as: Slot12,
+    allowPinchZoom: true
+  }, /* @__PURE__ */ React23.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: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
+      event.preventDefault();
+      if (!isRightClickOutsideRef.current) {
+        context.triggerRef.current?.focus();
+      }
+    }),
+    onPointerDownOutside: composeEventHandlers2(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: composeEventHandlers2(props.onFocusOutside, (event) => event.preventDefault(), {
+      checkForDefaultPrevented: false
+    })
+  }));
+});
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const hasInteractedOutsideRef = useRef3(false);
+  const hasPointerDownOutsideRef = useRef3(false);
+  return /* @__PURE__ */ React23.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__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef20((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__ */ React23.createElement(PopoverContentPrimitive, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
+  useFocusGuards();
+  return /* @__PURE__ */ React23.createElement(FocusScope, {
+    asChild: true,
+    loop: true,
+    trapped: trapFocus,
+    onMountAutoFocus: onOpenAutoFocus,
+    onUnmountAutoFocus: onCloseAutoFocus
+  }, /* @__PURE__ */ React23.createElement(DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onDismiss: () => context.onOpenChange(false)
+  }, /* @__PURE__ */ React23.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__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, ...closeProps } = props;
+  const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+  return /* @__PURE__ */ React23.createElement(Primitive11.button, {
+    type: "button",
+    ...closeProps,
+    ref: forwardedRef,
+    onClick: composeEventHandlers2(props.onClick, () => context.onOpenChange(false))
+  });
+});
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME2 = "PopoverArrow";
+var PopoverArrow = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+  const { __scopePopover, classNames, ...arrowProps } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(PopperPrimitive.Arrow, {
+    ...popperScope,
+    ...arrowProps,
+    className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  });
 });
+PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React23.createElement(Root3, {
+  const Root5 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React23.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1865,14 +2389,16 @@ var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, const
     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
 };
 
@@ -2095,8 +2621,8 @@ import { Slot as Slot13 } from "@radix-ui/react-slot";
 import React28, { forwardRef as forwardRef24 } from "react";
 var Tag = /* @__PURE__ */ forwardRef24(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  const Root5 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -2130,8 +2656,8 @@ var ToastRoot = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }
 });
 var ToastBody = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React29.createElement(Root3, {
+  const Root5 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -2139,8 +2665,8 @@ var ToastBody = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props },
 });
 var ToastTitle = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React29.createElement(Root3, {
+  const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -2148,8 +2674,8 @@ var ToastTitle = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }
 });
 var ToastDescription = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React29.createElement(Root3, {
+  const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -2157,8 +2683,8 @@ var ToastDescription = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...p
 });
 var ToastActions = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React29.createElement(Root3, {
+  const Root5 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2291,7 +2817,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React32, { createContext as createContext10, useEffect as useEffect5 } from "react";
+import React32, { createContext as createContext10, useEffect as useEffect7 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2301,7 +2827,7 @@ var hasIosKeyboard = () => {
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 var ThemeContext = /* @__PURE__ */ createContext10(void 0);
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base" }) => {
-  useEffect5(() => {
+  useEffect7(() => {
     if (document.defaultView) {
       const kb = createKeyborg(document.defaultView);
       kb.subscribe(handleInputModalityChange);
@@ -2345,7 +2871,7 @@ export {
   DensityContext,
   DensityProvider,
   Dialog,
-  DropdownMenu2 as DropdownMenu,
+  DropdownMenu,
   ElevationContext,
   ElevationProvider,
   Icon,
@@ -2375,14 +2901,16 @@ export {
   Tree,
   TreeItem,
   Treegrid,
+  createDropdownMenuScope,
+  createPopoverScope,
   hasIosKeyboard,
   isLabel,
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
   useDensityContext,
-  useDropdownMenuContext2 as useDropdownMenuContext,
-  useDropdownMenuMenuScope2 as useDropdownMenuMenuScope,
+  useDropdownMenuContext,
+  useDropdownMenuMenuScope,
   useElevationContext,
   useListContext,
   useListItemContext,