@dxos/react-ui 0.3.7-main.f0cd532 → 0.3.7-next.bfe6796

package/dist/lib/browser/index.mjs

@@ -199,10 +199,10 @@ var AvatarFrame = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }
   }));
 });
 var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root4 = asChild ? Slot : Primitive.span;
+  const Root3 = asChild ? Slot : Primitive.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ React2.createElement(Root4, {
+  return /* @__PURE__ */ React2.createElement(Root3, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -212,10 +212,10 @@ var AvatarLabel = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...
   });
 });
 var AvatarDescription = /* @__PURE__ */ forwardRef(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root4 = asChild ? Slot : Primitive.span;
+  const Root3 = asChild ? Slot : Primitive.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ React2.createElement(Root4, {
+  return /* @__PURE__ */ React2.createElement(Root3, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -372,8 +372,8 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef3 } from "react";
 var Link = /* @__PURE__ */ forwardRef3(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot2 : Primitive2.a;
-  return /* @__PURE__ */ React4.createElement(Root4, {
+  const Root3 = asChild ? Slot2 : Primitive2.a;
+  return /* @__PURE__ */ React4.createElement(Root3, {
     ...props,
     className: tx("link.root", "link", {}, classNames),
     ref: forwardedRef
@@ -383,8 +383,8 @@ 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) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot3 : Primitive3.div;
-  return /* @__PURE__ */ React5.createElement(Root4, {
+  const Root3 = asChild ? Slot3 : Primitive3.div;
+  return /* @__PURE__ */ React5.createElement(Root3, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -393,8 +393,8 @@ var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
 });
 var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot3 : Primitive3.ol;
-  return /* @__PURE__ */ React5.createElement(Root4, {
+  const Root3 = asChild ? Slot3 : Primitive3.ol;
+  return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
@@ -402,24 +402,24 @@ var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...prop
 });
 var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot3 : Primitive3.li;
-  return /* @__PURE__ */ React5.createElement(Root4, {
+  const Root3 = asChild ? Slot3 : Primitive3.li;
+  return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
-  const Root4 = asChild ? Slot3 : Link;
-  return /* @__PURE__ */ React5.createElement(Root4, {
+  const Root3 = asChild ? Slot3 : Link;
+  return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot3 : "h1";
-  return /* @__PURE__ */ React5.createElement(Root4, {
+  const Root3 = asChild ? Slot3 : "h1";
+  return /* @__PURE__ */ React5.createElement(Root3, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -461,8 +461,8 @@ var Button = /* @__PURE__ */ forwardRef5(({ classNames, children, density: props
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root4 = asChild ? Slot4 : Primitive4.button;
-  return /* @__PURE__ */ React6.createElement(Root4, {
+  const Root3 = asChild ? Slot4 : Primitive4.button;
+  return /* @__PURE__ */ React6.createElement(Root3, {
     ref,
     ...props,
     className: tx("button.root", "button", {
@@ -481,8 +481,8 @@ Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root4 = asChild ? Slot4 : Primitive4.div;
-  return /* @__PURE__ */ React6.createElement(Root4, {
+  const Root3 = asChild ? Slot4 : Primitive4.div;
+  return /* @__PURE__ */ React6.createElement(Root3, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
@@ -576,8 +576,8 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef8(({ classNames, children, .
 });
 var DropdownMenuViewport = /* @__PURE__ */ forwardRef8(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot5 : Primitive5.div;
-  return /* @__PURE__ */ React10.createElement(Root4, {
+  const Root3 = asChild ? Slot5 : Primitive5.div;
+  return /* @__PURE__ */ React10.createElement(Root3, {
     ...props,
     className: tx("dropdownMenu.viewport", "dropdown-menu__viewport", {}, classNames),
     ref: forwardedRef
@@ -757,24 +757,156 @@ var Center = (props) => {
   }, children);
 };
 
-// packages/ui/react-ui/src/components/ComboBox/ComboBox.tsx
-import { CaretDown, CaretUp } from "@phosphor-icons/react";
-import { createContextScope } from "@radix-ui/react-context";
-import { createPopperScope } from "@radix-ui/react-popper";
-import * as PopperPrimitive from "@radix-ui/react-popper";
-import { useCombobox } from "downshift";
+// 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";
+var DialogRoot = DialogRootPrimitive;
+var DialogTrigger = DialogTriggerPrimitive;
+var DialogPortal = DialogPortalPrimitive;
+var DialogTitle = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", "dialog__title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogDescription = /* @__PURE__ */ forwardRef10(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", "dialog__description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var DialogClose = DialogClosePrimitive;
+var DIALOG_OVERLAY_NAME = "DialogOverlay";
+var DIALOG_CONTENT_NAME = "DialogContent";
+var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var DialogOverlay = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(DialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(OverlayLayoutProvider, {
+    inOverlayLayout: true
+  }, children));
+});
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+var DialogContent = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React13.createElement(DialogContentPrimitive, {
+    ...props,
+    className: tx("dialog.content", "dialog", {
+      inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+};
+
+// 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";
+var AlertDialogRoot = AlertDialogRootPrimitive;
+var AlertDialogTrigger = AlertDialogTriggerPrimitive;
+var AlertDialogPortal = AlertDialogPortalPrimitive;
+var AlertDialogCancel = AlertDialogCancelPrimitive;
+var AlertDialogAction = AlertDialogActionPrimitive;
+var AlertDialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(AlertDialogTitlePrimitive, {
+    ...props,
+    className: tx("dialog.title", "dialog--alert__title", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var AlertDialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(AlertDialogDescriptionPrimitive, {
+    ...props,
+    className: tx("dialog.description", "dialog--alert__description", {
+      srOnly
+    }, classNames),
+    ref: forwardedRef
+  });
+});
+var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
+var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
+  inOverlayLayout: false
+});
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(AlertDialogOverlayPrimitive, {
+    ...props,
+    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(OverlayLayoutProvider2, {
+    inOverlayLayout: true
+  }, children));
+});
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+var AlertDialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
+  return /* @__PURE__ */ React14.createElement(AlertDialogContentPrimitive, {
+    ...props,
+    className: tx("dialog.content", "dialog--alert", {
+      inOverlayLayout
+    }, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+var AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+};
 
 // 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 React13, { forwardRef as forwardRef10, Fragment, useCallback } from "react";
+import React15, { 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__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React15.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -782,9 +914,9 @@ var Label = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...pro
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -792,10 +924,10 @@ var Description = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef10(({ __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__ */ React13.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React15.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -804,9 +936,9 @@ var Validation = /* @__PURE__ */ forwardRef10(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef10(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -814,7 +946,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef10(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef10(({ 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);
@@ -833,7 +965,7 @@ var PinInput = /* @__PURE__ */ forwardRef10(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React13.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React15.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -845,13 +977,13 @@ var PinInput = /* @__PURE__ */ forwardRef10(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef10(({ __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 density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React13.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React15.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -866,13 +998,13 @@ var TextInput = /* @__PURE__ */ forwardRef10(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef10(({ __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__ */ React13.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React15.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -887,7 +1019,7 @@ var TextArea = /* @__PURE__ */ forwardRef10(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef10(({ __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,
@@ -896,7 +1028,7 @@ var Checkbox = /* @__PURE__ */ forwardRef10(({ __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__ */ React13.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React15.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -910,23 +1042,24 @@ var Checkbox = /* @__PURE__ */ forwardRef10(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React13.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React15.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React13.createElement(Icon2, checked && {
+  }, /* @__PURE__ */ React15.createElement(Icon2, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef10(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, 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,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React13.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React15.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -936,11 +1069,14 @@ var Switch = /* @__PURE__ */ forwardRef10(({ __inputScope, checked: propsChecked
       "aria-invalid": "true",
       "aria-errormessage": errorMessageId
     },
-    // className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
-    className: "w-[56px] h-[32px] bg-transparent rounded-full px-[4px] border-2 border-neutral-500 relative data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 outline-none cursor-default",
+    className: tx("input.switch", "input--switch", {
+      size
+    }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React13.createElement(SwitchThumbPrimitive, {
-    className: "block w-[22px] h-[22px] bg-neutral-500 rounded-full border-neutral-100 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-white"
+  }, /* @__PURE__ */ React15.createElement(SwitchThumbPrimitive, {
+    className: tx("input.switchThumb", "input--switch__thumb", {
+      size
+    })
   }));
 });
 var Input = {
@@ -956,275 +1092,40 @@ var Input = {
   DescriptionAndValidation
 };
 
-// packages/ui/react-ui/src/components/ComboBox/ComboBox.tsx
-var COMBOBOX_NAME = "ComboBox";
-var usePopperScope = createPopperScope();
-var [createComboBoxContext] = createContextScope(COMBOBOX_NAME, [
-  createPopperScope
-]);
-var [ComboBoxProvider, useComboBoxContext] = createComboBoxContext(COMBOBOX_NAME);
-var ComboBoxRoot = ({ __scopeComboBox, children, classNames, items = [], value, onChange, onInputChange }) => {
-  const { tx } = useThemeContext();
-  const popperScope = usePopperScope(__scopeComboBox);
-  const comboProps = useCombobox({
-    items,
-    itemToString: (selectedItem) => selectedItem?.label ?? "",
-    onInputValueChange: ({ inputValue }) => onInputChange?.(inputValue),
-    selectedItem: value ?? null,
-    onSelectedItemChange: ({ selectedItem }) => onChange?.(selectedItem === null ? void 0 : selectedItem)
-  });
-  return /* @__PURE__ */ React14.createElement(ComboBoxProvider, {
-    scope: __scopeComboBox,
-    items,
-    ...comboProps
-  }, /* @__PURE__ */ React14.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React14.createElement("div", {
-    className: tx("combobox.root", "combobox__root", {}, classNames)
-  }, children)));
-};
-var INPUT_NAME2 = "ComboBoxInput";
-var ComboBoxInput = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, placeholder }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const popperScope = usePopperScope(__scopeComboBox);
-  const { getInputProps, getToggleButtonProps, isOpen } = useComboBoxContext(INPUT_NAME2, __scopeComboBox);
-  return /* @__PURE__ */ React14.createElement(PopperPrimitive.Anchor, {
-    asChild: true,
-    ...popperScope,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement("div", {
-    role: "none",
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React14.createElement(Input.Root, null, /* @__PURE__ */ React14.createElement(Input.TextInput, {
-    ...getInputProps(),
-    placeholder,
-    variant: "subdued",
-    classNames: tx("combobox.input", "combobox__input", {}, classNames)
-  })), /* @__PURE__ */ React14.createElement(Button, {
-    ...getToggleButtonProps(),
-    "aria-label": "toggle menu",
-    variant: "ghost",
-    classNames: tx("combobox.button", "combobox__button")
-  }, isOpen && /* @__PURE__ */ React14.createElement(CaretUp, null) || /* @__PURE__ */ React14.createElement(CaretDown, null))));
-});
-var CONTENT_NAME = "ComboBoxContent";
-var ComboBoxContent = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, children }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const popperScope = usePopperScope(__scopeComboBox);
-  const { getMenuProps, isOpen } = useComboBoxContext(CONTENT_NAME, __scopeComboBox);
-  return /* @__PURE__ */ React14.createElement(PopperPrimitive.Content, {
-    "data-state": isOpen,
-    role: "dialog",
-    ...popperScope,
-    ref: forwardedRef,
-    style: {
-      // Re-namespace exposed content custom properties.
-      ...{
-        "--radix-combobox-content-transform-origin": "var(--radix-popper-transform-origin)",
-        "--radix-combobox-content-available-width": "var(--radix-popper-available-width)",
-        "--radix-combobox-content-available-height": "var(--radix-popper-available-height)",
-        "--radix-combobox-trigger-width": "var(--radix-popper-anchor-width)",
-        "--radix-combobox-trigger-height": "var(--radix-popper-anchor-height)"
-      }
-    }
-  }, /* @__PURE__ */ React14.createElement("ul", {
-    ...getMenuProps(),
-    className: tx("combobox.content", "combobox__content", {}, classNames)
-  }, isOpen && children));
-});
-var ITEM_NAME = "ComboBoxItem";
-var ComboBoxItem = /* @__PURE__ */ forwardRef11(({ __scopeComboBox, classNames, children, item }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { getItemProps, items, selectedItem, highlightedIndex } = useComboBoxContext(ITEM_NAME, __scopeComboBox);
-  return /* @__PURE__ */ React14.createElement("li", {
-    ref: forwardedRef,
-    "data-selected": selectedItem?.id === item.id ? "true" : void 0,
-    "data-highlighted": highlightedIndex !== void 0 && items[highlightedIndex]?.id === item.id ? "true" : void 0,
-    className: tx("combobox.item", "item", {}, classNames),
-    ...getItemProps({
-      item
-    })
-  }, children);
-});
-var ComboBox = {
-  Root: ComboBoxRoot,
-  Input: ComboBoxInput,
-  Content: ComboBoxContent,
-  Item: ComboBoxItem
-};
-
-// 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 React15, { forwardRef as forwardRef12 } from "react";
-var DialogRoot = DialogRootPrimitive;
-var DialogTrigger = DialogTriggerPrimitive;
-var DialogPortal = DialogPortalPrimitive;
-var DialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DialogTitlePrimitive, {
-    ...props,
-    className: tx("dialog.title", "dialog__title", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-var DialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DialogDescriptionPrimitive, {
-    ...props,
-    className: tx("dialog.description", "dialog__description", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-var DialogClose = DialogClosePrimitive;
-var DIALOG_OVERLAY_NAME = "DialogOverlay";
-var DIALOG_CONTENT_NAME = "DialogContent";
-var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext5(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false
-});
-var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React15.createElement(DialogOverlayPrimitive, {
-    ...props,
-    className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(OverlayLayoutProvider, {
-    inOverlayLayout: true
-  }, children));
-});
-DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React15.createElement(DialogContentPrimitive, {
-    ...props,
-    className: tx("dialog.content", "dialog", {
-      inOverlayLayout
-    }, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
-});
-DialogContent.displayName = DIALOG_CONTENT_NAME;
-var Dialog = {
-  Root: DialogRoot,
-  Trigger: DialogTrigger,
-  Portal: DialogPortal,
-  Overlay: DialogOverlay,
-  Content: DialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose
-};
-
-// 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 React16, { forwardRef as forwardRef13 } from "react";
-var AlertDialogRoot = AlertDialogRootPrimitive;
-var AlertDialogTrigger = AlertDialogTriggerPrimitive;
-var AlertDialogPortal = AlertDialogPortalPrimitive;
-var AlertDialogCancel = AlertDialogCancelPrimitive;
-var AlertDialogAction = AlertDialogActionPrimitive;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(AlertDialogTitlePrimitive, {
-    ...props,
-    className: tx("dialog.title", "dialog--alert__title", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-var AlertDialogDescription = /* @__PURE__ */ forwardRef13(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(AlertDialogDescriptionPrimitive, {
-    ...props,
-    className: tx("dialog.description", "dialog--alert__description", {
-      srOnly
-    }, classNames),
-    ref: forwardedRef
-  });
-});
-var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
-var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
-var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext6(ALERT_DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false
-});
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(AlertDialogOverlayPrimitive, {
-    ...props,
-    className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(OverlayLayoutProvider2, {
-    inOverlayLayout: true
-  }, children));
-});
-AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React16.createElement(AlertDialogContentPrimitive, {
-    ...props,
-    className: tx("dialog.content", "dialog--alert", {
-      inOverlayLayout
-    }, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React16.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
-});
-AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
-var AlertDialog = {
-  Root: AlertDialogRoot,
-  Trigger: AlertDialogTrigger,
-  Portal: AlertDialogPortal,
-  Overlay: AlertDialogOverlay,
-  Content: AlertDialogContent,
-  Title: AlertDialogTitle,
-  Description: AlertDialogDescription,
-  Cancel: AlertDialogCancel,
-  Action: AlertDialogAction
-};
-
 // packages/ui/react-ui/src/components/List/List.tsx
-import { CaretDown as CaretDown2, CaretRight } from "@phosphor-icons/react";
+import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
-import React18, { forwardRef as forwardRef14 } from "react";
+import React17, { 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 React16, { 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__ */ React16.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
 
 // packages/ui/react-ui/src/components/List/List.tsx
-var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React18.createElement(DensityProvider, {
+  return /* @__PURE__ */ React17.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React18.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React17.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root4 = asChild ? Slot6 : "div";
+var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot6 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement(Root4, {
+  return /* @__PURE__ */ React17.createElement(Root3, {
     ...!asChild && {
       role: "none"
     },
@@ -1238,7 +1139,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__ */ React17.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1246,10 +1147,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__ */ React17.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1257,26 +1158,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 ? CaretDown2 : CaretRight;
-  return /* @__PURE__ */ React18.createElement(ListPrimitiveItemOpenTrigger, {
+  const Icon2 = open ? CaretDown : CaretRight;
+  return /* @__PURE__ */ React17.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React18.createElement(Icon2, {
+  }, children || /* @__PURE__ */ React17.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__ */ React17.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1295,23 +1196,23 @@ var ListItem = {
 };
 
 // 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, {
+import React18, { forwardRef as forwardRef14 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1339,7 +1240,7 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } 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 React19, { 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
@@ -1498,7 +1399,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  return /* @__PURE__ */ React20.createElement(MainProvider, {
+  return /* @__PURE__ */ React19.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1510,7 +1411,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
   });
@@ -1520,11 +1421,11 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const Root4 = isLg ? Primitive6.div : DialogContent2;
-  return /* @__PURE__ */ React20.createElement(DialogRoot2, {
+  const Root3 = isLg ? Primitive6.div : DialogContent2;
+  return /* @__PURE__ */ React19.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React20.createElement(Root4, {
+  }, /* @__PURE__ */ React19.createElement(Root3, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1540,13 +1441,13 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React19.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__ */ React19.createElement(MainSidebar, {
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
@@ -1555,9 +1456,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__ */ React19.createElement(MainSidebar, {
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
@@ -1566,14 +1467,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 Root4 = asChild ? Slot7 : "main";
-  return /* @__PURE__ */ React20.createElement(Root4, {
+  const Root3 = asChild ? Slot7 : "main";
+  return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("main.content", "main", {
       isLg,
@@ -1585,13 +1486,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__ */ React19.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -1620,20 +1521,20 @@ var Main = {
 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 React21, { forwardRef as forwardRef17 } from "react";
+import React20, { 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 Root4 = asChild ? Slot8 : Primitive7.div;
-  return /* @__PURE__ */ React21.createElement(MessageProvider, {
+  const Root3 = asChild ? Slot8 : Primitive7.div;
+  return /* @__PURE__ */ React20.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React21.createElement(Root4, {
+  }, /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1646,11 +1547,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 Root4 = asChild ? Slot8 : Primitive7.h2;
-  return /* @__PURE__ */ React21.createElement(Root4, {
+  const Root3 = asChild ? Slot8 : Primitive7.h2;
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1659,11 +1560,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 Root4 = asChild ? Slot8 : Primitive7.p;
-  return /* @__PURE__ */ React21.createElement(Root4, {
+  const Root3 = asChild ? Slot8 : Primitive7.p;
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1681,36 +1582,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 Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
-import React22, { forwardRef as forwardRef18 } from "react";
+import React21, { 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__ */ React21.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__ */ React21.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("popover.content", "popover", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React21.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 Root4 = asChild ? Slot9 : Primitive8.div;
-  return /* @__PURE__ */ React22.createElement(Root4, {
+  const Root3 = asChild ? Slot9 : Primitive8.div;
+  return /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1731,13 +1632,13 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/ProgressBar/ProgressBar.tsx
-import React23 from "react";
+import React22 from "react";
 var ProgressBar = (props) => {
   const { className, indeterminate = false, progress = 0 } = props;
-  return /* @__PURE__ */ React23.createElement("span", {
+  return /* @__PURE__ */ React22.createElement("span", {
     role: "none",
     className: "w-20 h-1 inline-block relative bg-neutral-400/25 rounded-full" + (className ? " " + className : "")
-  }, /* @__PURE__ */ React23.createElement("span", {
+  }, /* @__PURE__ */ React22.createElement("span", {
     className: "absolute left-0 top-0 bottom-0 inline-block bg-neutral-400 rounded-full" + (indeterminate ? " animate-progress-indeterminate" : ""),
     ...indeterminate ? {} : {
       style: {
@@ -1749,42 +1650,42 @@ var ProgressBar = (props) => {
 
 // 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";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+import React23, { forwardRef as forwardRef18 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveScrollbar, {
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -1799,97 +1700,97 @@ var ScrollArea = {
 };
 
 // packages/ui/react-ui/src/components/Select/Select.tsx
-import { CaretDown as CaretDown3, CaretUp as CaretUp2, Check as Check2 } from "@phosphor-icons/react";
+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 React24, { forwardRef as forwardRef19 } 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, {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef19(({ placeholder, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(Button, props, /* @__PURE__ */ React25.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React24.createElement(Button, props, /* @__PURE__ */ React24.createElement(SelectPrimitive.Value, {
     placeholder
-  }), /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React24.createElement(SelectPrimitive.Icon, {
     className: "pis-2"
-  }, /* @__PURE__ */ React25.createElement(CaretDown3, {
+  }, /* @__PURE__ */ React24.createElement(CaretDown2, {
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Content, {
     ...props,
     className: tx("select.content", "select__content", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretUp2, {
+  }, children ?? /* @__PURE__ */ React24.createElement(CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React25.createElement(CaretDown3, {
+  }, children ?? /* @__PURE__ */ React24.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
-var SelectItem = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef20(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef19(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
-    className: tx("select.itemIndicator", "option__indicator", {}, classNames)
-  }, /* @__PURE__ */ React25.createElement(Check2, {
+  }, /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
+    className: tx("select.itemIndicator", "option__indicator", {})
+  }, /* @__PURE__ */ React24.createElement(Check2, {
     weight: "bold"
   })));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -1918,10 +1819,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 React25 from "react";
 var Separator2 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React25.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -1933,11 +1834,11 @@ 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 React27, { forwardRef as forwardRef21 } from "react";
-var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import React26, { forwardRef as forwardRef20 } from "react";
+var Tag = /* @__PURE__ */ forwardRef20(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot10 : Primitive9.span;
-  return /* @__PURE__ */ React27.createElement(Root4, {
+  const Root3 = asChild ? Slot10 : Primitive9.span;
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -1950,58 +1851,58 @@ var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } 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 React27, { forwardRef as forwardRef21 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React27.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React27.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React27.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React28.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React27.createElement(DensityProvider, {
     density: "fine"
   }, children)));
 });
-var ToastBody = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React28.createElement(Root4, {
+  const Root3 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot11 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React28.createElement(Root4, {
+  const Root3 = asChild ? Slot11 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot11 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React28.createElement(Root4, {
+  const Root3 = asChild ? Slot11 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef21(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root4 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React28.createElement(Root4, {
+  const Root3 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2023,46 +1924,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";
-var ToolbarRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+import React28, { forwardRef as forwardRef22 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React28.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, {
+var ToolbarButton = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React28.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef22((props, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Link, {
+  }, /* @__PURE__ */ React28.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React28.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef22(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Button, {
+  }, /* @__PURE__ */ React28.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2072,9 +1973,9 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React29.createElement(Separator2, {
+  }, /* @__PURE__ */ React28.createElement(Separator2, {
     orientation: "vertical",
     ...props
   }));
@@ -2090,22 +1991,22 @@ var Toolbar = {
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
-import React30, { forwardRef as forwardRef24 } from "react";
+import React29, { forwardRef as forwardRef23 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipArrowPrimitive, {
+  return /* @__PURE__ */ React29.createElement(TooltipArrowPrimitive, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React30.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React29.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
@@ -2124,7 +2025,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 React30, { createContext as createContext10, useEffect as useEffect4 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2152,19 +2053,19 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ React31.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React30.createElement(ThemeContext.Provider, {
     value: {
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard()
     }
-  }, /* @__PURE__ */ React31.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React30.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React30.createElement(ElevationProvider, {
     elevation: rootElevation
-  }, /* @__PURE__ */ React31.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React30.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -2183,7 +2084,6 @@ export {
   CardMedia,
   CardTitle,
   Center,
-  ComboBox,
   DensityContext,
   DensityProvider,
   Dialog,