@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/dist/lib/browser/index.mjs

@@ -150,8 +150,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 Root7 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React2.createElement(Root7, {
+  const Root5 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
@@ -160,8 +160,8 @@ var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, ch
 });
 var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot : Primitive.div;
-  return /* @__PURE__ */ React2.createElement(Root7, {
+  const Root5 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
@@ -198,23 +198,22 @@ var DxAvatar = createComponent({
   elementClass: NaturalDxAvatar,
   react: React3
 });
-var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props }, forwardedRef) => {
+var AvatarContent = ({ icon, classNames, ...props }) => {
   const href = useIconHref(icon);
   const { labelId, descriptionId } = useAvatarContext("AvatarContent");
   return /* @__PURE__ */ React3.createElement(DxAvatar, {
     ...props,
     icon: href,
-    "aria-labelledby": labelId,
+    labelId,
     "aria-describedby": descriptionId,
-    rootClassName: mx(classNames),
-    ref: forwardedRef
+    rootClassName: mx(classNames)
   });
-});
+};
 var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root7 = asChild ? Slot2 : Primitive2.span;
+  const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React3.createElement(Root7, {
+  return /* @__PURE__ */ React3.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -224,10 +223,10 @@ var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ..
   });
 });
 var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root7 = asChild ? Slot2 : Primitive2.span;
+  const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React3.createElement(Root7, {
+  return /* @__PURE__ */ React3.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -255,8 +254,8 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef3 } from "react";
 var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot3 : Primitive3.a;
-  return /* @__PURE__ */ React4.createElement(Root7, {
+  const Root5 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React4.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -268,8 +267,8 @@ var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
 var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React5.createElement(Root7, {
+  const Root5 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -278,8 +277,8 @@ var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
 });
 var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot4 : Primitive4.ol;
-  return /* @__PURE__ */ React5.createElement(Root7, {
+  const Root5 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -288,8 +287,8 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
 });
 var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot4 : Primitive4.li;
-  return /* @__PURE__ */ React5.createElement(Root7, {
+  const Root5 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -297,16 +296,16 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
-  const Root7 = asChild ? Slot4 : Link;
-  return /* @__PURE__ */ React5.createElement(Root7, {
+  const Root5 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React5.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot4 : "h1";
-  return /* @__PURE__ */ React5.createElement(Root7, {
+  const Root5 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React5.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -348,8 +347,8 @@ var Button = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef5(({ classNames, chi
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root7 = asChild ? Slot5 : Primitive5.button;
-  return /* @__PURE__ */ React6.createElement(Root7, {
+  const Root5 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React6.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -371,8 +370,8 @@ Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root7 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React6.createElement(Root7, {
+  const Root5 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React6.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
@@ -386,7 +385,7 @@ var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsEleva
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-import React9, { forwardRef as forwardRef8 } from "react";
+import React9, { forwardRef as forwardRef8, useState as useState4 } from "react";
 
 // packages/ui/react-ui/src/components/Icon/Icon.tsx
 import React7, { forwardRef as forwardRef6, memo as memo2 } from "react";
@@ -405,618 +404,98 @@ var Icon = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ icon, classNames
 }));
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
-import { composeEventHandlers } from "@radix-ui/primitive";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { createContextScope } from "@radix-ui/react-context";
-import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
-import { useId as useId2 } 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 Primitive6 } from "@radix-ui/react-primitive";
-import { Slottable } from "@radix-ui/react-slot";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
-import React8, { forwardRef as forwardRef7, useCallback as useCallback3, useEffect as useEffect2, useMemo, useRef, useState as useState4 } from "react";
-var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
-  createPopperScope
-]);
-var usePopperScope = createPopperScope();
-var DEFAULT_DELAY_DURATION = 700;
-var TOOLTIP_OPEN = "tooltip.open";
-var TOOLTIP_NAME = "Tooltip";
-var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
-var TooltipProvider = (props) => {
-  const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
-  const isOpenDelayedRef = useRef(true);
-  const isPointerInTransitRef = useRef(false);
-  const skipDelayTimerRef = useRef(0);
-  useEffect2(() => {
-    const skipDelayTimer = skipDelayTimerRef.current;
-    return () => window.clearTimeout(skipDelayTimer);
-  }, []);
-  const popperScope = usePopperScope(__scopeTooltip);
-  const [trigger, setTrigger] = useState4(null);
-  const [content, setContent] = useState4("");
-  const [side, setSide] = useState4(void 0);
-  const triggerRef = useRef(trigger);
-  const handleTriggerChange = useCallback3((nextTrigger) => {
-    setTrigger(nextTrigger);
-    triggerRef.current = nextTrigger;
-    setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
-    setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
-  }, []);
-  const contentId = useId2();
-  const openTimerRef = useRef(0);
-  const wasOpenDelayedRef = useRef(false);
-  const handleOpenChange = useCallback3((open2) => {
-    if (open2) {
-      window.clearTimeout(skipDelayTimerRef.current);
-      isOpenDelayedRef.current = false;
-      document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
-    } else {
-      window.clearTimeout(skipDelayTimerRef.current);
-      skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
-    }
-    onOpenChange?.(open2);
-  }, [
-    skipDelayDuration,
-    onOpenChange
-  ]);
-  const [open = false, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: handleOpenChange
-  });
-  const stateAttribute = useMemo(() => {
-    return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
-  }, [
-    open
-  ]);
-  const handleOpen = useCallback3(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = 0;
-    wasOpenDelayedRef.current = false;
-    setOpen(true);
-  }, [
-    setOpen
-  ]);
-  const handleClose = useCallback3(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = 0;
-    setOpen(false);
-  }, [
-    setOpen
-  ]);
-  const handleDelayedOpen = useCallback3(() => {
-    window.clearTimeout(openTimerRef.current);
-    openTimerRef.current = window.setTimeout(() => {
-      wasOpenDelayedRef.current = true;
-      setOpen(true);
-      openTimerRef.current = 0;
-    }, delayDuration);
-  }, [
-    delayDuration,
-    setOpen
-  ]);
-  useEffect2(() => {
-    return () => {
-      if (openTimerRef.current) {
-        window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = 0;
-      }
-    };
-  }, []);
-  const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  return /* @__PURE__ */ React8.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React8.createElement(TooltipContextProvider, {
-    scope: __scopeTooltip,
-    contentId,
-    open,
-    stateAttribute,
-    trigger,
-    onTriggerChange: handleTriggerChange,
-    onTriggerEnter: useCallback3(() => {
-      if (isOpenDelayedRef.current) {
-        handleDelayedOpen();
-      } else {
-        handleOpen();
-      }
-    }, [
-      isOpenDelayedRef,
-      handleDelayedOpen,
-      handleOpen
-    ]),
-    onTriggerLeave: useCallback3(() => {
-      if (disableHoverableContent) {
-        handleClose();
-      } else {
-        window.clearTimeout(openTimerRef.current);
-        openTimerRef.current = 0;
-      }
-    }, [
-      handleClose,
-      disableHoverableContent
-    ]),
-    onOpen: handleOpen,
-    onClose: handleClose,
-    disableHoverableContent,
-    isPointerInTransitRef,
-    onPointerInTransitChange: useCallback3((inTransit) => {
-      isPointerInTransitRef.current = inTransit;
-    }, [])
-  }, /* @__PURE__ */ React8.createElement(TooltipContent, {
-    side,
-    className: tx("tooltip.content", "tooltip", {
-      elevation
-    })
-  }, content, /* @__PURE__ */ React8.createElement(TooltipArrow, {
-    className: tx("tooltip.arrow", "tooltip__arrow")
-  })), /* @__PURE__ */ React8.createElement(TooltipVirtualTrigger, {
-    virtualRef: triggerRef
-  }), children));
-};
-TooltipProvider.displayName = TOOLTIP_NAME;
-var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
-  const popperScope = usePopperScope(__scopeTooltip);
-  return /* @__PURE__ */ React8.createElement(PopperPrimitive.Anchor, {
-    asChild: true,
-    ...popperScope,
-    virtualRef
-  });
+import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
+import React8, { forwardRef as forwardRef7 } from "react";
+
+// packages/ui/react-ui/src/hooks/useSafeCollisionPadding.ts
+import { useMemo } from "react";
+var propIsNumber = (prop) => Number.isFinite(prop);
+var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
+var safePadding = (propsPadding, safePadding2, side) => {
+  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
 };
-var TRIGGER_NAME = "TooltipTrigger";
-var TooltipTrigger = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
-  const {
-    __scopeTooltip,
-    onInteract,
-    // TODO(thure): Pass `delayDuration` into the context.
-    delayDuration: _delayDuration,
-    suppressNextTooltip,
-    side,
-    content,
-    ...triggerProps
-  } = props;
-  const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
-  const ref = useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const isPointerDownRef = useRef(false);
-  const hasPointerMoveOpenedRef = useRef(false);
-  const handlePointerUp = useCallback3(() => isPointerDownRef.current = false, []);
-  useEffect2(() => {
-    return () => document.removeEventListener("pointerup", handlePointerUp);
-  }, [
-    handlePointerUp
+var useSafeCollisionPadding = (collisionPadding) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
   ]);
-  return /* @__PURE__ */ React8.createElement(Primitive6.button, {
-    // We purposefully avoid adding `type=button` here because tooltip triggers are also
-    // commonly anchors and the anchor `type` attribute signifies MIME type.
-    "aria-describedby": context.open ? context.contentId : void 0,
-    "data-state": context.stateAttribute,
-    "data-tooltip-content": content,
-    "data-tooltip-side": side,
-    ...triggerProps,
-    ref: composedRefs,
-    onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
-      if (event.pointerType === "touch") {
-        return;
-      }
-      if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
-        onInteract?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        context.onTriggerChange(ref.current);
-        context.onTriggerEnter();
-        hasPointerMoveOpenedRef.current = true;
-      }
-    }),
-    onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
-      context.onTriggerLeave();
-      hasPointerMoveOpenedRef.current = false;
-    }),
-    onPointerDown: composeEventHandlers(props.onPointerDown, () => {
-      if (context.open) {
-        context.onClose();
-      }
-      isPointerDownRef.current = true;
-      document.addEventListener("pointerup", handlePointerUp, {
-        once: true
-      });
-    }),
-    onFocus: composeEventHandlers(props.onFocus, (event) => {
-      if (!isPointerDownRef.current) {
-        onInteract?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (suppressNextTooltip?.current) {
-          suppressNextTooltip.current = false;
-        } else {
-          context.onTriggerChange(ref.current);
-          context.onOpen();
-        }
-      }
-    }),
-    onBlur: composeEventHandlers(props.onBlur, context.onClose),
-    onClick: composeEventHandlers(props.onClick, context.onClose)
-  });
-});
-TooltipTrigger.displayName = TRIGGER_NAME;
-var PORTAL_NAME = "TooltipPortal";
-var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
-  forceMount: void 0
-});
-var TooltipPortal = (props) => {
-  const { __scopeTooltip, forceMount, children, container } = props;
-  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
-  return /* @__PURE__ */ React8.createElement(PortalProvider, {
-    scope: __scopeTooltip,
-    forceMount
-  }, /* @__PURE__ */ React8.createElement(Presence, {
-    present: forceMount || context.open
-  }, /* @__PURE__ */ React8.createElement(PortalPrimitive, {
-    asChild: true,
-    container
-  }, children)));
 };
