@dxos/react-ui 0.6.9 → 0.6.10-main.3cfcc89

package/dist/lib/browser/index.mjs

@@ -149,15 +149,32 @@ import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
-import React3, { forwardRef as forwardRef2 } from "react";
+import React4, { forwardRef as forwardRef3 } from "react";
 import { useId } from "@dxos/react-hooks";
+
+// packages/ui/react-ui/src/components/Icon/Icon.tsx
+import React3, { forwardRef as forwardRef2 } from "react";
+var Icon = /* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React3.createElement("svg", {
+    ...props,
+    className: tx("icon.root", "icon", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement("use", {
+    href: `/icons.svg#${icon}`
+  }));
+});
+
+// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
 var AVATAR_NAME = "Avatar";
 var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
 var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
   const labelId = useId("avatar__label", propsLabelId);
   const descriptionId = useId("avatar__description", propsDescriptionId);
   const maskId = useId("avatar__mask", propsMaskId);
-  return /* @__PURE__ */ React3.createElement(AvatarProvider, {
+  return /* @__PURE__ */ React4.createElement(AvatarProvider, {
     labelId,
     descriptionId,
     maskId,
@@ -170,7 +187,7 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
   }, children);
 };
 var rx = "0.25rem";
-var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props }, forwardedRef) => {
+var AvatarFrame = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props }, forwardedRef) => {
   const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } = useAvatarContext("AvatarFrame");
   const { tx } = useThemeContext();
   const numericSize = size === "px" ? 1 : Number(size);
@@ -178,7 +195,7 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
   const ringWidth = status ? numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1 : 0;
   const ringGap = status ? numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0 : 0;
   const r = sizePx / 2 - ringGap - ringWidth;
-  return /* @__PURE__ */ React3.createElement(AvatarRootPrimitive, {
+  return /* @__PURE__ */ React4.createElement(AvatarRootPrimitive, {
     role: "img",
     ...props,
     className: tx("avatar.root", "avatar", {
@@ -191,35 +208,35 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId
     }
-  }, /* @__PURE__ */ React3.createElement("svg", {
+  }, /* @__PURE__ */ React4.createElement("svg", {
     viewBox: `0 0 ${sizePx} ${sizePx}`,
     width: sizePx,
     height: sizePx,
     className: tx("avatar.frame", "avatar__frame", {
       variant
     })
-  }, /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("mask", {
+  }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("mask", {
     id: maskId
-  }, variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
+  }, variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
     fill: "white",
     cx: "50%",
     cy: "50%",
     r
-  }) : /* @__PURE__ */ React3.createElement("rect", {
+  }) : /* @__PURE__ */ React4.createElement("rect", {
     fill: "white",
     width: 2 * r,
     height: 2 * r,
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     rx
-  }))), variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
+  }))), variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
     className: hue ? tx("hue.fill", "avatar__frame__circle", {
       hue
     }) : "fill-[var(--surface-bg)]",
     cx: "50%",
     cy: "50%",
     r
-  }) : /* @__PURE__ */ React3.createElement("rect", {
+  }) : /* @__PURE__ */ React4.createElement("rect", {
     className: hue ? tx("hue.fill", "avatar__frame__rect", {
       hue
     }) : "fill-[var(--surface-bg)]",
@@ -228,7 +245,7 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
     width: 2 * r,
     height: 2 * r,
     rx
-  }), children), /* @__PURE__ */ React3.createElement("span", {
+  }), children), /* @__PURE__ */ React4.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       size,
@@ -241,11 +258,11 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
     }
   }));
 });
-var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root3 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React3.createElement(Root3, {
+  return /* @__PURE__ */ React4.createElement(Root3, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -254,11 +271,11 @@ var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ..
     }, classNames)
   });
 });
-var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarDescription = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root3 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React3.createElement(Root3, {
+  return /* @__PURE__ */ React4.createElement(Root3, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -267,9 +284,9 @@ var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNam
     }, classNames)
   });
 });
-var AvatarMaskedImage = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+var AvatarMaskedImage = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
   const { maskId } = useAvatarContext("AvatarFallback");
