@dxos/react-ui 0.8.1 → 0.8.2-main.2f9c567

package/dist/lib/node/index.cjs

@@ -159,47 +159,47 @@ var import_react26 = __toESM(require("react"));
 var import_react_alert_dialog = require("@radix-ui/react-alert-dialog");
 var import_react_context4 = require("@radix-ui/react-context");
 var import_react27 = __toESM(require("react"));
-var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react_slot6 = require("@radix-ui/react-slot");
-var import_react28 = __toESM(require("react"));
-var import_primitive = require("@radix-ui/primitive");
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react_context5 = require("@radix-ui/react-context");
-var import_react_id = require("@radix-ui/react-id");
-var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
-var import_react_menu = require("@radix-ui/react-menu");
-var import_react_primitive7 = require("@radix-ui/react-primitive");
-var import_react_slot7 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react29 = __toESM(require("react"));
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
-var import_react30 = __toESM(require("react"));
+var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+var import_react28 = __toESM(require("react"));
 var import_react_input = require("@dxos/react-input");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react31 = require("@phosphor-icons/react");
-var import_react_slot8 = require("@radix-ui/react-slot");
-var import_react32 = __toESM(require("react"));
+var import_react29 = require("@phosphor-icons/react");
+var import_react_slot6 = require("@radix-ui/react-slot");
+var import_react30 = __toESM(require("react"));
 var import_react_list = require("@dxos/react-list");
+var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var import_react33 = __toESM(require("react"));
-var import_react34 = __toESM(require("react"));
-var import_react35 = __toESM(require("react"));
 var import_react_tabster = require("@fluentui/react-tabster");
+var import_react_context5 = require("@radix-ui/react-context");
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
+var import_react34 = __toESM(require("react"));
 var import_react_context6 = require("@radix-ui/react-context");
+var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react_primitive7 = require("@radix-ui/react-primitive");
+var import_react_slot8 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
+var import_react35 = __toESM(require("react"));
+var import_log = require("@dxos/log");
+var import_react_hooks4 = require("@dxos/react-hooks");
+var import_react36 = require("react");
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
 var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_react_slot9 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
+var import_primitive = require("@radix-ui/primitive");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react_context7 = require("@radix-ui/react-context");
-var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react_id = require("@radix-ui/react-id");
+var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
+var import_react_menu = require("@radix-ui/react-menu");
 var import_react_primitive9 = require("@radix-ui/react-primitive");
 var import_react_slot10 = require("@radix-ui/react-slot");
 var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
-var import_react37 = __toESM(require("react"));
-var import_log = require("@dxos/log");
-var import_react_hooks4 = require("@dxos/react-hooks");
-var import_react38 = require("react");
+var import_react38 = __toESM(require("react"));
 var import_react_context8 = require("@radix-ui/react-context");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react_slot11 = require("@radix-ui/react-slot");
@@ -386,17 +386,18 @@ var DxAvatar = (0, import_react9.createComponent)({
   elementClass: import_lit_ui.DxAvatar,
   react: import_react10.default
 });
-var AvatarContent = ({ icon, classNames, ...props }) => {
+var AvatarContent = /* @__PURE__ */ (0, import_react10.forwardRef)(({ icon, classNames, ...props }, forwardedRef) => {
   const href = useIconHref(icon);
   const { labelId, descriptionId } = useAvatarContext("AvatarContent");
   return /* @__PURE__ */ import_react10.default.createElement(DxAvatar, {
     ...props,
     icon: href,
-    labelId,
+    "aria-labelledby": labelId,
     "aria-describedby": descriptionId,
-    rootClassName: (0, import_react_ui_theme.mx)(classNames)
+    rootClassName: (0, import_react_ui_theme.mx)(classNames),
+    ref: forwardedRef
   });
-};
+});
 var AvatarLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
@@ -902,6 +903,7 @@ var DialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogContent, {
+    "aria-describedby": void 0,
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
@@ -987,1244 +989,1244 @@ var AlertDialog = {
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction
 };
-var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
-var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Label, {
     ...props,
-    collisionPadding: safeCollisionPadding,
-    className: tx("menu.content", "menu", {
-      elevation
+    className: tx("input.label", "input__label", {
+      srOnly
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot6.Slot : import_react_primitive6.Primitive.div;
-  return /* @__PURE__ */ import_react28.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Description, {
     ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    className: tx("input.description", "input__description", {
+      srOnly
+    }, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Arrow, {
+  const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Validation, {
     ...props,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
+      srOnly,
+      validationValence
+    }, classNames),
     ref: forwardedRef
-  });
+  }, children);
 });
-var ContextMenuGroup = ContextMenuPrimitive.Group;
-var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.DescriptionAndValidation, {
     ...props,
-    className: tx("menu.item", "menu__item", {}, classNames),
+    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
+      srOnly
+    }, classNames),
     ref: forwardedRef
-  });
+  }, children);
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.CheckboxItem, {
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const segmentClassName = (0, import_react28.useCallback)(({ 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__ */ import_react28.default.createElement(import_react_input.PinInput, {
     ...props,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    segmentClassName,
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
+    inputClassName: tx("input.inputWithSegments", "input input--pin", {
+      disabled: props.disabled
+    }, inputClassName),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Separator, {
+var TextInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __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 } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
+  const { tx } = themeContextValue;
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.TextInput, {
     ...props,
-    className: tx("menu.separator", "menu__item", {}, classNames),
+    className: tx("input.input", "input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Label, {
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.TextArea, {
     ...props,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    className: tx("input.input", "input--text-area", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation,
+      validationValence
+    }, classNames),
+    ...props.autoFocus && !hasIosKeyboard2 && {
+      autoFocus: true
+    },
     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
-};
-var DROPDOWN_MENU_NAME = "DropdownMenu";
-var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context5.createContextScope)(DROPDOWN_MENU_NAME, [
-  import_react_menu.createMenuScope
-]);
-var useMenuScope = (0, import_react_menu.createMenuScope)();
-var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
-var DropdownMenuRoot = (props) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const triggerRef = (0, import_react29.useRef)(null);
-  const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
+var Checkbox = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked,
+    onChange: propsOnCheckedChange
   });
-  return /* @__PURE__ */ import_react29.default.createElement(DropdownMenuProvider, {
-    scope: __scopeDropdownMenu,
-    triggerId: (0, import_react_id.useId)(),
-    triggerRef,
-    contentId: (0, import_react_id.useId)(),
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle: (0, import_react29.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
-      setOpen
-    ]),
-    modal
-  }, /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Root, {
-    ...menuScope,
-    open,
-    onOpenChange: setOpen,
-    dir,
-    modal
-  }, children));
-};
-DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
-var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
-  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Anchor, {
-    asChild: true,
-    ...menuScope
-  }, /* @__PURE__ */ import_react29.default.createElement(import_react_primitive7.Primitive.button, {
-    type: "button",
-    id: context.triggerId,
-    "aria-haspopup": "menu",
-    "aria-expanded": context.open,
-    "aria-controls": context.open ? context.contentId : void 0,
-    "data-state": context.open ? "open" : "closed",
-    "data-disabled": disabled ? "" : void 0,
-    disabled,
-    ...triggerProps,
-    ref: (0, import_react_compose_refs.composeRefs)(forwardedRef, context.triggerRef),
-    onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
-      if (!disabled && event.button === 0 && event.ctrlKey === false) {
-        context.onOpenToggle();
-        if (!context.open) {
-          event.preventDefault();
-        }
-      }
-    }),
-    onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
-      if (disabled) {
-        return;
-      }
-      if ([
-        "Enter",
-        " "
-      ].includes(event.key)) {
-        context.onOpenToggle();
-      }
-      if (event.key === "ArrowDown") {
-        context.onOpenChange(true);
-      }
-      if ([
-        "Enter",
-        " ",
-        "ArrowDown"
-      ].includes(event.key)) {
-        event.preventDefault();
-      }
+  const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_checkbox.Root, {
+    ...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__ */ import_react28.default.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+      size,
+      checked
     })
   }));
 });