-TooltipPortal.displayName = PORTAL_NAME;
-var CONTENT_NAME = "TooltipContent";
-var TooltipContent = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
-  const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
-  const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
-  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
-  return /* @__PURE__ */ React8.createElement(Presence, {
-    present: forceMount || context.open
-  }, context.disableHoverableContent ? /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
-    side,
-    ...contentProps,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React8.createElement(TooltipContentHoverable, {
-    side,
-    ...contentProps,
-    ref: forwardedRef
-  }));
-});
-var TooltipContentHoverable = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
-  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
-  const ref = useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const [pointerGraceArea, setPointerGraceArea] = useState4(null);
-  const { trigger, onClose } = context;
-  const content = ref.current;
-  const { onPointerInTransitChange } = context;
-  const handleRemoveGraceArea = useCallback3(() => {
-    setPointerGraceArea(null);
-    onPointerInTransitChange(false);
-  }, [
-    onPointerInTransitChange
-  ]);
-  const handleCreateGraceArea = useCallback3((event, hoverTarget) => {
-    const currentTarget = event.currentTarget;
-    const exitPoint = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
-    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
-    const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
-    const graceArea = getHull([
-      ...paddedExitPoints,
-      ...hoverTargetPoints
-    ]);
-    setPointerGraceArea(graceArea);
-    onPointerInTransitChange(true);
-  }, [
-    onPointerInTransitChange
-  ]);
-  useEffect2(() => {
-    return () => handleRemoveGraceArea();
-  }, [
-    handleRemoveGraceArea
-  ]);
-  useEffect2(() => {
-    if (trigger && content) {
-      const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
-      const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
-      trigger.addEventListener("pointerleave", handleTriggerLeave);
-      content.addEventListener("pointerleave", handleContentLeave);
-      return () => {
-        trigger.removeEventListener("pointerleave", handleTriggerLeave);
-        content.removeEventListener("pointerleave", handleContentLeave);
-      };
-    }
-  }, [
-    trigger,
-    content,
-    handleCreateGraceArea,
-    handleRemoveGraceArea
-  ]);
-  useEffect2(() => {
-    if (pointerGraceArea) {
-      const handleTrackPointerGrace = (event) => {
-        const target = event.target;
-        const pointerPosition = {
-          x: event.clientX,
-          y: event.clientY
-        };
-        const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
-        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
-        if (hasEnteredTarget) {
-          handleRemoveGraceArea();
-        } else if (isPointerOutsideGraceArea) {
-          handleRemoveGraceArea();
-          onClose();
-        }
-      };
-      document.addEventListener("pointermove", handleTrackPointerGrace);
-      return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
-    }
-  }, [
-    trigger,
-    content,
-    pointerGraceArea,
-    onClose,
-    handleRemoveGraceArea
-  ]);
-  return /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
+
+// packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
+var TooltipProvider = TooltipProviderPrimitive;
+var TooltipRoot = TooltipRootPrimitive;
+var TooltipPortal = TooltipPortalPrimitive;
+var TooltipTrigger = TooltipTriggerPrimitive;
+var TooltipArrow = /* @__PURE__ */ forwardRef7(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React8.createElement(TooltipArrowPrimitive, {
     ...props,
-    ref: composedRefs
+    className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
+    ref: forwardedRef
   });
 });
