@dxos/react-ui 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

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

@@ -24,6 +24,19 @@ var useElevationContext = (propsElevation) => {
   return propsElevation ?? elevation;
 };
 
+// packages/ui/react-ui/src/hooks/useThemeContext.ts
+import { useContext as useContext3 } from "react";
+import { raise } from "@dxos/debug";
+var useThemeContext = () => useContext3(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
+
+// packages/ui/react-ui/src/hooks/useIconHref.ts
+var ICONS_URL = "/icons.svg";
+var useIconHref = (icon) => {
+  const { noCache } = useThemeContext();
+  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
+  return icon ? `${url}#${icon}` : void 0;
+};
+
 // packages/ui/react-ui/src/hooks/useSafeArea.ts
 import { useCallback, useState } from "react";
 import { useResize } from "@dxos/react-hooks";
@@ -48,12 +61,12 @@ var useSafeArea = () => {
 };
 
 // packages/ui/react-ui/src/hooks/useTranslationsContext.ts
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 
 // packages/ui/react-ui/src/components/ThemeProvider/TranslationsProvider.tsx
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { useEffect, createContext, useState as useState2, Suspense, useContext as useContext3 } from "react";
+import React, { useEffect, createContext, useState as useState2, Suspense, useContext as useContext4 } from "react";
 import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
@@ -81,7 +94,7 @@ var TranslationsContext = /* @__PURE__ */ createContext({
 });
 var useTranslation = (...args) => {
   const result = useI18NextTranslation(...args);
-  const { dtLocale } = useContext3(TranslationsContext);
+  const { dtLocale } = useContext4(TranslationsContext);
   return {
     ...result,
     dtLocale
@@ -115,12 +128,7 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
 };
 
 // packages/ui/react-ui/src/hooks/useTranslationsContext.ts
-var useTranslationsContext = () => useContext4(TranslationsContext);
-
-// packages/ui/react-ui/src/hooks/useThemeContext.ts
-import { useContext as useContext5 } from "react";
-import { raise } from "@dxos/debug";
-var useThemeContext = () => useContext5(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
+var useTranslationsContext = () => useContext5(TranslationsContext);
 
 // packages/ui/react-ui/src/hooks/useVisualViewport.ts
 import { useCallback as useCallback2, useState as useState3 } from "react";
@@ -168,122 +176,46 @@ var AnchoredOverflow = {
 };
 
 // packages/ui/react-ui/src/components/Avatars/Avatar.tsx
-import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
+import "@dxos/lit-ui/dx-avatar.pcss";
+import { createComponent } from "@lit/react";
 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 React4, { forwardRef as forwardRef3 } from "react";
+import React3, { forwardRef as forwardRef2 } from "react";
+import { DxAvatar as NaturalDxAvatar } from "@dxos/lit-ui";
 import { useId } from "@dxos/react-hooks";
-
-// packages/ui/react-ui/src/components/Icon/Icon.tsx
-import React3, { forwardRef as forwardRef2, memo } from "react";
-var ICONS_URL = "/icons.svg";
-var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx, noCache } = useThemeContext();
-  const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
-  return /* @__PURE__ */ React3.createElement("svg", {
-    ...props,
-    className: tx("icon.root", "icon", {
-      size
-    }, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React3.createElement("use", {
-    href: `${url}#${icon}`
-  }));
-}));
-
-// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
+import { mx } from "@dxos/react-ui-theme";
 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 }) => {
+var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
   const labelId = useId("avatar__label", propsLabelId);
   const descriptionId = useId("avatar__description", propsDescriptionId);
-  const maskId = useId("avatar__mask", propsMaskId);
-  return /* @__PURE__ */ React4.createElement(AvatarProvider, {
+  return /* @__PURE__ */ React3.createElement(AvatarProvider, {
     labelId,
-    descriptionId,
-    maskId,
-    size,
-    variant,
-    status,
-    animation,
-    inGroup,
-    hue
+    descriptionId
   }, children);
 };
-var rx = "0.25rem";
-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);
-  const sizePx = numericSize * 4;
-  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__ */ React4.createElement(AvatarRootPrimitive, {
-    role: "img",
-    ...props,
-    className: tx("avatar.root", "avatar", {
-      size,
-      variant,
-      inGroup
-    }, classNames),
-    ref: forwardedRef,
-    ...!inGroup && {
-      "aria-labelledby": labelId,
-      "aria-describedby": descriptionId
-    }
-  }, /* @__PURE__ */ React4.createElement("svg", {
-    viewBox: `0 0 ${sizePx} ${sizePx}`,
-    width: sizePx,
-    height: sizePx,
-    className: tx("avatar.frame", "avatar__frame", {
-      variant
-    })
-  }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("mask", {
-    id: maskId
-  }, variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
-    fill: "white",
-    cx: "50%",
-    cy: "50%",
-    r
-  }) : /* @__PURE__ */ React4.createElement("rect", {
-    fill: "white",
-    width: 2 * r,
-    height: 2 * r,
-    x: ringGap + ringWidth,
-    y: ringGap + ringWidth,
-    rx
-  }))), variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r,
-    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)"
-  }) : /* @__PURE__ */ React4.createElement("rect", {
-    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)",
-    x: ringGap + ringWidth,
-    y: ringGap + ringWidth,
-    width: 2 * r,
-    height: 2 * r,
-    rx
-  }), children), /* @__PURE__ */ React4.createElement("span", {
-    role: "none",
-    className: tx("avatar.ring", "avatar__ring", {
-      size,
-      variant,
-      status,
-      animation
-    }),
-    style: {
-      borderWidth: ringWidth + "px"
-    }
-  }));
+var DxAvatar = createComponent({
+  tagName: "dx-avatar",
+  elementClass: NaturalDxAvatar,
+  react: React3
 });
-var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarContent = ({ icon, classNames, ...props }) => {
+  const href = useIconHref(icon);
+  const { labelId, descriptionId } = useAvatarContext("AvatarContent");
+  return /* @__PURE__ */ React3.createElement(DxAvatar, {
+    ...props,
+    icon: href,
+    labelId,
+    "aria-describedby": descriptionId,
+    rootClassName: mx(classNames)
+  });
+};
+var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React4.createElement(Root5, {
+  return /* @__PURE__ */ React3.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -292,11 +224,11 @@ var AvatarLabel = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ..
     }, classNames)
   });
 });
-var AvatarDescription = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React4.createElement(Root5, {
+  return /* @__PURE__ */ React3.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -305,162 +237,27 @@ var AvatarDescription = /* @__PURE__ */ forwardRef3(({ asChild, srOnly, classNam
     }, classNames)
   });
 });
-var AvatarMaskedImage = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
-  const { maskId } = useAvatarContext("AvatarFallback");
-  return /* @__PURE__ */ React4.createElement("image", {
-    width: "100%",
-    height: "100%",
-    ...props,
-    mask: `url(#${maskId})`,
-    ref: forwardedRef,
-    preserveAspectRatio: "xMidYMid slice"
-  });
-});
-var AvatarMaskedText = (props) => {
-  const { maskId, size } = useAvatarContext("AvatarFallback");
-  const { large } = props;
-  const fontScale = (large ? 4 : 3) * (1 / 1.612);
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React4.createElement("text", {
-    x: "50%",
-    y: "50%",
-    className: tx("avatar.fallbackText", "avatar__fallback-text"),
-    textAnchor: "middle",
-    alignmentBaseline: "central",
-    fontSize: size === "px" ? "200%" : size * fontScale,
-    mask: `url(#${maskId})`
-  }, props.children);
-};
-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__ */ React4.createElement(AvatarFallbackPrimitive, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
-    ...props,
-    ref: 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__ */ React4.createElement(AvatarFallbackPrimitive, {
-    delayMs,
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(React4.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React4.createElement(AvatarMaskedImage, {
-    ...props,
-    ref: forwardedRef
-  }), text && /* @__PURE__ */ React4.createElement(AvatarMaskedText, {
-    large: !isTextOnly
-  }, text.toLocaleUpperCase())));
-});
 var Avatar = {
   Root: AvatarRoot,
-  Frame: AvatarFrame,
-  Image: AvatarImage,
-  Icon: AvatarIcon,
-  Fallback: AvatarFallback,
+  Content: AvatarContent,
   Label: AvatarLabel,
   Description: AvatarDescription
 };
 
-// packages/ui/react-ui/src/components/Avatars/AvatarGroup.tsx
-import React5, { forwardRef as forwardRef4 } from "react";
-import { useId as useId2 } from "@dxos/react-hooks";
-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__ */ React5.createElement(Avatar.Root, {
-    labelId,
-    descriptionId,
-    size,
-    variant,
-    inGroup: true
-  }, /* @__PURE__ */ React5.createElement("div", {
-    role: "group",
-    className: tx("avatar.group", "avatar-group", {}, classNames),
-    "aria-labelledby": labelId,
-    "aria-describedby": descriptionId,
-    ref: forwardedRef
-  }, children));
-});
-var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
-  const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
-  return /* @__PURE__ */ React5.createElement(Avatar.Root, {
-    labelId,
-    descriptionId,
-    maskId,
-    status,
-    size: size ?? contextSize,
-    variant: variant ?? contextVariant,
-    inGroup: true,
-    ...rest
-  }, children);
-};
-var AvatarGroupLabel = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { labelId, size } = useAvatarContext("AvatarGroupLabel");
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React5.createElement("span", {
-    ...props,
-    id: labelId,
-    className: tx("avatar.groupLabel", "avatar-group__label", {
-      srOnly,
-      size
-    }, classNames)
-  }, children);
-});
-var AvatarGroupDescription = /* @__PURE__ */ forwardRef4(({ srOnly, classNames, children, ...props }, forwardedRef) => {
-  const { descriptionId } = useAvatarContext("AvatarGroupDescription");
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React5.createElement("span", {
-    ...props,
-    id: descriptionId,
-    className: tx("avatar.groupDescription", "avatar-group__description", {
-      srOnly
-    }, classNames)
-  }, children);
-});
-var AvatarGroup = {
-  Root: AvatarGroupRoot,
-  Label: AvatarGroupLabel,
-  Description: AvatarGroupDescription
-};
-var AvatarGroupItem = {
-  Root: AvatarGroupItemRoot
-};
-
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
 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 React7, { forwardRef as forwardRef6 } from "react";