-DropdownMenuTrigger.displayName = TRIGGER_NAME;
-var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
-var DropdownMenuVirtualTrigger = (props) => {
-  const { __scopeDropdownMenu, virtualRef } = props;
-  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  (0, import_react29.useEffect)(() => {
-    if (virtualRef.current) {
-      context.triggerRef.current = virtualRef.current;
-    }
+var Switch = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: propsChecked,
+    defaultProp: propsDefaultChecked ?? false,
+    onChange: propsOnCheckedChange
   });
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Anchor, {
-    ...menuScope,
-    virtualRef
+  const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
+  return /* @__PURE__ */ import_react28.default.createElement("input", {
+    type: "checkbox",
+    className: (0, import_react_ui_theme3.mx)("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: import_react_input.InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label,
+  Description,
+  Validation,
+  DescriptionAndValidation
 };
-DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
-var PORTAL_NAME = "DropdownMenuPortal";
-var DropdownMenuPortal = (props) => {
-  const { __scopeDropdownMenu, ...portalProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Portal, {
-    ...menuScope,
-    ...portalProps
+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__ */ import_react31.default.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]}`
   });
 };
-DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ (0, import_react30.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive7.Primitive.div;
-  return /* @__PURE__ */ import_react29.default.createElement(Root5, {
+  const density = useDensityContext(props.density);
+  return /* @__PURE__ */ import_react30.default.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ import_react30.default.createElement(import_react_list.List, {
     ...props,
-    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
-  }, children);
+  }, children));
 });
-var CONTENT_NAME = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+var ListItemEndcap = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root5 = asChild ? import_react_slot6.Slot : "div";
+  const density = useDensityContext();
   const { tx } = useThemeContext();
-  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
-  const elevation = useElevationContext();
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const hasInteractedOutsideRef = (0, import_react29.useRef)(false);
-  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Content, {
-    id: context.contentId,
-    "aria-labelledby": context.triggerId,
-    ...menuScope,
-    ...contentProps,
-    collisionPadding: safeCollisionPadding,
-    ref: forwardedRef,
-    onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
-      if (!hasInteractedOutsideRef.current) {
-        context.triggerRef.current?.focus();
-      }
-      hasInteractedOutsideRef.current = false;
-      event.preventDefault();
-    }),
-    onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, (event) => {
-      const originalEvent = event.detail.originalEvent;
-      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (!context.modal || isRightClick) {
-        hasInteractedOutsideRef.current = true;
-      }
-    }),
-    className: tx("menu.content", "menu", {
-      elevation
+  return /* @__PURE__ */ import_react30.default.createElement(Root5, {
+    ...!asChild && {
+      role: "none"
+    },
+    ...props,
+    className: tx("list.item.endcap", "list__listItem__endcap", {
+      density
     }, classNames),
-    style: {
-      ...props.style,
-      // re-namespace exposed content custom properties
-      ...{
-        "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
-        "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
-        "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
-        "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
-        "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
-      }
-    }
-  });
-});
-DropdownMenuContent.displayName = CONTENT_NAME;
-var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...groupProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Group, {
-    ...menuScope,
-    ...groupProps,
     ref: forwardedRef
+  }, children);
+});
+var MockListItemOpenTrigger = ({ classNames, ...props }) => {
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react30.default.createElement("div", {
+    role: "none",
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
+      density
+    }, classNames)
   });
+};
+var ListItemHeading = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItemHeading, {
+    ...props,
+    className: tx("list.item.heading", "list__listItem__heading", {
+      density
+    }, classNames),
+    ref: forwardedRef
+  }, children);
 });
-DropdownMenuGroup.displayName = GROUP_NAME;
-var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
+var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Label, {
-    ...menuScope,
-    ...labelProps,
-    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+  const density = useDensityContext();
+  const { open } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listItemScope);
+  const Icon3 = open ? import_react29.CaretDown : import_react29.CaretRight;
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItemOpenTrigger, {
+    ...props,
+    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
+      density
+    }, classNames),
     ref: forwardedRef
-  });
+  }, children || /* @__PURE__ */ import_react30.default.createElement(Icon3, {
+    weight: "bold",
+    className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
+  }));
 });
-DropdownMenuGroupLabel.displayName = LABEL_NAME;
-var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
+var ListItemRoot = /* @__PURE__ */ (0, import_react30.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Item, {
-    ...menuScope,
-    ...itemProps,
-    className: tx("menu.item", "menu__item", {}, classNames),
+  const density = useDensityContext();
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItem, {
+    ...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: import_react_list.ListItemCollapsibleContent,
+  MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator
+};
+var edgeToOrientationMap2 = {
+  "reorder-above": "sibling",
+  "reorder-below": "sibling",
+  "make-child": "child",
+  reparent: "child"
+};
+var orientationStyles2 = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
+  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
+  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
+  "make-child": "border-accentSurface",
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: ""
+};
+var strokeSize2 = 2;
+var terminalSize2 = 8;
+var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
+var TreeDropIndicator = ({ instruction, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
+  const isBlocked = instruction.type === "instruction-blocked";
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap2[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react33.default.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize2}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize2}px`,
+      "--terminal-radius": `${terminalSize2 / 2}px`,
+      "--negative-terminal-size": `-${terminalSize2}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
+      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
+    },
+    className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
+  });
+};
+var TreeRoot = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react32.default.createElement(List, {
+    ...props,
     ref: forwardedRef
   });
 });
-DropdownMenuItem.displayName = ITEM_NAME;
-var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.CheckboxItem, {
-    ...menuScope,
-    ...checkboxItemProps,
-    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+var TreeBranch = /* @__PURE__ */ (0, import_react32.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
+  const { headingId } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listScope);
+  return /* @__PURE__ */ import_react32.default.createElement(List, {
+    ...props,
+    "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...radioGroupProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.RadioGroup, {
-    ...menuScope,
-    ...radioGroupProps,
+var TreeItemRoot = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react32.default.createElement(ListItem.Root, {
+    role: "treeitem",
+    ...props,
     ref: forwardedRef
   });
 });
-DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
-var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...radioItemProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.RadioItem, {
-    ...menuScope,
-    ...radioItemProps,
-    ref: forwardedRef
+var TreeItemHeading = ListItem.Heading;
+var TreeItemOpenTrigger = ListItem.OpenTrigger;
+var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
+var TreeItemBody = ListItem.CollapsibleContent;
+var Tree = {
+  Root: TreeRoot,
+  Branch: TreeBranch
+};
+var TreeItem = {
+  Root: TreeItemRoot,
+  Heading: TreeItemHeading,
+  Body: TreeItemBody,
+  OpenTrigger: TreeItemOpenTrigger,
+  MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator
+};
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context5.createContextScope)(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var PATH_SEPARATOR = "~";
+var PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive6.Primitive.div;
+  const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
+    axis: "vertical",
+    tabbable: false,
+    circular: true
   });
-});
-DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
-var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.ItemIndicator, {
-    ...menuScope,
-    ...itemIndicatorProps,
+  return /* @__PURE__ */ import_react34.default.createElement(Root5, {
+    role: "treegrid",
+    ...arrowNavigationAttrs,
+    ...props,
+    className: tx("treegrid.root", "treegrid", {}, classNames),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
     ref: forwardedRef
-  });
+  }, children);
 });
-DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
-var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
+var TreegridRow = /* @__PURE__ */ (0, import_react34.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Separator, {
-    ...menuScope,
-    ...separatorProps,
-    className: tx("menu.separator", "menu__item", {}, classNames),
-    ref: forwardedRef
+  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive6.Primitive.div;
+  const pathParts = id.split(PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = (0, import_react_use_controllable_state2.useControllableState)({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
   });
-});
-DropdownMenuSeparator.displayName = SEPARATOR_NAME;
-var ARROW_NAME = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Arrow, {
-    ...menuScope,
-    ...arrowProps,
-    className: tx("menu.arrow", "menu__arrow", {}, classNames),
-    ref: forwardedRef
+  const focusableGroupAttrs = (0, import_react_tabster.useFocusableGroup)({
+    tabBehavior: "limited"
   });
-});
-DropdownMenuArrow.displayName = ARROW_NAME;
-var DropdownMenuSub = (props) => {
-  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
+  const arrowGroupAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
+    axis: "horizontal",
+    tabbable: false,
+    circular: false,
+    memorizeCurrent: false
   });
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Sub, {
-    ...menuScope,
+  return /* @__PURE__ */ import_react34.default.createElement(TreegridRowProvider, {
     open,
-    onOpenChange: setOpen
-  }, children);
-};
-var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...subTriggerProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.SubTrigger, {
-    ...menuScope,
-    ...subTriggerProps,
-    ref: forwardedRef
-  });
-});
-DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, ...subContentProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.SubContent, {
-    ...menuScope,
-    ...subContentProps,
-    ref: forwardedRef,
-    style: {
-      ...props.style,
-      // re-namespace exposed content custom properties
-      ...{
-        "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
-        "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
-        "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
-        "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
-        "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
-      }
-    }
-  });
-});
-DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
-var DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  VirtualTrigger: DropdownMenuVirtualTrigger,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Viewport: DropdownMenuViewport,
-  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;
-var Label3 = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Label, {
-    ...props,
-    className: tx("input.label", "input__label", {
-      srOnly
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ import_react34.default.createElement(Root5, {
+    role: "row",
+    "aria-level": level,
+    className: tx("treegrid.row", "treegrid__row", {
+      level
     }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var Description = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Description, {
+    ...parentOf && {
+      "aria-expanded": open,
+      "aria-owns": parentOf
+    },
+    tabIndex: 0,
+    ...focusableGroupAttrs,
     ...props,
-    className: tx("input.description", "input__description", {
-      srOnly
-    }, classNames),
+    id,
     ref: forwardedRef
-  }, children);
+  }, /* @__PURE__ */ import_react34.default.createElement("div", {
+    role: "none",
+    className: "contents",
+    ...arrowGroupAttrs
+  }, children)));
 });
-var Validation = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Validation, {
-    ...props,
-    className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
-      srOnly,
-      validationValence
+  return /* @__PURE__ */ import_react34.default.createElement("div", {
+    role: "gridcell",
+    className: tx("treegrid.cell", "treegrid__cell", {
+      indent
     }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var DescriptionAndValidation = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.DescriptionAndValidation, {
     ...props,
-    className: tx("input.descriptionAndValidation", "input__description-and-validation", {
-      srOnly
-    }, classNames),
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ (0, import_react30.forwardRef)(({ 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 = (0, import_react30.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
-    variant: "static",
-    focused,
-    disabled: props.disabled,
-    density,
-    elevation,
-    validationValence
-  }, propsSegmentClassName), [
-    tx,
-    props.disabled,
-    elevation,
-    propsElevation,
-    density
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+  PARENT_OF_SEPARATOR,
+  PATH_SEPARATOR,
+  createTreegridRowScope,
+  useTreegridRowContext
+};
+var MotionState;
+(function(MotionState2) {
+  MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
+  MotionState2[MotionState2["DEBOUNCING"] = 1] = "DEBOUNCING";
+  MotionState2[MotionState2["FOLLOWING"] = 2] = "FOLLOWING";
+})(MotionState || (MotionState = {}));
+var useSwipeToDismiss = (ref, {
+  onDismiss,
+  dismissThreshold = 64,
+  debounceThreshold = 8,
+  offset = 0
+  /* side = 'inline-start' */
+}) => {
+  const $root = ref.current;
+  const [motionState, setMotionState] = (0, import_react36.useState)(0);
+  const [gestureStartX, setGestureStartX] = (0, import_react36.useState)(0);
+  const setIdle = (0, import_react36.useCallback)(() => {
+    setMotionState(0);
+    $root?.style.removeProperty("inset-inline-start");
+    $root?.style.setProperty("transition-duration", "200ms");
+  }, [
+    $root
   ]);
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.PinInput, {
-    ...props,
-    segmentClassName,
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
-    inputClassName: tx("input.inputWithSegments", "input input--pin", {
-      disabled: props.disabled
-    }, inputClassName),
-    ref: forwardedRef
-  });
-});
-var TextInput = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __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 } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  const { tx } = themeContextValue;
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.TextInput, {
-    ...props,
-    className: tx("input.input", "input", {
-      variant,
-      disabled: props.disabled,
-      density,
-      elevation,
-      validationValence
-    }, classNames),
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
-    ref: forwardedRef
-  });
+  const setFollowing = (0, import_react36.useCallback)(() => {
+    setMotionState(2);
+    $root?.style.setProperty("transition-duration", "0ms");
+  }, [
+    $root
+  ]);
+  const handlePointerDown = (0, import_react36.useCallback)(({ screenX }) => {
+    if (motionState === 0) {
+      setMotionState(1);
+      setGestureStartX(screenX);
+    }
+  }, [
+    motionState
+  ]);
+  const handlePointerMove = (0, import_react36.useCallback)(({ screenX }) => {
+    if ($root) {
+      const delta = Math.min(screenX - gestureStartX, 0);
+      switch (motionState) {
+        case 2:
+          if (Math.abs(delta) > dismissThreshold) {
+            setIdle();
+            onDismiss?.();
+          } else {
+            $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
+          }
+          break;
+        case 1:
+          if (Math.abs(delta) > debounceThreshold) {
+            setFollowing();
+          }
+          break;
+      }
+    }
+  }, [
+    $root,
+    motionState,
+    gestureStartX
+  ]);
+  const handlePointerUp = (0, import_react36.useCallback)(() => {
+    setIdle();
+  }, [
+    setIdle
+  ]);
+  (0, import_react36.useEffect)(() => {
+    $root?.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      $root?.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [
+    $root,
+    handlePointerDown
+  ]);
+  (0, import_react36.useEffect)(() => {
+    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, [
+    $root,
+    handlePointerMove
+  ]);
+  (0, import_react36.useEffect)(() => {
+    $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.documentElement.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [
+    $root,
+    handlePointerUp
+  ]);
+};
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
+var MAIN_ROOT_NAME = "MainRoot";
+var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
+var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
+var MAIN_NAME = "Main";
+var GENERIC_CONSUMER_NAME = "GenericConsumer";
+var landmarkAttr = "data-main-landmark";
+var useLandmarkMover = (propsOnKeyDown, landmark) => {
+  const handleKeyDown = (0, import_react35.useCallback)((event) => {
+    const target = event.target;
+    if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
+      event.preventDefault();
+      const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
+      const l = landmarks.length;
+      const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
+      const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
+      document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
+    }
+    propsOnKeyDown?.(event);
+  }, [
+    propsOnKeyDown
+  ]);
+  const focusableGroupAttrs = window ? {} : {
+    tabBehavior: "limited",
+    ignoreDefaultKeydown: {
+      Tab: true
+    }
+  };
+  return {
+    onKeyDown: handleKeyDown,
+    [landmarkAttr]: landmark,
+    tabIndex: 0,
+    ...focusableGroupAttrs
+  };
+};
+var [MainProvider, useMainContext] = (0, import_react_context6.createContext)(MAIN_NAME, {
+  resizing: false,
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
+    import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 82,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  },
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
+    import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
+      F: __dxlog_file,
+      L: 87,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
 });
-var TextArea = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __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 } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.TextArea, {
-    ...props,
-    className: tx("input.input", "input--text-area", {
-      variant,
-      disabled: props.disabled,
-      density,
-      elevation,
-      validationValence
-    }, classNames),
-    ...props.autoFocus && !hasIosKeyboard2 && {
-      autoFocus: true
-    },
-    ref: forwardedRef
+var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
+  return {
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
+    ]),
+    openNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
+    ]),
+    openComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("closed"), [])
+  };
+};
+var resizeDebounce = 3e3;
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
+    ssr: false
   });
-});
-var Checkbox = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
-    prop: propsChecked,
-    defaultProp: propsDefaultChecked,
-    onChange: propsOnCheckedChange
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state3.useControllableState)({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
   });
-  const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_checkbox.Root, {
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state3.useControllableState)({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
+  });
+  const [resizing, setResizing] = (0, import_react35.useState)(false);
+  const resizeInterval = (0, import_react35.useRef)(null);
+  const handleResize = (0, import_react35.useCallback)(() => {
+    setResizing(true);
+    if (resizeInterval.current) {
+      clearTimeout(resizeInterval.current);
+    }
+    resizeInterval.current = setTimeout(() => {
+      setResizing(false);
+      resizeInterval.current = null;
+    }, resizeDebounce);
+  }, []);
+  (0, import_react35.useEffect)(() => {
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [
+    handleResize
+  ]);
+  return /* @__PURE__ */ import_react35.default.createElement(MainProvider, {
     ...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__ */ import_react30.default.createElement(Icon, {
-    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
-    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
-      size,
-      checked
-    })
-  }));
-});
-var Switch = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
-    prop: propsChecked,
-    defaultProp: propsDefaultChecked ?? false,
-    onChange: propsOnCheckedChange
+    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__ */ (0, import_react35.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
+    ssr: false
   });
-  const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react30.default.createElement("input", {
-    type: "checkbox",
-    className: (0, import_react_ui_theme3.mx)("dx-checkbox--switch dx-focus-ring", classNames),
-    checked,
-    onChange: (event) => {
-      onCheckedChange(event.target.checked);
+  const { tx } = useThemeContext();
+  const { t } = useTranslation();
+  const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
+  const noopRef = (0, import_react35.useRef)(null);
+  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+    onDismiss: () => onStateChange?.("closed")
+  });
+  const handleKeyDown = (0, import_react35.useCallback)((event) => {
+    if (event.key === "Escape") {
+      event.target.closest("[data-tabster]")?.focus();
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown
+  ]);
+  const Root5 = isLg ? import_react_primitive7.Primitive.div : import_react_dialog2.DialogContent;
+  return /* @__PURE__ */ import_react35.default.createElement(import_react_dialog2.Root, {
+    open: state !== "closed",
+    "aria-label": toLocalizedString(label, t),
+    modal: false
+  }, !isLg && /* @__PURE__ */ import_react35.default.createElement(import_react_dialog2.DialogTitle, {
+    className: "sr-only"
+  }, toLocalizedString(label, t)), /* @__PURE__ */ import_react35.default.createElement(Root5, {
+    ...!isLg && {
+      forceMount: true,
+      tabIndex: -1,
+      onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
     },
-    id,
-    "aria-describedby": descriptionId,
     ...props,
-    ...validationValence === "error" && {
-      "aria-invalid": "true",
-      "aria-errormessage": errorMessageId
+    "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__ */ (0, import_react35.forwardRef)((props, forwardedRef) => {
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "0");
+  return /* @__PURE__ */ import_react35.default.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
+    resizing,
+    side: "inline-start",
     ref: forwardedRef
   });
 });
-var Input = {
-  Root: import_react_input.InputRoot,
-  PinInput,
-  TextInput,
-  TextArea,
-  Checkbox,
-  Switch,
-  Label: Label3,
-  Description,
-  Validation,
-  DescriptionAndValidation
-};
-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__ */ import_react33.default.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]}`
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainComplementarySidebar = /* @__PURE__ */ (0, import_react35.forwardRef)((props, forwardedRef) => {
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const mover = useLandmarkMover(props.onKeyDown, "2");
+  return /* @__PURE__ */ import_react35.default.createElement(MainSidebar, {
+    ...mover,
+    ...props,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
+    resizing,
+    side: "inline-end",
+    ref: forwardedRef
   });
-};
-var List = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+});
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+var MainContent = /* @__PURE__ */ (0, import_react35.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const density = useDensityContext(props.density);
-  return /* @__PURE__ */ import_react32.default.createElement(DensityProvider, {
-    density
-  }, /* @__PURE__ */ import_react32.default.createElement(import_react_list.List, {
+  const Root5 = asChild ? import_react_slot8.Slot : role ? "div" : "main";
+  const mover = useLandmarkMover(props.onKeyDown, "1");
+  return /* @__PURE__ */ import_react35.default.createElement(Root5, {
+    role,
+    ...handlesFocus && {
+      ...mover
+    },
     ...props,
-    className: tx("list.root", "list", {}, classNames),
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
+    className: tx("main.content", "main", {
+      bounce,
+      handlesFocus
+    }, classNames),
     ref: forwardedRef
-  }, children));
+  }, children);
 });
-var ListItemEndcap = /* @__PURE__ */ (0, import_react32.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root5 = asChild ? import_react_slot8.Slot : "div";
-  const density = useDensityContext();
+MainContent.displayName = MAIN_NAME;
+var MainOverlay = /* @__PURE__ */ (0, import_react35.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
+    ssr: false
+  });
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react32.default.createElement(Root5, {
-    ...!asChild && {
-      role: "none"
+  return /* @__PURE__ */ import_react35.default.createElement("div", {
+    onClick: () => {
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
     },
     ...props,
-    className: tx("list.item.endcap", "list__listItem__endcap", {
-      density
+    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
-  }, children);
-});
-var MockListItemOpenTrigger = ({ classNames, ...props }) => {
-  const density = useDensityContext();
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react32.default.createElement("div", {
-    role: "none",
-    ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
-      density
-    }, classNames)
   });
+});
+var Main = {
+  Root: MainRoot,
+  Content: MainContent,
+  Overlay: MainOverlay,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar
 };
-var ListItemHeading = /* @__PURE__ */ (0, import_react32.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItemHeading, {
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Content, {
     ...props,
-    className: tx("list.item.heading", "list__listItem__heading", {
-      density
+    collisionPadding: safeCollisionPadding,
+    className: tx("menu.content", "menu", {
+      elevation
     }, classNames),
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react32.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  const { open } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listItemScope);
-  const Icon3 = open ? import_react31.CaretDown : import_react31.CaretRight;
-  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItemOpenTrigger, {
+  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
+  return /* @__PURE__ */ import_react37.default.createElement(Root5, {
     ...props,
-    className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
-      density
-    }, classNames),
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ import_react32.default.createElement(Icon3, {
-    weight: "bold",
-    className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
-  }));
+  }, children);
 });
-var ListItemRoot = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItem, {
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
-    className: tx("list.item.root", "list__listItem", {
-      density,
-      collapsible: props.collapsible
-    }, classNames),
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
-  }, children);
-});
-var ListItem = {
-  Root: ListItemRoot,
-  Endcap: ListItemEndcap,
-  Heading: ListItemHeading,
-  OpenTrigger: ListItemOpenTrigger,
-  CollapsibleContent: import_react_list.ListItemCollapsibleContent,
-  MockOpenTrigger: MockListItemOpenTrigger,
-  DropIndicator: ListDropIndicator
-};
-var edgeToOrientationMap2 = {
-  "reorder-above": "sibling",
-  "reorder-below": "sibling",
-  "make-child": "child",
-  reparent: "child"
-};
-var orientationStyles2 = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
-  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
-};
-var instructionStyles = {
-  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
-  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
-  "make-child": "border-accentSurface",
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: ""
-};
-var strokeSize2 = 2;
-var terminalSize2 = 8;
-var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
-var TreeDropIndicator = ({ instruction, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
-  const isBlocked = instruction.type === "instruction-blocked";
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap2[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react35.default.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize2}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize2}px`,
-      "--terminal-radius": `${terminalSize2 / 2}px`,
-      "--negative-terminal-size": `-${terminalSize2}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
-      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
-    },
-    className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
   });