-var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
-  isInside: false
-});
-var TooltipContentImpl = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
-  const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
-  const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
-  const popperScope = usePopperScope(__scopeTooltip);
-  const { onClose } = context;
-  useEffect2(() => {
-    document.addEventListener(TOOLTIP_OPEN, onClose);
-    return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
-  }, [
-    onClose
-  ]);
-  useEffect2(() => {
-    if (context.trigger) {
-      const handleScroll = (event) => {
-        const target = event.target;
-        if (target?.contains(context.trigger)) {
-          onClose();
-        }
-      };
-      window.addEventListener("scroll", handleScroll, {
-        capture: true
-      });
-      return () => window.removeEventListener("scroll", handleScroll, {
-        capture: true
-      });
-    }
-  }, [
-    context.trigger,
-    onClose
-  ]);
-  return /* @__PURE__ */ React8.createElement(DismissableLayer, {
-    asChild: true,
-    disableOutsidePointerEvents: false,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside: (event) => event.preventDefault(),
-    onDismiss: onClose
-  }, /* @__PURE__ */ React8.createElement(PopperPrimitive.Content, {
-    "data-state": context.stateAttribute,
-    ...popperScope,
-    ...contentProps,
-    ref: forwardedRef,
-    style: {
-      ...contentProps.style,
-      // re-namespace exposed content custom properties
-      ...{
-        "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
-        "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
-        "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
-        "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
-        "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
-      }
-    }
-  }, /* @__PURE__ */ React8.createElement(Slottable, null, children), /* @__PURE__ */ React8.createElement(VisuallyHiddenContentContextProvider, {
-    scope: __scopeTooltip,
-    isInside: true
-  }, /* @__PURE__ */ React8.createElement(VisuallyHiddenPrimitive.Root, {
-    id: context.contentId,
-    role: "tooltip"
-  }, ariaLabel || children))));
-});
-TooltipContent.displayName = CONTENT_NAME;
-var ARROW_NAME = "TooltipArrow";
-var TooltipArrow = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
-  const { __scopeTooltip, ...arrowProps } = props;
-  const popperScope = usePopperScope(__scopeTooltip);
-  const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
-  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React8.createElement(PopperPrimitive.Arrow, {
-    ...popperScope,
-    ...arrowProps,
+var TooltipContent = /* @__PURE__ */ forwardRef7(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React8.createElement(TooltipContentPrimitive, {
+    sideOffset: 4,
+    ...props,
+    collisionPadding: safeCollisionPadding,
+    className: tx("tooltip.content", "tooltip", {
+      elevation
+    }, classNames),
     ref: forwardedRef
   });
 });
-TooltipArrow.displayName = ARROW_NAME;
-var getExitSideFromRect = (point, rect) => {
-  const top = Math.abs(rect.top - point.y);
-  const bottom = Math.abs(rect.bottom - point.y);
-  const right = Math.abs(rect.right - point.x);
-  const left = Math.abs(rect.left - point.x);
-  switch (Math.min(top, bottom, right, left)) {
-    case left:
-      return "left";
-    case right:
-      return "right";
-    case top:
-      return "top";
-    case bottom:
-      return "bottom";
-    default:
-      throw new Error("unreachable");
-  }
-};
-var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
-  const paddedExitPoints = [];
-  switch (exitSide) {
-    case "top":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding,
-        y: exitPoint.y + padding
-      }, {
-        x: exitPoint.x + padding,
-        y: exitPoint.y + padding
-      });
-      break;
-    case "bottom":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding,
-        y: exitPoint.y - padding
-      }, {
-        x: exitPoint.x + padding,
-        y: exitPoint.y - padding
-      });
-      break;
-    case "left":
-      paddedExitPoints.push({
-        x: exitPoint.x + padding,
-        y: exitPoint.y - padding
-      }, {
-        x: exitPoint.x + padding,
-        y: exitPoint.y + padding
-      });
-      break;
-    case "right":
-      paddedExitPoints.push({
-        x: exitPoint.x - padding,
-        y: exitPoint.y - padding
-      }, {
-        x: exitPoint.x - padding,
-        y: exitPoint.y + padding
-      });
-      break;
-  }
-  return paddedExitPoints;
-};
-var getPointsFromRect = (rect) => {
-  const { top, right, bottom, left } = rect;
-  return [
-    {
-      x: left,
-      y: top
-    },
-    {
-      x: right,
-      y: top
-    },
-    {
-      x: right,
-      y: bottom
-    },
-    {
-      x: left,
-      y: bottom
-    }
-  ];
-};
-var isPointInPolygon = (point, polygon) => {
-  const { x, y } = point;
-  let inside = false;
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x;
-    const yi = polygon[i].y;
-    const xj = polygon[j].x;
-    const yj = polygon[j].y;
-    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
-    if (intersect) {
-      inside = !inside;
-    }
-  }
-  return inside;
-};
-var getHull = (points) => {
-  const newPoints = points.slice();
-  newPoints.sort((a, b) => {
-    if (a.x < b.x) {
-      return -1;
-    } else if (a.x > b.x) {
-      return 1;
-    } else if (a.y < b.y) {
-      return -1;
-    } else if (a.y > b.y) {
-      return 1;
-    } else {
-      return 0;
-    }
-  });
-  return getHullPresorted(newPoints);
-};
-var getHullPresorted = (points) => {
-  if (points.length <= 1) {
-    return points.slice();
-  }
-  const upperHull = [];
-  for (let i = 0; i < points.length; i++) {
-    const p = points[i];
-    while (upperHull.length >= 2) {
-      const q = upperHull[upperHull.length - 1];
-      const r = upperHull[upperHull.length - 2];
-      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
-        upperHull.pop();
-      } else {
-        break;
-      }
-    }
-    upperHull.push(p);
-  }
-  upperHull.pop();
-  const lowerHull = [];
-  for (let i = points.length - 1; i >= 0; i--) {
-    const p = points[i];
-    while (lowerHull.length >= 2) {
-      const q = lowerHull[lowerHull.length - 1];
-      const r = lowerHull[lowerHull.length - 2];
-      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
-        lowerHull.pop();
-      } else {
-        break;
-      }
-    }
-    lowerHull.push(p);
-  }
-  lowerHull.pop();
-  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
-    return upperHull;
-  } else {
-    return upperHull.concat(lowerHull);
-  }
-};
 var Tooltip = {
   Provider: TooltipProvider,
-  Trigger: TooltipTrigger
+  Root: TooltipRoot,
+  Portal: TooltipPortal,
+  Trigger: TooltipTrigger,
+  Arrow: TooltipArrow,
+  Content: TooltipContent
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
   if (noTooltip) {
     return /* @__PURE__ */ React9.createElement(LabelledIconButton, {
       ...props,
       ref: forwardedRef
     });
   }
-  return /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
-    asChild: true,
-    content: props.label,
-    side: tooltipSide,
-    suppressNextTooltip
+  const content = /* @__PURE__ */ React9.createElement(Tooltip.Content, {
+    ...zIndex && {
+      style: {
+        zIndex
+      }
+    },
+    side: tooltipSide
+  }, props.label, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null));
+  return /* @__PURE__ */ React9.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip?.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
+    asChild: true
   }, /* @__PURE__ */ React9.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
-  }));
+  })), tooltipPortal ? /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, content) : content);
 });
 var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -1086,7 +565,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, densit
 });
 
 // packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
