@dxos/react-ui 0.7.2 → 0.7.3-staging.0905f03

package/dist/lib/browser/index.mjs

@@ -155,8 +155,10 @@ import { useId } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Icon/Icon.tsx
 import React3, { forwardRef as forwardRef2, memo } from "react";
+var ICONS_URL = "/icons.svg";
 var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
+  const { tx, noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
   return /* @__PURE__ */ React3.createElement("svg", {
     ...props,
     className: tx("icon.root", "icon", {
@@ -164,7 +166,7 @@ var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames,
     }, classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React3.createElement("use", {
-    href: `/icons.svg#${icon}`
+    href: `${url}#${icon}`
   }));
 }));
 
@@ -684,29 +686,182 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, densit
   }));
 });
 
-// packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
-import { createContext as createContext5 } from "@radix-ui/react-context";
-import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
-import React14, { forwardRef as forwardRef12 } from "react";
+// packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
+import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState3 } from "react";
+var ClipboardContext = /* @__PURE__ */ createContext4({
+  textValue: "",
+  setTextValue: async (_) => {
+  }
+});
+var useClipboard = () => useContext6(ClipboardContext);
+var ClipboardProvider = ({ children }) => {
+  const [textValue, setInternalTextValue] = useState3("");
+  const setTextValue = useCallback(async (nextValue) => {
+    await navigator.clipboard.writeText(nextValue);
+    return setInternalTextValue(nextValue);
+  }, []);
+  return /* @__PURE__ */ React13.createElement(ClipboardContext.Provider, {
+    value: {
+      textValue,
+      setTextValue
+    }
+  }, children);
+};
+
+// packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
+import React17, { useState as useState4 } from "react";
+import { mx } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
+import { createKeyborg } from "keyborg";
+import React16, { createContext as createContext7, useEffect as useEffect3 } from "react";
+
+// packages/ui/react-ui/src/util/hasIosKeyboard.ts
+var hasIosKeyboard = () => {
+  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
+};
+
+// packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
+import React14, { createContext as createContext5 } from "react";
+var DensityContext = /* @__PURE__ */ createContext5({
+  density: "fine"
+});
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React14.createElement(DensityContext.Provider, {
+  value: {
+    density
+  }
+}, children);
 
 // packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
-import React13, { createContext as createContext4 } from "react";
-var ElevationContext = /* @__PURE__ */ createContext4({
+import React15, { createContext as createContext6 } from "react";
+var ElevationContext = /* @__PURE__ */ createContext6({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React13.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React15.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
 }, children);
 
+// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
+var ThemeContext = /* @__PURE__ */ createContext7(void 0);
+var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base", ...rest }) => {
+  useEffect3(() => {
+    if (document.defaultView) {
+      const kb = createKeyborg(document.defaultView);
+      kb.subscribe(handleInputModalityChange);
+      return () => kb.unsubscribe(handleInputModalityChange);
+    }
+  }, []);
+  return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
+    value: {
+      tx,
+      themeMode,
+      hasIosKeyboard: hasIosKeyboard(),
+      ...rest
+    }
+  }, /* @__PURE__ */ React16.createElement(TranslationsProvider, {
+    fallback,
+    resourceExtensions,
+    appNs
+  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
+    elevation: rootElevation
+  }, /* @__PURE__ */ React16.createElement(DensityProvider, {
+    density: rootDensity
+  }, children))));
+};
+var handleInputModalityChange = (isUsingKeyboard) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute("data-is-keyboard", "true");
+  } else {
+    document.body.removeAttribute("data-is-keyboard");
+  }
+};
+
+// packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
+var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
+var CopyButton = ({ value, classNames, iconProps, ...props }) => {
+  const { t } = useTranslation("os");
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  return /* @__PURE__ */ React17.createElement(Button, {
+    ...props,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ],
+    onClick: () => setTextValue(value),
+    "data-testid": "copy-invitation"
+  }, /* @__PURE__ */ React17.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React17.createElement("span", {
+    className: "pli-1"
+  }, t("copy label")), /* @__PURE__ */ React17.createElement(Icon, {
+    icon: "ph--copy--regular",
+    size: 5,
+    ...iconProps
+  })), /* @__PURE__ */ React17.createElement("div", {
+    role: "none",
+    className: mx("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React17.createElement("span", {
+    className: "pli-1"
+  }, t("copy success label")), /* @__PURE__ */ React17.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 5,
+    ...iconProps
+  })));
+};
+var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
+  const { t } = useTranslation("os");
+  const { textValue, setTextValue } = useClipboard();
+  const isCopied = textValue === value;
+  const label = isCopied ? t("copy success label") : t("copy label");
+  const [open, setOpen] = useState4(false);
+  return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
+    delayDuration: 1500,
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React17.createElement(Tooltip.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip.Content, {
+    side: "bottom",
+    sideOffset: 12,
+    classNames: "z-30"
+  }, /* @__PURE__ */ React17.createElement("span", null, label), /* @__PURE__ */ React17.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React17.createElement(Tooltip.Trigger, {
+    "aria-label": label,
+    ...props,
+    onClick: () => setTextValue(value).then(() => setOpen(true)),
+    "data-testid": "copy-invitation",
+    asChild: true
+  }, /* @__PURE__ */ React17.createElement(Button, {
+    variant,
+    classNames: [
+      "inline-flex flex-col justify-center",
+      classNames
+    ]
+  }, /* @__PURE__ */ React17.createElement(Icon, {
+    icon: "ph--copy--regular",
+    size: 5,
+    ...iconProps
+  }))));
+};
+
+// packages/ui/react-ui/src/components/Clipboard/index.ts
+var Clipboard = {
+  Button: CopyButton,
+  IconButton: CopyButtonIconOnly,
+  Provider: ClipboardProvider
+};
+
 // packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