-};
-var TreeRoot = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react34.default.createElement(List, {
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Item, {
     ...props,
+    className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ (0, import_react34.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
-  const { headingId } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ import_react34.default.createElement(List, {
+var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
-    "aria-labelledby": headingId,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react34.default.createElement(ListItem.Root, {
-    role: "treeitem",
+var ContextMenuSeparator = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Separator, {
     ...props,
+    className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var TreeItemHeading = ListItem.Heading;
-var TreeItemOpenTrigger = ListItem.OpenTrigger;
-var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
-var TreeItemBody = ListItem.CollapsibleContent;
-var Tree = {
-  Root: TreeRoot,
-  Branch: TreeBranch
-};
-var TreeItem = {
-  Root: TreeItemRoot,
-  Heading: TreeItemHeading,
-  Body: TreeItemBody,
-  OpenTrigger: TreeItemOpenTrigger,
-  MockOpenTrigger: MockTreeItemOpenTrigger,
-  DropIndicator: TreeDropIndicator
-};
-var TREEGRID_ROW_NAME = "TreegridRow";
-var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context6.createContextScope)(TREEGRID_ROW_NAME, []);
-var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
-var PATH_SEPARATOR = "~";
-var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
-  const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
-    axis: "vertical",
-    tabbable: false,
-    circular: true
-  });
-  return /* @__PURE__ */ import_react36.default.createElement(Root5, {
-    role: "treegrid",
-    ...arrowNavigationAttrs,
+  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Label, {
     ...props,
-    className: tx("treegrid.root", "treegrid", {}, classNames),
-    style: {
-      ...style,
-      gridTemplateColumns
-    },
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
-  }, children);
+  });
 });
-var TreegridRow = /* @__PURE__ */ (0, import_react36.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
-  const pathParts = id.split(PATH_SEPARATOR);
-  const level = pathParts.length - 1;
-  const [open, onOpenChange] = (0, import_react_use_controllable_state3.useControllableState)({
-    prop: propsOpen,
-    onChange: propsOnOpenChange,
-    defaultProp: defaultOpen
+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
+};
+var DROPDOWN_MENU_NAME = "DropdownMenu";
+var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context7.createContextScope)(DROPDOWN_MENU_NAME, [
+  import_react_menu.createMenuScope
+]);
+var useMenuScope = (0, import_react_menu.createMenuScope)();
+var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
+var DropdownMenuRoot = (props) => {
+  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = (0, import_react38.useRef)(null);
+  const [open = false, setOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ import_react38.default.createElement(DropdownMenuProvider, {
+    scope: __scopeDropdownMenu,
+    triggerId: (0, import_react_id.useId)(),
+    triggerRef,
+    contentId: (0, import_react_id.useId)(),
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle: (0, import_react38.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
+      setOpen
+    ]),
+    modal
+  }, /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Root, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen,
+    dir,
+    modal
+  }, children));
+};
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
+var TRIGGER_NAME = "DropdownMenuTrigger";
+var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
+    asChild: true,
+    ...menuScope
+  }, /* @__PURE__ */ import_react38.default.createElement(import_react_primitive9.Primitive.button, {
+    type: "button",
+    id: context.triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": context.open,
+    "aria-controls": context.open ? context.contentId : void 0,
+    "data-state": context.open ? "open" : "closed",
+    "data-disabled": disabled ? "" : void 0,
+    disabled,
+    ...triggerProps,
+    ref: (0, import_react_compose_refs.composeRefs)(forwardedRef, context.triggerRef),
+    onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
+      if (!disabled && event.button === 0 && event.ctrlKey === false) {
+        context.onOpenToggle();
+        if (!context.open) {
+          event.preventDefault();
+        }
+      }
+    }),
+    onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
+      if (disabled) {
+        return;
+      }
+      if ([
+        "Enter",
+        " "
+      ].includes(event.key)) {
+        context.onOpenToggle();
+      }
+      if (event.key === "ArrowDown") {
+        context.onOpenChange(true);
+      }
+      if ([
+        "Enter",
+        " ",
+        "ArrowDown"
+      ].includes(event.key)) {
+        event.preventDefault();
+      }
+    })
+  }));
+});
+DropdownMenuTrigger.displayName = TRIGGER_NAME;
+var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
+var DropdownMenuVirtualTrigger = (props) => {
+  const { __scopeDropdownMenu, virtualRef } = props;
+  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  (0, import_react38.useEffect)(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
   });
