@dxos/react-ui 0.3.8-next.f4e0086 → 0.3.9-main.03b62b6

package/dist/lib/browser/index.mjs

@@ -3,14 +3,10 @@ import { useTranslation, Trans } from "react-i18next";
 export * from "@dxos/react-ui-types";
 export * from "@dxos/react-hooks";
 
-// packages/ui/react-ui/src/components/Avatars/Avatar.tsx
-import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
-import { createContext as createContext2 } from "@radix-ui/react-context";
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
 import { Primitive } from "@radix-ui/react-primitive";
 import { Slot } from "@radix-ui/react-slot";
-import { toSvg } from "jdenticon";
-import React2, { forwardRef, useMemo } from "react";
-import { useId } from "@dxos/react-hooks";
+import React2, { forwardRef } from "react";
 
 // packages/ui/react-ui/src/hooks/useDensityContext.ts
 import { useContext } from "react";
@@ -108,14 +104,47 @@ var useVisualViewport = (deps) => {
   };
 };
 
+// packages/ui/react-ui/src/components/AnchoredOverflow/AnchoredOverflow.tsx
+var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root3, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot : Primitive.div;
+  return /* @__PURE__ */ React2.createElement(Root3, {
+    role: "none",
+    ...props,
+    className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var AnchoredOverflow = {
+  Root: AnchoredOverflowRoot,
+  Anchor: AnchoredOverflowAnchor
+};
+
 // packages/ui/react-ui/src/components/Avatars/Avatar.tsx
+import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from "@radix-ui/react-avatar";
+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 { toSvg } from "jdenticon";
+import React3, { forwardRef as forwardRef2, useMemo } from "react";
+import { useId } from "@dxos/react-hooks";
 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, color }) => {
   const labelId = useId("avatar__label", propsLabelId);
   const descriptionId = useId("avatar__description", propsDescriptionId);
   const maskId = useId("avatar__mask", propsMaskId);
-  return /* @__PURE__ */ React2.createElement(AvatarProvider, {
+  return /* @__PURE__ */ React3.createElement(AvatarProvider, {
     labelId,
     descriptionId,
     maskId,
@@ -128,7 +157,7 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
   }, children);
 };
 var rx = "0.25rem";
-var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }, forwardedRef) => {
+var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props }, forwardedRef) => {
   const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, color } = useAvatarContext("AvatarFrame");
   const { tx } = useThemeContext();
   const numericSize = size === "px" ? 1 : Number(size);
@@ -136,7 +165,7 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
   const ringWidth = numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1;
   const ringGap = numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0;
   const r = sizePx / 2 - ringGap - ringWidth;
-  return /* @__PURE__ */ React2.createElement(AvatarRootPrimitive, {
+  return /* @__PURE__ */ React3.createElement(AvatarRootPrimitive, {
     role: "img",
     ...props,
     className: tx("avatar.root", "avatar", {
@@ -149,28 +178,28 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId
     }
-  }, /* @__PURE__ */ React2.createElement("svg", {
+  }, /* @__PURE__ */ React3.createElement("svg", {
     viewBox: `0 0 ${sizePx} ${sizePx}`,
     width: sizePx,
     height: sizePx,
     className: tx("avatar.frame", "avatar__frame", {
       variant
     })
-  }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("mask", {
+  }, /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("mask", {
     id: maskId
-  }, variant === "circle" ? /* @__PURE__ */ React2.createElement("circle", {
+  }, variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
     fill: "white",
     cx: "50%",
     cy: "50%",
     r
-  }) : /* @__PURE__ */ React2.createElement("rect", {
+  }) : /* @__PURE__ */ React3.createElement("rect", {
     fill: "white",
     width: 2 * r,
     height: 2 * r,
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     rx
-  }))), variant === "circle" ? /* @__PURE__ */ React2.createElement("circle", {
+  }))), variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
     className: `avatarFrameFill${color ? "" : " fill-[var(--surface-bg)]"}`,
     cx: "50%",
     cy: "50%",
@@ -178,14 +207,14 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
     ...color ? {
       fill: color
     } : {}
-  }) : /* @__PURE__ */ React2.createElement("rect", {
+  }) : /* @__PURE__ */ React3.createElement("rect", {
     className: "avatarFrameFill fill-[var(--surface-bg)]",
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     width: 2 * r,
     height: 2 * r,
     rx
-  }), children), /* @__PURE__ */ React2.createElement("span", {
+  }), children), /* @__PURE__ */ React3.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       size,
@@ -198,11 +227,11 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
     }
   }));
 });