-import React12, { createContext as createContext4, useCallback as useCallback4, useContext as useContext6, useState as useState5 } from "react";
+import React12, { createContext as createContext4, useCallback as useCallback3, useContext as useContext6, useState as useState5 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -1095,7 +574,7 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 var useClipboard = () => useContext6(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
   const [textValue, setInternalTextValue] = useState5("");
-  const setTextValue = useCallback4(async (nextValue) => {
+  const setTextValue = useCallback3(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
@@ -1108,12 +587,12 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
-import React16 from "react";
+import React16, { useState as useState6 } from "react";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React15, { createContext as createContext7, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React15, { createContext as createContext7, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -1145,7 +624,7 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React14.cre
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 var ThemeContext = /* @__PURE__ */ createContext7(void 0);
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
-  useEffect3(() => {
+  useEffect2(() => {
     if (document.defaultView) {
       const kb = createKeyborg(document.defaultView);
       kb.subscribe(handleInputModalityChange);
@@ -1219,25 +698,36 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ...iconProps
   })));
 };
-var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, iconProps, variant, ...props }) => {
+var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
-  const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
-  return /* @__PURE__ */ React16.createElement(IconButton, {
-    iconOnly: true,
-    label,
-    icon: "ph--copy--regular",
-    size: 5,
+  const [open, setOpen] = useState6(false);
+  return /* @__PURE__ */ React16.createElement(Tooltip.Root, {
+    delayDuration: 1500,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React16.createElement(Tooltip.Portal, null, /* @__PURE__ */ React16.createElement(Tooltip.Content, {
+    side: "bottom",
+    sideOffset: 12
+  }, /* @__PURE__ */ React16.createElement("span", null, label), /* @__PURE__ */ React16.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React16.createElement(Tooltip.Trigger, {
+    "aria-label": label,
+    ...props,
+    onClick: () => setTextValue(value).then(() => setOpen(true)),
+    "data-testid": "copy-invitation",
+    asChild: true
+  }, /* @__PURE__ */ React16.createElement(Button, {
     variant,
     classNames: [
       "inline-flex flex-col justify-center",
       classNames
-    ],
-    onClick: () => setTextValue(value).then(onOpen),
-    "data-testid": "copy-invitation"
-  });
+    ]
+  }, /* @__PURE__ */ React16.createElement(Icon, {
+    icon: "ph--copy--regular",
+    size: 5,
+    ...iconProps
+  }))));
 };
 
 // packages/ui/react-ui/src/components/Clipboard/index.ts
@@ -1279,7 +769,9 @@ var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...p
 var DialogClose = DialogClosePrimitive;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
 var DIALOG_CONTENT_NAME = "DialogContent";
-var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {});
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
 var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React17.createElement(DialogOverlayPrimitive, {
@@ -1296,9 +788,6 @@ var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, inOver
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React17.createElement(DialogContentPrimitive, {
-    // NOTE: Radix warning unless set to undefined.
-    // https://www.radix-ui.com/primitives/docs/components/dialog#description
-    "aria-describedby": void 0,
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
@@ -1390,320 +879,765 @@ var AlertDialog = {
   Action: AlertDialogAction
 };
 
-// packages/ui/react-ui/src/components/Input/Input.tsx
-import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
-import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef13, useCallback as useCallback5 } 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";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React19, { forwardRef as forwardRef13 } from "react";
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(LabelPrimitive, {
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Content, {
     ...props,
-    className: tx("input.label", "input__label", {
-      srOnly
+    collisionPadding: safeCollisionPadding,
+    className: tx("menu.content", "menu", {
+      elevation
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(DescriptionPrimitive, {
+  const Root5 = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React19.createElement(Root5, {
     ...props,
-    className: tx("input.description", "input__description", {
-      srOnly
-    }, classNames),
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React19.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
-    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
-      srOnly,
-      validationValence
-    }, classNames),
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
-  }, children);
+  });
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Item, {
     ...props,
-    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
-      srOnly
-    }, classNames),
+    className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
-  }, children);
+  });
 });
-var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
-  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext(propsDensity);
-  const elevation = useElevationContext(propsElevation);
-  const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
-    variant: "static",
-    focused,
-    disabled: props.disabled,
-    density,
-    elevation,
-    validationValence
-  }, propsSegmentClassName), [
-    tx,
-    props.disabled,
-    elevation,
-    propsElevation,
-    density
-  ]);
-  return /* @__PURE__ */ React19.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
-    segmentClassName,
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
-    inputClassName: tx("input.inputWithSegments", "input input--pin", {
-      disabled: props.disabled
-    }, inputClassName),
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
-  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
-  const themeContextValue = useThemeContext();
-  const density = useDensityContext(propsDensity);
-  const elevation = useElevationContext(propsElevation);
-  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  const { tx } = themeContextValue;
-  return /* @__PURE__ */ React19.createElement(TextInputPrimitive, {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Separator, {
     ...props,
-    className: tx("input.input", "input", {
-      variant,
-      disabled: props.disabled,
-      density,
-      elevation,
-      validationValence
-    }, classNames),
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
+    className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
-  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext(propsDensity);
-  const elevation = useElevationContext(propsElevation);
-  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React19.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Label, {
     ...props,
-    className: tx("input.input", "input--text-area", {
-      variant,
-      disabled: props.disabled,
-      density,
-      elevation,
-      validationValence
-    }, classNames),
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = useControllableState2({
-    prop: propsChecked,
-    defaultProp: propsDefaultChecked,
-    onChange: propsOnCheckedChange
+var ContextMenu2 = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel
+};
+
+// packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope } from "@radix-ui/react-context";
+import { useId as useId2 } 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 { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React20, { useRef, useCallback as useCallback4, forwardRef as forwardRef14, 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
   });
-  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(CheckboxPrimitive, {
-    ...props,
-    checked,
-    onCheckedChange,
-    id,
-    "aria-describedby": descriptionId,
-    ...validationValence === "error" && {
-      "aria-invalid": "true",
-      "aria-errormessage": errorMessageId
-    },
-    className: tx("input.checkbox", "input--checkbox", {
-      size
-    }, "shrink-0", classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(Icon, {
-    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
-    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
-      size,
-      checked
+  return /* @__PURE__ */ React20.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: useId2(),
+    triggerRef,
+    contentId: useId2(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: useCallback4(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ React20.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen,
+    dir,
+    modal
+  }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ React20.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();
+      }
     })
   }));
 });
-var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = useControllableState2({
-    prop: propsChecked,
-    defaultProp: propsDefaultChecked ?? false,
-    onChange: propsOnCheckedChange
+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;
+    }
   });
-  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React19.createElement("input", {
-    type: "checkbox",
-    className: mx3("dx-checkbox--switch dx-focus-ring", classNames),
-    checked,
-    onChange: (event) => {
-      onCheckedChange(event.target.checked);
-    },
-    id,
-    "aria-describedby": descriptionId,
+  return /* @__PURE__ */ React20.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__ */ React20.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
+  });
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root5 = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React20.createElement(Root5, {
     ...props,
-    ...validationValence === "error" && {
-      "aria-invalid": "true",
-      "aria-errormessage": errorMessageId
-    },
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
+  }, children);
+});
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+  const { tx } = useThemeContext();
+  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const elevation = useElevationContext();
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const hasInteractedOutsideRef = useRef(false);
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    collisionPadding: safeCollisionPadding,
+    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", {
+      elevation
+    }, 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)"
+      }
+    }
   });
 });