-  const focusableGroupAttrs = (0, import_react_tabster.useFocusableGroup)({
-    tabBehavior: "limited"
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
+    ...menuScope,
+    virtualRef
   });
-  const arrowGroupAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
-    axis: "horizontal",
-    tabbable: false,
-    circular: false,
-    memorizeCurrent: false
+};
+DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
+var PORTAL_NAME = "DropdownMenuPortal";
+var DropdownMenuPortal = (props) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Portal, {
+    ...menuScope,
+    ...portalProps
   });
-  return /* @__PURE__ */ import_react36.default.createElement(TreegridRowProvider, {
-    open,
-    onOpenChange,
-    scope: __treegridRowScope
-  }, /* @__PURE__ */ import_react36.default.createElement(Root5, {
-    role: "row",
-    "aria-level": level,
-    className: tx("treegrid.row", "treegrid__row", {
-      level
-    }, classNames),
-    ...parentOf && {
-      "aria-expanded": open,
-      "aria-owns": parentOf
-    },
-    tabIndex: 0,
-    ...focusableGroupAttrs,
-    ...props,
-    id,
-    ref: forwardedRef
-  }, /* @__PURE__ */ import_react36.default.createElement("div", {
-    role: "none",
-    className: "contents",
-    ...arrowGroupAttrs
-  }, children)));
-});
-var TreegridCell = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
+};
+DropdownMenuPortal.displayName = PORTAL_NAME;
+var DropdownMenuViewport = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react36.default.createElement("div", {
-    role: "gridcell",
-    className: tx("treegrid.cell", "treegrid__cell", {
-      indent
-    }, classNames),
+  const Root5 = asChild ? import_react_slot10.Slot : import_react_primitive9.Primitive.div;
+  return /* @__PURE__ */ import_react38.default.createElement(Root5, {
     ...props,
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var Treegrid = {
-  Root: TreegridRoot,
-  Row: TreegridRow,
-  Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext
-};
-var MotionState;
-(function(MotionState2) {
-  MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
-  MotionState2[MotionState2["DEBOUNCING"] = 1] = "DEBOUNCING";
-  MotionState2[MotionState2["FOLLOWING"] = 2] = "FOLLOWING";
-})(MotionState || (MotionState = {}));
-var useSwipeToDismiss = (ref, {
-  onDismiss,
-  dismissThreshold = 64,
-  debounceThreshold = 8,
-  offset = 0
-  /* side = 'inline-start' */
-}) => {
-  const $root = ref.current;
-  const [motionState, setMotionState] = (0, import_react38.useState)(0);
-  const [gestureStartX, setGestureStartX] = (0, import_react38.useState)(0);
-  const setIdle = (0, import_react38.useCallback)(() => {
-    setMotionState(0);
-    $root?.style.removeProperty("inset-inline-start");
-    $root?.style.setProperty("transition-duration", "200ms");
-  }, [
-    $root
-  ]);
-  const setFollowing = (0, import_react38.useCallback)(() => {
-    setMotionState(2);
-    $root?.style.setProperty("transition-duration", "0ms");
-  }, [
-    $root
-  ]);
-  const handlePointerDown = (0, import_react38.useCallback)(({ screenX }) => {
-    if (motionState === 0) {
-      setMotionState(1);
-      setGestureStartX(screenX);
-    }
-  }, [
-    motionState
-  ]);
-  const handlePointerMove = (0, import_react38.useCallback)(({ screenX }) => {
-    if ($root) {
-      const delta = Math.min(screenX - gestureStartX, 0);
-      switch (motionState) {
-        case 2:
-          if (Math.abs(delta) > dismissThreshold) {
-            setIdle();
-            onDismiss?.();
-          } else {
-            $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
-          }
-          break;
-        case 1:
-          if (Math.abs(delta) > debounceThreshold) {
-            setFollowing();
-          }
-          break;
+var CONTENT_NAME = "DropdownMenuContent";
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((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 = (0, import_react38.useRef)(false);
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Content, {
+    id: context.contentId,
+    "aria-labelledby": context.triggerId,
+    ...menuScope,
+    ...contentProps,
+    collisionPadding: safeCollisionPadding,
+    ref: forwardedRef,
+    onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+      if (!hasInteractedOutsideRef.current) {
+        context.triggerRef.current?.focus();
       }
-    }
-  }, [
-    $root,
-    motionState,
-    gestureStartX
-  ]);
-  const handlePointerUp = (0, import_react38.useCallback)(() => {
-    setIdle();
-  }, [
-    setIdle
-  ]);
-  (0, import_react38.useEffect)(() => {
-    $root?.addEventListener("pointerdown", handlePointerDown);
-    return () => {
-      $root?.removeEventListener("pointerdown", handlePointerDown);
-    };
-  }, [
-    $root,
-    handlePointerDown
-  ]);
-  (0, import_react38.useEffect)(() => {
-    $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
-    return () => {
-      document.documentElement.removeEventListener("pointermove", handlePointerMove);
-    };
-  }, [
-    $root,
-    handlePointerMove
-  ]);
-  (0, import_react38.useEffect)(() => {
-    $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
-    return () => {
-      document.documentElement.removeEventListener("pointerup", handlePointerUp);
-    };
-  }, [
-    $root,
-    handlePointerUp
-  ]);
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
-var MAIN_ROOT_NAME = "MainRoot";
-var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
-var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
-var MAIN_NAME = "Main";
-var GENERIC_CONSUMER_NAME = "GenericConsumer";
-var landmarkAttr = "data-main-landmark";
-var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = (0, import_react37.useCallback)((event) => {
-    const target = event.target;
-    if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
+      hasInteractedOutsideRef.current = false;
       event.preventDefault();
-      const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
-      const l = landmarks.length;
-      const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
-      const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
-      document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
-    }
-    propsOnKeyDown?.(event);
-  }, [
-    propsOnKeyDown
-  ]);
-  const focusableGroupAttrs = window ? {} : {
-    tabBehavior: "limited",
-    ignoreDefaultKeydown: {
-      Tab: true
+    }),
+    onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, (event) => {
+      const originalEvent = event.detail.originalEvent;
+      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+      if (!context.modal || isRightClick) {
+        hasInteractedOutsideRef.current = true;
+      }
+    }),
+    className: tx("menu.content", "menu", {
+      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)"
+      }
     }
-  };
-  return {
-    onKeyDown: handleKeyDown,
-    [landmarkAttr]: landmark,
-    tabIndex: 0,
-    ...focusableGroupAttrs
-  };
-};
-var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
-  resizing: false,
-  navigationSidebarState: "closed",
-  setNavigationSidebarState: (nextState) => {
-    import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
-      F: __dxlog_file,
-      L: 82,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  },
-  complementarySidebarState: "closed",
-  setComplementarySidebarState: (nextState) => {
-    import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
-      F: __dxlog_file,
-      L: 87,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
-});
-var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
-  return {
-    navigationSidebarState,
-    setNavigationSidebarState,
-    toggleNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
-      navigationSidebarState,
-      setNavigationSidebarState
-    ]),
-    openNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("closed"), []),
-    complementarySidebarState,
-    setComplementarySidebarState,
-    toggleComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
-      complementarySidebarState,
-      setComplementarySidebarState
-    ]),
-    openComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("closed"), [])
-  };
-};
-var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
-  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
-    ssr: false
   });