-  return /* @__PURE__ */ React3.createElement("image", {
+  return /* @__PURE__ */ React4.createElement("image", {
     width: "100%",
     height: "100%",
     ...props,
@@ -283,7 +300,7 @@ var AvatarMaskedText = (props) => {
   const { large } = props;
   const fontScale = (large ? 4 : 3) * (1 / 1.612);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React3.createElement("text", {
+  return /* @__PURE__ */ React4.createElement("text", {
     x: "50%",
     y: "50%",
     className: tx("avatar.fallbackText", "avatar__fallback-text"),
@@ -293,30 +310,43 @@ var AvatarMaskedText = (props) => {
     mask: `url(#${maskId})`
   }, props.children);
 };
-var AvatarImage = /* @__PURE__ */ forwardRef2(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+var AvatarImage = /* @__PURE__ */ forwardRef3(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext("AvatarImage");
   const pxSize = size === "px" ? 1 : size * 4;
   if (pxSize <= 20) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(AvatarFallbackPrimitive, {
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
   }));
 });
-var AvatarFallback = /* @__PURE__ */ forwardRef2(({ delayMs, text, ...props }, forwardedRef) => {
+var AvatarIcon = /* @__PURE__ */ forwardRef3(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+  const { size } = useAvatarContext("AvatarIcon");
+  const pxSize = size === "px" ? 1 : size * 4;
+  if (pxSize <= 20) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(Icon, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var AvatarFallback = /* @__PURE__ */ forwardRef3(({ delayMs, text, ...props }, forwardedRef) => {
   const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
   const { size } = useAvatarContext("AvatarFallback");
   const numericSize = size === "px" ? 1 : Number(size);
-  return /* @__PURE__ */ React3.createElement(AvatarFallbackPrimitive, {
+  return /* @__PURE__ */ React4.createElement(AvatarFallbackPrimitive, {
     delayMs,
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React3.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ React4.createElement(React4.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
-  }), text && /* @__PURE__ */ React3.createElement(AvatarMaskedText, {
+  }), text && /* @__PURE__ */ React4.createElement(AvatarMaskedText, {
     large: !isTextOnly
   }, text.toLocaleUpperCase())));
 });
@@ -324,25 +354,26 @@ var Avatar = {
   Root: AvatarRoot,
   Frame: AvatarFrame,
   Image: AvatarImage,
+  Icon: AvatarIcon,
   Fallback: AvatarFallback,
   Label: AvatarLabel,
   Description: AvatarDescription
 };
 
 // packages/ui/react-ui/src/components/Avatars/AvatarGroup.tsx
-import React4, { forwardRef as forwardRef3 } from "react";
+import React5, { forwardRef as forwardRef4 } from "react";
 import { useId as useId2 } from "@dxos/react-hooks";
-var AvatarGroupRoot = /* @__PURE__ */ forwardRef3(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
+var AvatarGroupRoot = /* @__PURE__ */ forwardRef4(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
   const { tx } = useThemeContext();
   const labelId = useId2("avatar-group__label", propsLabelId);
   const descriptionId = useId2("avatar-group__description", propsDescriptionId);
-  return /* @__PURE__ */ React4.createElement(Avatar.Root, {
+  return /* @__PURE__ */ React5.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     size,
     variant,
     inGroup: true
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "group",
     className: tx("avatar.group", "avatar-group", {}, classNames),
     "aria-labelledby": labelId,
@@ -352,7 +383,7 @@ var AvatarGroupRoot = /* @__PURE__ */ forwardRef3(({ labelId: propsLabelId, desc
 });
 var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
   const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
-  return /* @__PURE__ */ React4.createElement(Avatar.Root, {
+  return /* @__PURE__ */ React5.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     maskId,
@@ -363,10 +394,10 @@ var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest })
     ...rest
   }, children);
 };
-var AvatarGroupLabel = /* @__PURE__ */ forwardRef3(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupLabel = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { labelId, size } = useAvatarContext("AvatarGroupLabel");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React4.createElement("span", {
+  return /* @__PURE__ */ React5.createElement("span", {
     ...props,
     id: labelId,
     className: tx("avatar.groupLabel", "avatar-group__label", {
@@ -375,10 +406,10 @@ var AvatarGroupLabel = /* @__PURE__ */ forwardRef3(({ srOnly, classNames, childr
     }, classNames)
   }, children);
 });
-var AvatarGroupDescription = /* @__PURE__ */ forwardRef3(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupDescription = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { descriptionId } = useAvatarContext("AvatarGroupDescription");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React4.createElement("span", {
+  return /* @__PURE__ */ React5.createElement("span", {
     ...props,
     id: descriptionId,
     className: tx("avatar.groupDescription", "avatar-group__description", {
@@ -399,16 +430,16 @@ var AvatarGroupItem = {
 import { Dot } from "@phosphor-icons/react";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React6, { forwardRef as forwardRef5 } from "react";
+import React7, { forwardRef as forwardRef6 } from "react";
 
 // packages/ui/react-ui/src/components/Link/Link.tsx
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React5, { forwardRef as forwardRef4 } from "react";
-var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+import React6, { forwardRef as forwardRef5 } from "react";
+var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot3 : Primitive3.a;
-  return /* @__PURE__ */ React5.createElement(Root3, {
+  return /* @__PURE__ */ React6.createElement(Root3, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -418,47 +449,47 @@ var Link = /* @__PURE__ */ forwardRef4(({ asChild, variant, classNames, ...props
 });
 
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
-var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  return /* @__PURE__ */ React7.createElement(Root3, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbList = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : Primitive4.ol;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  return /* @__PURE__ */ React7.createElement(Root3, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : Primitive4.li;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  return /* @__PURE__ */ React7.createElement(Root3, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
+var BreadcrumbLink = /* @__PURE__ */ forwardRef6(({ asChild, ...props }, forwardedRef) => {
   const Root3 = asChild ? Slot4 : Link;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  return /* @__PURE__ */ React7.createElement(Root3, {
     ...props,
     ref: forwardedRef
   });
 });
-var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : "h1";
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  return /* @__PURE__ */ React7.createElement(Root3, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -467,12 +498,12 @@ var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...p
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React6.createElement(Primitive4.span, {
+  return /* @__PURE__ */ React7.createElement(Primitive4.span, {
     role: "separator",
     "aria-hidden": "true",
     ...props,
     className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-  }, children ?? /* @__PURE__ */ React6.createElement(Dot, {
+  }, children ?? /* @__PURE__ */ React7.createElement(Dot, {
     weight: "bold"
   }));
 };
@@ -489,19 +520,19 @@ var Breadcrumb = {
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React7, { forwardRef as forwardRef6 } from "react";
+import React8, { forwardRef as forwardRef7 } from "react";
 var BUTTON_GROUP_NAME = "ButtonGroup";
 var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ forwardRef6(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ forwardRef7(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
   const Root3 = asChild ? Slot5 : Primitive5.button;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  return /* @__PURE__ */ React8.createElement(Root3, {
     ref,
     ...props,
     "data-variant": variant,
@@ -520,18 +551,18 @@ var Button = /* @__PURE__ */ forwardRef6(({ classNames, children, density: props
   }, children);
 });
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const Root3 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React7.createElement(Root3, {
+  return /* @__PURE__ */ React8.createElement(Root3, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
       elevation
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React7.createElement(ButtonGroupProvider, {
+  }, /* @__PURE__ */ React8.createElement(ButtonGroupProvider, {
     inGroup: true
   }, children));
 });
@@ -539,14 +570,14 @@ ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/Toggle.tsx
 import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
-import React8, { forwardRef as forwardRef7 } from "react";
-var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(TogglePrimitive, {
+import React9, { forwardRef as forwardRef8 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef8(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(TogglePrimitive, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(Button, {
+  }, /* @__PURE__ */ React9.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
@@ -554,22 +585,22 @@ var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedCh
 
 // packages/ui/react-ui/src/components/Buttons/ToggleGroup.tsx
 import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
-import React9, { forwardRef as forwardRef8 } from "react";
-var ToggleGroup = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React9.createElement(ToggleGroupPrimitive, {
+import React10, { forwardRef as forwardRef9 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(ToggleGroupPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React9.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React10.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React9.createElement(ToggleGroupItemPrimitive, {
+var ToggleGroupItem = /* @__PURE__ */ forwardRef9(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(ToggleGroupItemPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React9.createElement(Button, {
+  }, /* @__PURE__ */ React10.createElement(Button, {
     variant,
     elevation,
     density,
@@ -582,14 +613,14 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density
 // 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 React11, { forwardRef as forwardRef9 } from "react";
+import React12, { forwardRef as forwardRef10 } from "react";
 
 // packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
-import React10, { createContext as createContext4 } from "react";
+import React11, { createContext as createContext4 } from "react";
 var ElevationContext = /* @__PURE__ */ createContext4({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React10.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React11.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
@@ -599,9 +630,9 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React10.cre
 var DialogRoot = DialogRootPrimitive;
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef9(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React12.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -609,9 +640,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef9(({ classNames, srOnly, ...props },
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef9(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React12.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -625,28 +656,28 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ forwardRef9(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React12.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__ */ React11.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React11.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React12.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React12.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -665,15 +696,15 @@ 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 React12, { forwardRef as forwardRef10 } from "react";
+import React13, { forwardRef as forwardRef11 } from "react";
 var AlertDialogRoot = AlertDialogRootPrimitive;
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React13.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -681,9 +712,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React13.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -696,27 +727,27 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React13.createElement(AlertDialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React13.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React12.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React13.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React12.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -737,33 +768,33 @@ 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 React13, { forwardRef as forwardRef11 } from "react";
+import React14, { forwardRef as forwardRef12 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Content, {
     collisionPadding: 8,
     ...props,
     className: tx("menu.content", "menu", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef11(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React13.createElement(Root3, {
+  return /* @__PURE__ */ React14.createElement(Root3, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -771,33 +802,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__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React14.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -822,36 +853,36 @@ var ContextMenu2 = {
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React14, { forwardRef as forwardRef12 } from "react";
+import React15, { forwardRef as forwardRef13 } from "react";
 var DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var useDropdownMenuContext2 = DropdownMenuPrimitive.useDropdownMenuContext;
 var useDropdownMenuMenuScope2 = DropdownMenuPrimitive.useDropdownMenuMenuScope;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Content, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Content, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("menu.content", "menu", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React14.createElement(Root3, {
+  return /* @__PURE__ */ React15.createElement(Root3, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -859,33 +890,33 @@ var DropdownMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props },
 });
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
-var DropdownMenuItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Item, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Label, {
+  return /* @__PURE__ */ React15.createElement(DropdownMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -911,11 +942,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 } from "@radix-ui/react-use-controllable-state";
-import React15, { forwardRef as forwardRef13, Fragment, useCallback } from "react";
+import React16, { forwardRef as forwardRef14, Fragment, useCallback } 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__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label3 = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React16.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -923,9 +954,9 @@ var Label3 = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...pr
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React16.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -933,10 +964,10 @@ var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef14(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React15.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React16.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -945,9 +976,9 @@ var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef14(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React16.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -955,7 +986,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef14(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -974,7 +1005,7 @@ var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React15.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React16.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -986,14 +1017,14 @@ var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef14(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const themeContextValue = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = themeContextValue;
-  return /* @__PURE__ */ React15.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React16.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1008,13 +1039,13 @@ var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef14(({ __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__ */ React15.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React16.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1029,7 +1060,7 @@ var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -1037,8 +1068,8 @@ var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsCheck
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  const Icon2 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
-  return /* @__PURE__ */ React15.createElement(CheckboxPrimitive, {
+  const Icon3 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
+  return /* @__PURE__ */ React16.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1052,16 +1083,16 @@ var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React16.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(Icon2, checked && {
+  }, /* @__PURE__ */ React16.createElement(Icon3, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef14(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
@@ -1069,7 +1100,7 @@ var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React15.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React16.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1083,7 +1114,7 @@ var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(SwitchThumbPrimitive, {
+  }, /* @__PURE__ */ React16.createElement(SwitchThumbPrimitive, {
     className: tx("input.switchThumb", "input--switch__thumb", {
       size
     })
@@ -1105,37 +1136,37 @@ 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 React17, { forwardRef as forwardRef14 } from "react";
+import React18, { forwardRef as forwardRef15 } 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 React16, { createContext as createContext7 } from "react";
+import React17, { createContext as createContext7 } from "react";
 var DensityContext = /* @__PURE__ */ createContext7({
   density: "coarse"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React16.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React17.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
 
 // packages/ui/react-ui/src/components/Lists/List.tsx
-var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ forwardRef15(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React17.createElement(DensityProvider, {
+  return /* @__PURE__ */ React18.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React17.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React18.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
+var ListItemEndcap = /* @__PURE__ */ forwardRef15(({ children, classNames, asChild, ...props }, forwardedRef) => {
   const Root3 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(Root3, {
+  return /* @__PURE__ */ React18.createElement(Root3, {
     ...!asChild && {
       role: "none"
     },
@@ -1149,7 +1180,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1157,10 +1188,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef15(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React17.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1168,26 +1199,26 @@ var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef15(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-  const Icon2 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React17.createElement(ListPrimitiveItemOpenTrigger, {
+  const Icon3 = open ? CaretDown : CaretRight;
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React17.createElement(Icon2, {
+  }, children || /* @__PURE__ */ React18.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef15(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React17.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React18.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1206,23 +1237,23 @@ var ListItem = {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-import React18, { forwardRef as forwardRef15 } from "react";
-var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React18.createElement(List, {
+import React19, { forwardRef as forwardRef16 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef16(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React18.createElement(List, {
+  return /* @__PURE__ */ React19.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React18.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+  return /* @__PURE__ */ React19.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1250,13 +1281,13 @@ import { createContextScope } from "@radix-ui/react-context";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef16 } from "react";
+import React20, { forwardRef as forwardRef17 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ forwardRef17(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot9 : Primitive8.div;
   const arrowNavigationAttrs = useArrowNavigationGroup({
@@ -1264,7 +1295,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React19.createElement(Root3, {
+  return /* @__PURE__ */ React20.createElement(Root3, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1276,7 +1307,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef17(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot9 : Primitive8.div;
   const pathParts = id.split(PATH_SEPARATOR);
@@ -1295,11 +1326,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ React19.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React20.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React19.createElement(Root3, {
+  }, /* @__PURE__ */ React20.createElement(Root3, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1314,15 +1345,15 @@ var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, c
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement("div", {
+  }, /* @__PURE__ */ React20.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
   }, children)));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef16(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef17(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1349,7 +1380,7 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React20, { forwardRef as forwardRef17, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import React21, { forwardRef as forwardRef18, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
@@ -1569,7 +1600,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React20.createElement(MainProvider, {
+  return /* @__PURE__ */ React21.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1582,7 +1613,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef18(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1601,10 +1632,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
     props.onKeyDown
   ]);
   const Root3 = isLg ? Primitive9.div : DialogContent2;
-  return /* @__PURE__ */ React20.createElement(DialogRoot2, {
+  return /* @__PURE__ */ React21.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React20.createElement(Root3, {
+  }, /* @__PURE__ */ React21.createElement(Root3, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1620,14 +1651,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React21.createElement(ElevationProvider, {
     elevation: "group"
   }, children)));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+  return /* @__PURE__ */ React21.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: navigationSidebarOpen,
@@ -1638,10 +1669,10 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+  return /* @__PURE__ */ React21.createElement(MainSidebar, {
     ...mover,
     ...props,
     open: complementarySidebarOpen,
@@ -1652,12 +1683,12 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef18(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  return /* @__PURE__ */ React21.createElement(Root3, {
     role,
     ...handlesFocus && {
       ...mover
@@ -1673,13 +1704,13 @@ var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, h
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -1695,7 +1726,7 @@ var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwar
     ref: forwardedRef
   });
 });
-var MainNotch = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+var MainNotch = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
   const notchElement = useRef(null);
@@ -1710,7 +1741,7 @@ var MainNotch = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwarde
     props?.onKeyDown
   ]);
   const mover = useLandmarkMover(handleKeyDown, "3");
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     role: "toolbar",
     ...mover,
     ...props,
@@ -1732,20 +1763,20 @@ var Main = {
 import { createContext as createContext9 } from "@radix-ui/react-context";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React21, { forwardRef as forwardRef18 } from "react";
+import React22, { forwardRef as forwardRef19 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef18(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef19(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root3 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React21.createElement(MessageProvider, {
+  return /* @__PURE__ */ React22.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React21.createElement(Root3, {
+  }, /* @__PURE__ */ React22.createElement(Root3, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1758,11 +1789,11 @@ var MessageRoot = /* @__PURE__ */ forwardRef18(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef18(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
   const Root3 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  return /* @__PURE__ */ React22.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1771,11 +1802,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef18(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef18(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef19(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
   const Root3 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  return /* @__PURE__ */ React22.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1793,36 +1824,36 @@ var Message = {
 import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
 import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
-import React22, { forwardRef as forwardRef19 } from "react";
+import React23, { forwardRef as forwardRef20 } from "react";
 var PopoverRoot = PopoverRootPrimitive;
 var PopoverPortal = PopoverPortalPrimitive;
 var PopoverTrigger = PopoverTriggerPrimitive;
 var PopoverAnchor = PopoverAnchorPrimitive;
 var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(PopoverArrowPrimitive, {
+  return /* @__PURE__ */ React23.createElement(PopoverArrowPrimitive, {
     ...props,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var PopoverContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(PopoverContentPrimitive, {
+  return /* @__PURE__ */ React23.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("popover.content", "popover", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React23.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var PopoverViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef20(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React22.createElement(Root3, {
+  return /* @__PURE__ */ React23.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1843,17 +1874,17 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/Status/Status.tsx
-import React23, { forwardRef as forwardRef20 } from "react";
-var Status = /* @__PURE__ */ forwardRef20(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+import React24, { forwardRef as forwardRef21 } from "react";
+var Status = /* @__PURE__ */ forwardRef21(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement("span", {
+  return /* @__PURE__ */ React24.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
       indeterminate
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React24.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate
@@ -1868,43 +1899,43 @@ var Status = /* @__PURE__ */ forwardRef20(({ 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 React24, { forwardRef as forwardRef21 } from "react";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+import React25, { forwardRef as forwardRef22 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef21(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef22(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveScrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React25.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -1921,99 +1952,99 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp, Check as Check2 } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React25, { forwardRef as forwardRef22 } from "react";
+import React26, { forwardRef as forwardRef23 } 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__ */ forwardRef22(({ children, placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef23(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(Button, props, /* @__PURE__ */ React25.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React26.createElement(Button, props, /* @__PURE__ */ React26.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, {
+  }, children), /* @__PURE__ */ React26.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("span", {
+  }, /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("span", {
     className: "w-1"
-  }), /* @__PURE__ */ React25.createElement(CaretDown2, {
+  }), /* @__PURE__ */ React26.createElement(CaretDown2, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   })))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Content, {
     ...props,
     className: tx("select.content", "select__content", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React26.createElement(CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React26.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
-var SelectItem = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef22(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef23(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
+  }, /* @__PURE__ */ React26.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React26.createElement(SelectPrimitive.ItemIndicator, {
     className: tx("select.itemIndicator", "option__indicator", {})
-  }, /* @__PURE__ */ React25.createElement(Check2, {
+  }, /* @__PURE__ */ React26.createElement(Check2, {
     weight: "bold"
   })));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React26.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -2042,10 +2073,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React26 from "react";
+import React27 from "react";
 var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React27.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -2057,11 +2088,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 React27, { forwardRef as forwardRef23 } from "react";
-var Tag = /* @__PURE__ */ forwardRef23(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import React28, { forwardRef as forwardRef24 } from "react";
+var Tag = /* @__PURE__ */ forwardRef24(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  return /* @__PURE__ */ React28.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -2074,58 +2105,58 @@ var Tag = /* @__PURE__ */ forwardRef23(({ 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 React28, { forwardRef as forwardRef24 } from "react";
+import React29, { forwardRef as forwardRef25 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React29.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React29.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React29.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React28.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React29.createElement(DensityProvider, {
     density: "fine"
   }, children)));
 });
-var ToastBody = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React29.createElement(Root3, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React29.createElement(Root3, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React29.createElement(Root3, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef25(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React29.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2147,47 +2178,47 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React29, { forwardRef as forwardRef25 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+import React30, { forwardRef as forwardRef26 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef26(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React30.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef26((props, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Link, {
+  }, /* @__PURE__ */ React30.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef25(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef26(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React30.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef25(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef26(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React30.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2197,9 +2228,9 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef25(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React30.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Separator4, {
+  }, /* @__PURE__ */ React30.createElement(Separator4, {
     orientation: "vertical",
     ...props
   }));
@@ -2215,22 +2246,22 @@ var Toolbar = {
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
-import React30, { forwardRef as forwardRef26 } from "react";
+import React31, { forwardRef as forwardRef27 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipArrowPrimitive, {
+  return /* @__PURE__ */ React31.createElement(TooltipArrowPrimitive, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React31.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
@@ -2249,7 +2280,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React31, { createContext as createContext10, useEffect as useEffect5 } from "react";
+import React32, { createContext as createContext10, useEffect as useEffect5 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2277,19 +2308,19 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ React31.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React32.createElement(ThemeContext.Provider, {
     value: {
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard()
     }
-  }, /* @__PURE__ */ React31.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React32.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React32.createElement(ElevationProvider, {
     elevation: rootElevation
-  }, /* @__PURE__ */ React31.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React32.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -2310,6 +2341,7 @@ export {
   DropdownMenu2 as DropdownMenu,
   ElevationContext,
   ElevationProvider,
+  Icon,
   Input,
   LIST_ITEM_NAME,
   LIST_NAME,