+import { createContext as createContext8 } from "@radix-ui/react-context";
+import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
+import React18, { forwardRef as forwardRef12 } from "react";
 var DialogRoot = DialogRootPrimitive;
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
 var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React18.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -716,7 +871,7 @@ var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }
 });
 var DialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React18.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -727,17 +882,17 @@ var DialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...p
 var DialogClose = DialogClosePrimitive;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
 var DIALOG_CONTENT_NAME = "DialogContent";
-var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
 var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React18.createElement(DialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ React14.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
@@ -745,13 +900,13 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React14.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React18.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React18.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -769,8 +924,8 @@ var Dialog = {
 
 // packages/ui/react-ui/src/components/Dialogs/AlertDialog.tsx
 import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
-import { createContext as createContext6 } from "@radix-ui/react-context";
-import React15, { forwardRef as forwardRef13 } from "react";
+import { createContext as createContext9 } from "@radix-ui/react-context";
+import React19, { forwardRef as forwardRef13 } from "react";
 var AlertDialogRoot = AlertDialogRootPrimitive;
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
@@ -778,7 +933,7 @@ var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
 var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React19.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -788,7 +943,7 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...pr
 });
 var AlertDialogDescription = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React19.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -798,16 +953,17 @@ var AlertDialogDescription = /* @__PURE__ */ forwardRef13(({ classNames, srOnly,
 });
 var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
 var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
-var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext9(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef13(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React19.createElement(AlertDialogOverlayPrimitive, {
     ...props,
-    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(OverlayLayoutProvider2, {
+    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+    ref: forwardedRef,
+    "data-block-align": blockAlign
+  }, /* @__PURE__ */ React19.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
@@ -815,13 +971,13 @@ AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 var AlertDialogContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React15.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React19.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React19.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -842,25 +998,25 @@ var AlertDialog = {
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React16, { forwardRef as forwardRef14 } from "react";
+import React20, { forwardRef as forwardRef14 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Content, {
     collisionPadding: 8,
     ...props,
     className: tx("menu.content", "menu", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
 var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React16.createElement(Root5, {
+  return /* @__PURE__ */ React20.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
@@ -868,7 +1024,7 @@ var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, c
 });
 var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -878,7 +1034,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
 var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
@@ -886,7 +1042,7 @@ var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, fo
 });
 var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
@@ -894,7 +1050,7 @@ var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...pro
 });
 var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
@@ -902,7 +1058,7 @@ var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props
 });
 var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -933,7 +1089,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React17, { useRef, useCallback, forwardRef as forwardRef15, useEffect as useEffect3 } from "react";
+import React21, { useRef, useCallback as useCallback2, forwardRef as forwardRef15, useEffect as useEffect4 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -949,18 +1105,18 @@ var DropdownMenuRoot = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React17.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ React21.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
     triggerId: useId3(),
     triggerRef,
     contentId: useId3(),
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback2(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ React17.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ React21.createElement(MenuPrimitive.Root, {
     ...menuScope,
     open,
     onOpenChange: setOpen,
@@ -974,10 +1130,10 @@ var DropdownMenuTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React17.createElement(Primitive7.button, {
+  }, /* @__PURE__ */ React21.createElement(Primitive7.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1025,12 +1181,12 @@ var DropdownMenuVirtualTrigger = (props) => {
   const { __scopeDropdownMenu, virtualRef } = props;
   const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  useEffect3(() => {
+  useEffect4(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1040,7 +1196,7 @@ var PORTAL_NAME = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
@@ -1049,7 +1205,7 @@ DropdownMenuPortal.displayName = PORTAL_NAME;
 var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React17.createElement(Root5, {
+  return /* @__PURE__ */ React21.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
@@ -1062,7 +1218,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef(false);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Content, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
@@ -1102,7 +1258,7 @@ var GROUP_NAME = "DropdownMenuGroup";
 var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1114,7 +1270,7 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef)
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
@@ -1127,7 +1283,7 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", "menu__item", {}, classNames),
@@ -1140,7 +1296,7 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
@@ -1152,7 +1308,7 @@ var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1163,7 +1319,7 @@ var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.RadioItem, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.RadioItem, {
     ...menuScope,
     ...radioItemProps,
     ref: forwardedRef
@@ -1174,7 +1330,7 @@ var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1186,7 +1342,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", "menu__item", {}, classNames),
@@ -1199,7 +1355,7 @@ var DropdownMenuArrow = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
@@ -1215,7 +1371,7 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
@@ -1225,7 +1381,7 @@ var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1236,7 +1392,7 @@ var SUB_CONTENT_NAME = "DropdownMenuSubContent";
 var DropdownMenuSubContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React17.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1281,11 +1437,11 @@ import { Check, Minus } from "@phosphor-icons/react";
 import { Root as CheckboxPrimitive, Indicator as CheckboxIndicatorPrimitive } from "@radix-ui/react-checkbox";
 import { Root as SwitchPrimitive, Thumb as SwitchThumbPrimitive } from "@radix-ui/react-switch";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React18, { forwardRef as forwardRef16, Fragment, useCallback as useCallback2 } from "react";
+import React22, { forwardRef as forwardRef16, Fragment, useCallback as useCallback3 } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
 var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React22.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -1295,7 +1451,7 @@ var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...pr
 });
 var Description = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -1306,7 +1462,7 @@ var Description = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children,
 var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React18.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React22.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -1317,7 +1473,7 @@ var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, srOnly, className
 });
 var DescriptionAndValidation = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React22.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -1330,7 +1486,7 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation:
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  const segmentClassName = useCallback2(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = useCallback3(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
     variant: "static",
     focused,
     disabled: props.disabled,
@@ -1344,7 +1500,7 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React18.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React22.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -1363,7 +1519,7 @@ var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, densit
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = themeContextValue;
-  return /* @__PURE__ */ React18.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React22.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1384,7 +1540,7 @@ var TextArea = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React18.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React22.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1408,7 +1564,7 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
   const Icon3 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
-  return /* @__PURE__ */ React18.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React22.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1422,9 +1578,9 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React22.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React18.createElement(Icon3, checked && {
+  }, /* @__PURE__ */ React22.createElement(Icon3, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
@@ -1439,7 +1595,7 @@ var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React18.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React22.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1453,7 +1609,7 @@ var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(SwitchThumbPrimitive, {
+  }, /* @__PURE__ */ React22.createElement(SwitchThumbPrimitive, {
     className: tx("input.switchThumb", "input--switch__thumb", {
       size
     })
@@ -1475,27 +1631,14 @@ var Input = {
 // packages/ui/react-ui/src/components/Lists/List.tsx
 import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React20, { forwardRef as forwardRef17 } from "react";
+import React23, { forwardRef as forwardRef17 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
-
-// packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
-import React19, { createContext as createContext7 } from "react";
-var DensityContext = /* @__PURE__ */ createContext7({
-  density: "fine"
-});
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React19.createElement(DensityContext.Provider, {
-  value: {
-    density
-  }
-}, children);
-
-// packages/ui/react-ui/src/components/Lists/List.tsx
 var List = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React20.createElement(DensityProvider, {
+  return /* @__PURE__ */ React23.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React20.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React23.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
@@ -1505,7 +1648,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChi
   const Root5 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(Root5, {
+  return /* @__PURE__ */ React23.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1519,7 +1662,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1530,7 +1673,7 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
 var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React20.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1543,13 +1686,13 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, class
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   const Icon3 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React20.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React20.createElement(Icon3, {
+  }, children || /* @__PURE__ */ React23.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
@@ -1557,7 +1700,7 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, class
 var ListItemRoot = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React20.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1576,23 +1719,23 @@ var ListItem = {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-import React21, { forwardRef as forwardRef18 } from "react";
+import React24, { forwardRef as forwardRef18 } from "react";
 var TreeRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React21.createElement(List, {
+  return /* @__PURE__ */ React24.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
 var TreeBranch = /* @__PURE__ */ forwardRef18(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React21.createElement(List, {
+  return /* @__PURE__ */ React24.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
 var TreeItemRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React21.createElement(ListItem.Root, {
+  return /* @__PURE__ */ React24.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1620,7 +1763,7 @@ import { createContextScope as createContextScope2 } from "@radix-ui/react-conte
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React22, { forwardRef as forwardRef19 } from "react";
+import React25, { forwardRef as forwardRef19 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
@@ -1634,7 +1777,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React22.createElement(Root5, {
+  return /* @__PURE__ */ React25.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1665,11 +1808,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ React22.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React25.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React22.createElement(Root5, {
+  }, /* @__PURE__ */ React25.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1684,7 +1827,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement("div", {
+  }, /* @__PURE__ */ React25.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
@@ -1692,7 +1835,7 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
 });
 var TreegridCell = /* @__PURE__ */ forwardRef19(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React25.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1714,17 +1857,17 @@ var Treegrid = {
 // packages/ui/react-ui/src/components/Main/Main.tsx
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { createContext as createContext8 } from "@radix-ui/react-context";
+import { createContext as createContext10 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React23, { forwardRef as forwardRef20, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef2, useState as useState4 } from "react";
+import React26, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1739,22 +1882,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState3(0);
-  const [gestureStartX, setGestureStartX] = useState3(0);
-  const setIdle = useCallback3(() => {
+  const [motionState, setMotionState] = useState5(0);
+  const [gestureStartX, setGestureStartX] = useState5(0);
+  const setIdle = useCallback4(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback3(() => {
+  const setFollowing = useCallback4(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback3(({ screenX }) => {
+  const handlePointerDown = useCallback4(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -1762,7 +1905,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback3(({ screenX }) => {
+  const handlePointerMove = useCallback4(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -1786,12 +1929,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback3(() => {
+  const handlePointerUp = useCallback4(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -1800,7 +1943,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -1809,7 +1952,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -1829,7 +1972,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback5((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -1856,7 +1999,7 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     ...focusableAttrs
   };
 };
-var [MainProvider, useMainContext] = createContext8(MAIN_NAME, {
+var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   resizing: false,
   navigationSidebarOpen: false,
   setNavigationSidebarOpen: (nextOpen) => {
@@ -1882,26 +2025,26 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   return {
     navigationSidebarOpen,
     setNavigationSidebarOpen,
-    toggleNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
+    toggleNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
       navigationSidebarOpen,
       setNavigationSidebarOpen
     ]),
-    openNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(true), [
+    openNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(true), [
       setNavigationSidebarOpen
     ]),
-    closeNavigationSidebar: useCallback4(() => setNavigationSidebarOpen(false), [
+    closeNavigationSidebar: useCallback5(() => setNavigationSidebarOpen(false), [
       setNavigationSidebarOpen
     ]),
     complementarySidebarOpen,
     setComplementarySidebarOpen,
-    toggleComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
+    toggleComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
       complementarySidebarOpen,
       setComplementarySidebarOpen
     ]),
-    openComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(true), [
+    openComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(true), [
       setComplementarySidebarOpen
     ]),
-    closeComplementarySidebar: useCallback4(() => setComplementarySidebarOpen(false), [
+    closeComplementarySidebar: useCallback5(() => setComplementarySidebarOpen(false), [
       setComplementarySidebarOpen
     ])
   };
@@ -1921,9 +2064,9 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  const [resizing, setResizing] = useState4(false);
+  const [resizing, setResizing] = useState6(false);
   const resizeInterval = useRef2(null);
-  const handleResize = useCallback4(() => {
+  const handleResize = useCallback5(() => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -1933,13 +2076,13 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
       resizeInterval.current = null;
     }, resizeDebounce);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React23.createElement(MainProvider, {
+  return /* @__PURE__ */ React26.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1962,7 +2105,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback5((event) => {
     if (event.key === "Escape") {
       event.target.closest("[data-tabster]")?.focus();
     }
@@ -1971,10 +2114,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     props.onKeyDown
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
-  return /* @__PURE__ */ React23.createElement(DialogRoot2, {
+  return /* @__PURE__ */ React26.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React23.createElement(Root5, {
+  }, /* @__PURE__ */ React26.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1990,14 +2133,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React23.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React26.createElement(ElevationProvider, {
     elevation: "group"
   }, children)));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React23.createElement(MainSidebar, {
+  return /* @__PURE__ */ React26.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: navigationSidebarOpen,
@@ -2011,7 +2154,7 @@ MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React23.createElement(MainSidebar, {
+  return /* @__PURE__ */ React26.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: complementarySidebarOpen,
@@ -2027,7 +2170,7 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React23.createElement(Root5, {
+  return /* @__PURE__ */ React26.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
@@ -2049,7 +2192,7 @@ var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwar
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React26.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -2070,7 +2213,7 @@ var MainNotch = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwarde
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
   const notchElement = useRef2(null);
   const ref = useComposedRefs(forwardedRef, notchElement);
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback5((event) => {
     switch (event.key) {
       case "Escape":
         props?.onKeyDown?.(event);
@@ -2080,7 +2223,7 @@ var MainNotch = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwarde
     props?.onKeyDown
   ]);
   const mover = useLandmarkMover(handleKeyDown, "3");
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React26.createElement("div", {
     role: "toolbar",
     ...mover,
     ...props,
@@ -2099,23 +2242,23 @@ var Main = {
 };
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
-import { createContext as createContext9 } from "@radix-ui/react-context";
+import { createContext as createContext11 } from "@radix-ui/react-context";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React24, { forwardRef as forwardRef21 } from "react";
+import React27, { forwardRef as forwardRef21 } from "react";
 import { useId as useId4 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
-var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
+var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId4("message__title", propsTitleId);
   const descriptionId = useId4("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React24.createElement(MessageProvider, {
+  return /* @__PURE__ */ React27.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React24.createElement(Root5, {
+  }, /* @__PURE__ */ React27.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2132,7 +2275,7 @@ var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, className, children,
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React24.createElement(Root5, {
+  return /* @__PURE__ */ React27.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2145,7 +2288,7 @@ var MessageBody = /* @__PURE__ */ forwardRef21(({ asChild, className, children,
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React24.createElement(Root5, {
+  return /* @__PURE__ */ React27.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2175,7 +2318,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React25, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback5, useState as useState5, useEffect as useEffect6 } from "react";
+import React28, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState7, useEffect as useEffect7 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -2187,24 +2330,24 @@ var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef3(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState5(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React25.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React28.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId5(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback5(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback6(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback5(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback5(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback6(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback6(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
@@ -2215,14 +2358,14 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  useEffect6(() => {
+  useEffect7(() => {
     onCustomAnchorAdd();
     return () => onCustomAnchorRemove();
   }, [
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2235,7 +2378,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ React25.createElement(Primitive11.button, {
+  const trigger = /* @__PURE__ */ React28.createElement(Primitive11.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2245,7 +2388,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2256,12 +2399,12 @@ var PopoverVirtualTrigger = (props) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  useEffect6(() => {
+  useEffect7(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2274,12 +2417,12 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React25.createElement(PortalProvider, {
+  return /* @__PURE__ */ React28.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React25.createElement(Presence, {
+  }, /* @__PURE__ */ React28.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React25.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React28.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
@@ -2290,12 +2433,12 @@ var PopoverContent = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React25.createElement(Presence, {
+  return /* @__PURE__ */ React28.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React25.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React28.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React25.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React28.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
@@ -2306,16 +2449,16 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
   const contentRef = useRef3(null);
   const composedRefs = useComposedRefs2(forwardedRef, contentRef);
   const isRightClickOutsideRef = useRef3(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React25.createElement(RemoveScroll, {
+  return /* @__PURE__ */ React28.createElement(RemoveScroll, {
     as: Slot12,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React25.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React28.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // we make sure we're not trapping once it's been closed
@@ -2347,7 +2490,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef)
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const hasInteractedOutsideRef = useRef3(false);
   const hasPointerDownOutsideRef = useRef3(false);
-  return /* @__PURE__ */ React25.createElement(PopoverContentImpl, {
+  return /* @__PURE__ */ React28.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2388,13 +2531,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
   useFocusGuards();
-  return /* @__PURE__ */ React25.createElement(FocusScope, {
+  return /* @__PURE__ */ React28.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React25.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React28.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2402,7 +2545,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React25.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React28.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -2427,7 +2570,7 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React25.createElement(Primitive11.button, {
+  return /* @__PURE__ */ React28.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2440,7 +2583,7 @@ var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React28.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
@@ -2451,7 +2594,7 @@ PopoverArrow.displayName = ARROW_NAME2;
 var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React25.createElement(Root5, {
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -2474,10 +2617,10 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/Status/Status.tsx
-import React26, { forwardRef as forwardRef23 } from "react";
+import React29, { forwardRef as forwardRef23 } from "react";
 var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement("span", {
+  return /* @__PURE__ */ React29.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
@@ -2485,7 +2628,7 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React26.createElement("span", {
+  }, /* @__PURE__ */ React29.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate,
@@ -2501,10 +2644,10 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
 
 // packages/ui/react-ui/src/components/ScrollArea/ScrollArea.tsx
 import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
-import React27, { forwardRef as forwardRef24 } from "react";
+import React30, { forwardRef as forwardRef24 } from "react";
 var ScrollAreaRoot = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -2512,7 +2655,7 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, for
 });
 var ScrollAreaViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -2520,7 +2663,7 @@ var ScrollAreaViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props },
 });
 var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef24(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveScrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
@@ -2529,7 +2672,7 @@ var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef24(({ classNames, variant =
 });
 var ScrollAreaThumb = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
@@ -2537,7 +2680,7 @@ var ScrollAreaThumb = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, fo
 });
 var ScrollAreaCorner = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React30.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -2554,7 +2697,7 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React28, { forwardRef as forwardRef25 } from "react";
+import React31, { forwardRef as forwardRef25 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
@@ -2562,23 +2705,23 @@ var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
 var SelectTriggerButton = /* @__PURE__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(Button, props, /* @__PURE__ */ React28.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React31.createElement(Button, props, /* @__PURE__ */ React31.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React28.createElement("span", {
+  }, children), /* @__PURE__ */ React31.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ React28.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React31.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React31.createElement(CaretDown2, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   }))));
 });
 var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Content, {
     ...props,
     className: tx("select.content", "select__content", {}, classNames),
     position: "popper",
@@ -2587,27 +2730,27 @@ var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, ...pro
 });
 var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React28.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React31.createElement(CaretUp, {
     weight: "bold"
   }));
 });
 var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React28.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React31.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", "select__viewport", {}, classNames),
     ref: forwardedRef
@@ -2615,7 +2758,7 @@ var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, asChild, child
 });
 var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
@@ -2624,7 +2767,7 @@ var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forward
 var SelectItemText = SelectPrimitive.ItemText;
 var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
@@ -2632,13 +2775,13 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children,
 });
 var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React28.createElement("span", {
+  }, /* @__PURE__ */ React31.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React31.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ React28.createElement(Icon, {
+  }), /* @__PURE__ */ React31.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
@@ -2646,7 +2789,7 @@ var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
 var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
@@ -2654,7 +2797,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, fo
 });
 var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React31.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -2683,10 +2826,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React29 from "react";
+import React32 from "react";
 var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React32.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -2698,11 +2841,11 @@ var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React30, { forwardRef as forwardRef26 } from "react";
+import React33, { forwardRef as forwardRef26 } from "react";
 var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React30.createElement(Root5, {
+  return /* @__PURE__ */ React33.createElement(Root5, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -2715,29 +2858,29 @@ var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette, classNames, ...props
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
-import React31, { forwardRef as forwardRef27 } from "react";
+import React34, { forwardRef as forwardRef27 } from "react";
 var ToastProvider = ToastProviderPrimitive;
 var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React34.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
 var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React34.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React34.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
 var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React31.createElement(Root5, {
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -2746,7 +2889,7 @@ var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props },
 var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React31.createElement(Root5, {
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -2755,7 +2898,7 @@ var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }
 var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React31.createElement(Root5, {
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -2764,7 +2907,7 @@ var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...p
 var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React31.createElement(Root5, {
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2786,44 +2929,44 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React32, { forwardRef as forwardRef28 } from "react";
+import React35, { forwardRef as forwardRef28 } from "react";
 var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Button, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Button, {
+  }, /* @__PURE__ */ React35.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Button, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Toggle, {
+  }, /* @__PURE__ */ React35.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Link, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Link, {
+  }, /* @__PURE__ */ React35.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React35.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
@@ -2831,10 +2974,10 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children,
   }));
 });
 var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Button, {
+  }, /* @__PURE__ */ React35.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2844,14 +2987,14 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React32.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React35.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React32.createElement(Separator4, {
+  }, /* @__PURE__ */ React35.createElement(Separator4, {
     orientation: "vertical",
     ...props
   }));
 };
-var ToolbarExpander = () => /* @__PURE__ */ React32.createElement("div", {
+var ToolbarExpander = () => /* @__PURE__ */ React35.createElement("div", {
   className: "grow"
 });
 var Toolbar = {
@@ -2864,49 +3007,6 @@ var Toolbar = {
   Separator: ToolbarSeparator,
   Expander: ToolbarExpander
 };
-
-// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
-import { createKeyborg } from "keyborg";
-import React33, { createContext as createContext10, useEffect as useEffect7 } from "react";
-
-// packages/ui/react-ui/src/util/hasIosKeyboard.ts
-var hasIosKeyboard = () => {
-  return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
-};
-
-// packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
-var ThemeContext = /* @__PURE__ */ createContext10(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base" }) => {
-  useEffect7(() => {
-    if (document.defaultView) {
-      const kb = createKeyborg(document.defaultView);
-      kb.subscribe(handleInputModalityChange);
-      return () => kb.unsubscribe(handleInputModalityChange);
-    }
-  }, []);
-  return /* @__PURE__ */ React33.createElement(ThemeContext.Provider, {
-    value: {
-      tx,
-      themeMode,
-      hasIosKeyboard: hasIosKeyboard()
-    }
-  }, /* @__PURE__ */ React33.createElement(TranslationsProvider, {
-    fallback,
-    resourceExtensions,
-    appNs
-  }, /* @__PURE__ */ React33.createElement(ElevationProvider, {
-    elevation: rootElevation
-  }, /* @__PURE__ */ React33.createElement(DensityProvider, {
-    density: rootDensity
-  }, children))));
-};
-var handleInputModalityChange = (isUsingKeyboard) => {
-  if (isUsingKeyboard) {
-    document.body.setAttribute("data-is-keyboard", "true");
-  } else {
-    document.body.removeAttribute("data-is-keyboard");
-  }
-};
 export {
   AlertDialog,
   AnchoredOverflow,
@@ -2917,6 +3017,7 @@ export {
   Breadcrumb,
   Button,
   ButtonGroup,
+  Clipboard,
   ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,
@@ -2959,6 +3060,7 @@ export {
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
+  useClipboard,
   useDensityContext,
   useDropdownMenuContext,
   useDropdownMenuMenuScope,