-  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsNavigationSidebarState,
-    defaultProp: defaultNavigationSidebarState,
-    onChange: onNavigationSidebarStateChange
+});
+DropdownMenuContent.displayName = CONTENT_NAME;
+var GROUP_NAME = "DropdownMenuGroup";
+var DropdownMenuGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...groupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Group, {
+    ...menuScope,
+    ...groupProps,
+    ref: forwardedRef
   });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsComplementarySidebarState,
-    defaultProp: defaultComplementarySidebarState,
-    onChange: onComplementarySidebarStateChange
+});
+DropdownMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "DropdownMenuLabel";
+var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Label, {
+    ...menuScope,
+    ...labelProps,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    ref: forwardedRef
   });
-  const [resizing, setResizing] = (0, import_react37.useState)(false);
-  const resizeInterval = (0, import_react37.useRef)(null);
-  const handleResize = (0, import_react37.useCallback)(() => {
-    setResizing(true);
-    if (resizeInterval.current) {
-      clearTimeout(resizeInterval.current);
-    }
-    resizeInterval.current = setTimeout(() => {
-      setResizing(false);
-      resizeInterval.current = null;
-    }, resizeDebounce);
-  }, []);
-  (0, import_react37.useEffect)(() => {
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [
-    handleResize
-  ]);
-  return /* @__PURE__ */ import_react37.default.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__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
-    ssr: false
+});
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "DropdownMenuItem";
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react38.default.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__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  const { t } = useTranslation();
-  const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
-  const noopRef = (0, import_react37.useRef)(null);
-  useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => onStateChange?.("closed")
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.CheckboxItem, {
+    ...menuScope,
+    ...checkboxItemProps,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
   });