-var Input = {
-  Root: InputRoot,
-  PinInput,
-  TextInput,
-  TextArea,
-  Checkbox,
-  Switch,
-  Label,
-  Description,
-  Validation,
-  DescriptionAndValidation
-};
-
-// packages/ui/react-ui/src/components/Lists/List.tsx
-import { CaretDown, CaretRight } from "@phosphor-icons/react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React21, { forwardRef as forwardRef14 } from "react";
-import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
-
-// packages/ui/react-ui/src/components/Lists/ListDropIndicator.tsx
-import React20 from "react";
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
-  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
-};
-var edgeStyles = {
-  top: "top-[--line-offset] before:top-[--offset-terminal]",
-  right: "right-[--line-offset] before:right-[--offset-terminal]",
-  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
-  left: "left-[--line-offset] before:left-[--offset-terminal]"
+DropdownMenuContent.displayName = CONTENT_NAME;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Label, {
+    ...menuScope,
+    ...labelProps,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
+    ...menuScope,
+    ...itemProps,
+    className: tx("menu.item", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuItem.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.CheckboxItem, {
+    ...menuScope,
+    ...checkboxItemProps,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioItem, {
+    ...menuScope,
+    ...radioItemProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
+    className: tx("menu.separator", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Arrow, {
+    ...menuScope,
+    ...arrowProps,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+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__ */ React20.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
 };
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React20.createElement("div", {
-    role: "none",
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubContent, {
+    ...menuScope,
+    ...subContentProps,
+    ref: forwardedRef,
     style: {
-      "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
-      "--line-inset": `${lineInset}px`,
-      "--terminal-size": `${terminalSize}px`,
-      "--terminal-radius": `${terminalSize / 2}px`,
-      "--terminal-inset": `${terminalInset}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
-    },
-    className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
+      ...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,
+  Group: DropdownMenuGroup,
+  GroupLabel: DropdownMenuGroupLabel,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  Arrow: DropdownMenuArrow,
+  Sub: DropdownMenuSub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent
 };
+var useDropdownMenuMenuScope = useMenuScope;
 
-// packages/ui/react-ui/src/components/Lists/List.tsx
-var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React21.createElement(DensityProvider, {
-    density
-  }, /* @__PURE__ */ React21.createElement(ListPrimitive, {
-    ...props,
-    className: tx("list.root", "list", {}, classNames),
-    ref: forwardedRef
-  }, children));
-});
-var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root7 = asChild ? Slot6 : "div";
-  const density = useDensityContext();
+// packages/ui/react-ui/src/components/Input/Input.tsx
+import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React21, { forwardRef as forwardRef15, useCallback as useCallback5 } 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";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var Label3 = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Root7, {
-    ...!asChild && {
-      role: "none"
-    },
+  return /* @__PURE__ */ React21.createElement(LabelPrimitive, {
     ...props,
-    className: tx("list.item.endcap", "list__listItem__endcap", {
-      density
+    className: tx("input.label", "input__label", {
+      srOnly
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var MockListItemOpenTrigger = ({ classNames, ...props }) => {
-  const density = useDensityContext();
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement("div", {
-    role: "none",
-    ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
-      density
-    }, classNames)
-  });
-};
-var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React21.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React21.createElement(DescriptionPrimitive, {
     ...props,
-    className: tx("list.item.heading", "list__listItem__heading", {
-      density
+    className: tx("input.description", "input__description", {
+      srOnly
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef15(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-  const Icon3 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React21.createElement(ListPrimitiveItemOpenTrigger, {
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React21.createElement(ValidationPrimitive, {
     ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
-      density
+    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
+      srOnly,
+      validationValence
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React21.createElement(Icon3, {
-    weight: "bold",
-    className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
-  }));
+  }, children);
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React21.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React21.createElement(DescriptionAndValidationPrimitive, {
     ...props,
-    className: tx("list.item.root", "list__listItem", {
-      density,
-      collapsible: props.collapsible
+    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
+      srOnly
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var ListItem = {
-  Root: ListItemRoot,
-  Endcap: ListItemEndcap,
-  Heading: ListItemHeading,
+var PinInput = /* @__PURE__ */ forwardRef15(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+    variant: "static",
+    focused,
+    disabled: props.disabled,
+    density,
+    elevation,
+    validationValence
+  }, propsSegmentClassName), [
+    tx,
+    props.disabled,
+    elevation,
+    propsElevation,
+    density
+  ]);
+  return /* @__PURE__ */ React21.createElement(PinInputPrimitive, {
+    ...props,
+    segmentClassName,
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    inputClassName: tx("input.inputWithSegments", "input input--pin", {
+      disabled: props.disabled
+    }, inputClassName),
+    ref: forwardedRef
+  });
+});
+var TextInput = /* @__PURE__ */ forwardRef15(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const themeContextValue = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = themeContextValue;
+  return /* @__PURE__ */ React21.createElement(TextInputPrimitive, {
+    ...props,
+    className: tx("input.input", "input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var TextArea = /* @__PURE__ */ forwardRef15(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
+  const { tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React21.createElement(TextAreaPrimitive, {
+    ...props,
+    className: tx("input.input", "input--text-area", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    ref: forwardedRef
+  });
+});
+var Checkbox = /* @__PURE__ */ forwardRef15(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState2({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement(CheckboxPrimitive, {
+    ...props,
+    checked,
+    onCheckedChange,
+    id,
+    "aria-describedby": descriptionId,
+    ...validationValence === "error" && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    },
+    className: tx("input.checkbox", "input--checkbox", {
+      size
+    }, "shrink-0", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React21.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+      size,
+      checked
+    })
+  }));
+});
+var Switch = /* @__PURE__ */ forwardRef15(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = useControllableState2({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked ?? false,
+    onChange: propsOnCheckedChange
+  });
+  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ React21.createElement("input", {
+    type: "checkbox",
+    className: mx3("dx-checkbox--switch dx-focus-ring", classNames),
+    checked,
+    onChange: (event) => {
+      onCheckedChange(event.target.checked);
+    },
+    id,
+    "aria-describedby": descriptionId,
+    ...props,
+    ...validationValence === "error" && {
+      "aria-invalid": "true",
+      "aria-errormessage": errorMessageId
+    },
+    ref: forwardedRef
+  });
+});
+var Input = {
+  Root: InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label: Label3,
+  Description,
+  Validation,
+  DescriptionAndValidation
+};
+
+// packages/ui/react-ui/src/components/Lists/List.tsx
+import { CaretDown, CaretRight } from "@phosphor-icons/react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import React23, { forwardRef as forwardRef16 } from "react";
+import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
+
+// packages/ui/react-ui/src/components/Lists/ListDropIndicator.tsx
+import React22 from "react";
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
+  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  right: "right-[--line-offset] before:right-[--offset-terminal]",
+  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
+  left: "left-[--line-offset] before:left-[--offset-terminal]"
+};
+var strokeSize = 2;
+var terminalSize = 8;
+var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
+  const orientation = edgeToOrientationMap[edge];
+  return /* @__PURE__ */ React22.createElement("div", {
+    role: "none",
+    style: {
+      "--line-thickness": `${strokeSize}px`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
+      "--terminal-size": `${terminalSize}px`,
+      "--terminal-radius": `${terminalSize / 2}px`,
+      "--terminal-inset": `${terminalInset}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
+    },
+    className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
+  });
+};
+
+// packages/ui/react-ui/src/components/Lists/List.tsx
+var List = /* @__PURE__ */ forwardRef16(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(props.density);
+  return /* @__PURE__ */ React23.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ React23.createElement(ListPrimitive, {
+    ...props,
+    className: tx("list.root", "list", {}, classNames),
+    ref: forwardedRef
+  }, children));
+});
+var ListItemEndcap = /* @__PURE__ */ forwardRef16(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root5 = asChild ? Slot8 : "div";
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement(Root5, {
+    ...!asChild && {
+      role: "none"
+    },
+    ...props,
+    className: tx("list.item.endcap", "list__listItem__endcap", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var MockListItemOpenTrigger = ({ classNames, ...props }) => {
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React23.createElement("div", {
+    role: "none",
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
+      density
+    }, classNames)
+  });
+};
+var ListItemHeading = /* @__PURE__ */ forwardRef16(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemHeading, {
+    ...props,
+    className: tx("list.item.heading", "list__listItem__heading", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef16(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+  const Icon3 = open ? CaretDown : CaretRight;
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemOpenTrigger, {
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children || /* @__PURE__ */ React23.createElement(Icon3, {
+    weight: "bold",
+    className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
+  }));
+});
+var ListItemRoot = /* @__PURE__ */ forwardRef16(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItem, {
+    ...props,
+    className: tx("list.item.root", "list__listItem", {
+      density,
+      collapsible: props.collapsible
+    }, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ListItem = {
+  Root: ListItemRoot,
+  Endcap: ListItemEndcap,
+  Heading: ListItemHeading,
   OpenTrigger: ListItemOpenTrigger,
   CollapsibleContent: ListItemCollapsibleContent,
   MockOpenTrigger: MockListItemOpenTrigger,
@@ -1711,10 +1645,10 @@ var ListItem = {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-import React23, { forwardRef as forwardRef15 } from "react";
+import React25, { forwardRef as forwardRef17 } from "react";
 
 // packages/ui/react-ui/src/components/Lists/TreeDropIndicator.tsx
-import React22 from "react";
+import React24 from "react";
 var edgeToOrientationMap2 = {
   "reorder-above": "sibling",
   "reorder-below": "sibling",
@@ -1744,7 +1678,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   if (isBlocked) {
     return null;
   }
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -1759,22 +1693,22 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React23.createElement(List, {
+var TreeRoot = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React25.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef17(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React23.createElement(List, {
+  return /* @__PURE__ */ React25.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React23.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React25.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1800,24 +1734,24 @@ var TreeItem = {
 // packages/ui/react-ui/src/components/Lists/Treegrid.tsx
 import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React24, { forwardRef as forwardRef16 } from "react";
+import React26, { forwardRef as forwardRef18 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ forwardRef18(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot7 : Primitive7.div;
+  const Root5 = asChild ? Slot9 : Primitive8.div;
   const arrowNavigationAttrs = useArrowNavigationGroup({
     axis: "vertical",
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React24.createElement(Root7, {
+  return /* @__PURE__ */ React26.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1829,9 +1763,9 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef18(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot7 : Primitive7.div;
+  const Root5 = asChild ? Slot9 : Primitive8.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState3({
@@ -1848,11 +1782,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ React24.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React26.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React24.createElement(Root7, {
+  }, /* @__PURE__ */ React26.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1867,15 +1801,15 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ React24.createElement("div", {
+  }, /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
   }, children)));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef16(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef18(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React26.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1897,15 +1831,15 @@ var Treegrid = {
 // packages/ui/react-ui/src/components/Main/Main.tsx
 import { createContext as createContext10 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React25, { forwardRef as forwardRef17, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState7 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState8 } 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 useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useState as useState7 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1920,8 +1854,8 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState6(0);
-  const [gestureStartX, setGestureStartX] = useState6(0);
+  const [motionState, setMotionState] = useState7(0);
+  const [gestureStartX, setGestureStartX] = useState7(0);
   const setIdle = useCallback6(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
@@ -2089,652 +2023,185 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
     prop: propsNavigationSidebarState,
     defaultProp: defaultNavigationSidebarState,
-    onChange: onNavigationSidebarStateChange
-  });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
-    prop: propsComplementarySidebarState,
-    defaultProp: defaultComplementarySidebarState,
-    onChange: onComplementarySidebarStateChange
-  });
-  const [resizing, setResizing] = useState7(false);
-  const resizeInterval = useRef2(null);
-  const handleResize = useCallback7(() => {
-    setResizing(true);
-    if (resizeInterval.current) {
-      clearTimeout(resizeInterval.current);
-    }
-    resizeInterval.current = setTimeout(() => {
-      setResizing(false);
-      resizeInterval.current = null;
-    }, resizeDebounce);
-  }, []);
-  useEffect5(() => {
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [
-    handleResize
-  ]);
-  return /* @__PURE__ */ React25.createElement(MainProvider, {
-    ...props,
-    navigationSidebarState,
-    setNavigationSidebarState,
-    complementarySidebarState,
-    setComplementarySidebarState,
-    resizing
-  }, children);
-};
-MainRoot.displayName = MAIN_ROOT_NAME;
-var handleOpenAutoFocus = (event) => {
-  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
-};
-var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery("lg", {
-    ssr: false
-  });
-  const { tx } = useThemeContext();
-  const { t } = useTranslation();
-  const ref = useForwardedRef(forwardedRef);
-  const noopRef = useRef2(null);
-  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => onStateChange?.("closed")
-  });
-  const handleKeyDown = useCallback7((event) => {
-    if (event.key === "Escape") {
-      event.target.closest("[data-tabster]")?.focus();
-    }
-    props.onKeyDown?.(event);
-  }, [
-    props.onKeyDown
-  ]);
-  const Root7 = isLg ? Primitive8.div : DialogContent2;
-  return /* @__PURE__ */ React25.createElement(DialogRoot2, {
-    open: state !== "closed",
-    "aria-label": toLocalizedString(label, t),
-    modal: false
-  }, !isLg && /* @__PURE__ */ React25.createElement(DialogTitle2, {
-    className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React25.createElement(Root7, {
-    ...!isLg && {
-      forceMount: true,
-      tabIndex: -1,
-      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
-    },
-    ...props,
-    "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": state,
-    "data-resizing": resizing ? "true" : "false",
-    className: tx("main.sidebar", "main__sidebar", {}, classNames),
-    onKeyDown: handleKeyDown,
-    ...state === "closed" && {
-      inert: "true"
-    },
-    ref
-  }, children));
-});
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
-  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
-  const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React25.createElement(MainSidebar, {
-    ...mover,
-    ...props,
-    state: navigationSidebarState,
-    onStateChange: setNavigationSidebarState,
-    resizing,
-    side: "inline-start",
-    ref: forwardedRef
-  });
-});
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
-  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
-  const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React25.createElement(MainSidebar, {
-    ...mover,
-    ...props,
-    state: complementarySidebarState,
-    onStateChange: setComplementarySidebarState,
-    resizing,
-    side: "inline-end",
-    ref: forwardedRef
-  });
-});
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot8 : role ? "div" : "main";
-  const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React25.createElement(Root7, {
-    role,
-    ...handlesFocus && {
-      ...mover
-    },
-    ...props,
-    "data-sidebar-inline-start-state": navigationSidebarState,
-    "data-sidebar-inline-end-state": complementarySidebarState,
-    className: tx("main.content", "main", {
-      bounce,
-      handlesFocus
-    }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = useMediaQuery("lg", {
-    ssr: false
-  });
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement("div", {
-    onClick: () => {
-      setNavigationSidebarState("collapsed");
-      setComplementarySidebarState("collapsed");
-    },
-    ...props,
-    className: tx("main.overlay", "main__overlay", {
-      isLg,
-      inlineStartSidebarOpen: navigationSidebarState,
-      inlineEndSidebarOpen: complementarySidebarState
-    }, classNames),
-    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
-    "aria-hidden": "true",
-    ref: forwardedRef
-  });
-});
-var Main = {
-  Root: MainRoot,
-  Content: MainContent,
-  Overlay: MainOverlay,
-  NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar
-};
-
-// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot9 } from "@radix-ui/react-slot";
-import React26, { forwardRef as forwardRef18 } from "react";
-
-// packages/ui/react-ui/src/hooks/useSafeCollisionPadding.ts
-import { useMemo as useMemo3 } from "react";
-var propIsNumber = (prop) => Number.isFinite(prop);
-var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
-var safePadding = (propsPadding, safePadding2, side) => {
-  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
-};
-var useSafeCollisionPadding = (collisionPadding) => {
-  const { safeAreaPadding } = useThemeContext();
-  return useMemo3(() => ({
-    top: safePadding(collisionPadding, safeAreaPadding, "top"),
-    right: safePadding(collisionPadding, safeAreaPadding, "right"),
-    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
-    left: safePadding(collisionPadding, safeAreaPadding, "left")
-  }), [
-    collisionPadding,
-    safeAreaPadding
-  ]);
-};
-
-// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
-var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
-var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef18(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Content, {
-    ...props,
-    collisionPadding: safeCollisionPadding,
-    className: tx("menu.content", "menu", {
-      elevation
-    }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var ContextMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot9 : Primitive9.div;
-  return /* @__PURE__ */ React26.createElement(Root7, {
-    ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var ContextMenuArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Arrow, {
-    ...props,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ContextMenuGroup = ContextMenuPrimitive.Group;
-var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Item, {
-    ...props,
-    className: tx("menu.item", "menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.CheckboxItem, {
-    ...props,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Separator, {
-    ...props,
-    className: tx("menu.separator", "menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Label, {
-    ...props,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var ContextMenu2 = {
-  Root: ContextMenuRoot,
-  Trigger: ContextMenuTrigger,
-  Portal: ContextMenuPortal,
-  Content: ContextMenuContent,
-  Viewport: ContextMenuViewport,
-  Arrow: ContextMenuArrow,
-  Group: ContextMenuGroup,
-  Item: ContextMenuItem,
-  CheckboxItem: ContextMenuCheckboxItem,
-  ItemIndicator: ContextMenuItemIndicator,
-  Separator: ContextMenuSeparator,
-  GroupLabel: ContextMenuGroupLabel
-};
-
-// packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
-import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
-import { composeRefs } from "@radix-ui/react-compose-refs";
-import { createContextScope as createContextScope3 } 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 Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
-import React27, { useRef as useRef3, useCallback as useCallback8, forwardRef as forwardRef19, useEffect as useEffect6 } from "react";
-var DROPDOWN_MENU_NAME = "DropdownMenu";
-var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(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 = useRef3(null);
-  const [open = false, setOpen] = useControllableState5({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  return /* @__PURE__ */ React27.createElement(DropdownMenuProvider, {
-    scope: __scopeDropdownMenu,
-    triggerId: useId3(),
-    triggerRef,
-    contentId: useId3(),
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
-      setOpen
-    ]),
-    modal
-  }, /* @__PURE__ */ React27.createElement(MenuPrimitive.Root, {
-    ...menuScope,
-    open,
-    onOpenChange: setOpen,
-    dir,
-    modal
-  }, children));
-};
-DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
-var TRIGGER_NAME2 = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
-  const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
-    asChild: true,
-    ...menuScope
-  }, /* @__PURE__ */ React27.createElement(Primitive10.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: composeEventHandlers2(props.onPointerDown, (event) => {
-      if (!disabled && event.button === 0 && event.ctrlKey === false) {
-        context.onOpenToggle();
-        if (!context.open) {
-          event.preventDefault();
-        }
-      }
-    }),
-    onKeyDown: composeEventHandlers2(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_NAME2;
-var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
-var DropdownMenuVirtualTrigger = (props) => {
-  const { __scopeDropdownMenu, virtualRef } = props;
-  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  useEffect6(() => {
-    if (virtualRef.current) {
-      context.triggerRef.current = virtualRef.current;
-    }
-  });
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
-    ...menuScope,
-    virtualRef
-  });
-};
-DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
-var PORTAL_NAME2 = "DropdownMenuPortal";
-var DropdownMenuPortal = (props) => {
-  const { __scopeDropdownMenu, ...portalProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Portal, {
-    ...menuScope,
-    ...portalProps
-  });
-};
-DropdownMenuPortal.displayName = PORTAL_NAME2;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React27.createElement(Root7, {
-    ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var CONTENT_NAME2 = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
-  const { tx } = useThemeContext();
-  const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
-  const elevation = useElevationContext();
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const hasInteractedOutsideRef = useRef3(false);
-  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Content, {
-    id: context.contentId,
-    "aria-labelledby": context.triggerId,
-    ...menuScope,
-    ...contentProps,
-    collisionPadding: safeCollisionPadding,
-    ref: forwardedRef,
-    onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
-      if (!hasInteractedOutsideRef.current) {
-        context.triggerRef.current?.focus();
-      }
-      hasInteractedOutsideRef.current = false;
-      event.preventDefault();
-    }),
-    onInteractOutside: composeEventHandlers2(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", {
-      elevation
-    }, 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_NAME2;
-var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...groupProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Group, {
-    ...menuScope,
-    ...groupProps,
-    ref: forwardedRef
-  });
-});
-DropdownMenuGroup.displayName = GROUP_NAME;
-var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Label, {
-    ...menuScope,
-    ...labelProps,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
-    ref: forwardedRef
-  });
-});
-DropdownMenuGroupLabel.displayName = LABEL_NAME;
-var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Item, {
-    ...menuScope,
-    ...itemProps,
-    className: tx("menu.item", "menu__item", {}, classNames),
-    ref: forwardedRef
+    onChange: onNavigationSidebarStateChange
   });
-});
-DropdownMenuItem.displayName = ITEM_NAME;
-var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.CheckboxItem, {
-    ...menuScope,
-    ...checkboxItemProps,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
-    ref: forwardedRef
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
   });
-});
-DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...radioGroupProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioGroup, {
-    ...menuScope,
-    ...radioGroupProps,
-    ref: forwardedRef
+  const [resizing, setResizing] = useState8(false);
+  const resizeInterval = useRef2(null);
+  const handleResize = useCallback7(() => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, resizeDebounce);
+  }, []);
+  useEffect5(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [
+    handleResize
+  ]);
+  return /* @__PURE__ */ React27.createElement(MainProvider, {
+    ...props,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
+    resizing
+  }, children);
+};
+MainRoot.displayName = MAIN_ROOT_NAME;
+var handleOpenAutoFocus = (event) => {
+  !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
+};
+var MainSidebar = /* @__PURE__ */ forwardRef19(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
   });
-});
-DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
-var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...radioItemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioItem, {
-    ...menuScope,
-    ...radioItemProps,
-    ref: forwardedRef
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  const ref = useForwardedRef(forwardedRef);
+  const noopRef = useRef2(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => onStateChange?.("closed")
   });
+  const handleKeyDown = useCallback7((event) => {
+    if (event.key === "Escape") {
+      event.target.closest("[data-tabster]")?.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
+  const Root5 = isLg ? Primitive9.div : DialogContent2;
+  return /* @__PURE__ */ React27.createElement(DialogRoot2, {
+    open: state !== "closed",
+    "aria-label": toLocalizedString(label, t),
+    modal: false
+  }, !isLg && /* @__PURE__ */ React27.createElement(DialogTitle2, {
+    className: "sr-only"
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React27.createElement(Root5, {
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
+    },
+    ...props,
+    "data-side": side === "inline-end" ? "ie" : "is",
+    "data-state": state,
+    "data-resizing": resizing ? "true" : "false",
+    className: tx("main.sidebar", "main__sidebar", {}, classNames),
+    onKeyDown: handleKeyDown,
+    ...state === "closed" && {
+      inert: "true"
+    },
+    ref
+  }, children));
 });
-DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
-var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.ItemIndicator, {
-    ...menuScope,
-    ...itemIndicatorProps,
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
+  return /* @__PURE__ */ React27.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
+    resizing,
+    side: "inline-start",
     ref: forwardedRef
   });
 });
-DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
-var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Separator, {
-    ...menuScope,
-    ...separatorProps,
-    className: tx("menu.separator", "menu__item", {}, classNames),
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
+  return /* @__PURE__ */ React27.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
+    resizing,
+    side: "inline-end",
     ref: forwardedRef
   });
 });
-DropdownMenuSeparator.displayName = SEPARATOR_NAME;
-var ARROW_NAME2 = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ forwardRef19(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Arrow, {
-    ...menuScope,
-    ...arrowProps,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+  const Root5 = asChild ? Slot10 : role ? "div" : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
+  return /* @__PURE__ */ React27.createElement(Root5, {
+    role,
+    ...handlesFocus && {
+      ...mover
+    },
+    ...props,
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
+    className: tx("main.content", "main", {
+      bounce,
+      handlesFocus
+    }, classNames),
     ref: forwardedRef
-  });
+  }, children);
 });
-DropdownMenuArrow.displayName = ARROW_NAME2;
-var DropdownMenuSub = (props) => {
-  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const [open = false, setOpen] = useControllableState5({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
+MainContent.displayName = MAIN_NAME;
+var MainOverlay = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
   });
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.Sub, {
-    ...menuScope,
-    open,
-    onOpenChange: setOpen
-  }, children);
-};
-var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...subTriggerProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.createElement(MenuPrimitive.SubTrigger, {
-    ...menuScope,
-    ...subTriggerProps,
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React27.createElement("div", {
+    onClick: () => {
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
+    },
+    ...props,
+    className: tx("main.overlay", "main__overlay", {
+      isLg,
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
+    }, classNames),
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
+    "aria-hidden": "true",
     ref: forwardedRef
   });
 });
-DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...subContentProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React27.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,
-  Group: DropdownMenuGroup,
-  GroupLabel: DropdownMenuGroupLabel,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  RadioGroup: DropdownMenuRadioGroup,
-  RadioItem: DropdownMenuRadioItem,
-  ItemIndicator: DropdownMenuItemIndicator,
-  Separator: DropdownMenuSeparator,
-  Arrow: DropdownMenuArrow,
-  Sub: DropdownMenuSub,
-  SubTrigger: DropdownMenuSubTrigger,
-  SubContent: DropdownMenuSubContent
+var Main = {
+  Root: MainRoot,
+  Content: MainContent,
+  Overlay: MainOverlay,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar
 };
-var useDropdownMenuMenuScope = useMenuScope;
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
 import { createContext as createContext11 } from "@radix-ui/react-context";
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
 import React28, { forwardRef as forwardRef20 } from "react";
-import { useId as useId4 } from "@dxos/react-hooks";
+import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ forwardRef20(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const titleId = useId4("message__title", propsTitleId);
-  const descriptionId = useId4("message__description", propsDescriptionId);
+  const titleId = useId3("message__title", propsTitleId);
+  const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root7 = asChild ? Slot11 : Primitive11.div;
+  const Root5 = asChild ? Slot11 : Primitive10.div;
   return /* @__PURE__ */ React28.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React28.createElement(Root7, {
+  }, /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2750,8 +2217,8 @@ var MESSAGE_TITLE_NAME = "MessageTitle";
 var MessageTitle = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root7 = asChild ? Slot11 : Primitive11.h2;
-  return /* @__PURE__ */ React28.createElement(Root7, {
+  const Root5 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2763,8 +2230,8 @@ var MESSAGE_BODY_NAME = "MessageBody";
 var MessageBody = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root7 = asChild ? Slot11 : Primitive11.p;
-  return /* @__PURE__ */ React28.createElement(Root7, {
+  const Root5 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2779,51 +2246,51 @@ var Message = {
 };
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
-import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
-import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
-import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
-import { DismissableLayer as DismissableLayer2 } from "@radix-ui/react-dismissable-layer";
+import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
+import { useComposedRefs } 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 PopperPrimitive2 from "@radix-ui/react-popper";
-import { createPopperScope as createPopperScope2 } from "@radix-ui/react-popper";
-import { Portal as PortalPrimitive2 } from "@radix-ui/react-portal";
-import { Presence as Presence2 } from "@radix-ui/react-presence";
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { useId as useId4 } 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 { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
+import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React29, { forwardRef as forwardRef21, useRef as useRef4, useCallback as useCallback9, useState as useState8, useEffect as useEffect7 } from "react";
+import React29, { forwardRef as forwardRef21, useRef as useRef3, useCallback as useCallback8, useState as useState9, useEffect as useEffect6 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
-var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
-  createPopperScope2
+var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
+  createPopperScope
 ]);
-var usePopperScope2 = createPopperScope2();
+var usePopperScope = createPopperScope();
 var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
-  const popperScope = usePopperScope2(__scopePopover);
-  const triggerRef = useRef4(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
-  const [open = false, setOpen] = useControllableState6({
+  const popperScope = usePopperScope(__scopePopover);
+  const triggerRef = useRef3(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState9(false);
+  const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ React29.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React29.createElement(PopoverProvider, {
     scope: __scopePopover,
-    contentId: useId5(),
+    contentId: useId4(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback8(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback8(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
@@ -2832,29 +2299,29 @@ var ANCHOR_NAME = "PopoverAnchor";
 var PopoverAnchor = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
-  const popperScope = usePopperScope2(__scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  useEffect7(() => {
+  useEffect6(() => {
     onCustomAnchorAdd();
     return () => onCustomAnchorRemove();
   }, [
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
   });
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
-var TRIGGER_NAME3 = "PopoverTrigger";
+var TRIGGER_NAME2 = "PopoverTrigger";
 var PopoverTrigger = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...triggerProps } = props;
-  const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
-  const popperScope = usePopperScope2(__scopePopover);
-  const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ React29.createElement(Primitive12.button, {
+  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
+  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ React29.createElement(Primitive11.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2862,54 +2329,54 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
     "data-state": getState(context.open),
     ...triggerProps,
     ref: composedTriggerRef,
-    onClick: composeEventHandlers3(props.onClick, context.onOpenToggle)
+    onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
 });
-PopoverTrigger.displayName = TRIGGER_NAME3;
+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 = usePopperScope2(__scopePopover);
-  useEffect7(() => {
+  const popperScope = usePopperScope(__scopePopover);
+  useEffect6(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
 };
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
-var PORTAL_NAME3 = "PopoverPortal";
-var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
+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_NAME3, __scopePopover);
-  return /* @__PURE__ */ React29.createElement(PortalProvider2, {
+  const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
+  return /* @__PURE__ */ React29.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React29.createElement(Presence2, {
+  }, /* @__PURE__ */ React29.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React29.createElement(PortalPrimitive2, {
+  }, /* @__PURE__ */ React29.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
 };
-PopoverPortal.displayName = PORTAL_NAME3;
-var CONTENT_NAME3 = "PopoverContent";
+PopoverPortal.displayName = PORTAL_NAME2;
+var CONTENT_NAME2 = "PopoverContent";
 var PopoverContent = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
-  const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
+  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
-  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
-  return /* @__PURE__ */ React29.createElement(Presence2, {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  return /* @__PURE__ */ React29.createElement(Presence, {
     present: forceMount || context.open
   }, context.modal ? /* @__PURE__ */ React29.createElement(PopoverContentModal, {
     ...contentProps,
@@ -2919,13 +2386,13 @@ var PopoverContent = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-PopoverContent.displayName = CONTENT_NAME3;
+PopoverContent.displayName = CONTENT_NAME2;
 var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
-  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
-  const contentRef = useRef4(null);
-  const composedRefs = useComposedRefs2(forwardedRef, contentRef);
-  const isRightClickOutsideRef = useRef4(false);
-  useEffect7(() => {
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const contentRef = useRef3(null);
+  const composedRefs = useComposedRefs(forwardedRef, contentRef);
+  const isRightClickOutsideRef = useRef3(false);
+  useEffect6(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
@@ -2941,13 +2408,13 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) =>
     // (closed !== unmounted when animating out)
     trapFocus: context.open,
     disableOutsidePointerEvents: true,
-    onCloseAutoFocus: composeEventHandlers3(props.onCloseAutoFocus, (event) => {
+    onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
       event.preventDefault();
       if (!isRightClickOutsideRef.current) {
         context.triggerRef.current?.focus();
       }
     }),
-    onPointerDownOutside: composeEventHandlers3(props.onPointerDownOutside, (event) => {
+    onPointerDownOutside: composeEventHandlers2(props.onPointerDownOutside, (event) => {
       const originalEvent = event.detail.originalEvent;
       const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
       const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
@@ -2957,15 +2424,15 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) =>
     }),
     // When focus is trapped, a `focusout` event may still happen.
     // We make sure we don't trigger our `onDismiss` in such case.
-    onFocusOutside: composeEventHandlers3(props.onFocusOutside, (event) => event.preventDefault(), {
+    onFocusOutside: composeEventHandlers2(props.onFocusOutside, (event) => event.preventDefault(), {
       checkForDefaultPrevented: false
     })
   }));
 });
 var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
-  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
-  const hasInteractedOutsideRef = useRef4(false);
-  const hasPointerDownOutsideRef = useRef4(false);
+  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const hasInteractedOutsideRef = useRef3(false);
+  const hasPointerDownOutsideRef = useRef3(false);
   return /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
@@ -3003,8 +2470,8 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef)
 });
 var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
-  const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
-  const popperScope = usePopperScope2(__scopePopover);
+  const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
@@ -3015,7 +2482,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React29.createElement(DismissableLayer2, {
+  }, /* @__PURE__ */ React29.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -3023,7 +2490,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React29.createElement(PopperPrimitive2.Content, {
+  }, /* @__PURE__ */ React29.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -3051,31 +2518,31 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React29.createElement(Primitive12.button, {
+  return /* @__PURE__ */ React29.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
-    onClick: composeEventHandlers3(props.onClick, () => context.onOpenChange(false))
+    onClick: composeEventHandlers2(props.onClick, () => context.onOpenChange(false))
   });
 });
 PopoverClose.displayName = CLOSE_NAME;
-var ARROW_NAME3 = "PopoverArrow";
+var ARROW_NAME2 = "PopoverArrow";
 var PopoverArrow = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
-  const popperScope = usePopperScope2(__scopePopover);
+  const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Arrow, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-PopoverArrow.displayName = ARROW_NAME3;
+PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef21(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot12 : Primitive12.div;
-  return /* @__PURE__ */ React29.createElement(Root7, {
+  const Root5 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -3326,13 +2793,13 @@ var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "hori
 });
 
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
-import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
 import React34, { forwardRef as forwardRef26 } from "react";
 var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot13 : Primitive13.span;
-  return /* @__PURE__ */ React34.createElement(Root7, {
+  const Root5 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("tag.root", "dx-tag", {
       palette
@@ -3343,7 +2810,7 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNam
 });
 
 // packages/ui/react-ui/src/components/Toast/Toast.tsx
-import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
 import React35, { forwardRef as forwardRef27 } from "react";
@@ -3367,8 +2834,8 @@ var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }
 });
 var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot14 : Primitive14.div;
-  return /* @__PURE__ */ React35.createElement(Root7, {
+  const Root5 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -3376,8 +2843,8 @@ var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props },
 });
 var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React35.createElement(Root7, {
+  const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -3385,8 +2852,8 @@ var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }
 });
 var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React35.createElement(Root7, {
+  const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -3394,8 +2861,8 @@ var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...p
 });
 var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root7 = asChild ? Slot14 : Primitive14.div;
-  return /* @__PURE__ */ React35.createElement(Root7, {
+  const Root5 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -3565,7 +3032,6 @@ export {
   Treegrid,
   createDropdownMenuScope,
   createPopoverScope,
-  createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
   isLabel,
@@ -3585,7 +3051,6 @@ export {
   useSafeArea,
   useSidebars,
   useThemeContext,
-  useTooltipContext,
   useTranslation,
   useTranslationsContext,
   useVisualViewport