+import React5, { forwardRef as forwardRef4 } 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 React6, { forwardRef as forwardRef5 } from "react";
-var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+import React4, { forwardRef as forwardRef3 } from "react";
+var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot3 : Primitive3.a;
-  return /* @__PURE__ */ React6.createElement(Root5, {
+  return /* @__PURE__ */ React4.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -470,47 +267,47 @@ var Link = /* @__PURE__ */ forwardRef5(({ asChild, variant, classNames, ...props
 });
 
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
-var BreadcrumbRoot = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React7.createElement(Root5, {
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbList = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot4 : Primitive4.ol;
-  return /* @__PURE__ */ React7.createElement(Root5, {
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbListItem = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot4 : Primitive4.li;
-  return /* @__PURE__ */ React7.createElement(Root5, {
+  return /* @__PURE__ */ React5.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbLink = /* @__PURE__ */ forwardRef6(({ asChild, ...props }, forwardedRef) => {
+var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
   const Root5 = asChild ? Slot4 : Link;
-  return /* @__PURE__ */ React7.createElement(Root5, {
+  return /* @__PURE__ */ React5.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
-var BreadcrumbCurrent = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot4 : "h1";
-  return /* @__PURE__ */ React7.createElement(Root5, {
+  return /* @__PURE__ */ React5.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -519,12 +316,12 @@ var BreadcrumbCurrent = /* @__PURE__ */ forwardRef6(({ asChild, classNames, ...p
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React7.createElement(Primitive4.span, {
+  return /* @__PURE__ */ React5.createElement(Primitive4.span, {
     role: "separator",
     "aria-hidden": "true",
     ...props,
     className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-  }, children ?? /* @__PURE__ */ React7.createElement(Dot, {
+  }, children ?? /* @__PURE__ */ React5.createElement(Dot, {
     weight: "bold"
   }));
 };
@@ -541,19 +338,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 React8, { forwardRef as forwardRef7, memo as memo2 } from "react";
+import React6, { forwardRef as forwardRef5, memo } from "react";
 var BUTTON_GROUP_NAME = "ButtonGroup";
 var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef5(({ 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 Root5 = asChild ? Slot5 : Primitive5.button;
-  return /* @__PURE__ */ React8.createElement(Root5, {
+  return /* @__PURE__ */ React6.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -572,29 +369,45 @@ var Button = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef7(({ classNames, ch
   }, children);
 }));
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React8.createElement(Root5, {
+  return /* @__PURE__ */ React6.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
       elevation
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React8.createElement(ButtonGroupProvider, {
+  }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
     inGroup: true
   }, children));
 });
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-import React10, { forwardRef as forwardRef9, useState as useState4 } from "react";
+import React9, { forwardRef as forwardRef8, useState as useState4 } from "react";
+
+// packages/ui/react-ui/src/components/Icon/Icon.tsx
+import React7, { forwardRef as forwardRef6, memo as memo2 } from "react";
+var Icon = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ icon, classNames, size, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const href = useIconHref(icon);
+  return /* @__PURE__ */ React7.createElement("svg", {
+    ...props,
+    className: tx("icon.root", "icon", {
+      size
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React7.createElement("use", {
+    href
+  }));
+}));
 
 // 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 React9, { forwardRef as forwardRef8 } from "react";
+import React8, { forwardRef as forwardRef7 } from "react";
 
 // packages/ui/react-ui/src/hooks/useSafeCollisionPadding.ts
 import { useMemo } from "react";
@@ -621,19 +434,19 @@ var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef7(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React9.createElement(TooltipArrowPrimitive, {
+  return /* @__PURE__ */ React8.createElement(TooltipArrowPrimitive, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef8(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef7(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React9.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React8.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     ...props,
     collisionPadding: safeCollisionPadding,
@@ -653,23 +466,23 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
   const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
   if (noTooltip) {
-    return /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+    return /* @__PURE__ */ React9.createElement(LabelledIconButton, {
       ...props,
       ref: forwardedRef
     });
   }
-  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, {
+  const content = /* @__PURE__ */ React9.createElement(Tooltip.Content, {
     ...zIndex && {
       style: {
         zIndex
       }
     },
     side: tooltipSide
-  }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
+  }, props.label, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null));
+  return /* @__PURE__ */ React9.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip?.current) {
@@ -679,48 +492,48 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ noTooltip, tooltipPortal = t
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+  }, /* @__PURE__ */ React9.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
-  })), tooltipPortal ? /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, content) : content);
+  })), tooltipPortal ? /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(Button, {
+  return /* @__PURE__ */ React9.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", "iconButton", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React10.createElement(Icon, {
+  }, /* @__PURE__ */ React9.createElement(Icon, {
     icon,
     size,
     classNames: iconClassNames
-  }), /* @__PURE__ */ React10.createElement("span", {
+  }), /* @__PURE__ */ React9.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label), caretDown && /* @__PURE__ */ React10.createElement(Icon, {
+  }, label), caretDown && /* @__PURE__ */ React9.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
-var IconButton = /* @__PURE__ */ forwardRef9((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React10.createElement(IconOnlyButton, {
+var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
   ...props,
   ref: forwardedRef
-}) : /* @__PURE__ */ React10.createElement(LabelledIconButton, {
+}) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
   ...props,
   ref: forwardedRef
 }));
 
 // packages/ui/react-ui/src/components/Buttons/Toggle.tsx
 import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
-import React11, { forwardRef as forwardRef10 } from "react";
-var Toggle = /* @__PURE__ */ forwardRef10(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React11.createElement(TogglePrimitive, {
+import React10, { forwardRef as forwardRef9 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React10.createElement(TogglePrimitive, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ React11.createElement(Button, {
+  }, /* @__PURE__ */ React10.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
@@ -728,22 +541,22 @@ var Toggle = /* @__PURE__ */ forwardRef10(({ defaultPressed, pressed, onPressedC
 
 // packages/ui/react-ui/src/components/Buttons/ToggleGroup.tsx
 import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
-import React12, { forwardRef as forwardRef11 } from "react";
-var ToggleGroup = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement(ToggleGroupPrimitive, {
+import React11, { forwardRef as forwardRef10 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React11.createElement(ToggleGroupPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React11.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React12.createElement(ToggleGroupItemPrimitive, {
+var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React11.createElement(ToggleGroupItemPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Button, {
+  }, /* @__PURE__ */ React11.createElement(Button, {
     variant,
     elevation,
     density,
@@ -754,7 +567,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, densit
 });
 
 // packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
-import React13, { createContext as createContext4, useCallback as useCallback3, useContext as useContext6, useState as useState5 } from "react";
+import React12, { createContext as createContext4, useCallback as useCallback3, useContext as useContext6, useState as useState5 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -767,7 +580,7 @@ var ClipboardProvider = ({ children }) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React13.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React12.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -776,12 +589,12 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
-import React17, { useState as useState6 } from "react";
-import { mx } from "@dxos/react-ui-theme";
+import React16, { useState as useState6 } from "react";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React16, { createContext as createContext7, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import React15, { createContext as createContext7, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -789,22 +602,22 @@ var hasIosKeyboard = () => {
 };
 
 // packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
-import React14, { createContext as createContext5 } from "react";
+import React13, { createContext as createContext5 } from "react";
 var DensityContext = /* @__PURE__ */ createContext5({
   density: "fine"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React14.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React13.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
 
 // packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
-import React15, { createContext as createContext6 } from "react";
+import React14, { createContext as createContext6 } from "react";
 var ElevationContext = /* @__PURE__ */ createContext6({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React15.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React14.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
@@ -833,15 +646,15 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
     safeAreaPadding,
     rest
   ]);
-  return /* @__PURE__ */ React16.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React15.createElement(ThemeContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React16.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React15.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
     elevation: "base"
-  }, /* @__PURE__ */ React16.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React15.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -859,7 +672,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ React17.createElement(Button, {
+  return /* @__PURE__ */ React16.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -867,21 +680,21 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React17.createElement("div", {
+  }, /* @__PURE__ */ React16.createElement("div", {
     role: "none",
-    className: mx("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React17.createElement("span", {
+    className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React16.createElement("span", {
     className: "pli-1"
-  }, t("copy label")), /* @__PURE__ */ React17.createElement(Icon, {
+  }, t("copy label")), /* @__PURE__ */ React16.createElement(Icon, {
     icon: "ph--copy--regular",
     size: 5,
     ...iconProps
-  })), /* @__PURE__ */ React17.createElement("div", {
+  })), /* @__PURE__ */ React16.createElement("div", {
     role: "none",
-    className: mx("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React17.createElement("span", {
+    className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
+  }, /* @__PURE__ */ React16.createElement("span", {
     className: "pli-1"
-  }, t("copy success label")), /* @__PURE__ */ React17.createElement(Icon, {
+  }, t("copy success label")), /* @__PURE__ */ React16.createElement(Icon, {
     icon: "ph--check--regular",
     size: 5,
     ...iconProps
@@ -893,26 +706,26 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
   const [open, setOpen] = useState6(false);
-  return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
+  return /* @__PURE__ */ React16.createElement(Tooltip.Root, {
     delayDuration: 1500,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React17.createElement(Tooltip.Portal, null, /* @__PURE__ */ React17.createElement(Tooltip.Content, {
+  }, /* @__PURE__ */ React16.createElement(Tooltip.Portal, null, /* @__PURE__ */ React16.createElement(Tooltip.Content, {
     side: "bottom",
     sideOffset: 12
-  }, /* @__PURE__ */ React17.createElement("span", null, label), /* @__PURE__ */ React17.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React17.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React16.createElement("span", null, label), /* @__PURE__ */ React16.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React16.createElement(Tooltip.Trigger, {
     "aria-label": label,
     ...props,
     onClick: () => setTextValue(value).then(() => setOpen(true)),
     "data-testid": "copy-invitation",
     asChild: true
-  }, /* @__PURE__ */ React17.createElement(Button, {
+  }, /* @__PURE__ */ React16.createElement(Button, {
     variant,
     classNames: [
       "inline-flex flex-col justify-center",
       classNames
     ]
-  }, /* @__PURE__ */ React17.createElement(Icon, {
+  }, /* @__PURE__ */ React16.createElement(Icon, {
     icon: "ph--copy--regular",
     size: 5,
     ...iconProps
@@ -929,15 +742,15 @@ var Clipboard = {
 // packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
-import React18, { forwardRef as forwardRef12 } from "react";
-var DialogRoot = (props) => /* @__PURE__ */ React18.createElement(ElevationProvider, {
+import React17, { forwardRef as forwardRef11 } from "react";
+var DialogRoot = (props) => /* @__PURE__ */ React17.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React18.createElement(DialogRootPrimitive, props));
+}, /* @__PURE__ */ React17.createElement(DialogRootPrimitive, props));
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React17.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -945,9 +758,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React17.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -961,22 +774,22 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React17.createElement(DialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React17.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React18.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React17.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
@@ -999,17 +812,17 @@ 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 createContext9 } from "@radix-ui/react-context";
-import React19, { forwardRef as forwardRef13 } from "react";
-var AlertDialogRoot = (props) => /* @__PURE__ */ React19.createElement(ElevationProvider, {
+import React18, { forwardRef as forwardRef12 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React18.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React19.createElement(AlertDialogRootPrimitive, props));
+}, /* @__PURE__ */ React18.createElement(AlertDialogRootPrimitive, props));
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React18.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -1017,9 +830,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React18.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -1032,22 +845,22 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext9(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef13(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React18.createElement(AlertDialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ React19.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React19.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React18.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
@@ -1072,15 +885,15 @@ 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 React20, { forwardRef as forwardRef14 } from "react";
+import React19, { forwardRef as forwardRef13 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef13(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Content, {
     ...props,
     collisionPadding: safeCollisionPadding,
     className: tx("menu.content", "menu", {
@@ -1089,18 +902,18 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef14(({ classNames, children, c
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef13(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot6 : Primitive6.div;
-  return /* @__PURE__ */ React20.createElement(Root5, {
+  return /* @__PURE__ */ React19.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -1108,33 +921,33 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, f
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef14(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef13(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -1159,13 +972,13 @@ var ContextMenu2 = {
 import { composeEventHandlers } from "@radix-ui/primitive";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { createContextScope } from "@radix-ui/react-context";
-import { useId as useId3 } from "@radix-ui/react-id";
+import { useId as useId2 } from "@radix-ui/react-id";
 import * as MenuPrimitive from "@radix-ui/react-menu";
 import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React21, { useRef, useCallback as useCallback4, forwardRef as forwardRef15, useEffect as useEffect3 } from "react";
+import React20, { useRef, useCallback as useCallback4, forwardRef as forwardRef14, useEffect as useEffect3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1181,18 +994,18 @@ var DropdownMenuRoot = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React21.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ React20.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
-    triggerId: useId3(),
+    triggerId: useId2(),
     triggerRef,
-    contentId: useId3(),
+    contentId: useId2(),
     open,
     onOpenChange: setOpen,
     onOpenToggle: useCallback4(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ React21.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ React20.createElement(MenuPrimitive.Root, {
     ...menuScope,
     open,
     onOpenChange: setOpen,
@@ -1202,14 +1015,14 @@ var DropdownMenuRoot = (props) => {
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React21.createElement(Primitive7.button, {
+  }, /* @__PURE__ */ React20.createElement(Primitive7.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1262,7 +1075,7 @@ var DropdownMenuVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1272,23 +1085,23 @@ var PORTAL_NAME = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef14(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React21.createElement(Root5, {
+  return /* @__PURE__ */ React20.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var CONTENT_NAME = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
@@ -1296,7 +1109,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = useRef(false);
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Content, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
@@ -1336,10 +1149,10 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) =>
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1347,11 +1160,11 @@ var DropdownMenuGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
@@ -1360,11 +1173,11 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", "menu__item", {}, classNames),
@@ -1373,11 +1186,11 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
@@ -1386,10 +1199,10 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef15((props, forwardedRef
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1397,10 +1210,10 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.RadioItem, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioItem, {
     ...menuScope,
     ...radioItemProps,
     ref: forwardedRef
@@ -1408,10 +1221,10 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1419,11 +1232,11 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef15((props, forwardedRe
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", "menu__item", {}, classNames),
@@ -1432,11 +1245,11 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
@@ -1452,17 +1265,17 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1470,10 +1283,10 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef15((props, forwardedRef)
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1516,11 +1329,12 @@ var useDropdownMenuMenuScope = useMenuScope;
 // packages/ui/react-ui/src/components/Input/Input.tsx
 import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React22, { forwardRef as forwardRef16, useCallback as useCallback5 } from "react";
+import React21, { forwardRef as forwardRef15, useCallback as useCallback5 } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
-var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var Label3 = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React21.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -1528,9 +1342,9 @@ var Label3 = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...pr
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React21.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -1538,10 +1352,10 @@ var Description = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef15(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React22.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React21.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -1550,9 +1364,9 @@ var Validation = /* @__PURE__ */ forwardRef16(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef16(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef15(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React21.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -1560,7 +1374,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef16(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef15(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -1579,7 +1393,7 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React22.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React21.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -1591,14 +1405,14 @@ var PinInput = /* @__PURE__ */ forwardRef16(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef15(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const themeContextValue = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = themeContextValue;
-  return /* @__PURE__ */ React22.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React21.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1613,13 +1427,13 @@ var TextInput = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef15(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React22.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React21.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1634,7 +1448,7 @@ var TextArea = /* @__PURE__ */ forwardRef16(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef15(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -1642,7 +1456,7 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React21.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1656,7 +1470,7 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(Icon, {
+  }, /* @__PURE__ */ React21.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
     classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size,
@@ -1664,16 +1478,16 @@ var Checkbox = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsCheck
     })
   }));
 });
-var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef15(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState2({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React22.createElement("input", {
+  return /* @__PURE__ */ React21.createElement("input", {
     type: "checkbox",
-    className: "dx-checkbox--switch dx-focus-ring",
+    className: mx3("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -1704,11 +1518,11 @@ 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 React24, { forwardRef as forwardRef17 } from "react";
+import React23, { forwardRef as forwardRef16 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
 
 // packages/ui/react-ui/src/components/Lists/ListDropIndicator.tsx
-import React23 from "react";
+import React22 from "react";
 var edgeToOrientationMap = {
   top: "horizontal",
   bottom: "horizontal",
@@ -1730,7 +1544,7 @@ var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
@@ -1746,22 +1560,22 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
 };
 
 // packages/ui/react-ui/src/components/Lists/List.tsx
-var List = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ forwardRef16(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React24.createElement(DensityProvider, {
+  return /* @__PURE__ */ React23.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React24.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React23.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChild, ...props }, forwardedRef) => {
+var ListItemEndcap = /* @__PURE__ */ forwardRef16(({ children, classNames, asChild, ...props }, forwardedRef) => {
   const Root5 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(Root5, {
+  return /* @__PURE__ */ React23.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1775,7 +1589,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef17(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1783,10 +1597,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef16(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React24.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1794,26 +1608,26 @@ var ListItemHeading = /* @__PURE__ */ forwardRef17(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef17(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef16(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   const Icon3 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React24.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React24.createElement(Icon3, {
+  }, children || /* @__PURE__ */ React23.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef16(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React24.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React23.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1833,10 +1647,10 @@ var ListItem = {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-import React26, { forwardRef as forwardRef18 } from "react";
+import React25, { forwardRef as forwardRef17 } from "react";
 
 // packages/ui/react-ui/src/components/Lists/TreeDropIndicator.tsx
-import React25 from "react";
+import React24 from "react";
 var edgeToOrientationMap2 = {
   "reorder-above": "sibling",
   "reorder-below": "sibling",
@@ -1866,7 +1680,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   if (isBlocked) {
     return null;
   }
-  return /* @__PURE__ */ React25.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -1881,22 +1695,22 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
 };
 
 // packages/ui/react-ui/src/components/Lists/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React26.createElement(List, {
+var TreeRoot = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React25.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef18(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef17(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React26.createElement(List, {
+  return /* @__PURE__ */ React25.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
-  return /* @__PURE__ */ React26.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
+  return /* @__PURE__ */ React25.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1920,18 +1734,18 @@ var TreeItem = {
 };
 
 // packages/ui/react-ui/src/components/Lists/Treegrid.tsx
-import { useFocusableGroup, useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
 import { createContextScope as createContextScope2 } 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 useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React27, { forwardRef as forwardRef19 } from "react";
+import React26, { forwardRef as forwardRef18 } from "react";
 var TREEGRID_ROW_NAME = "TreegridRow";
 var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ forwardRef18(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot9 : Primitive8.div;
   const arrowNavigationAttrs = useArrowNavigationGroup({
@@ -1939,7 +1753,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ React27.createElement(Root5, {
+  return /* @__PURE__ */ React26.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1951,7 +1765,7 @@ var TreegridRoot = /* @__PURE__ */ forwardRef19(({ asChild, classNames, children
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ forwardRef18(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot9 : Primitive8.div;
   const pathParts = id.split(PATH_SEPARATOR);
@@ -1970,11 +1784,11 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ React27.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ React26.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ React27.createElement(Root5, {
+  }, /* @__PURE__ */ React26.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1989,15 +1803,15 @@ var TreegridRow = /* @__PURE__ */ forwardRef19(({ __treegridRowScope, asChild, c
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ React27.createElement("div", {
+  }, /* @__PURE__ */ React26.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
   }, children)));
 });
-var TreegridCell = /* @__PURE__ */ forwardRef19(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ forwardRef18(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement("div", {
+  return /* @__PURE__ */ React26.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -2017,13 +1831,12 @@ var Treegrid = {
 };
 
 // packages/ui/react-ui/src/components/Main/Main.tsx
-import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { createContext as createContext10 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React28, { forwardRef as forwardRef20, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState8 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState8 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
@@ -2147,17 +1960,17 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
   }, [
     propsOnKeyDown
   ]);
-  const focusableAttrs = useFocusableGroup2({
+  const focusableGroupAttrs = window ? {} : {
     tabBehavior: "limited",
     ignoreDefaultKeydown: {
       Tab: true
     }
-  });
+  };
   return {
     onKeyDown: handleKeyDown,
     [landmarkAttr]: landmark,
     tabIndex: 0,
-    ...focusableAttrs
+    ...focusableGroupAttrs
   };
 };
 var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
@@ -2237,7 +2050,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React28.createElement(MainProvider, {
+  return /* @__PURE__ */ React27.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -2250,7 +2063,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef19(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -2270,13 +2083,13 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     props.onKeyDown
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
-  return /* @__PURE__ */ React28.createElement(DialogRoot2, {
+  return /* @__PURE__ */ React27.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
-  }, !isLg && /* @__PURE__ */ React28.createElement(DialogTitle2, {
+  }, !isLg && /* @__PURE__ */ React27.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React28.createElement(Root5, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React27.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2294,10 +2107,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React28.createElement(MainSidebar, {
+  return /* @__PURE__ */ React27.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: navigationSidebarState,
@@ -2308,10 +2121,10 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React28.createElement(MainSidebar, {
+  return /* @__PURE__ */ React27.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: complementarySidebarState,
@@ -2322,12 +2135,12 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef19(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React28.createElement(Root5, {
+  return /* @__PURE__ */ React27.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
@@ -2343,13 +2156,13 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement("div", {
+  return /* @__PURE__ */ React27.createElement("div", {
     onClick: () => {
       setNavigationSidebarState("collapsed");
       setComplementarySidebarState("collapsed");
@@ -2377,20 +2190,20 @@ var Main = {
 import { createContext as createContext11 } from "@radix-ui/react-context";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React29, { forwardRef as forwardRef21 } from "react";
-import { useId as useId4 } from "@dxos/react-hooks";
+import React28, { forwardRef as forwardRef20 } from "react";
+import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef20(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const titleId = useId4("message__title", propsTitleId);
-  const descriptionId = useId4("message__description", propsDescriptionId);
+  const titleId = useId3("message__title", propsTitleId);
+  const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React29.createElement(MessageProvider, {
+  return /* @__PURE__ */ React28.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React29.createElement(Root5, {
+  }, /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2403,11 +2216,11 @@ var MessageRoot = /* @__PURE__ */ forwardRef21(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.h2;
-  return /* @__PURE__ */ React29.createElement(Root5, {
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2416,11 +2229,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef21(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef21(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef20(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
   const Root5 = asChild ? Slot11 : Primitive10.p;
-  return /* @__PURE__ */ React29.createElement(Root5, {
+  return /* @__PURE__ */ React28.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2441,7 +2254,7 @@ import { createContextScope as createContextScope3 } from "@radix-ui/react-conte
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { useFocusGuards } from "@radix-ui/react-focus-guards";
 import { FocusScope } from "@radix-ui/react-focus-scope";
-import { useId as useId5 } from "@radix-ui/react-id";
+import { useId as useId4 } from "@radix-ui/react-id";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import { createPopperScope } from "@radix-ui/react-popper";
 import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
@@ -2450,7 +2263,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback8, useState as useState9, useEffect as useEffect6 } from "react";
+import React29, { forwardRef as forwardRef21, useRef as useRef3, useCallback as useCallback8, useState as useState9, useEffect as useEffect6 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -2468,9 +2281,9 @@ var PopoverRoot = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React30.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React29.createElement(PopoverProvider, {
     scope: __scopePopover,
-    contentId: useId5(),
+    contentId: useId4(),
     triggerRef,
     open,
     onOpenChange: setOpen,
@@ -2485,7 +2298,7 @@ var PopoverRoot = (props) => {
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -2497,7 +2310,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2505,12 +2318,12 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "PopoverTrigger";
-var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverTrigger = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ React30.createElement(Primitive11.button, {
+  const trigger = /* @__PURE__ */ React29.createElement(Primitive11.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2520,7 +2333,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2536,7 +2349,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2549,34 +2362,34 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React30.createElement(PortalProvider, {
+  return /* @__PURE__ */ React29.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React30.createElement(Presence, {
+  }, /* @__PURE__ */ React29.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React30.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React29.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "PopoverContent";
-var PopoverContent = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React30.createElement(Presence, {
+  return /* @__PURE__ */ React29.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React30.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React29.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React30.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React29.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const contentRef = useRef3(null);
   const composedRefs = useComposedRefs(forwardedRef, contentRef);
@@ -2587,10 +2400,10 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React30.createElement(RemoveScroll, {
+  return /* @__PURE__ */ React29.createElement(RemoveScroll, {
     as: Slot12,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React30.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // we make sure we're not trapping once it's been closed
@@ -2618,11 +2431,11 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) =>
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
   const hasInteractedOutsideRef = useRef3(false);
   const hasPointerDownOutsideRef = useRef3(false);
-  return /* @__PURE__ */ React30.createElement(PopoverContentImpl, {
+  return /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2657,7 +2470,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef22((props, forwardedRef)
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -2665,13 +2478,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   useFocusGuards();
-  return /* @__PURE__ */ React30.createElement(FocusScope, {
+  return /* @__PURE__ */ React29.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React30.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React29.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2679,7 +2492,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React30.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React29.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -2704,10 +2517,10 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   })));
 });
 var CLOSE_NAME = "PopoverClose";
-var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React30.createElement(Primitive11.button, {
+  return /* @__PURE__ */ React29.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2716,11 +2529,11 @@ var PopoverClose = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "PopoverArrow";
-var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
@@ -2728,10 +2541,10 @@ var PopoverArrow = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ forwardRef22(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef21(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React30.createElement(Root5, {
+  return /* @__PURE__ */ React29.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -2754,10 +2567,10 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/Status/Status.tsx
-import React31, { forwardRef as forwardRef23 } from "react";
-var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+import React30, { forwardRef as forwardRef22 } from "react";
+var Status = /* @__PURE__ */ forwardRef22(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React31.createElement("span", {
+  return /* @__PURE__ */ React30.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
@@ -2765,7 +2578,7 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React31.createElement("span", {
+  }, /* @__PURE__ */ React30.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate,
@@ -2781,43 +2594,43 @@ var Status = /* @__PURE__ */ forwardRef23(({ classNames, children, progress = 0,
 
 // packages/ui/react-ui/src/components/ScrollArea/ScrollArea.tsx
 import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
-import React32, { forwardRef as forwardRef24 } from "react";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+import React31, { forwardRef as forwardRef23 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef24(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef23(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveScrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React32.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -2834,33 +2647,33 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React33, { forwardRef as forwardRef25 } from "react";
+import React32, { forwardRef as forwardRef24 } 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__ */ forwardRef25(({ children, placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React33.createElement(Button, props, /* @__PURE__ */ React33.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React32.createElement(Button, props, /* @__PURE__ */ React32.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React33.createElement("span", {
+  }, children), /* @__PURE__ */ React32.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ React33.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React32.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React33.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React32.createElement(CaretDown2, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Content, {
     ...props,
     collisionPadding: safeCollisionPadding,
     className: tx("select.content", "select__content", {
@@ -2870,76 +2683,76 @@ var SelectContent = /* @__PURE__ */ forwardRef25(({ classNames, children, collis
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React33.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React32.createElement(CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React33.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React32.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
-var SelectViewport2 = /* @__PURE__ */ forwardRef25(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", "select__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectItem = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef25(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React33.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React33.createElement("span", {
+  }, /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React32.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ React33.createElement(Icon, {
+  }), /* @__PURE__ */ React32.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React32.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -2968,10 +2781,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React34, { forwardRef as forwardRef26 } from "react";
-var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
+import React33, { forwardRef as forwardRef25 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React34.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React33.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -2984,11 +2797,11 @@ var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "hori
 // 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 React35, { forwardRef as forwardRef27 } from "react";
-var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+import React34, { forwardRef as forwardRef26 } from "react";
+var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
-  return /* @__PURE__ */ React35.createElement(Root5, {
+  return /* @__PURE__ */ React34.createElement(Root5, {
     ...props,
     className: tx("tag.root", "dx-tag", {
       palette
@@ -3002,56 +2815,56 @@ var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNam
 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 React36, { forwardRef as forwardRef28 } from "react";
+import React35, { forwardRef as forwardRef27 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React36.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React35.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React36.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React35.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React36.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React35.createElement(ElevationProvider, {
     elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React36.createElement(Root5, {
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React36.createElement(Root5, {
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React36.createElement(Root5, {
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef28(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot14 : Primitive13.div;
-  return /* @__PURE__ */ React36.createElement(Root5, {
+  return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -3073,63 +2886,63 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React37, { forwardRef as forwardRef29 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef29(({ classNames, children, ...props }, forwardedRef) => {
+import React36, { forwardRef as forwardRef28 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Button, {
+  }, /* @__PURE__ */ React36.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarIconButton = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(IconButton, {
+  }, /* @__PURE__ */ React36.createElement(IconButton, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Toggle, {
+  }, /* @__PURE__ */ React36.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef29((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Link, {
+  }, /* @__PURE__ */ React36.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef29(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React36.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Button, {
+  }, /* @__PURE__ */ React36.createElement(Button, {
     variant,
     density,
     elevation,
@@ -3138,11 +2951,11 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef29(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef29(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(IconButton, {
+  }, /* @__PURE__ */ React36.createElement(IconButton, {
     variant,
     density,
     elevation,
@@ -3153,13 +2966,13 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef29(({ variant, densit
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = /* @__PURE__ */ forwardRef29(({ variant = "line", ...props }, forwardedRef) => {
-  return variant === "line" ? /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+var ToolbarSeparator = /* @__PURE__ */ forwardRef28(({ variant = "line", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Separator4, {
+  }, /* @__PURE__ */ React36.createElement(Separator4, {
     ...props,
     ref: forwardedRef
-  })) : /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+  })) : /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
     className: "grow",
     ref: forwardedRef
   });
@@ -3179,8 +2992,6 @@ export {
   AlertDialog,
   AnchoredOverflow,
   Avatar,
-  AvatarGroup,
-  AvatarGroupItem,
   BUTTON_GROUP_NAME,
   Breadcrumb,
   Button,
@@ -3234,6 +3045,7 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useIconHref,
   useLandmarkMover,
   useListContext,
   useListItemContext,