-  const handleKeyDown = (0, import_react37.useCallback)((event) => {
-    if (event.key === "Escape") {
-      event.target.closest("[data-tabster]")?.focus();
-    }
-    props.onKeyDown?.(event);
-  }, [
-    props.onKeyDown
-  ]);
-  const Root5 = isLg ? import_react_primitive9.Primitive.div : import_react_dialog2.DialogContent;
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_dialog2.Root, {
-    open: state !== "closed",
-    "aria-label": toLocalizedString(label, t),
-    modal: false
-  }, !isLg && /* @__PURE__ */ import_react37.default.createElement(import_react_dialog2.DialogTitle, {
-    className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ import_react37.default.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));
 });
-var MainNavigationSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
-  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
-  const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
-    ...mover,
-    ...props,
-    state: navigationSidebarState,
-    onStateChange: setNavigationSidebarState,
-    resizing,
-    side: "inline-start",
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
+var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioGroupProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioGroup, {
+    ...menuScope,
+    ...radioGroupProps,
     ref: forwardedRef
   });
 });
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
-  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
-  const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
-    ...mover,
-    ...props,
-    state: complementarySidebarState,
-    onStateChange: setComplementarySidebarState,
-    resizing,
-    side: "inline-end",
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...radioItemProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioItem, {
+    ...menuScope,
+    ...radioItemProps,
     ref: forwardedRef
   });
 });
-MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
-  const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
-  const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ import_react37.default.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),
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "DropdownMenuItemIndicator";
+var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.ItemIndicator, {
+    ...menuScope,
+    ...itemIndicatorProps,
     ref: forwardedRef
-  }, children);
+  });
 });
-MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
-    ssr: false
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "DropdownMenuSeparator";
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Separator, {
+    ...menuScope,
+    ...separatorProps,
+    className: tx("menu.separator", "menu__item", {}, classNames),
+    ref: forwardedRef
   });
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
+});
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "DropdownMenuArrow";
+var DropdownMenuArrow = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.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",
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Arrow, {
+    ...menuScope,
+    ...arrowProps,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var Main = {
-  Root: MainRoot,
-  Content: MainContent,
-  Overlay: MainOverlay,
-  NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar
+DropdownMenuArrow.displayName = ARROW_NAME;
+var DropdownMenuSub = (props) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Sub, {
+    ...menuScope,
+    open,
+    onOpenChange: setOpen
+  }, children);
+};
+var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subTriggerProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubTrigger, {
+    ...menuScope,
+    ...subTriggerProps,
+    ref: forwardedRef
+  });
+});
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "DropdownMenuSubContent";
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, ...subContentProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubContent, {
+    ...menuScope,
+    ...subContentProps,
+    ref: forwardedRef,
+    style: {
+      ...props.style,
+      // re-namespace exposed content custom properties
+      ...{
+        "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    }
+  });
+});
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+var DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  VirtualTrigger: DropdownMenuVirtualTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  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;
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = (0, import_react_context8.createContext)(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {