npm - @dxos/react-ui - Versions diffs - 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/dist/lib/browser/index.mjs CHANGED Viewed

@@ -22,6 +22,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";
@@ -46,12 +59,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";
@@ -79,7 +92,7 @@ var TranslationsContext = /* @__PURE__ */ createContext({
 });
 var useTranslation = (...args) => {
   const result = useI18NextTranslation(...args);
-  const { dtLocale } = useContext3(TranslationsContext);
+  const { dtLocale } = useContext4(TranslationsContext);
   return {
     ...result,
     dtLocale
@@ -113,12 +126,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";
@@ -166,122 +174,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,
@@ -290,11 +222,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,
@@ -303,162 +235,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
@@ -468,47 +265,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),
@@ -517,12 +314,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"
   }));
 };
@@ -539,19 +336,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,
@@ -570,29 +367,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";
@@ -619,19 +432,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,
@@ -651,23 +464,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) {
@@ -677,48 +490,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
   }));
@@ -726,22 +539,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,
@@ -752,7 +565,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 (_) => {
@@ -765,7 +578,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
@@ -774,12 +587,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 = () => {
@@ -787,22 +600,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
   }
@@ -831,15 +644,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))));
 };
@@ -857,7 +670,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",
@@ -865,21 +678,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
@@ -891,26 +704,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
@@ -927,15 +740,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
@@ -943,9 +756,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
@@ -959,22 +772,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
@@ -997,17 +810,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
@@ -1015,9 +828,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
@@ -1030,22 +843,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
@@ -1070,15 +883,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", {
@@ -1087,18 +900,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
@@ -1106,33 +919,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
@@ -1157,13 +970,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
@@ -1179,18 +992,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,
@@ -1200,14 +1013,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",
@@ -1260,7 +1073,7 @@ var DropdownMenuVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1270,23 +1083,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);
@@ -1294,7 +1107,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,
@@ -1334,10 +1147,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
@@ -1345,11 +1158,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),
@@ -1358,11 +1171,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),
@@ -1371,11 +1184,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),
@@ -1384,10 +1197,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
@@ -1395,10 +1208,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
@@ -1406,10 +1219,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
@@ -1417,11 +1230,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),
@@ -1430,11 +1243,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),
@@ -1450,17 +1263,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
@@ -1468,10 +1281,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,
@@ -1514,11 +1327,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
@@ -1526,9 +1340,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
@@ -1536,10 +1350,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,
@@ -1548,9 +1362,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
@@ -1558,7 +1372,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);
@@ -1577,7 +1391,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 && {
@@ -1589,14 +1403,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,
@@ -1611,13 +1425,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,
@@ -1632,7 +1446,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,
@@ -1640,7 +1454,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,
@@ -1654,7 +1468,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,
@@ -1662,16 +1476,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);
@@ -1702,11 +1516,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",
@@ -1728,7 +1542,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`,
@@ -1744,22 +1558,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"
     },
@@ -1773,7 +1587,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", {
@@ -1781,10 +1595,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
@@ -1792,26 +1606,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,
@@ -1831,10 +1645,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",
@@ -1864,7 +1678,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}`,
@@ -1879,22 +1693,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
@@ -1918,18 +1732,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({
@@ -1937,7 +1751,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,
@@ -1949,7 +1763,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);
@@ -1968,11 +1782,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", {
@@ -1987,15 +1801,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
@@ -2015,13 +1829,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 } from "@radix-ui/react-dialog";
+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";
@@ -2145,17 +1958,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, {
@@ -2235,7 +2048,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React28.createElement(MainProvider, {
+  return /* @__PURE__ */ React27.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -2248,7 +2061,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
   });
@@ -2268,11 +2081,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
-  }, /* @__PURE__ */ React28.createElement(Root5, {
+  }, !isLg && /* @__PURE__ */ React27.createElement(DialogTitle2, {
+    className: "sr-only"
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React27.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2290,10 +2105,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,
@@ -2304,10 +2119,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,
@@ -2318,12 +2133,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
@@ -2339,13 +2154,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");
@@ -2373,20 +2188,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,
@@ -2399,11 +2214,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,
@@ -2412,11 +2227,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,
@@ -2437,7 +2252,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";
@@ -2446,7 +2261,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, [
@@ -2464,9 +2279,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,
@@ -2481,7 +2296,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);
@@ -2493,7 +2308,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
@@ -2501,12 +2316,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,
@@ -2516,7 +2331,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);
@@ -2532,7 +2347,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React30.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React29.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2545,34 +2360,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);
@@ -2583,10 +2398,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
@@ -2614,11 +2429,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,
@@ -2653,7 +2468,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);
@@ -2661,13 +2476,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,
@@ -2675,7 +2490,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,
@@ -2700,10 +2515,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,
@@ -2712,11 +2527,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),
@@ -2724,10 +2539,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,
@@ -2750,10 +2565,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", {
@@ -2761,7 +2576,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,
@@ -2777,43 +2592,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
@@ -2830,33 +2645,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", {
@@ -2866,76 +2681,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
@@ -2964,10 +2779,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", {
@@ -2980,11 +2795,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
@@ -2998,56 +2813,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
@@ -3069,63 +2884,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,
@@ -3134,11 +2949,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,
@@ -3149,13 +2964,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
   });
@@ -3175,8 +2990,6 @@ export {
   AlertDialog,
   AnchoredOverflow,
   Avatar,
-  AvatarGroup,
-  AvatarGroupItem,
   BUTTON_GROUP_NAME,
   Breadcrumb,
   Button,
@@ -3230,6 +3043,7 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useIconHref,
   useLandmarkMover,
   useListContext,
   useListItemContext,