@dxos/react-ui 0.8.4-main.c85a9c8dae → 0.8.4-main.d05673bc65

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

@@ -434,15 +434,16 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef8(({ variant, label, icon, s
 });
 
 // src/components/Card/Card.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import React18, { createContext as createContext3, forwardRef as forwardRef15, useContext as useContext3 } from "react";
-import { mx as mx5 } from "@dxos/ui-theme";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React19, { createContext as createContext3, forwardRef as forwardRef18, useContext as useContext3 } from "react";
+import { composableProps as composableProps7, mx as mx6 } from "@dxos/ui-theme";
 
 // src/primitives/Column/Column.tsx
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import React9, { forwardRef as forwardRef9 } from "react";
+import { composableProps } from "@dxos/ui-theme";
 var COLUMN_ROOT_NAME = "Column.Root";
 var gutterSizes = {
   sm: "var(--dx-gutter-sm)",
@@ -450,12 +451,13 @@ var gutterSizes = {
   lg: "var(--dx-gutter-lg)",
   rail: "var(--dx-rail-item)"
 };
-var Root = /* @__PURE__ */ forwardRef9(({ classNames, className, asChild, role, children, gutter = "md", ...props }, forwardedRef) => {
+var Root = /* @__PURE__ */ forwardRef9(({ children, asChild, role, gutter = "md", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
-  const Component = asChild ? Slot5 : Primitive5.div;
   const gutterSize = gutterSizes[gutter];
-  return /* @__PURE__ */ React9.createElement(Component, {
-    ...props,
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
     role: role ?? "none",
     style: {
       "--gutter": gutterSize,
@@ -467,53 +469,35 @@ var Root = /* @__PURE__ */ forwardRef9(({ classNames, className, asChild, role,
     },
     className: tx("column.root", {
       gutter
-    }, [
-      className,
-      classNames
-    ]),
+    }, className),
     ref: forwardedRef
   }, children);
 });
 Root.displayName = COLUMN_ROOT_NAME;
 var COLUMN_ROW_NAME = "Column.Row";
-var Row = /* @__PURE__ */ forwardRef9(({ classNames, className, asChild, role, children, ...props }, forwardedRef) => {
+var Row = /* @__PURE__ */ forwardRef9(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
-  const Component = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React9.createElement(Component, {
-    ...props,
-    className: tx("column.row", {}, [
-      className,
-      classNames
-    ]),
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
     role: role ?? "none",
+    className: tx("column.row", {}, className),
     ref: forwardedRef
   }, children);
 });
 Row.displayName = COLUMN_ROW_NAME;
 var COLUMN_SEGMENT_NAME = "Column.Segment";
-var Segment = /* @__PURE__ */ forwardRef9(({ classNames, className, asChild, role, children, ...props }, forwardedRef) => {
+var Segment = /* @__PURE__ */ forwardRef9(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot5 : Primitive5.div;
   const { tx } = useThemeContext();
-  const Component = asChild ? Slot5 : Primitive5.div;
-  if (asChild) {
-    return /* @__PURE__ */ React9.createElement(Component, {
-      ...props,
-      role: role ?? "none",
-      className: tx("column.segment", {}, [
-        className,
-        classNames
-      ]),
-      ref: forwardedRef
-    }, children);
-  }
-  return /* @__PURE__ */ React9.createElement(Component, {
-    ...props,
-    className: tx("column.segment", {}, [
-      className,
-      classNames
-    ]),
-    role,
+  return /* @__PURE__ */ React9.createElement(Comp, {
+    ...rest,
+    role: role ?? "none",
+    className: tx("column.segment", {}, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, asChild ? children : /* @__PURE__ */ React9.createElement("div", {
     className: "contents"
   }, children));
 });
@@ -524,97 +508,111 @@ var Column = {
   Segment
 };
 
+// src/primitives/Container/Container.tsx
+import React10, { forwardRef as forwardRef10 } from "react";
+import { composableProps as composableProps2, mx as mx2 } from "@dxos/ui-theme";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+var Container = /* @__PURE__ */ forwardRef10(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps2(props, {
+    role: "none"
+  });
+  const Comp = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React10.createElement(Comp, {
+    ...rest,
+    className: mx2("dx-container", className),
+    ref: forwardedRef
+  }, children);
+});
+
 // src/primitives/Flex/Flex.tsx
-import React10 from "react";
-import { mx as mx2 } from "@dxos/ui-theme";
-var Flex = ({ children, classNames, className, role, column, grow, ...props }) => {
-  return /* @__PURE__ */ React10.createElement("div", {
-    ...props,
+import React11, { forwardRef as forwardRef11 } from "react";
+import { composableProps as composableProps3, mx as mx3 } from "@dxos/ui-theme";
+var Flex = /* @__PURE__ */ forwardRef11(({ children, role, column, grow, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps3(props);
+  return /* @__PURE__ */ React11.createElement("div", {
+    ref: forwardedRef,
+    ...rest,
     role: role ?? "none",
-    className: mx2("flex", column && "flex-col", grow && "flex-1 overflow-hidden", className, classNames)
+    className: mx3("flex", column && "flex-col", grow && "flex-1 overflow-hidden", className)
   }, children);
-};
+});
 
 // src/primitives/Grid/Grid.tsx
-import React11 from "react";
-import { mx as mx3 } from "@dxos/ui-theme";
-var Grid = ({ children, classNames, className, style, role, cols, rows, grow = true, ...props }) => {
-  return /* @__PURE__ */ React11.createElement("div", {
-    ...props,
+import React12, { forwardRef as forwardRef12 } from "react";
+import { composableProps as composableProps4, mx as mx4 } from "@dxos/ui-theme";
+var Grid = /* @__PURE__ */ forwardRef12(({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps4(props);
+  return /* @__PURE__ */ React12.createElement("div", {
+    ref: forwardedRef,
+    ...rest,
     role: role ?? "none",
+    className: mx4("grid overflow-hidden", grow && "dx-container", className),
     style: {
       gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : void 0,
       gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0,
       ...style
-    },
-    className: mx3("grid overflow-hidden", grow && "dx-container", className, classNames)
+    }
   }, children);
-};
+});
 
 // src/primitives/Panel/Panel.tsx
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React12, { forwardRef as forwardRef10 } from "react";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React13, { forwardRef as forwardRef13 } from "react";
+import { composableProps as composableProps5 } from "@dxos/ui-theme";
 var GRID_TEMPLATE_ROWS = "auto 1fr auto";
 var GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
-var Root2 = /* @__PURE__ */ forwardRef10(({ classNames, className, asChild, children, role, ...props }, forwardedRef) => {
+var Root2 = /* @__PURE__ */ forwardRef13(({ children, asChild, role, style, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React12.createElement(Comp, {
-    ref: forwardedRef,
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
     role: role ?? "none",
-    ...props,
     style: {
       gridTemplateRows: GRID_TEMPLATE_ROWS,
       gridTemplateAreas: GRID_TEMPLATE_AREAS,
-      ...props.style
+      ...style
     },
-    className: tx("panel.root", {}, [
-      className,
-      classNames
-    ])
+    className: tx("panel.root", {}, className),
+    ref: forwardedRef
   }, children);
 });
 Root2.displayName = "Panel.Root";
-var Toolbar = /* @__PURE__ */ forwardRef10(({ classNames, className, asChild, children, ...props }, forwardedRef) => {
+var Toolbar = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React12.createElement(Comp, {
-    ref: forwardedRef,
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
     "data-slot": "toolbar",
-    ...props,
-    className: tx("panel.toolbar", {}, [
-      className,
-      classNames
-    ])
+    className: tx("panel.toolbar", {}, className),
+    ref: forwardedRef
   }, children);
 });
 Toolbar.displayName = "Panel.Toolbar";
-var Content = /* @__PURE__ */ forwardRef10(({ classNames, className, asChild, children, ...props }, forwardedRef) => {
+var Content = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React12.createElement(Comp, {
-    ref: forwardedRef,
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
     "data-slot": "content",
-    ...props,
-    className: tx("panel.content", {}, [
-      className,
-      classNames
-    ])
+    className: tx("panel.content", {}, className),
+    ref: forwardedRef
   }, children);
 });
 Content.displayName = "Panel.Content";
-var Statusbar = /* @__PURE__ */ forwardRef10(({ classNames, className, asChild, children, ...props }, forwardedRef) => {
+var Statusbar = /* @__PURE__ */ forwardRef13(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps5(props);
+  const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React12.createElement(Comp, {
-    ref: forwardedRef,
+  return /* @__PURE__ */ React13.createElement(Comp, {
+    ...rest,
     "data-slot": "statusbar",
-    ...props,
-    className: tx("panel.statusbar", {}, [
-      className,
-      classNames
-    ])
+    className: tx("panel.statusbar", {}, className),
+    ref: forwardedRef
   }, children);
 });
 Statusbar.displayName = "Panel.Statusbar";
@@ -626,8 +624,8 @@ var Panel = {
 };
 
 // src/components/Image/Image.tsx
-import React13, { useCallback as useCallback3, useRef, useState as useState3 } from "react";
-import { mx as mx4 } from "@dxos/ui-theme";
+import React14, { useCallback as useCallback3, useRef, useState as useState3 } from "react";
+import { mx as mx5 } from "@dxos/ui-theme";
 var cache = /* @__PURE__ */ new Map();
 var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
   const [crossOriginState, setCrossOriginState] = useState3(crossOrigin);
@@ -667,25 +665,25 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     contrast,
     src
   ]);
-  return /* @__PURE__ */ React13.createElement("div", {
-    className: mx4(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames),
+  return /* @__PURE__ */ React14.createElement("div", {
+    className: mx5(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames),
     style: {
       backgroundColor: dominantColor
     }
-  }, /* @__PURE__ */ React13.createElement("canvas", {
+  }, /* @__PURE__ */ React14.createElement("canvas", {
     ref: canvasRef,
     style: {
       display: "none"
     },
     "aria-hidden": "true"
-  }), /* @__PURE__ */ React13.createElement("div", {
+  }), /* @__PURE__ */ React14.createElement("div", {
     className: "absolute inset-0 pointer-events-none",
     style: {
       background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
       transition: "opacity 0.7s ease-in-out",
       opacity: 0.5
     }
-  }), /* @__PURE__ */ React13.createElement("img", {
+  }), /* @__PURE__ */ React14.createElement("img", {
     src,
     alt,
     crossOrigin: crossOriginState,
@@ -771,11 +769,12 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
 };
 
 // src/components/Toolbar/Toolbar.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot9 } from "@radix-ui/react-slot";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React17, { Fragment, forwardRef as forwardRef14 } from "react";
+import React18, { Fragment, forwardRef as forwardRef17 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
+import { composableProps as composableProps6 } from "@dxos/ui-theme";
 
 // src/translations.ts
 var translationKey = "@dxos/react-ui";
@@ -793,9 +792,9 @@ var translations = [
 
 // src/components/Menu/ContextMenu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React14, { forwardRef as forwardRef11 } from "react";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import React15, { forwardRef as forwardRef14 } from "react";
 
 // src/hooks/useSafeCollisionPadding.ts
 import { useMemo as useMemo2 } from "react";
@@ -821,11 +820,11 @@ var useSafeCollisionPadding = (collisionPadding) => {
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -835,18 +834,18 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, c
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef11(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React14.createElement(Comp, {
+  const Comp = asChild ? Slot8 : Primitive8.div;
+  return /* @__PURE__ */ React15.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", {}, classNames),
     ref: forwardedRef
@@ -854,33 +853,33 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, f
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React15.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", {}, classNames),
     ref: forwardedRef
@@ -908,10 +907,10 @@ import { createContextScope } from "@radix-ui/react-context";
 import { useId as useId2 } from "@radix-ui/react-id";
 import * as MenuPrimitive from "@radix-ui/react-menu";
 import { createMenuScope } from "@radix-ui/react-menu";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React15, { forwardRef as forwardRef12, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
+import React16, { forwardRef as forwardRef15, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -927,7 +926,7 @@ var DropdownMenuRoot = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React15.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ React16.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
     triggerId: useId2(),
     triggerRef,
@@ -938,7 +937,7 @@ var DropdownMenuRoot = (props) => {
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ React15.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ React16.createElement(MenuPrimitive.Root, {
     ...menuScope,
     open,
     onOpenChange: setOpen,
@@ -948,14 +947,14 @@ var DropdownMenuRoot = (props) => {
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React15.createElement(Primitive8.button, {
+  }, /* @__PURE__ */ React16.createElement(Primitive9.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1009,7 +1008,7 @@ var DropdownMenuVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1019,23 +1018,23 @@ var PORTAL_NAME = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot8 : Primitive8.div;
-  return /* @__PURE__ */ React15.createElement(Comp, {
+  const Comp = asChild ? Slot9 : Primitive9.div;
+  return /* @__PURE__ */ React16.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var CONTENT_NAME = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
@@ -1059,7 +1058,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef12((props, forwardedRef) =>
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Content, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
@@ -1101,10 +1100,10 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef12((props, forwardedRef) =>
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1112,11 +1111,11 @@ var DropdownMenuGroup = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", {}, classNames),
@@ -1125,11 +1124,11 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef12((props, forwardedRef)
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1138,11 +1137,11 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", {}, classNames),
@@ -1151,10 +1150,10 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef12((props, forwardedRef
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1162,11 +1161,11 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef12((props, forwardedRef)
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1175,10 +1174,10 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef12((props, forwardedRef) =
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1186,11 +1185,11 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef12((props, forwardedRe
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", {}, classNames),
@@ -1199,11 +1198,11 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef12((props, forwardedRef) =
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", {}, classNames),
@@ -1219,17 +1218,17 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1237,10 +1236,10 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef12((props, forwardedRef)
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef12((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React15.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ React16.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1282,10 +1281,10 @@ var useDropdownMenuMenuScope = useMenuScope;
 
 // src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React16, { forwardRef as forwardRef13 } from "react";
-var Separator3 = /* @__PURE__ */ forwardRef13(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+import React17, { forwardRef as forwardRef16 } from "react";
+var Separator3 = /* @__PURE__ */ forwardRef16(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React17.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", {
@@ -1297,87 +1296,87 @@ var Separator3 = /* @__PURE__ */ forwardRef13(({ classNames, orientation = "hori
 });
 
 // src/components/Toolbar/Toolbar.tsx
-var ToolbarRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props }, forwardedRef) => {
+var ToolbarRoot = /* @__PURE__ */ forwardRef17(({ children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, orientation, ...props }, forwardedRef) => {
+  const { className, dir: _, ...rest } = composableProps6(props);
   const { tx } = useThemeContext();
   const InnerRoot = textBlockWidthProp ? "div" : Fragment;
   const innerRootProps = textBlockWidthProp ? {
     role: "none",
     className: tx("toolbar.inner", {
       layoutManaged
-    }, classNames)
+    }, className)
   } : {};
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Root, {
-    ...props,
-    "data-arrow-keys": props.orientation === "vertical" ? "up down" : "left right",
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Root, {
+    ...rest,
+    orientation,
+    "data-arrow-keys": orientation === "vertical" ? "up down" : "left right",
     className: tx("toolbar.root", {
       density,
       disabled,
       layoutManaged
-    }, classNames),
+    }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React17.createElement(InnerRoot, innerRootProps, children));
+  }, /* @__PURE__ */ React18.createElement(InnerRoot, innerRootProps, children));
 });
-var ToolbarText = /* @__PURE__ */ forwardRef14(({ classNames, className, asChild, children, ...props }, forwardedRef) => {
+var ToolbarText = /* @__PURE__ */ forwardRef17(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps6(props);
+  const Comp = asChild ? Slot10 : Primitive10.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot9 : Primitive9.div;
-  return /* @__PURE__ */ React17.createElement(Comp, {
-    ...props,
-    className: tx("toolbar.text", {}, [
-      className,
-      classNames
-    ]),
+  return /* @__PURE__ */ React18.createElement(Comp, {
+    ...rest,
+    className: tx("toolbar.text", {}, className),
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Button, {
+  }, /* @__PURE__ */ React18.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarIconButton = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Button, {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(IconButton, {
+  }, /* @__PURE__ */ React18.createElement(IconButton, {
     ...props,
     noTooltip: true,
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Button, {
+var ToolbarToggle = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Toggle, {
+  }, /* @__PURE__ */ React18.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Link, {
+  }, /* @__PURE__ */ React18.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef14(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef17(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React18.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef14(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef17(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Button, {
+  }, /* @__PURE__ */ React18.createElement(Button, {
     variant,
     density,
     elevation,
@@ -1386,11 +1385,11 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef14(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef14(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef17(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(IconButton, {
+  }, /* @__PURE__ */ React18.createElement(IconButton, {
     variant,
     density,
     elevation,
@@ -1401,20 +1400,20 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef14(({ variant, densit
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = /* @__PURE__ */ forwardRef14(({ variant = "gap", ...props }, forwardedRef) => {
-  return variant === "line" ? /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Separator, {
+var ToolbarSeparator = /* @__PURE__ */ forwardRef17(({ variant = "gap", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Separator3, {
+  }, /* @__PURE__ */ React18.createElement(Separator3, {
     ...props,
     ref: forwardedRef
-  })) : /* @__PURE__ */ React17.createElement(ToolbarPrimitive.Separator, {
+  })) : /* @__PURE__ */ React18.createElement(ToolbarPrimitive.Separator, {
     className: "grow",
     ref: forwardedRef
   });
 });
-var ToolbarDragHandle = /* @__PURE__ */ forwardRef14(({ testId = "drag-handle", label }, forwardedRef) => {
+var ToolbarDragHandle = /* @__PURE__ */ forwardRef17(({ testId = "drag-handle", label }, forwardedRef) => {
   const { t } = useTranslation2(translationKey);
-  return /* @__PURE__ */ React17.createElement(ToolbarIconButton, {
+  return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     "data-testid": testId,
     noTooltip: true,
     iconOnly: true,
@@ -1427,9 +1426,9 @@ var ToolbarDragHandle = /* @__PURE__ */ forwardRef14(({ testId = "drag-handle",
     ref: forwardedRef
   });
 });
-var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef14(({ onClick, label }, forwardedRef) => {
+var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef17(({ onClick, label }, forwardedRef) => {
   const { t } = useTranslation2(translationKey);
-  return /* @__PURE__ */ React17.createElement(ToolbarIconButton, {
+  return /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     iconOnly: true,
     icon: "ph--x--regular",
     variant: "ghost",
@@ -1442,18 +1441,18 @@ var ToolbarCloseIconButton = /* @__PURE__ */ forwardRef14(({ onClick, label }, f
 });
 var ToolbarMenu = ({ context, items }) => {
   const { t } = useTranslation2(translationKey);
-  return /* @__PURE__ */ React17.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React17.createElement(DropdownMenu.Trigger, {
+  return /* @__PURE__ */ React18.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Trigger, {
     disabled: !items?.length,
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(ToolbarIconButton, {
+  }, /* @__PURE__ */ React18.createElement(ToolbarIconButton, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     label: t("toolbar menu label")
-  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React17.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React17.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React17.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React17.createElement(DropdownMenu.Item, {
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React18.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React18.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React18.createElement(DropdownMenu.Item, {
     key: index,
     onSelect: () => onSelect(context)
-  }, label))), /* @__PURE__ */ React17.createElement(DropdownMenu.Arrow, null))));
+  }, label))), /* @__PURE__ */ React18.createElement(DropdownMenu.Arrow, null))));
 };
 var Toolbar2 = {
   Root: ToolbarRoot,
@@ -1473,11 +1472,12 @@ var Toolbar2 = {
 
 // src/components/Card/Card.tsx
 var CardContext = /* @__PURE__ */ createContext3({});
-var CardRoot = /* @__PURE__ */ forwardRef15(({ children, classNames, className, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
+var CardRoot = /* @__PURE__ */ forwardRef18(({ children, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React18.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
     ...id && {
       "data-object-id": id
     },
@@ -1485,18 +1485,15 @@ var CardRoot = /* @__PURE__ */ forwardRef15(({ children, classNames, className,
     className: tx("card.root", {
       border,
       fullWidth
-    }, [
-      className,
-      classNames
-    ]),
+    }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(Column.Root, {
+  }, /* @__PURE__ */ React19.createElement(Column.Root, {
     gutter: "rail"
   }, children));
 });
-var CardToolbar = /* @__PURE__ */ forwardRef15(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
+var CardToolbar = /* @__PURE__ */ forwardRef18(({ children, classNames, density = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(Toolbar2.Root, {
+  return /* @__PURE__ */ React19.createElement(Toolbar2.Root, {
     ...props,
     classNames: [
       tx("card.toolbar", {
@@ -1513,85 +1510,78 @@ var CardMenu = ({ context, items }) => {
     ...items ?? [],
     ...menuItems ?? []
   ];
-  return /* @__PURE__ */ React18.createElement(Toolbar2.Menu, {
+  return /* @__PURE__ */ React19.createElement(Toolbar2.Menu, {
     context,
     items: combinedItems
   });
 };
-var CardTitle = /* @__PURE__ */ forwardRef15(({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
+var CardTitle = /* @__PURE__ */ forwardRef18(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React18.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
     role: role ?? "heading",
-    className: tx("card.title", {}, [
-      className,
-      classNames
-    ]),
+    className: tx("card.title", {}, className),
     ref: forwardedRef
   }, children);
 });
-var CardContent = /* @__PURE__ */ forwardRef15(({ children, role, ...props }, forwardedRef) => {
+var CardContent = /* @__PURE__ */ forwardRef18(({ children, role, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     ...props,
     role: role ?? "none",
     className: tx("card.content", {}),
     ref: forwardedRef
   }, children);
 });
-var CardRow = /* @__PURE__ */ forwardRef15(({ children, classNames, className, role, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React18.createElement(Column.Row, {
-    ...props,
+var CardRow = /* @__PURE__ */ forwardRef18(({ children, role, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  return /* @__PURE__ */ React19.createElement(Column.Row, {
+    ...rest,
     role: role ?? "none",
-    classNames: [
-      classNames,
-      className
-    ],
+    classNames: className,
     ref: forwardedRef
-  }, icon && /* @__PURE__ */ React18.createElement(CardIcon, {
+  }, icon && /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "text-subdued",
     icon
-  }) || /* @__PURE__ */ React18.createElement("div", null), children, /* @__PURE__ */ React18.createElement("div", null));
+  }) || /* @__PURE__ */ React19.createElement("div", null), children, /* @__PURE__ */ React19.createElement("div", null));
 });
-var CardSection = /* @__PURE__ */ forwardRef15(({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React18.createElement(Comp, {
-    ...props,
+var CardSection = /* @__PURE__ */ forwardRef18(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
     role: role ?? "none",
-    className: mx5(classNames, className, "col-span-full"),
+    className: mx6("col-span-full", className),
     ref: forwardedRef
   }, children);
 });
-var CardHeading = /* @__PURE__ */ forwardRef15(({ children, classNames, className, asChild, role, variant = "default", ...props }, forwardedRef) => {
+var CardHeading = /* @__PURE__ */ forwardRef18(({ children, asChild, role, variant = "default", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React18.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
     role: role ?? "heading",
     className: tx("card.heading", {
       variant
-    }, [
-      classNames,
-      className
-    ]),
+    }, className),
     ref: forwardedRef
   }, children);
 });
-var CardText = /* @__PURE__ */ forwardRef15(({ children, classNames, className, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
+var CardText = /* @__PURE__ */ forwardRef18(({ children, asChild, role, truncate, variant = "default", ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps7(props);
+  const Comp = asChild ? Slot11 : Primitive11.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React18.createElement(Comp, {
-    ...props,
+  return /* @__PURE__ */ React19.createElement(Comp, {
+    ...rest,
     role: role ?? "none",
     className: tx("card.text", {
       variant
-    }, [
-      classNames,
-      className
-    ]),
+    }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement("span", {
+  }, /* @__PURE__ */ React19.createElement("span", {
     className: tx("card.text-span", {
       variant,
       truncate
@@ -1602,10 +1592,10 @@ var CardPoster = (props) => {
   const { tx } = useThemeContext();
   const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
   if (props.image) {
-    return /* @__PURE__ */ React18.createElement("div", {
+    return /* @__PURE__ */ React19.createElement("div", {
       role: "none",
       className: "col-span-full mb-1"
-    }, /* @__PURE__ */ React18.createElement(Image, {
+    }, /* @__PURE__ */ React19.createElement(Image, {
       classNames: [
         tx("card.poster", {}),
         aspect,
@@ -1616,14 +1606,14 @@ var CardPoster = (props) => {
     }));
   }
   if (props.icon) {
-    return /* @__PURE__ */ React18.createElement("div", {
+    return /* @__PURE__ */ React19.createElement("div", {
       role: "image",
       className: tx("card.poster-icon", {}, [
         aspect,
         props.classNames
       ]),
       "aria-label": props.alt
-    }, /* @__PURE__ */ React18.createElement(Icon, {
+    }, /* @__PURE__ */ React19.createElement(Icon, {
       icon: props.icon,
       size: 10
     }));
@@ -1631,46 +1621,46 @@ var CardPoster = (props) => {
 };
 var CardAction = ({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(Button, {
+  return /* @__PURE__ */ React19.createElement(Button, {
     variant: "ghost",
     classNames: tx("card.action", {}),
     onClick
-  }, icon ? /* @__PURE__ */ React18.createElement(CardIcon, {
+  }, icon ? /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "text-subdued",
     icon
-  }) : /* @__PURE__ */ React18.createElement("div", null), /* @__PURE__ */ React18.createElement("span", {
+  }) : /* @__PURE__ */ React19.createElement("div", null), /* @__PURE__ */ React19.createElement("span", {
     className: tx("card.action-label", {}, !actionIcon ? "col-span-2" : void 0)
-  }, label), actionIcon && /* @__PURE__ */ React18.createElement(CardIcon, {
+  }, label), actionIcon && /* @__PURE__ */ React19.createElement(CardIcon, {
     icon: actionIcon
   }));
 };
 var CardLink = ({ label, href }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement("a", {
+  return /* @__PURE__ */ React19.createElement("a", {
     className: tx("card.link", {}),
     "data-variant": "ghost",
     href,
     target: "_blank",
     rel: "noreferrer"
-  }, /* @__PURE__ */ React18.createElement(CardIcon, {
+  }, /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "text-subdued",
     icon: "ph--link--regular"
-  }), /* @__PURE__ */ React18.createElement("span", {
+  }), /* @__PURE__ */ React19.createElement("span", {
     className: tx("card.link-label", {})
-  }, label), /* @__PURE__ */ React18.createElement(CardIcon, {
+  }, label), /* @__PURE__ */ React19.createElement(CardIcon, {
     classNames: "invisible group-hover:visible",
     icon: "ph--arrow-square-out--regular"
   }));
 };
 var CardIcon = ({ toolbar, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(CardIconBlock, null, /* @__PURE__ */ React18.createElement(Icon, {
+  return /* @__PURE__ */ React19.createElement(CardIconBlock, null, /* @__PURE__ */ React19.createElement(Icon, {
     ...props,
     size: toolbar ? 5 : 4
   }));
 };
 var CardIconBlock = ({ classNames, children, role, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     ...props,
     role: role ?? "none",
     className: tx("card.icon-block", {}, classNames)
@@ -1682,7 +1672,7 @@ var Card = {
   Toolbar: CardToolbar,
   ToolbarIconButton: Toolbar2.IconButton,
   ToolbarSeparator: Toolbar2.Separator,
-  DragHandle: /* @__PURE__ */ forwardRef15((props, ref) => /* @__PURE__ */ React18.createElement(Toolbar2.DragHandle, {
+  DragHandle: /* @__PURE__ */ forwardRef18((props, ref) => /* @__PURE__ */ React19.createElement(Toolbar2.DragHandle, {
     testId: "card-drag-handle",
     ...props,
     ref
@@ -1704,7 +1694,7 @@ var Card = {
 };
 
 // src/components/Clipboard/ClipboardProvider.tsx
-import React19, { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState4 } from "react";
+import React20, { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useState as useState4 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -1717,7 +1707,7 @@ var ClipboardProvider = ({ children }) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React19.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React20.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -1726,14 +1716,14 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // src/components/Clipboard/CopyButton.tsx
-import React20 from "react";
-import { mx as mx6, osTranslations } from "@dxos/ui-theme";
+import React21 from "react";
+import { mx as mx7, osTranslations } from "@dxos/ui-theme";
 var inactiveLabelStyles = "invisible h-px -mb-px overflow-hidden";
 var CopyButton = ({ classNames, value, size = 5, ...props }) => {
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ React20.createElement(Button, {
+  return /* @__PURE__ */ React21.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -1741,20 +1731,20 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React20.createElement("div", {
+  }, /* @__PURE__ */ React21.createElement("div", {
     role: "none",
-    className: mx6("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React20.createElement("span", {
+    className: mx7("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React21.createElement("span", {
     className: "px-1"
-  }, t("copy label")), /* @__PURE__ */ React20.createElement(Icon, {
+  }, t("copy label")), /* @__PURE__ */ React21.createElement(Icon, {
     icon: "ph--copy--regular",
     size
-  })), /* @__PURE__ */ React20.createElement("div", {
+  })), /* @__PURE__ */ React21.createElement("div", {
     role: "none",
-    className: mx6("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React20.createElement("span", {
+    className: mx7("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React21.createElement("span", {
     className: "px-1"
-  }, t("copy success label")), /* @__PURE__ */ React20.createElement(Icon, {
+  }, t("copy success label")), /* @__PURE__ */ React21.createElement(Icon, {
     icon: "ph--check--regular",
     size
   })));
@@ -1765,7 +1755,7 @@ var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ..
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
   const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
-  return /* @__PURE__ */ React20.createElement(IconButton, {
+  return /* @__PURE__ */ React21.createElement(IconButton, {
     iconOnly: true,
     label,
     icon: "ph--copy--regular",
@@ -1790,33 +1780,33 @@ var Clipboard = {
 // src/components/Dialog/Dialog.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
 import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogDescription as DialogDescriptionPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, Root as DialogRootPrimitive, DialogTitle as DialogTitlePrimitive, DialogTrigger as DialogTriggerPrimitive } from "@radix-ui/react-dialog";
-import React21, { forwardRef as forwardRef16 } from "react";
+import React22, { forwardRef as forwardRef19 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
-var DialogRoot = (props) => /* @__PURE__ */ React21.createElement(ElevationProvider, {
+var DialogRoot = (props) => /* @__PURE__ */ React22.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React21.createElement(DialogRootPrimitive, props));
+}, /* @__PURE__ */ React22.createElement(DialogRootPrimitive, props));
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {});
-var DialogOverlay = /* @__PURE__ */ forwardRef16(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef19(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogOverlayPrimitive, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React21.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React22.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 var DIALOG_CONTENT_NAME = "DialogContent";
-var DialogContent = /* @__PURE__ */ forwardRef16(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef19(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React21.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogContentPrimitive, {
     ...props,
     // NOTE: Radix warning unless set to undefined.
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
@@ -1826,14 +1816,14 @@ var DialogContent = /* @__PURE__ */ forwardRef16(({ classNames, children, size =
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React21.createElement(Column.Root, null, children));
+  }, /* @__PURE__ */ React22.createElement(Column.Root, null, children));
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
-var DialogHeader = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogHeader = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Column.Segment, {
+  return /* @__PURE__ */ React22.createElement(Column.Segment, {
     asChild: true
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React22.createElement("div", {
     role: "heading",
     ...props,
     className: tx("dialog.header", {
@@ -1844,9 +1834,9 @@ var DialogHeader = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...props
     ref: forwardedRef
   }));
 });
-var DialogCloseIconButton = /* @__PURE__ */ forwardRef16(({ label, ...props }, forwardedRef) => {
+var DialogCloseIconButton = /* @__PURE__ */ forwardRef19(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation3(osTranslations2);
-  return /* @__PURE__ */ React21.createElement(IconButton, {
+  return /* @__PURE__ */ React22.createElement(IconButton, {
     ...props,
     label: label ?? t("close dialog label"),
     icon: "ph--x--regular",
@@ -1857,20 +1847,20 @@ var DialogCloseIconButton = /* @__PURE__ */ forwardRef16(({ label, ...props }, f
     ref: forwardedRef
   });
 });
-var DialogBody = /* @__PURE__ */ forwardRef16(({ children, ...props }, forwardedRef) => {
+var DialogBody = /* @__PURE__ */ forwardRef19(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Column.Segment, {
+  return /* @__PURE__ */ React22.createElement(Column.Segment, {
     asChild: true
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React22.createElement("div", {
     role: "none",
     ...props,
     className: tx("dialog.body"),
     ref: forwardedRef
   }, children));
 });
-var DialogTitle = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -1878,9 +1868,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef19(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -1888,11 +1878,11 @@ var DialogDescription = /* @__PURE__ */ forwardRef16(({ classNames, srOnly, ...p
     ref: forwardedRef
   });
 });
-var DialogActionBar = /* @__PURE__ */ forwardRef16(({ children, classNames, ...props }, forwardedRef) => {
+var DialogActionBar = /* @__PURE__ */ forwardRef19(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Column.Segment, {
+  return /* @__PURE__ */ React22.createElement(Column.Segment, {
     asChild: true
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React22.createElement("div", {
     ...props,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
@@ -1917,17 +1907,17 @@ var Dialog = {
 // src/components/Dialog/AlertDialog.tsx
 import { AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, Root as AlertDialogRootPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive } from "@radix-ui/react-alert-dialog";
 import { createContext as createContext6 } from "@radix-ui/react-context";
-import React22, { forwardRef as forwardRef17 } from "react";
-var AlertDialogRoot = (props) => /* @__PURE__ */ React22.createElement(ElevationProvider, {
+import React23, { forwardRef as forwardRef20 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React23.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React22.createElement(AlertDialogRootPrimitive, props));
+}, /* @__PURE__ */ React23.createElement(AlertDialogRootPrimitive, props));
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef17(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -1935,9 +1925,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef17(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef17(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -1952,9 +1942,9 @@ var ALERT_DIALOG_ACTIONBAR_NAME = "AlertDialogActionBar";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef17(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef20(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogOverlayPrimitive, {
     ...props,
     "data-block-align": blockAlign,
     className: tx(
@@ -1967,29 +1957,29 @@ var AlertDialogOverlay = /* @__PURE__ */ forwardRef17(({ classNames, children, b
       "data-[h-align=center]:place-content-center"
     ),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React23.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef17(({ classNames, children, size = "md", ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size = "md", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React22.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React23.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", {
       inOverlayLayout,
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(Column.Root, null, children));
+  }, /* @__PURE__ */ React23.createElement(Column.Root, null, children));
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
-var AlertDialogBody = /* @__PURE__ */ forwardRef17(({ children, ...props }, forwardedRef) => {
+var AlertDialogBody = /* @__PURE__ */ forwardRef20(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(Column.Segment, {
+  return /* @__PURE__ */ React23.createElement(Column.Segment, {
     asChild: true
-  }, /* @__PURE__ */ React22.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     ...props,
     className: tx("dialog.body"),
@@ -1997,11 +1987,11 @@ var AlertDialogBody = /* @__PURE__ */ forwardRef17(({ children, ...props }, forw
   }, children));
 });
 AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
-var AlertDialogActionBar = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
+var AlertDialogActionBar = /* @__PURE__ */ forwardRef20(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(Column.Segment, {
+  return /* @__PURE__ */ React23.createElement(Column.Segment, {
     asChild: true
-  }, /* @__PURE__ */ React22.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     ...props,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
@@ -2026,38 +2016,38 @@ var AlertDialog = {
 import { ErrorBoundary } from "@dxos/react-error-boundary";
 
 // src/components/ErrorFallback/ErrorFallback.tsx
-import React24 from "react";
+import React25 from "react";
 import { safeStringify } from "@dxos/util";
 
 // src/components/ErrorFallback/ErrorStack.tsx
 import ErrorStackParser from "error-stack-parser";
-import React23 from "react";
-import { mx as mx7 } from "@dxos/ui-theme";
+import React24 from "react";
+import { mx as mx8 } from "@dxos/ui-theme";
 var ErrorStack = ({ error }) => {
   const frames = ErrorStackParser.parse(error);
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: "font-mono text-sm"
   }, frames.map((frame, i) => {
     const isLast = i === frames.length - 1;
     const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
     const name = frame.functionName ?? "<anonymous>";
-    return /* @__PURE__ */ React23.createElement("div", {
+    return /* @__PURE__ */ React24.createElement("div", {
       key: i,
-      className: mx7("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface")
-    }, /* @__PURE__ */ React23.createElement("div", {
+      className: mx8("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface")
+    }, /* @__PURE__ */ React24.createElement("div", {
       className: "relative"
-    }, /* @__PURE__ */ React23.createElement("div", {
-      className: mx7("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0")
-    }), /* @__PURE__ */ React23.createElement("div", {
+    }, /* @__PURE__ */ React24.createElement("div", {
+      className: mx8("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0")
+    }), /* @__PURE__ */ React24.createElement("div", {
       className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500"
-    })), local ? /* @__PURE__ */ React23.createElement("a", {
+    })), local ? /* @__PURE__ */ React24.createElement("a", {
       href: local.href,
       className: "truncate self-center"
-    }, name) : /* @__PURE__ */ React23.createElement("span", {
+    }, name) : /* @__PURE__ */ React24.createElement("span", {
       className: "text-subdued truncate self-center"
-    }, name), /* @__PURE__ */ React23.createElement("span", {
+    }, name), /* @__PURE__ */ React24.createElement("span", {
       className: "text-xs text-subdued truncate self-center"
-    }, local?.fileName ?? ""), /* @__PURE__ */ React23.createElement("span", {
+    }, local?.fileName ?? ""), /* @__PURE__ */ React24.createElement("span", {
       className: "text-xs text-subdued text-right self-center"
     }, local ? `${frame.lineNumber}:${frame.columnNumber}` : ""));
   }));
@@ -2082,38 +2072,38 @@ var parseLocalFrame = (fileUrl, line, col) => {
 var ErrorFallback = ({ children, error, title, data }) => {
   const isDev = process.env.NODE_ENV === "development";
   const message = error instanceof Error ? error.message : String(error);
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React25.createElement("div", {
     role: "alert",
     "data-testid": "error-boundary-fallback",
     className: "flex flex-col p-4 gap-4 overflow-auto"
-  }, /* @__PURE__ */ React24.createElement("h1", {
+  }, /* @__PURE__ */ React25.createElement("h1", {
     className: "text-lg text-info-text"
-  }, title ?? "Runtime Error"), /* @__PURE__ */ React24.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React24.createElement(Section, {
+  }, title ?? "Runtime Error"), /* @__PURE__ */ React25.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React25.createElement(Section, {
     title: "Stack",
     onClick: () => {
       const text = error instanceof Error ? error.stack ?? error.message : String(error);
       void navigator.clipboard.writeText(text);
     }
-  }, /* @__PURE__ */ React24.createElement(ErrorStack, {
+  }, /* @__PURE__ */ React25.createElement(ErrorStack, {
     error
-  })), data && /* @__PURE__ */ React24.createElement(Section, {
+  })), data && /* @__PURE__ */ React25.createElement(Section, {
     title: "Data",
     onClick: () => {
       void navigator.clipboard.writeText(JSON.stringify(data, void 0, 2));
     }
-  }, /* @__PURE__ */ React24.createElement("pre", {
+  }, /* @__PURE__ */ React25.createElement("pre", {
     className: "overflow-x-auto text-xs"
   }, safeStringify(data, void 0, 2))), children);
 };
 var Section = ({ children, title, onClick }) => {
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React25.createElement("div", {
     className: "flex flex-col gap-1"
-  }, onClick && /* @__PURE__ */ React24.createElement("button", {
+  }, onClick && /* @__PURE__ */ React25.createElement("button", {
     type: "button",
     onClick,
     className: "flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors",
     title: `Copy ${title}`
-  }, /* @__PURE__ */ React24.createElement("h2", {
+  }, /* @__PURE__ */ React25.createElement("h2", {
     className: "text-xs uppercase text-subdued"
   }, title)), children);
 };
@@ -2149,12 +2139,12 @@ var generator = ({ error, delay }) => {
 // src/components/Input/Input.tsx
 import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React25, { forwardRef as forwardRef18 } from "react";
+import React26, { forwardRef as forwardRef21 } from "react";
 import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext } from "@dxos/react-input";
-import { mx as mx8 } from "@dxos/ui-theme";
-var Label3 = /* @__PURE__ */ forwardRef18(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+import { mx as mx9 } from "@dxos/ui-theme";
+var Label3 = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React26.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", {
       srOnly
@@ -2162,9 +2152,9 @@ var Label3 = /* @__PURE__ */ forwardRef18(({ classNames, children, srOnly, ...pr
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef18(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React26.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", {
       srOnly
@@ -2172,10 +2162,10 @@ var Description = /* @__PURE__ */ forwardRef18(({ classNames, children, srOnly,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React25.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React26.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", {
       srOnly,
@@ -2184,9 +2174,9 @@ var Validation = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, child
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef18(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef21(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React26.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", {
       srOnly
@@ -2194,12 +2184,12 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef18(({ classNames, child
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef18(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef21(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  return /* @__PURE__ */ React25.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React26.createElement(PinInputPrimitive, {
     ...props,
     ...props.autoFocus && !hasIosKeyboard2 && {
       autoFocus: true
@@ -2215,13 +2205,13 @@ var PinInput = /* @__PURE__ */ forwardRef18(({ classNames, density: propsDensity
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React25.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React26.createElement(TextInputPrimitive, {
     ...props,
     "data-1p-ignore": noAutoFill,
     className: tx("input.input", {
@@ -2237,13 +2227,13 @@ var TextInput = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React25.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React26.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.textArea", {
       variant,
@@ -2258,7 +2248,7 @@ var TextArea = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -2266,7 +2256,7 @@ var Checkbox = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, checked
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React26.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -2280,7 +2270,7 @@ var Checkbox = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, checked
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(Icon, {
+  }, /* @__PURE__ */ React26.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
     classNames: tx("input.checkboxIndicator", {
       size,
@@ -2288,16 +2278,16 @@ var Checkbox = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, checked
     })
   }));
 });
-var Switch = /* @__PURE__ */ forwardRef18(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef21(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React25.createElement("input", {
+  return /* @__PURE__ */ React26.createElement("input", {
     type: "checkbox",
-    className: mx8("dx-checkbox--switch dx-focus-ring", classNames),
+    className: mx9("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -2326,13 +2316,13 @@ var Input = {
 };
 
 // src/components/List/List.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React27, { forwardRef as forwardRef19 } from "react";
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import React28, { forwardRef as forwardRef22 } from "react";
 import { LIST_ITEM_NAME, LIST_NAME, ListItemCollapsibleContent, List as ListPrimitive, ListItem as ListPrimitiveItem, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, useListContext, useListItemContext } from "@dxos/react-list";
 
 // src/components/List/ListDropIndicator.tsx
-import React26 from "react";
+import React27 from "react";
 var edgeToOrientationMap = {
   top: "horizontal",
   bottom: "horizontal",
@@ -2354,7 +2344,7 @@ var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React26.createElement("div", {
+  return /* @__PURE__ */ React27.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
@@ -2370,22 +2360,22 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
 };
 
 // src/components/List/List.tsx
-var List = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React27.createElement(DensityProvider, {
+  return /* @__PURE__ */ React28.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React27.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React28.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef19(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot11 : Primitive11.div;
+var ListItemEndcap = /* @__PURE__ */ forwardRef22(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot12 : Primitive12.div;
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(Comp, {
+  return /* @__PURE__ */ React28.createElement(Comp, {
     ...!asChild && {
       role: "none"
     },
@@ -2399,7 +2389,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef19(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement("div", {
+  return /* @__PURE__ */ React28.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", {
@@ -2407,10 +2397,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef19(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef22(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React27.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React28.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", {
       density
@@ -2418,26 +2408,26 @@ var ListItemHeading = /* @__PURE__ */ forwardRef19(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef19(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef22(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-  return /* @__PURE__ */ React27.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React28.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React27.createElement(Icon, {
+  }, children || /* @__PURE__ */ React28.createElement(Icon, {
     size: 3,
     icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
     classNames: tx("list.item.openTriggerIcon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React27.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React28.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", {
       density,
@@ -2457,10 +2447,10 @@ var ListItem = {
 };
 
 // src/components/List/Tree.tsx
-import React29, { forwardRef as forwardRef20 } from "react";
+import React30, { forwardRef as forwardRef23 } from "react";
 
 // src/components/List/TreeDropIndicator.tsx
-import React28 from "react";
+import React29 from "react";
 var edgeToOrientationMap2 = {
   "reorder-above": "sibling",
   "reorder-below": "sibling",
@@ -2470,7 +2460,7 @@ var edgeToOrientationMap2 = {
 var orientationStyles2 = {
   // TODO(wittjosiah): Stop using left/right here.
   sibling: "h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-surface before:left-(--negative-terminal-size)",
-  child: "w-full top-0 bottom-0 border-[length:--line-thickness] before:invisible"
+  child: "inset-0 border-[length:var(--line-thickness)] before:invisible"
 };
 var instructionStyles = {
   "reorder-above": "top-(--line-offset) before:top-(--offset-terminal)",
@@ -2490,7 +2480,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   if (isBlocked) {
     return null;
   }
-  return /* @__PURE__ */ React28.createElement("div", {
+  return /* @__PURE__ */ React29.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -2505,22 +2495,22 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
 };
 
 // src/components/List/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(List, {
+var TreeRoot = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef20(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef23(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React29.createElement(List, {
+  return /* @__PURE__ */ React30.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -2546,18 +2536,18 @@ var TreeItem = {
 // src/components/List/Treegrid.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
-import { Slot as Slot12 } from "@radix-ui/react-slot";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React30, { forwardRef as forwardRef21, useCallback as useCallback6 } from "react";
+import React31, { forwardRef as forwardRef24, useCallback as useCallback6 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ forwardRef24(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot12 : Primitive12.div;
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const { findFirstFocusable } = useFocusFinders();
   const handleKeyDown = useCallback6((event) => {
     switch (event.key) {
@@ -2592,7 +2582,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children
   }, [
     findFirstFocusable
   ]);
-  return /* @__PURE__ */ React30.createElement(Comp, {
+  return /* @__PURE__ */ React31.createElement(Comp, {
     role: "treegrid",
     ...props,
     className: tx("treegrid.root", {}, classNames),
@@ -2604,9 +2594,9 @@ var TreegridRoot = /* @__PURE__ */ forwardRef21(({ asChild, classNames, children
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef21(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef24(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot12 : Primitive12.div;
+  const Comp = asChild ? Slot13 : Primitive13.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
   const [open, onOpenChange] = useControllableState3({
@@ -2614,11 +2604,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef21(({ __treegridRowScope, asChild, c
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
   });
-  return /* @__PURE__ */ React30.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React31.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React30.createElement(Comp, {
+  }, /* @__PURE__ */ React31.createElement(Comp, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", {
@@ -2633,9 +2623,9 @@ var TreegridRow = /* @__PURE__ */ forwardRef21(({ __treegridRowScope, asChild, c
     ref: forwardedRef
   }, children));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef21(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef24(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement("div", {
+  return /* @__PURE__ */ React31.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", {
       indent
@@ -2658,10 +2648,10 @@ var Treegrid = {
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { createContext as createContext7 } from "@radix-ui/react-context";
 import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
-import { Slot as Slot13 } from "@radix-ui/react-slot";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React31, { forwardRef as forwardRef22, useCallback as useCallback8, useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
+import React32, { forwardRef as forwardRef25, useCallback as useCallback8, useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
 import { addEventListener } from "@dxos/async";
 import { log } from "@dxos/log";
 import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
@@ -2865,7 +2855,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
       resizeInterval.current = null;
     }, 3e3);
   }), []);
-  return /* @__PURE__ */ React31.createElement(MainProvider, {
+  return /* @__PURE__ */ React32.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -2875,11 +2865,11 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement("div", {
+  return /* @__PURE__ */ React32.createElement("div", {
     ...props,
     onClick: () => {
       setNavigationSidebarState("collapsed");
@@ -2896,7 +2886,7 @@ var MainOverlay = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwar
   });
 });
 MainOverlay.displayName = MAIN_OVERLAY_NAME;
-var MainSidebar = /* @__PURE__ */ forwardRef22(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef25(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { tx } = useThemeContext();
   const { t } = useTranslation(osTranslations3);
@@ -2916,14 +2906,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef22(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root9 = isLg ? Primitive13.div : DialogContent2;
-  return /* @__PURE__ */ React31.createElement(DialogRoot2, {
+  const Root9 = isLg ? Primitive14.div : DialogContent2;
+  return /* @__PURE__ */ React32.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
-  }, !isLg && /* @__PURE__ */ React31.createElement(DialogTitle2, {
+  }, !isLg && /* @__PURE__ */ React32.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React31.createElement(Root9, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React32.createElement(Root9, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2941,10 +2931,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef22(({ classNames, children, swipeToD
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React31.createElement(MainSidebar, {
+  return /* @__PURE__ */ React32.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: navigationSidebarState,
@@ -2955,10 +2945,10 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef22((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React31.createElement(MainSidebar, {
+  return /* @__PURE__ */ React32.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: complementarySidebarState,
@@ -2969,12 +2959,12 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef22((props, forwardedRef
   });
 });
 MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef22(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef25(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot13 : role ? Primitive13.div : "main";
+  const Comp = asChild ? Slot14 : role ? Primitive14.div : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React31.createElement(Comp, {
+  return /* @__PURE__ */ React32.createElement(Comp, {
     role,
     ...handlesFocus && {
       ...mover
@@ -3001,9 +2991,9 @@ var Main = {
 
 // src/components/Message/Message.tsx
 import { createContext as createContext8 } from "@radix-ui/react-context";
-import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
-import { Slot as Slot14 } from "@radix-ui/react-slot";
-import React32, { forwardRef as forwardRef23 } from "react";
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
+import React33, { forwardRef as forwardRef26 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var messageIcons = {
   success: "ph--check-circle--duotone",
@@ -3014,17 +3004,17 @@ var messageIcons = {
 };
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext8(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef23(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef26(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Comp = asChild ? Slot14 : Primitive14.div;
-  return /* @__PURE__ */ React32.createElement(MessageProvider, {
+  const Comp = asChild ? Slot15 : Primitive15.div;
+  return /* @__PURE__ */ React33.createElement(MessageProvider, {
     titleId,
     descriptionId,
     valence
-  }, /* @__PURE__ */ React32.createElement(Comp, {
+  }, /* @__PURE__ */ React33.createElement(Comp, {
     role: valence === "neutral" ? "paragraph" : "alert",
     ...props,
     className: tx("message.root", {
@@ -3038,33 +3028,33 @@ var MessageRoot = /* @__PURE__ */ forwardRef23(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef23(({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef26(({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Comp = asChild ? Slot14 : Primitive14.h2;
+  const Comp = asChild ? Slot15 : Primitive15.h2;
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React32.createElement(Comp, {
+  return /* @__PURE__ */ React33.createElement(Comp, {
     ...props,
     className: tx("message.header", {}, classNames),
     id: titleId,
     ref: forwardedRef
-  }, !icon && valence === "neutral" ? /* @__PURE__ */ React32.createElement("div", null) : /* @__PURE__ */ React32.createElement(Icon, {
+  }, !icon && valence === "neutral" ? /* @__PURE__ */ React33.createElement("div", null) : /* @__PURE__ */ React33.createElement(Icon, {
     size: 5,
     icon,
     classNames: tx("message.icon", {
       valence
     })
-  }), /* @__PURE__ */ React32.createElement("span", {
+  }), /* @__PURE__ */ React33.createElement("span", {
     className: tx("message.title", {}, classNames)
   }, children));
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "MessageContent";
-var MessageContent = /* @__PURE__ */ forwardRef23(({ asChild, classNames, children, ...props }, forwardedRef) => {
+var MessageContent = /* @__PURE__ */ forwardRef26(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Comp = asChild ? Slot14 : Primitive14.p;
-  return /* @__PURE__ */ React32.createElement(Comp, {
+  const Comp = asChild ? Slot15 : Primitive15.p;
+  return /* @__PURE__ */ React33.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
     id: descriptionId,
@@ -3091,11 +3081,11 @@ import * as PopperPrimitive from "@radix-ui/react-popper";
 import { createPopperScope } from "@radix-ui/react-popper";
 import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
 import { Presence } from "@radix-ui/react-presence";
-import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
-import { Slot as Slot15 } from "@radix-ui/react-slot";
+import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
+import { Slot as Slot16 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React33, { forwardRef as forwardRef24, useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState8 } from "react";
+import React34, { forwardRef as forwardRef27, useCallback as useCallback9, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState8 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -3113,7 +3103,7 @@ var PopoverRoot = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React33.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React33.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React34.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React34.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId4(),
     triggerRef,
@@ -3130,7 +3120,7 @@ var PopoverRoot = (props) => {
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -3142,7 +3132,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React33.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React34.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -3150,13 +3140,13 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "PopoverTrigger";
-var PopoverTrigger = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverTrigger = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { __scopePopover, asChild, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  const Comp = asChild ? Slot15 : Primitive15.button;
-  const trigger = /* @__PURE__ */ React33.createElement(Comp, {
+  const Comp = asChild ? Slot16 : Primitive16.button;
+  const trigger = /* @__PURE__ */ React34.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -3166,7 +3156,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React33.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React34.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -3182,7 +3172,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React33.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React34.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -3195,34 +3185,34 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React33.createElement(PortalProvider, {
+  return /* @__PURE__ */ React34.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React33.createElement(Presence, {
+  }, /* @__PURE__ */ React34.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React33.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React34.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "PopoverContent";
-var PopoverContent = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React33.createElement(Presence, {
+  return /* @__PURE__ */ React34.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React33.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React34.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React33.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React34.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const contentRef = useRef4(null);
   const composedRefs = useComposedRefs(forwardedRef, contentRef);
@@ -3233,10 +3223,10 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef24((props, forwardedRef) =>
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React33.createElement(RemoveScroll, {
-    as: Slot15,
+  return /* @__PURE__ */ React34.createElement(RemoveScroll, {
+    as: Slot16,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React33.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React34.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
@@ -3263,11 +3253,11 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef24((props, forwardedRef) =>
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const hasInteractedOutsideRef = useRef4(false);
   const hasPointerDownOutsideRef = useRef4(false);
-  return /* @__PURE__ */ React33.createElement(PopoverContentImpl, {
+  return /* @__PURE__ */ React34.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -3302,7 +3292,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef24((props, forwardedRef)
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -3326,13 +3316,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React33.createElement(FocusScope, {
+  return /* @__PURE__ */ React34.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React33.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React34.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -3340,7 +3330,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React33.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React34.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -3366,10 +3356,10 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
   })));
 });
 var CLOSE_NAME = "PopoverClose";
-var PopoverClose = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React33.createElement(Primitive15.button, {
+  return /* @__PURE__ */ React34.createElement(Primitive16.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -3378,11 +3368,11 @@ var PopoverClose = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "PopoverArrow";
-var PopoverArrow = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React34.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", {}, classNames),
@@ -3390,10 +3380,10 @@ var PopoverArrow = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ forwardRef24(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef27(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot15 : Primitive15.div;
-  return /* @__PURE__ */ React33.createElement(Comp, {
+  const Comp = asChild ? Slot16 : Primitive16.div;
+  return /* @__PURE__ */ React34.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
       constrainInline,
@@ -3416,10 +3406,10 @@ var Popover = {
 };
 
 // src/components/Status/Status.tsx
-import React34, { forwardRef as forwardRef25 } from "react";
-var Status = /* @__PURE__ */ forwardRef25(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+import React35, { forwardRef as forwardRef28 } from "react";
+var Status = /* @__PURE__ */ forwardRef28(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement("span", {
+  return /* @__PURE__ */ React35.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", {
@@ -3427,7 +3417,7 @@ var Status = /* @__PURE__ */ forwardRef25(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React34.createElement("span", {
+  }, /* @__PURE__ */ React35.createElement("span", {
     role: "none",
     className: tx("status.bar", {
       indeterminate,
@@ -3443,15 +3433,17 @@ var Status = /* @__PURE__ */ forwardRef25(({ classNames, children, progress = 0,
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { createContext as createContext9 } from "@radix-ui/react-context";
-import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
-import { Slot as Slot16 } from "@radix-ui/react-slot";
-import React35, { forwardRef as forwardRef26 } from "react";
+import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
+import { Slot as Slot17 } from "@radix-ui/react-slot";
+import React36, { forwardRef as forwardRef29 } from "react";
+import { composableProps as composableProps8 } from "@dxos/ui-theme";
 var SCROLLAREA_NAME = "ScrollArea";
 var [ScrollAreaProvider, useScrollAreaContext] = createContext9(SCROLLAREA_NAME);
 var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef26(({ classNames, className, asChild, children, orientation = "vertical", autoHide = true, margin = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef29(({ children, asChild, orientation = "vertical", autoHide = true, margin = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps8(props);
+  const Comp = asChild ? Slot17 : Primitive17.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot16 : Primitive16.div;
   const options = {
     orientation,
     autoHide,
@@ -3460,21 +3452,18 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef26(({ classNames, className, asCh
     thin,
     snap
   };
-  return /* @__PURE__ */ React35.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React35.createElement(Comp, {
-    ...props,
-    className: tx("scrollArea.root", options, [
-      className,
-      classNames
-    ]),
+  return /* @__PURE__ */ React36.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React36.createElement(Comp, {
+    ...rest,
+    className: tx("scrollArea.root", options, className),
     ref: forwardedRef
   }, children));
 });
 ScrollAreaRoot.displayName = SCROLLAREA_ROOT_NAME;
 var SCROLLAREA_VIEWPORT_NAME = "ScrollArea.Viewport";
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef26(({ classNames, children, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
-  return /* @__PURE__ */ React35.createElement("div", {
+  return /* @__PURE__ */ React36.createElement("div", {
     ...props,
     className: tx("scrollArea.viewport", options, classNames),
     ref: forwardedRef
@@ -3488,17 +3477,17 @@ var ScrollArea = {
 
 // src/components/ScrollContainer/ScrollContainer.tsx
 import { createContext as createContext10 } from "@radix-ui/react-context";
-import React36, { forwardRef as forwardRef27, useCallback as useCallback10, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import React37, { forwardRef as forwardRef30, useCallback as useCallback10, useEffect as useEffect7, useImperativeHandle, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useForwardedRef as useForwardedRef2 } from "@dxos/react-hooks";
-import { mx as mx9 } from "@dxos/ui-theme";
+import { mx as mx10 } from "@dxos/ui-theme";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui/src/components/ScrollContainer/ScrollContainer.tsx";
 var isBottom = (el) => {
   return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
 };
 var [ScrollContainerProvider, useScrollContainerContext] = createContext10("ScrollContainer");
-var Root6 = /* @__PURE__ */ forwardRef27(({ children, classNames, pin, fade, behavior: behaviorProp = "smooth" }, forwardedRef) => {
+var Root6 = /* @__PURE__ */ forwardRef30(({ children, classNames, pin, fade, behavior: behaviorProp = "smooth" }, forwardedRef) => {
   const scrollerRef = useRef5(null);
   const autoScrollRef = useRef5(false);
   const [overflow, setOverflow] = useState9(false);
@@ -3565,31 +3554,31 @@ var Root6 = /* @__PURE__ */ forwardRef27(({ children, classNames, pin, fade, beh
       })
     );
   }, []);
-  return /* @__PURE__ */ React36.createElement(ScrollContainerProvider, {
+  return /* @__PURE__ */ React37.createElement(ScrollContainerProvider, {
     pinned,
     controller,
     scrollToBottom
-  }, /* @__PURE__ */ React36.createElement("div", {
+  }, /* @__PURE__ */ React37.createElement("div", {
     className: "relative grid dx-container overflow-hidden"
-  }, fade && /* @__PURE__ */ React36.createElement("div", {
+  }, fade && /* @__PURE__ */ React37.createElement("div", {
     role: "none",
     "data-visible": overflow,
-    className: mx9(
+    className: mx10(
       // NOTE: Gradients may not be visible with dark reader extensions.
       "z-10 absolute top-0 inset-x-0 h-24 w-full",
       'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
       "bg-gradient-to-b from-(--surface-bg) to-transparent pointer-events-none"
     )
-  }), /* @__PURE__ */ React36.createElement(ScrollArea.Root, {
-    classNames: mx9("min-h-0", classNames),
+  }), /* @__PURE__ */ React37.createElement(ScrollArea.Root, {
+    classNames: mx10("min-h-0", classNames),
     thin: true
-  }, /* @__PURE__ */ React36.createElement(ScrollArea.Viewport, {
+  }, /* @__PURE__ */ React37.createElement(ScrollArea.Viewport, {
     ref: scrollerRef
   }, children))));
 });
 Root6.displayName = "ScrollContainer.Root";
 var VIEWPORT_NAME = "ScrollContainer.Viewport";
-var Viewport = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
+var Viewport = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
   const contentRef = useForwardedRef2(forwardedRef);
   const { pinned, scrollToBottom } = useScrollContainerContext(VIEWPORT_NAME);
   useEffect7(() => {
@@ -3604,8 +3593,8 @@ var Viewport = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props },
     pinned,
     scrollToBottom
   ]);
-  return /* @__PURE__ */ React36.createElement("div", {
-    className: mx9("w-full", classNames),
+  return /* @__PURE__ */ React37.createElement("div", {
+    className: mx10("w-full", classNames),
     ...props,
     ref: contentRef
   }, children);
@@ -3614,10 +3603,10 @@ Viewport.displayName = VIEWPORT_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 var ScrollDownButton = ({ classNames }) => {
   const { pinned, scrollToBottom } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
-  return /* @__PURE__ */ React36.createElement("div", {
+  return /* @__PURE__ */ React37.createElement("div", {
     role: "none",
-    className: mx9("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
-  }, /* @__PURE__ */ React36.createElement(IconButton, {
+    className: mx10("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
     iconOnly: true,
@@ -3635,32 +3624,32 @@ var ScrollContainer = {
 
 // src/components/Select/Select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React37, { forwardRef as forwardRef28 } from "react";
+import React38, { forwardRef as forwardRef31 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
 var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
-var SelectTriggerButton = /* @__PURE__ */ forwardRef28(({ children, placeholder, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Trigger, {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef31(({ children, placeholder, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React37.createElement(Button, props, /* @__PURE__ */ React37.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React38.createElement(Button, props, /* @__PURE__ */ React38.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React37.createElement("span", {
+  }, children), /* @__PURE__ */ React38.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ React37.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React38.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Icon, {
+  }, /* @__PURE__ */ React38.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef28(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef31(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -3671,78 +3660,78 @@ var SelectContent = /* @__PURE__ */ forwardRef28(({ classNames, children, collis
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React37.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React38.createElement(Icon, {
     size: 3,
     icon: "ph--caret-up--bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React37.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React38.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
-var SelectViewport2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectItem = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef31(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef28(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef31(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React37.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React37.createElement("span", {
+  }, /* @__PURE__ */ React38.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React38.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ React37.createElement(Icon, {
+  }), /* @__PURE__ */ React38.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef31(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React38.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", {}, classNames),
     ref: forwardedRef
@@ -3770,10 +3759,10 @@ var Select = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-import React38, { forwardRef as forwardRef29 } from "react";
-var Skeleton = /* @__PURE__ */ forwardRef29(({ classNames, variant = "default", ...props }, forwardedRef) => {
+import React39, { forwardRef as forwardRef32 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React38.createElement("div", {
+  return /* @__PURE__ */ React39.createElement("div", {
     ...props,
     className: tx("skeleton.root", {
       variant
@@ -3784,48 +3773,45 @@ var Skeleton = /* @__PURE__ */ forwardRef29(({ classNames, variant = "default",
 
 // src/components/Splitter/Splitter.tsx
 import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
-import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
-import { Slot as Slot17 } from "@radix-ui/react-slot";
-import React39, { forwardRef as forwardRef30 } from "react";
+import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
+import React40, { forwardRef as forwardRef33 } from "react";
+import { composableProps as composableProps9 } from "@dxos/ui-theme";
 var SPLITTER_NAME = "Splitter";
 var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
 var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
 var ROOT_NAME = "Splitter.Root";
-var Root8 = /* @__PURE__ */ forwardRef30(({ __scopeSplitter, classNames, className, asChild, mode = "upper", ratio = 0.5, transition = 250, children, ...rootProps }, forwardedRef) => {
+var Root8 = /* @__PURE__ */ forwardRef33(({ __scopeSplitter, asChild, mode = "upper", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps9(props);
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot17 : Primitive17.div;
-  return /* @__PURE__ */ React39.createElement(SplitterProvider, {
+  return /* @__PURE__ */ React40.createElement(SplitterProvider, {
     scope: __scopeSplitter,
     mode,
     ratio,
     transition
-  }, /* @__PURE__ */ React39.createElement(Comp, {
+  }, /* @__PURE__ */ React40.createElement(Comp, {
     role: "none",
-    ...rootProps,
+    ...rest,
     ref: forwardedRef,
-    className: tx("splitter.root", {}, [
-      className,
-      classNames
-    ])
+    className: tx("splitter.root", {}, className)
   }, children));
 });
 Root8.displayName = ROOT_NAME;
 var PANEL_NAME = "Splitter.Panel";
-var Panel2 = /* @__PURE__ */ forwardRef30(({ __scopeSplitter, classNames, className, asChild, children, position, style, ...props }, forwardedRef) => {
+var Panel2 = /* @__PURE__ */ forwardRef33(({ __scopeSplitter, asChild, children, position, style, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps9(props);
+  const Comp = asChild ? Slot18 : Primitive18.div;
   const { mode, ratio, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot17 : Primitive17.div;
   const isUpper = position === "upper";
   const top = isUpper ? "0%" : mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%`;
   const height = isUpper ? mode === "upper" ? "100%" : mode === "lower" ? "0%" : `${ratio * 100}%` : mode === "lower" ? "100%" : mode === "upper" ? "0%" : `${(1 - ratio) * 100}%`;
-  return /* @__PURE__ */ React39.createElement(Comp, {
+  return /* @__PURE__ */ React40.createElement(Comp, {
     role: "none",
-    ...props,
+    ...rest,
     ref: forwardedRef,
-    className: tx("splitter.panel", {}, [
-      className,
-      classNames
-    ]),
+    className: tx("splitter.panel", {}, className),
     style: {
       top,
       height,
@@ -3841,13 +3827,13 @@ var Splitter = {
 };
 
 // src/components/Tag/Tag.tsx
-import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
-import { Slot as Slot18 } from "@radix-ui/react-slot";
-import React40, { forwardRef as forwardRef31 } from "react";
-var Tag = /* @__PURE__ */ forwardRef31(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
+import { Slot as Slot19 } from "@radix-ui/react-slot";
+import React41, { forwardRef as forwardRef34 } from "react";
+var Tag = /* @__PURE__ */ forwardRef34(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot18 : Primitive18.span;
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  const Comp = asChild ? Slot19 : Primitive19.span;
+  return /* @__PURE__ */ React41.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
       palette
@@ -3858,59 +3844,59 @@ var Tag = /* @__PURE__ */ forwardRef31(({ asChild, palette = "neutral", classNam
 });
 
 // src/components/Toast/Toast.tsx
-import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
-import { Slot as Slot19 } from "@radix-ui/react-slot";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
 import { ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastProvider as ToastProviderPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastViewport as ToastViewportPrimitive } from "@radix-ui/react-toast";
-import React41, { forwardRef as forwardRef32 } from "react";
+import React42, { forwardRef as forwardRef35 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef32(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef35(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React42.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef32(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React42.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React41.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React42.createElement(ElevationProvider, {
     elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ forwardRef32(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot19 : Primitive19.div;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef32(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot19 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  const Comp = asChild ? Slot20 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef32(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot19 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  const Comp = asChild ? Slot20 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef32(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef35(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot19 : Primitive19.div;
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  const Comp = asChild ? Slot20 : Primitive20.div;
+  return /* @__PURE__ */ React42.createElement(Comp, {
     ...props,
     className: tx("toast.actions", {}, classNames),
     ref: forwardedRef
@@ -3940,6 +3926,7 @@ export {
   Card,
   Clipboard,
   Column,
+  Container,
   ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,