-var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot : Primitive.span;
+var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React2.createElement(Root3, {
+  return /* @__PURE__ */ React3.createElement(Root3, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -211,11 +240,11 @@ var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...
     }, classNames)
   });
 });
-var AvatarDescription = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot : Primitive.span;
+var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot2 : Primitive2.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React2.createElement(Root3, {
+  return /* @__PURE__ */ React3.createElement(Root3, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -224,9 +253,9 @@ var AvatarDescription = /* @__PURE__ */ forwardRef(({ asChild, srOnly, className
     }, classNames)
   });
 });
-var AvatarMaskedImage = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+var AvatarMaskedImage = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
   const { maskId } = useAvatarContext("AvatarFallback");
-  return /* @__PURE__ */ React2.createElement("image", {
+  return /* @__PURE__ */ React3.createElement("image", {
     width: "100%",
     height: "100%",
     ...props,
@@ -240,7 +269,7 @@ var AvatarMaskedText = (props) => {
   const { large } = props;
   const fontScale = (large ? 4 : 3) * (1 / 1.612);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React2.createElement("text", {
+  return /* @__PURE__ */ React3.createElement("text", {
     x: "50%",
     y: "50%",
     className: tx("avatar.fallbackText", "avatar__fallback-text"),
@@ -250,30 +279,30 @@ var AvatarMaskedText = (props) => {
     mask: `url(#${maskId})`
   }, props.children);
 };
-var AvatarImage = /* @__PURE__ */ forwardRef(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+var AvatarImage = /* @__PURE__ */ forwardRef2(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext("AvatarImage");
   const pxSize = size === "px" ? 1 : size * 4;
   if (pxSize <= 20) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(AvatarFallbackPrimitive, {
+  return /* @__PURE__ */ React3.createElement(AvatarFallbackPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ React3.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
   }));
 });
-var AvatarFallback = /* @__PURE__ */ forwardRef(({ delayMs, text, ...props }, forwardedRef) => {
+var AvatarFallback = /* @__PURE__ */ forwardRef2(({ 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__ */ React2.createElement(AvatarFallbackPrimitive, {
+  return /* @__PURE__ */ React3.createElement(AvatarFallbackPrimitive, {
     delayMs,
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(React2.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React2.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ React3.createElement(React3.Fragment, null, numericSize >= 6 && /* @__PURE__ */ React3.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
-  }), text && /* @__PURE__ */ React2.createElement(AvatarMaskedText, {
+  }), text && /* @__PURE__ */ React3.createElement(AvatarMaskedText, {
     large: !isTextOnly
   }, text.toLocaleUpperCase())));
 });
@@ -295,19 +324,19 @@ var Avatar = {
 };
 
 // packages/ui/react-ui/src/components/Avatars/AvatarGroup.tsx
-import React3, { forwardRef as forwardRef2 } from "react";
+import React4, { forwardRef as forwardRef3 } from "react";
 import { useId as useId2 } from "@dxos/react-hooks";
-var AvatarGroupRoot = /* @__PURE__ */ forwardRef2(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
+var AvatarGroupRoot = /* @__PURE__ */ forwardRef3(({ 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__ */ React3.createElement(Avatar.Root, {
+  return /* @__PURE__ */ React4.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     size,
     variant,
     inGroup: true
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     role: "group",
     className: tx("avatar.group", "avatar-group", {}, classNames),
     "aria-labelledby": labelId,
@@ -317,7 +346,7 @@ var AvatarGroupRoot = /* @__PURE__ */ forwardRef2(({ labelId: propsLabelId, desc
 });
 var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
   const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
-  return /* @__PURE__ */ React3.createElement(Avatar.Root, {
+  return /* @__PURE__ */ React4.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     maskId,
@@ -328,10 +357,10 @@ var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest })
     ...rest
   }, children);
 };
-var AvatarGroupLabel = /* @__PURE__ */ forwardRef2(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupLabel = /* @__PURE__ */ forwardRef3(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { labelId, size } = useAvatarContext("AvatarGroupLabel");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React3.createElement("span", {
+  return /* @__PURE__ */ React4.createElement("span", {
     ...props,
     id: labelId,
     className: tx("avatar.groupLabel", "avatar-group__label", {
@@ -340,10 +369,10 @@ var AvatarGroupLabel = /* @__PURE__ */ forwardRef2(({ srOnly, classNames, childr
     }, classNames)
   }, children);
 });
-var AvatarGroupDescription = /* @__PURE__ */ forwardRef2(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupDescription = /* @__PURE__ */ forwardRef3(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { descriptionId } = useAvatarContext("AvatarGroupDescription");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React3.createElement("span", {
+  return /* @__PURE__ */ React4.createElement("span", {
     ...props,
     id: descriptionId,
     className: tx("avatar.groupDescription", "avatar-group__description", {
@@ -362,18 +391,18 @@ var AvatarGroupItem = {
 
 // 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 React6, { forwardRef as forwardRef5 } from "react";
+
+// packages/ui/react-ui/src/components/Link/Link.tsx
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React5, { forwardRef as forwardRef4 } from "react";
-
-// packages/ui/react-ui/src/components/Link/Link.tsx
-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";
-var Link = /* @__PURE__ */ forwardRef3(({ asChild, classNames, ...props }, forwardedRef) => {
+var Link = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot2 : Primitive2.a;
-  return /* @__PURE__ */ React4.createElement(Root3, {
+  const Root3 = asChild ? Slot3 : Primitive3.a;
+  return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
     className: tx("link.root", "link", {}, classNames),
     ref: forwardedRef
@@ -381,45 +410,47 @@ var Link = /* @__PURE__ */ forwardRef3(({ asChild, classNames, ...props }, forwa
 });
 
 // packages/ui/react-ui/src/components/Breadcrumb/Breadcrumb.tsx
-var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbRoot = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot3 : Primitive3.div;
-  return /* @__PURE__ */ React5.createElement(Root3, {
+  const Root3 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React6.createElement(Root3, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot3 : Primitive3.ol;
-  return /* @__PURE__ */ React5.createElement(Root3, {
+  const Root3 = asChild ? Slot4 : Primitive4.ol;
+  return /* @__PURE__ */ React6.createElement(Root3, {
+    role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot3 : Primitive3.li;
-  return /* @__PURE__ */ React5.createElement(Root3, {
+  const Root3 = asChild ? Slot4 : Primitive4.li;
+  return /* @__PURE__ */ React6.createElement(Root3, {
+    role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot3 : Link;
-  return /* @__PURE__ */ React5.createElement(Root3, {
+var BreadcrumbLink = /* @__PURE__ */ forwardRef5(({ asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot4 : Link;
+  return /* @__PURE__ */ React6.createElement(Root3, {
     ...props,
     ref: forwardedRef
   });
 });
-var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbCurrent = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot3 : "h1";
-  return /* @__PURE__ */ React5.createElement(Root3, {
+  const Root3 = asChild ? Slot4 : "h1";
+  return /* @__PURE__ */ React6.createElement(Root3, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -428,12 +459,12 @@ var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...p
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React5.createElement(Primitive3.span, {
+  return /* @__PURE__ */ React6.createElement(Primitive4.span, {
     role: "separator",
     "aria-hidden": "true",
     ...props,
     className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-  }, children ?? /* @__PURE__ */ React5.createElement(Dot, {
+  }, children ?? /* @__PURE__ */ React6.createElement(Dot, {
     weight: "bold"
   }));
 };
@@ -448,21 +479,21 @@ var Breadcrumb = {
 
 // packages/ui/react-ui/src/components/Buttons/Button.tsx
 import { createContext as createContext3 } from "@radix-ui/react-context";
-import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React6, { forwardRef as forwardRef5 } from "react";
+import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React7, { forwardRef as forwardRef6 } from "react";
 var BUTTON_GROUP_NAME = "ButtonGroup";
 var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ forwardRef5(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ forwardRef6(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root3 = asChild ? Slot4 : Primitive4.button;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  const Root3 = asChild ? Slot5 : Primitive5.button;
+  return /* @__PURE__ */ React7.createElement(Root3, {
     ref,
     ...props,
     className: tx("button.root", "button", {
@@ -478,18 +509,18 @@ var Button = /* @__PURE__ */ forwardRef5(({ classNames, children, density: props
   }, children);
 });
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+var ButtonGroup = /* @__PURE__ */ forwardRef6(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React6.createElement(Root3, {
+  const Root3 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React7.createElement(Root3, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
       elevation
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
+  }, /* @__PURE__ */ React7.createElement(ButtonGroupProvider, {
     inGroup: true
   }, children));
 });
@@ -497,14 +528,14 @@ ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/Toggle.tsx
 import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
-import React7, { forwardRef as forwardRef6 } from "react";
-var Toggle = /* @__PURE__ */ forwardRef6(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React7.createElement(TogglePrimitive, {
+import React8, { forwardRef as forwardRef7 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef7(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React8.createElement(TogglePrimitive, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ React7.createElement(Button, {
+  }, /* @__PURE__ */ React8.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
@@ -512,22 +543,22 @@ var Toggle = /* @__PURE__ */ forwardRef6(({ defaultPressed, pressed, onPressedCh
 
 // packages/ui/react-ui/src/components/Buttons/ToggleGroup.tsx
 import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
-import React8, { forwardRef as forwardRef7 } from "react";
-var ToggleGroup = /* @__PURE__ */ forwardRef7(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(ToggleGroupPrimitive, {
+import React9, { forwardRef as forwardRef8 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(ToggleGroupPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React9.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ forwardRef7(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React8.createElement(ToggleGroupItemPrimitive, {
+var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React9.createElement(ToggleGroupItemPrimitive, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(Button, {
+  }, /* @__PURE__ */ React9.createElement(Button, {
     variant,
     elevation,
     density,
@@ -539,20 +570,20 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef7(({ variant, elevation, density
 
 // packages/ui/react-ui/src/components/Card/Card.tsx
 import { DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
-import React11, { forwardRef as forwardRef9 } from "react";
+import React12, { forwardRef as forwardRef10 } from "react";
 
 // packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
 import { Root as DropdownMenuRootPrimitive, DropdownMenuTrigger as DropdownMenuTriggerPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuContent as DropdownMenuContentPrimitive, DropdownMenuArrow as DropdownMenuArrowPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive, DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, DropdownMenuLabel as DropdownMenuLabelPrimitive } from "@radix-ui/react-dropdown-menu";
-import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
-import React10, { forwardRef as forwardRef8 } from "react";
+import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React11, { forwardRef as forwardRef9 } from "react";
 
 // packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
-import React9, { createContext as createContext4 } from "react";
+import React10, { createContext as createContext4 } from "react";
 var ElevationContext = /* @__PURE__ */ createContext4({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React9.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React10.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
@@ -562,30 +593,30 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React9.crea
 var DropdownMenuRoot = DropdownMenuRootPrimitive;
 var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
 var DropdownMenuPortal = DropdownMenuPortalPrimitive;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef8(({ classNames, children, ...props }, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuContentPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React10.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React11.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef8(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef9(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React10.createElement(Root3, {
+  const Root3 = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React11.createElement(Root3, {
     ...props,
     className: tx("dropdownMenu.viewport", "dropdown-menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuArrowPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuArrowPrimitive, {
     ...props,
     className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -593,33 +624,33 @@ var DropdownMenuArrow = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, f
 });
 var DropdownMenuGroup = DropdownMenuGroupPrimitive;
 var DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
-var DropdownMenuItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuItemPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuItemPrimitive, {
     ...props,
     className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuCheckboxItemPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuCheckboxItemPrimitive, {
     ...props,
     className: tx("dropdownMenu.item", "dropdown-menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuSeparatorPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuSeparatorPrimitive, {
     ...props,
     className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef8(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React10.createElement(DropdownMenuLabelPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DropdownMenuLabelPrimitive, {
     ...props,
     className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -641,9 +672,9 @@ var DropdownMenu = {
 };
 
 // packages/ui/react-ui/src/components/Card/Card.tsx
-var CardRoot = /* @__PURE__ */ forwardRef9(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
+var CardRoot = /* @__PURE__ */ forwardRef10(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     ref: forwardedRef,
     className: tx("card.root", "card", {
@@ -655,7 +686,7 @@ var CardRoot = /* @__PURE__ */ forwardRef9(({ grow, square, noPadding, className
 });
 var CardHeader = ({ floating, classNames, children, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.header", "card", {
       floating
@@ -664,7 +695,7 @@ var CardHeader = ({ floating, classNames, children, ...props }) => {
 };
 var CardTitle = ({ center, title, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.title", "card", {
       center
@@ -674,49 +705,49 @@ var CardTitle = ({ center, title, classNames, ...props }) => {
 var CardDragHandle = ({ position, classNames, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.dragHandle", "card", {
       density,
       position
     }, classNames)
-  }, /* @__PURE__ */ React11.createElement(DotsSixVertical, {
+  }, /* @__PURE__ */ React12.createElement(DotsSixVertical, {
     className: tx("card.dragHandleIcon", "card")
   }));
 };
 var CardEndcap = ({ Icon: Icon2, position, classNames, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.menu", "card", {
       density,
       position
     }, classNames)
-  }, /* @__PURE__ */ React11.createElement(Icon2, {
+  }, /* @__PURE__ */ React12.createElement(Icon2, {
     className: tx("card.menuIcon", "card")
   }));
 };
-var CardMenu = /* @__PURE__ */ forwardRef9(({ children, position, classNames, ...props }, forwardRef1) => {
+var CardMenu = /* @__PURE__ */ forwardRef10(({ children, position, classNames, ...props }, forwardRef1) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.menu", "card", {
       density,
       position
     }, classNames),
     ref: forwardRef1
-  }, /* @__PURE__ */ React11.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React12.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React12.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React11.createElement(DotsThreeVertical, {
+  }, /* @__PURE__ */ React12.createElement(DotsThreeVertical, {
     className: tx("card.menuIcon", "card", {})
-  })), /* @__PURE__ */ React11.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React11.createElement(DropdownMenu.Viewport, null, children))));
+  })), /* @__PURE__ */ React12.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React12.createElement(DropdownMenu.Viewport, null, children))));
 });
 var CardBody = ({ gutter, classNames, children, ...props }) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     ...props,
     className: tx("card.body", "card", {
       density,
@@ -726,9 +757,9 @@ var CardBody = ({ gutter, classNames, children, ...props }) => {
 };
 var CardMedia = ({ src, contain, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     className: "flex grow overflow-hidden"
-  }, /* @__PURE__ */ React11.createElement("img", {
+  }, /* @__PURE__ */ React12.createElement("img", {
     ...props,
     className: tx("card.media", "card", {
       contain
@@ -747,24 +778,14 @@ var Card = {
   Media: CardMedia
 };
 
-// packages/ui/react-ui/src/components/Center/Center.tsx
-import React12 from "react";
-var Center = (props) => {
-  const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React12.createElement("div", {
-    className: "h-full flex items-center justify-center " + className,
-    ...rest
-  }, children);
-};
-
 // packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
 import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
-import React13, { forwardRef as forwardRef10 } from "react";
+import React13, { forwardRef as forwardRef11 } from "react";
 var DialogRoot = DialogRootPrimitive;
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(DialogTitlePrimitive, {
     ...props,
@@ -774,7 +795,7 @@ var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(DialogDescriptionPrimitive, {
     ...props,
@@ -790,7 +811,7 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React13.createElement(DialogOverlayPrimitive, {
     ...props,
@@ -801,7 +822,7 @@ var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, ...pro
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React13.createElement(DialogContentPrimitive, {
@@ -829,13 +850,13 @@ var Dialog = {
 // packages/ui/react-ui/src/components/Dialogs/AlertDialog.tsx
 import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
 import { createContext as createContext6 } from "@radix-ui/react-context";
-import React14, { forwardRef as forwardRef11 } from "react";
+import React14, { forwardRef as forwardRef12 } from "react";
 var AlertDialogRoot = AlertDialogRootPrimitive;
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(AlertDialogTitlePrimitive, {
     ...props,
@@ -845,7 +866,7 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
@@ -860,7 +881,7 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React14.createElement(AlertDialogOverlayPrimitive, {
     ...props,
@@ -871,7 +892,7 @@ var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, .
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React14.createElement(AlertDialogContentPrimitive, {
@@ -902,9 +923,9 @@ import { Check, Minus } from "@phosphor-icons/react";
 import { Root as CheckboxPrimitive, Indicator as CheckboxIndicatorPrimitive } from "@radix-ui/react-checkbox";
 import { Root as SwitchPrimitive, Thumb as SwitchThumbPrimitive } from "@radix-ui/react-switch";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React15, { forwardRef as forwardRef12, Fragment, useCallback } from "react";
+import React15, { forwardRef as forwardRef13, Fragment, useCallback } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
-var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(LabelPrimitive, {
     ...props,
@@ -914,7 +935,7 @@ var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...pro
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(DescriptionPrimitive, {
     ...props,
@@ -924,7 +945,7 @@ var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React15.createElement(ValidationPrimitive, {
@@ -936,7 +957,7 @@ var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React15.createElement(DescriptionAndValidationPrimitive, {
     ...props,
@@ -946,7 +967,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -977,7 +998,7 @@ var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -998,7 +1019,7 @@ var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -1019,7 +1040,7 @@ var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -1051,7 +1072,7 @@ var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsCheck
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
@@ -1092,10 +1113,10 @@ var Input = {
   DescriptionAndValidation
 };
 
-// packages/ui/react-ui/src/components/List/List.tsx
+// packages/ui/react-ui/src/components/Lists/List.tsx
 import { CaretDown, CaretRight } from "@phosphor-icons/react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React17, { forwardRef as forwardRef13 } from "react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React17, { forwardRef as forwardRef14 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
 
 // packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
@@ -1109,8 +1130,8 @@ var DensityProvider = ({ density, children }) => /* @__PURE__ */ React16.createE
   }
 }, children);
 
-// packages/ui/react-ui/src/components/List/List.tsx
-var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+// packages/ui/react-ui/src/components/Lists/List.tsx
+var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
   return /* @__PURE__ */ React17.createElement(DensityProvider, {
@@ -1121,8 +1142,8 @@ var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, for
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot6 : "div";
+var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot7 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React17.createElement(Root3, {
@@ -1147,7 +1168,7 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   return /* @__PURE__ */ React17.createElement(ListPrimitiveItemHeading, {
@@ -1158,7 +1179,7 @@ var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
@@ -1174,7 +1195,7 @@ var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, class
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   return /* @__PURE__ */ React17.createElement(ListPrimitiveItem, {
@@ -1195,15 +1216,15 @@ var ListItem = {
   MockOpenTrigger: MockListItemOpenTrigger
 };
 
-// packages/ui/react-ui/src/components/List/Tree.tsx
-import React18, { forwardRef as forwardRef14 } from "react";
-var TreeRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+import React18, { forwardRef as forwardRef15 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef14(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
   return /* @__PURE__ */ React18.createElement(List, {
     ...props,
@@ -1211,7 +1232,7 @@ var TreeBranch = /* @__PURE__ */ forwardRef14(({ __listScope, ...props }, forwar
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
@@ -1237,10 +1258,10 @@ var TreeItem = {
 // packages/ui/react-ui/src/components/Main/Main.tsx
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef15, useCallback as useCallback3, useRef } from "react";
+import React19, { forwardRef as forwardRef16, useCallback as useCallback3, useRef } from "react";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
@@ -1411,7 +1432,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1421,7 +1442,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const Root3 = isLg ? Primitive6.div : DialogContent2;
+  const Root3 = isLg ? Primitive7.div : DialogContent2;
   return /* @__PURE__ */ React19.createElement(DialogRoot2, {
     open,
     modal: false
@@ -1445,7 +1466,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToD
     elevation: "group"
   }, children)));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
@@ -1456,7 +1477,7 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
@@ -1467,13 +1488,13 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef15(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot7 : "main";
+  const Root3 = asChild ? Slot8 : "main";
   return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("main.content", "main", {
@@ -1486,7 +1507,7 @@ var MainContent = /* @__PURE__ */ forwardRef15(({ asChild, classNames, bounce, c
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1519,18 +1540,18 @@ var Main = {
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
 import { createContext as createContext9 } from "@radix-ui/react-context";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React20, { forwardRef as forwardRef16 } from "react";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import React20, { forwardRef as forwardRef17 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef16(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot8 : Primitive7.div;
+  const Root3 = asChild ? Slot9 : Primitive8.div;
   return /* @__PURE__ */ React20.createElement(MessageProvider, {
     titleId,
     descriptionId
@@ -1547,10 +1568,10 @@ var MessageRoot = /* @__PURE__ */ forwardRef16(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root3 = asChild ? Slot8 : Primitive7.h2;
+  const Root3 = asChild ? Slot9 : Primitive8.h2;
   return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
@@ -1560,10 +1581,10 @@ var MessageTitle = /* @__PURE__ */ forwardRef16(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root3 = asChild ? Slot8 : Primitive7.p;
+  const Root3 = asChild ? Slot9 : Primitive8.p;
   return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
@@ -1580,15 +1601,15 @@ var Message = {
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
 import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
-import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
-import { Slot as Slot9 } from "@radix-ui/react-slot";
-import React21, { forwardRef as forwardRef17 } from "react";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import React21, { forwardRef as forwardRef18 } from "react";
 var PopoverRoot = PopoverRootPrimitive;
 var PopoverPortal = PopoverPortalPrimitive;
 var PopoverTrigger = PopoverTriggerPrimitive;
 var PopoverAnchor = PopoverAnchorPrimitive;
 var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(PopoverArrowPrimitive, {
     ...props,
@@ -1596,7 +1617,7 @@ var PopoverArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwa
     ref: forwardedRef
   });
 });
-var PopoverContent = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef18(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React21.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
@@ -1608,9 +1629,9 @@ var PopoverContent = /* @__PURE__ */ forwardRef17(({ classNames, children, ...pr
     elevation: "chrome"
   }, children));
 });
-var PopoverViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const Root3 = asChild ? Slot10 : Primitive9.div;
   return /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
@@ -1631,27 +1652,34 @@ var Popover = {
   Viewport: PopoverViewport
 };
 
-// packages/ui/react-ui/src/components/ProgressBar/ProgressBar.tsx
-import React22 from "react";
-var ProgressBar = (props) => {
-  const { className, indeterminate = false, progress = 0 } = props;
+// packages/ui/react-ui/src/components/Status/Status.tsx
+import React22, { forwardRef as forwardRef19 } from "react";
+var Status = /* @__PURE__ */ forwardRef19(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
   return /* @__PURE__ */ React22.createElement("span", {
-    role: "none",
-    className: "w-20 h-1 inline-block relative bg-neutral-400/25 rounded-full" + (className ? " " + className : "")
+    role: "status",
+    ...props,
+    className: tx("status.root", "status", {
+      indeterminate
+    }, classNames),
+    ref: forwardedRef
   }, /* @__PURE__ */ React22.createElement("span", {
-    className: "absolute left-0 top-0 bottom-0 inline-block bg-neutral-400 rounded-full" + (indeterminate ? " animate-progress-indeterminate" : ""),
-    ...indeterminate ? {} : {
+    role: "none",
+    className: tx("status.bar", "status__bar", {
+      indeterminate
+    }, classNames),
+    ...!indeterminate && {
       style: {
-        width: `${(progress * 100).toFixed(0)}%`
+        width: `${Math.round(progress * 100)}%`
       }
     }
-  }));
-};
+  }), children);
+});
 
 // 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 React23, { forwardRef as forwardRef18 } from "react";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+import React23, { forwardRef as forwardRef20 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
@@ -1659,7 +1687,7 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, for
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
@@ -1667,7 +1695,7 @@ var ScrollAreaViewport = /* @__PURE__ */ forwardRef18(({ classNames, ...props },
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveScrollbar, {
     ...props,
@@ -1675,7 +1703,7 @@ var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef18(({ classNames, ...props }
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
@@ -1683,7 +1711,7 @@ var ScrollAreaThumb = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, fo
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
@@ -1702,13 +1730,13 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp, Check as Check2 } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React24, { forwardRef as forwardRef19 } from "react";
+import React24, { forwardRef as forwardRef21 } 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__ */ forwardRef19(({ placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef21(({ placeholder, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
@@ -1720,7 +1748,7 @@ var SelectTriggerButton = /* @__PURE__ */ forwardRef19(({ placeholder, ...props
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Content, {
     ...props,
@@ -1728,7 +1756,7 @@ var SelectContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...pro
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
@@ -1738,7 +1766,7 @@ var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef19(({ classNames, children
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
@@ -1749,7 +1777,7 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef19(({ classNames, childr
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
-var SelectItem = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
     ...props,
@@ -1758,7 +1786,7 @@ var SelectItem = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forward
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
@@ -1766,7 +1794,7 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef19(({ classNames, children,
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef19(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef21(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
     ...props,
@@ -1780,7 +1808,7 @@ var SelectOption = /* @__PURE__ */ forwardRef19(({ children, classNames, ...prop
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Separator, {
     ...props,
@@ -1788,7 +1816,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, fo
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React24.createElement(SelectPrimitive.Arrow, {
     ...props,
@@ -1832,12 +1860,12 @@ var Separator2 = ({ classNames, orientation = "horizontal", ...props }) => {
 };
 
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import React26, { forwardRef as forwardRef20 } from "react";
-var Tag = /* @__PURE__ */ forwardRef20(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React26, { forwardRef as forwardRef22 } from "react";
+var Tag = /* @__PURE__ */ forwardRef22(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot10 : Primitive9.span;
+  const Root3 = asChild ? Slot11 : Primitive10.span;
   return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
@@ -1848,19 +1876,19 @@ var Tag = /* @__PURE__ */ forwardRef20(({ asChild, palette, classNames, ...props
 });
 
 // packages/ui/react-ui/src/components/Toast/Toast.tsx
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot11 } from "@radix-ui/react-slot";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } 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 React27, { forwardRef as forwardRef21 } from "react";
+import React27, { forwardRef as forwardRef23 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React27.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React27.createElement(ToastRootPrimitive, {
     ...props,
@@ -1872,36 +1900,36 @@ var ToastRoot = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }
     density: "fine"
   }, children)));
 });
-var ToastBody = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : Primitive10.div;
+  const Root3 = asChild ? Slot12 : Primitive11.div;
   return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : ToastTitlePrimitive;
+  const Root3 = asChild ? Slot12 : ToastTitlePrimitive;
   return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : ToastDescriptionPrimitive;
+  const Root3 = asChild ? Slot12 : ToastDescriptionPrimitive;
   return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : Primitive10.div;
+  const Root3 = asChild ? Slot12 : Primitive11.div;
   return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
@@ -1924,8 +1952,8 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React28, { forwardRef as forwardRef22 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+import React28, { forwardRef as forwardRef24 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Root, {
     ...props,
@@ -1933,7 +1961,7 @@ var ToolbarRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var ToolbarButton = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
   return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Button, {
     asChild: true
   }, /* @__PURE__ */ React28.createElement(Button, {
@@ -1941,7 +1969,7 @@ var ToolbarButton = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+var ToolbarLink = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
   return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Link, {
     asChild: true
   }, /* @__PURE__ */ React28.createElement(Link, {
@@ -1949,7 +1977,7 @@ var ToolbarLink = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
@@ -1959,7 +1987,7 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef22(({ classNames, children,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef22(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef24(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
@@ -1991,12 +2019,12 @@ var Toolbar = {
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
-import React29, { forwardRef as forwardRef23 } from "react";
+import React29, { forwardRef as forwardRef25 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React29.createElement(TooltipArrowPrimitive, {
     ...props,
@@ -2004,7 +2032,7 @@ var TooltipArrow = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwa
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React29.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
@@ -2071,6 +2099,7 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
 };
 export {
   AlertDialog,
+  AnchoredOverflow,
   Avatar,
   AvatarGroup,
   AvatarGroupItem,
@@ -2083,7 +2112,6 @@ export {
   CardHeader,
   CardMedia,
   CardTitle,
-  Center,
   DensityContext,
   DensityProvider,
   Dialog,
@@ -2099,10 +2127,10 @@ export {
   Main,
   Message,
   Popover,
-  ProgressBar,
   ScrollArea,
   Select,
   Separator2 as Separator,
+  Status,
   Tag,
   ThemeContext,
   ThemeProvider,