@dxos/react-ui 0.3.9-main.f27ec14 → 0.3.9-next.4584ca9

package/dist/lib/browser/index.mjs

@@ -109,6 +109,7 @@ var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, ch
   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
@@ -118,6 +119,7 @@ var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames,
   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
@@ -422,6 +424,7 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...prop
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : Primitive4.ol;
   return /* @__PURE__ */ React6.createElement(Root3, {
+    role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
@@ -431,6 +434,7 @@ var BreadcrumbListItem = /* @__PURE__ */ forwardRef5(({ asChild, classNames, ...
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot4 : Primitive4.li;
   return /* @__PURE__ */ React6.createElement(Root3, {
+    role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
@@ -564,14 +568,9 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef8(({ variant, elevation, density
   }));
 });
 
-// packages/ui/react-ui/src/components/Card/Card.tsx
-import { DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/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 Primitive6 } from "@radix-ui/react-primitive";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
+// packages/ui/react-ui/src/components/Dialogs/Dialog.tsx
+import { createContext as createContext5 } from "@radix-ui/react-context";
+import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
 import React11, { forwardRef as forwardRef9 } from "react";
 
 // packages/ui/react-ui/src/components/ElevationProvider/ElevationProvider.tsx
@@ -585,215 +584,13 @@ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React10.cre
   }
 }, children);
 
-// packages/ui/react-ui/src/components/DropdownMenu/DropdownMenu.tsx
-var DropdownMenuRoot = DropdownMenuRootPrimitive;
-var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
-var DropdownMenuPortal = DropdownMenuPortalPrimitive;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuContentPrimitive, {
-    sideOffset: 4,
-    collisionPadding: 8,
-    ...props,
-    className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
-});
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef9(({ classNames, asChild, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  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__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuArrowPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuGroup = DropdownMenuGroupPrimitive;
-var DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
-var DropdownMenuItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuItemPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuCheckboxItemPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.item", "dropdown-menu__item--checkbox", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuSeparatorPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef9(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React11.createElement(DropdownMenuLabelPrimitive, {
-    ...props,
-    className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
-    ref: forwardedRef
-  });
-});
-var DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
-  Group: DropdownMenuGroup,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  ItemIndicator: DropdownMenuItemIndicator,
-  Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel
-};
-
-// packages/ui/react-ui/src/components/Card/Card.tsx
-var CardRoot = /* @__PURE__ */ forwardRef10(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    ref: forwardedRef,
-    className: tx("card.root", "card", {
-      grow,
-      square,
-      noPadding
-    }, classNames)
-  }, children);
-});
-var CardHeader = ({ floating, classNames, children, ...props }) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.header", "card", {
-      floating
-    }, classNames)
-  }, children);
-};
-var CardTitle = ({ center, title, classNames, ...props }) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.title", "card", {
-      center
-    }, classNames)
-  }, title);
-};
-var CardDragHandle = ({ position, classNames, ...props }) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.dragHandle", "card", {
-      density,
-      position
-    }, classNames)
-  }, /* @__PURE__ */ React12.createElement(DotsSixVertical, {
-    className: tx("card.dragHandleIcon", "card")
-  }));
-};
-var CardEndcap = ({ Icon: Icon2, position, classNames, ...props }) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.menu", "card", {
-      density,
-      position
-    }, classNames)
-  }, /* @__PURE__ */ React12.createElement(Icon2, {
-    className: tx("card.menuIcon", "card")
-  }));
-};
-var CardMenu = /* @__PURE__ */ forwardRef10(({ children, position, classNames, ...props }, forwardRef1) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.menu", "card", {
-      density,
-      position
-    }, classNames),
-    ref: forwardRef1
-  }, /* @__PURE__ */ React12.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React12.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React12.createElement(DotsThreeVertical, {
-    className: tx("card.menuIcon", "card", {})
-  })), /* @__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__ */ React12.createElement("div", {
-    ...props,
-    className: tx("card.body", "card", {
-      density,
-      gutter
-    }, classNames)
-  }, children);
-};
-var CardMedia = ({ src, contain, classNames, ...props }) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React12.createElement("div", {
-    className: "flex grow overflow-hidden"
-  }, /* @__PURE__ */ React12.createElement("img", {
-    ...props,
-    className: tx("card.media", "card", {
-      contain
-    }, classNames),
-    src
-  }));
-};
-var Card = {
-  Root: CardRoot,
-  Header: CardHeader,
-  DragHandle: CardDragHandle,
-  Endcap: CardEndcap,
-  Menu: CardMenu,
-  Title: CardTitle,
-  Body: CardBody,
-  Media: CardMedia
-};
-
-// packages/ui/react-ui/src/components/Center/Center.tsx
-import React13 from "react";
-var Center = (props) => {
-  const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React13.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 React14, { forwardRef as forwardRef11 } from "react";
 var DialogRoot = DialogRootPrimitive;
 var DialogTrigger = DialogTriggerPrimitive;
 var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef9(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogTitlePrimitive, {
+  return /* @__PURE__ */ React11.createElement(DialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -801,9 +598,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef9(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -817,27 +614,27 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DialogOverlayPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React11.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef9(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React14.createElement(DialogContentPrimitive, {
+  return /* @__PURE__ */ React11.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React11.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -856,15 +653,15 @@ var Dialog = {
 // packages/ui/react-ui/src/components/Dialogs/AlertDialog.tsx
 import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
 import { createContext as createContext6 } from "@radix-ui/react-context";
-import React15, { forwardRef as forwardRef12 } from "react";
+import React12, { forwardRef as forwardRef10 } from "react";
 var AlertDialogRoot = AlertDialogRootPrimitive;
 var AlertDialogTrigger = AlertDialogTriggerPrimitive;
 var AlertDialogPortal = AlertDialogPortalPrimitive;
 var AlertDialogCancel = AlertDialogCancelPrimitive;
 var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogTitlePrimitive, {
+  return /* @__PURE__ */ React12.createElement(AlertDialogTitlePrimitive, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -872,9 +669,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogDescriptionPrimitive, {
+  return /* @__PURE__ */ React12.createElement(AlertDialogDescriptionPrimitive, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -887,27 +684,27 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(AlertDialogOverlayPrimitive, {
+  return /* @__PURE__ */ React12.createElement(AlertDialogOverlayPrimitive, {
     ...props,
     className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React12.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React15.createElement(AlertDialogContentPrimitive, {
+  return /* @__PURE__ */ React12.createElement(AlertDialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React12.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
@@ -924,16 +721,102 @@ var AlertDialog = {
   Action: AlertDialogAction
 };
 
+// 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 Primitive6 } from "@radix-ui/react-primitive";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import React13, { forwardRef as forwardRef11 } from "react";
+var DropdownMenuRoot = DropdownMenuRootPrimitive;
+var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
+var DropdownMenuPortal = DropdownMenuPortalPrimitive;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuContentPrimitive, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef11(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot6 : Primitive6.div;
+  return /* @__PURE__ */ React13.createElement(Root3, {
+    ...props,
+    className: tx("dropdownMenu.viewport", "dropdown-menu__viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuArrowPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroup = DropdownMenuGroupPrimitive;
+var DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
+var DropdownMenuItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuItemPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuCheckboxItemPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.item", "dropdown-menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuSeparatorPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DropdownMenuLabelPrimitive, {
+    ...props,
+    className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel
+};
+
 // packages/ui/react-ui/src/components/Input/Input.tsx
 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 React16, { forwardRef as forwardRef13, Fragment, useCallback } from "react";
+import React14, { forwardRef as forwardRef12, 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__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React14.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -941,9 +824,9 @@ var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...pro
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -951,10 +834,10 @@ var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React16.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React14.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -963,9 +846,9 @@ var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -973,7 +856,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -992,7 +875,7 @@ var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React16.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React14.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -1004,13 +887,15 @@ var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
-  const { tx } = useThemeContext();
+  const themeContextValue = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React16.createElement(TextInputPrimitive, {
+  const { tx } = themeContextValue;
+  console.log("[theme context value]", themeContextValue);
+  return /* @__PURE__ */ React14.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1025,13 +910,13 @@ var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef12(({ __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__ */ React16.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React14.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1046,7 +931,7 @@ var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -1055,7 +940,7 @@ var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsCheck
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
   const Icon2 = checked === "indeterminate" ? Minus : checked ? Check : Fragment;
-  return /* @__PURE__ */ React16.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React14.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1069,16 +954,16 @@ var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React14.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React16.createElement(Icon2, checked && {
+  }, /* @__PURE__ */ React14.createElement(Icon2, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
@@ -1086,7 +971,7 @@ var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React16.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React14.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -1100,7 +985,7 @@ var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(SwitchThumbPrimitive, {
+  }, /* @__PURE__ */ React14.createElement(SwitchThumbPrimitive, {
     className: tx("input.switchThumb", "input--switch__thumb", {
       size
     })
@@ -1119,40 +1004,40 @@ 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 Slot7 } from "@radix-ui/react-slot";
-import React18, { forwardRef as forwardRef14 } from "react";
+import React16, { forwardRef as forwardRef13 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
 
 // packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
-import React17, { createContext as createContext7 } from "react";
+import React15, { createContext as createContext7 } from "react";
 var DensityContext = /* @__PURE__ */ createContext7({
   density: "coarse"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React17.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React15.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
 
-// packages/ui/react-ui/src/components/List/List.tsx
-var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+// packages/ui/react-ui/src/components/Lists/List.tsx
+var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React18.createElement(DensityProvider, {
+  return /* @__PURE__ */ React16.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React18.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React16.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
+var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
   const Root3 = asChild ? Slot7 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(Root3, {
+  return /* @__PURE__ */ React16.createElement(Root3, {
     ...!asChild && {
       role: "none"
     },
@@ -1166,7 +1051,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1174,10 +1059,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1185,26 +1070,26 @@ var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   const Icon2 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React18.createElement(Icon2, {
+  }, children || /* @__PURE__ */ React16.createElement(Icon2, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React18.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React16.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1222,24 +1107,24 @@ var ListItem = {
   MockOpenTrigger: MockListItemOpenTrigger
 };
 
-// packages/ui/react-ui/src/components/List/Tree.tsx
-import React19, { forwardRef as forwardRef15 } from "react";
-var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(List, {
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
+import React17, { forwardRef as forwardRef14 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  return /* @__PURE__ */ React17.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef14(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React19.createElement(List, {
+  return /* @__PURE__ */ React17.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
-  return /* @__PURE__ */ React19.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  return /* @__PURE__ */ React17.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1267,7 +1152,7 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 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 React20, { forwardRef as forwardRef16, useCallback as useCallback3, useRef } from "react";
+import React18, { forwardRef as forwardRef15, useCallback as useCallback3, useRef } from "react";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
@@ -1426,7 +1311,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  return /* @__PURE__ */ React20.createElement(MainProvider, {
+  return /* @__PURE__ */ React18.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1438,7 +1323,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1449,10 +1334,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
     onDismiss: () => setOpen(false)
   });
   const Root3 = isLg ? Primitive7.div : DialogContent2;
-  return /* @__PURE__ */ React20.createElement(DialogRoot2, {
+  return /* @__PURE__ */ React18.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React20.createElement(Root3, {
+  }, /* @__PURE__ */ React18.createElement(Root3, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1468,13 +1353,13 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React18.createElement(ElevationProvider, {
     elevation: "group"
   }, children)));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen } = useMainContext(NAVIGATION_SIDEBAR_NAME);
-  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+  return /* @__PURE__ */ React18.createElement(MainSidebar, {
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
@@ -1483,9 +1368,9 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
-  return /* @__PURE__ */ React20.createElement(MainSidebar, {
+  return /* @__PURE__ */ React18.createElement(MainSidebar, {
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
@@ -1494,14 +1379,14 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef15(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot8 : "main";
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  return /* @__PURE__ */ React18.createElement(Root3, {
     ...props,
     className: tx("main.content", "main", {
       isLg,
@@ -1513,13 +1398,13 @@ var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, c
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -1548,20 +1433,20 @@ var Main = {
 import { createContext as createContext9 } from "@radix-ui/react-context";
 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 React19, { forwardRef as forwardRef16 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef16(({ 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 ? Slot9 : Primitive8.div;
-  return /* @__PURE__ */ React21.createElement(MessageProvider, {
+  return /* @__PURE__ */ React19.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React21.createElement(Root3, {
+  }, /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1574,11 +1459,11 @@ var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
   const Root3 = asChild ? Slot9 : Primitive8.h2;
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1587,11 +1472,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
   const Root3 = asChild ? Slot9 : Primitive8.p;
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1609,36 +1494,36 @@ var Message = {
 import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
-import React22, { forwardRef as forwardRef18 } from "react";
+import React20, { forwardRef as forwardRef17 } from "react";
 var PopoverRoot = PopoverRootPrimitive;
 var PopoverPortal = PopoverPortalPrimitive;
 var PopoverTrigger = PopoverTriggerPrimitive;
 var PopoverAnchor = PopoverAnchorPrimitive;
 var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(PopoverArrowPrimitive, {
+  return /* @__PURE__ */ React20.createElement(PopoverArrowPrimitive, {
     ...props,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var PopoverContent = /* @__PURE__ */ forwardRef18(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(PopoverContentPrimitive, {
+  return /* @__PURE__ */ React20.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("popover.content", "popover", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot10 : Primitive9.div;
-  return /* @__PURE__ */ React22.createElement(Root3, {
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1658,29 +1543,36 @@ var Popover = {
   Viewport: PopoverViewport
 };
 
-// packages/ui/react-ui/src/components/ProgressBar/ProgressBar.tsx
-import React23 from "react";
-var ProgressBar = (props) => {
-  const { className, indeterminate = false, progress = 0 } = props;
-  return /* @__PURE__ */ React23.createElement("span", {
+// packages/ui/react-ui/src/components/Status/Status.tsx
+import React21, { forwardRef as forwardRef18 } from "react";
+var Status = /* @__PURE__ */ forwardRef18(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React21.createElement("span", {
+    role: "status",
+    ...props,
+    className: tx("status.root", "status", {
+      indeterminate
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React21.createElement("span", {
     role: "none",
-    className: "w-20 h-1 inline-block relative bg-neutral-400/25 rounded-full" + (className ? " " + className : "")
-  }, /* @__PURE__ */ React23.createElement("span", {
-    className: "absolute left-0 top-0 bottom-0 inline-block bg-neutral-400 rounded-full" + (indeterminate ? " animate-progress-indeterminate" : ""),
-    ...indeterminate ? {} : {
+    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 React24, { forwardRef as forwardRef19 } from "react";
+import React22, { forwardRef as forwardRef19 } from "react";
 var ScrollAreaRoot = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -1688,7 +1580,7 @@ var ScrollAreaRoot = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, for
 });
 var ScrollAreaViewport = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
@@ -1696,7 +1588,7 @@ var ScrollAreaViewport = /* @__PURE__ */ forwardRef19(({ classNames, ...props },
 });
 var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveScrollbar, {
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
@@ -1704,7 +1596,7 @@ var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef19(({ classNames, ...props }
 });
 var ScrollAreaThumb = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
@@ -1712,7 +1604,7 @@ var ScrollAreaThumb = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, fo
 });
 var ScrollAreaCorner = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -1729,27 +1621,27 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp, Check as Check2 } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React25, { forwardRef as forwardRef20 } from "react";
+import React23, { forwardRef as forwardRef20 } 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__ */ forwardRef20(({ placeholder, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(Button, props, /* @__PURE__ */ React25.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React23.createElement(Button, props, /* @__PURE__ */ React23.createElement(SelectPrimitive.Value, {
     placeholder
-  }), /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React23.createElement(SelectPrimitive.Icon, {
     className: "pis-2"
-  }, /* @__PURE__ */ React25.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React23.createElement(CaretDown2, {
     weight: "bold"
   }))));
 });
 var SelectContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Content, {
     ...props,
     className: tx("select.content", "select__content", {}, classNames),
     ref: forwardedRef
@@ -1757,28 +1649,28 @@ var SelectContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...pro
 });
 var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React23.createElement(CaretUp, {
     weight: "bold"
   }));
 });
 var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React23.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
 var SelectItem = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
@@ -1787,7 +1679,7 @@ var SelectItem = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forward
 var SelectItemText = SelectPrimitive.ItemText;
 var SelectItemIndicator = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
@@ -1795,13 +1687,13 @@ var SelectItemIndicator = /* @__PURE__ */ forwardRef20(({ classNames, children,
 });
 var SelectOption = /* @__PURE__ */ forwardRef20(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
+  }, /* @__PURE__ */ React23.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React23.createElement(SelectPrimitive.ItemIndicator, {
     className: tx("select.itemIndicator", "option__indicator", {})
-  }, /* @__PURE__ */ React25.createElement(Check2, {
+  }, /* @__PURE__ */ React23.createElement(Check2, {
     weight: "bold"
   })));
 });
@@ -1809,7 +1701,7 @@ var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
 var SelectSeparator = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
@@ -1817,7 +1709,7 @@ var SelectSeparator = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, fo
 });
 var SelectArrow = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -1846,10 +1738,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React26 from "react";
+import React24 from "react";
 var Separator2 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React24.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -1861,11 +1753,11 @@ var Separator2 = ({ classNames, orientation = "horizontal", ...props }) => {
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React27, { forwardRef as forwardRef21 } from "react";
+import React25, { forwardRef as forwardRef21 } from "react";
 var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot11 : Primitive10.span;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  return /* @__PURE__ */ React25.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -1878,31 +1770,31 @@ var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props
 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 React28, { forwardRef as forwardRef22 } from "react";
+import React26, { forwardRef as forwardRef22 } from "react";
 var ToastProvider = ToastProviderPrimitive;
 var ToastViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React26.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
 var ToastRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React26.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React26.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React28.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React26.createElement(DensityProvider, {
     density: "fine"
   }, children)));
 });
 var ToastBody = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -1911,7 +1803,7 @@ var ToastBody = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props },
 var ToastTitle = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot12 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -1920,7 +1812,7 @@ var ToastTitle = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }
 var ToastDescription = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot12 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -1929,7 +1821,7 @@ var ToastDescription = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...p
 var ToastActions = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React28.createElement(Root3, {
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -1951,46 +1843,46 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React29, { forwardRef as forwardRef23 } from "react";
+import React27, { forwardRef as forwardRef23 } from "react";
 var ToolbarRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var ToolbarButton = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Button, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React27.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarLink = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Link, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Link, {
+  }, /* @__PURE__ */ React27.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
 var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React27.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
 var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React27.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2000,9 +1892,9 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Separator2, {
+  }, /* @__PURE__ */ React27.createElement(Separator2, {
     orientation: "vertical",
     ...props
   }));
@@ -2018,14 +1910,14 @@ var Toolbar = {
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
-import React30, { forwardRef as forwardRef24 } from "react";
+import React28, { forwardRef as forwardRef24 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
 var TooltipArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipArrowPrimitive, {
+  return /* @__PURE__ */ React28.createElement(TooltipArrowPrimitive, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
@@ -2033,7 +1925,7 @@ var TooltipArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwa
 });
 var TooltipContent = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React28.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
@@ -2052,7 +1944,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React31, { createContext as createContext10, useEffect as useEffect4 } from "react";
+import React29, { createContext as createContext10, useEffect as useEffect4 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2080,19 +1972,19 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ React31.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React29.createElement(ThemeContext.Provider, {
     value: {
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard()
     }
-  }, /* @__PURE__ */ React31.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React29.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React29.createElement(ElevationProvider, {
     elevation: rootElevation
-  }, /* @__PURE__ */ React31.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React29.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -2106,12 +1998,6 @@ export {
   Breadcrumb,
   Button,
   ButtonGroup,
-  Card,
-  CardBody,
-  CardHeader,
-  CardMedia,
-  CardTitle,
-  Center,
   DensityContext,
   DensityProvider,
   Dialog,
@@ -2127,10 +2013,10 @@ export {
   Main,
   Message,
   Popover,
-  ProgressBar,
   ScrollArea,
   Select,
   Separator2 as Separator,
+  Status,
   Tag,
   ThemeContext,
   ThemeProvider,