@dxos/react-ui 0.3.11-main.3f845e1 → 0.3.11-main.463e5cd

package/dist/lib/browser/index.mjs

@@ -1,5 +1,5 @@
 // packages/ui/react-ui/src/index.ts
-import { useTranslation, Trans } from "react-i18next";
+import { Trans } from "react-i18next";
 export * from "@dxos/react-ui-types";
 export * from "@dxos/react-hooks";
 
@@ -23,14 +23,16 @@ var useElevationContext = (propsElevation) => {
 };
 
 // packages/ui/react-ui/src/hooks/useTranslationsContext.ts
-import { useContext as useContext3 } from "react";
+import { useContext as useContext4 } from "react";
 
 // packages/ui/react-ui/src/components/ThemeProvider/TranslationsProvider.tsx
+import { enUS as dtLocaleEnUs } from "date-fns/locale";
 import i18Next from "i18next";
-import React, { useEffect, createContext, useState, Suspense } from "react";
-import { initReactI18next } from "react-i18next";
+import React, { useEffect, createContext, useState, Suspense, useContext as useContext3 } from "react";
+import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
 var initialLng = "en-US";
 var initialNs = "dxos-common";
+var initialDtLocale = dtLocaleEnUs;
 var resources = {
   [initialLng]: {
     [initialNs]: {
@@ -47,9 +49,18 @@ void i18Next.use(initReactI18next).init({
   }
 });
 var TranslationsContext = /* @__PURE__ */ createContext({
-  appNs: initialNs
+  appNs: initialNs,
+  dtLocale: initialDtLocale
 });
-var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }) => {
+var useTranslation = (...args) => {
+  const result = useI18NextTranslation(...args);
+  const { dtLocale } = useContext3(TranslationsContext);
+  return {
+    ...result,
+    dtLocale
+  };
+};
+var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     setLoaded(false);
@@ -68,7 +79,8 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }) =
   ]);
   return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
     value: {
-      appNs: appNs ?? initialNs
+      appNs: appNs ?? initialNs,
+      dtLocale: dtLocale ?? initialDtLocale
     }
   }, /* @__PURE__ */ React.createElement(Suspense, {
     fallback
@@ -76,11 +88,11 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }) =
 };
 
 // packages/ui/react-ui/src/hooks/useTranslationsContext.ts
-var useTranslationsContext = () => useContext3(TranslationsContext);
+var useTranslationsContext = () => useContext4(TranslationsContext);
 
 // packages/ui/react-ui/src/hooks/useThemeContext.ts
-import { useContext as useContext4 } from "react";
-var useThemeContext = () => useContext4(ThemeContext);
+import { useContext as useContext5 } from "react";
+var useThemeContext = () => useContext5(ThemeContext);
 
 // packages/ui/react-ui/src/hooks/useVisualViewport.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
@@ -721,78 +733,163 @@ 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";
+// packages/ui/react-ui/src/components/Menus/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import React13, { forwardRef as forwardRef11 } from "react";
-var DropdownMenuRoot = DropdownMenuRootPrimitive;
-var DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
-var DropdownMenuPortal = DropdownMenuPortalPrimitive;
-var DropdownMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
+var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuContent = /* @__PURE__ */ forwardRef11(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuContentPrimitive, {
-    sideOffset: 4,
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Content, {
     collisionPadding: 8,
     ...props,
-    className: tx("dropdownMenu.content", "dropdown-menu", {}, classNames),
+    className: tx("menu.content", "menu", {}, classNames),
     ref: forwardedRef
   }, /* @__PURE__ */ React13.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef11(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__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),
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
+    ref: forwardedRef
+  }, children);
+});
+var ContextMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Arrow, {
+    ...props,
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+var ContextMenuItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Item, {
+    ...props,
+    className: tx("menu.item", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.CheckboxItem, {
+    ...props,
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Separator, {
+    ...props,
+    className: tx("menu.separator", "menu__item", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React13.createElement(ContextMenuPrimitive.Label, {
+    ...props,
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
+    ref: forwardedRef
+  });
+});
+var ContextMenu2 = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel
+};
+
+// packages/ui/react-ui/src/components/Menus/DropdownMenu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React14, { forwardRef as forwardRef12 } from "react";
+var DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Content, {
+    sideOffset: 4,
+    collisionPadding: 8,
+    ...props,
+    className: tx("menu.content", "menu", {}, classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React14.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, children));
+});
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef12(({ classNames, asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot7 : Primitive7.div;
+  return /* @__PURE__ */ React14.createElement(Root3, {
+    ...props,
+    className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuArrowPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Arrow, {
     ...props,
-    className: tx("dropdownMenu.arrow", "dropdown-menu__arrow", {}, classNames),
+    className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroup = DropdownMenuGroupPrimitive;
-var DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
-var DropdownMenuItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+var DropdownMenuItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuItemPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Item, {
     ...props,
-    className: tx("dropdownMenu.item", "dropdown-menu__item", {}, classNames),
+    className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuCheckboxItemPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.CheckboxItem, {
     ...props,
-    className: tx("dropdownMenu.item", "dropdown-menu__item--checkbox", {}, classNames),
+    className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuSeparatorPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Separator, {
     ...props,
-    className: tx("dropdownMenu.separator", "dropdown-menu__item", {}, classNames),
+    className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef11(({ classNames, ...props }, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef12(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React13.createElement(DropdownMenuLabelPrimitive, {
+  return /* @__PURE__ */ React14.createElement(DropdownMenuPrimitive.Label, {
     ...props,
-    className: tx("dropdownMenu.groupLabel", "dropdown-menu__group__label", {}, classNames),
+    className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
   });
 });
-var DropdownMenu = {
+var DropdownMenu2 = {
   Root: DropdownMenuRoot,
   Trigger: DropdownMenuTrigger,
   Portal: DropdownMenuPortal,
@@ -812,11 +909,11 @@ 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 React14, { forwardRef as forwardRef12, Fragment, useCallback } from "react";
+import React15, { forwardRef as forwardRef13, Fragment, useCallback } from "react";
 import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
-var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label3 = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React15.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -824,9 +921,9 @@ var Label = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...pro
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -834,10 +931,10 @@ var Description = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children,
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React14.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React15.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -846,9 +943,9 @@ var Validation = /* @__PURE__ */ forwardRef12(({ __inputScope, srOnly, className
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React14.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React15.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -856,7 +953,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef12(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
@@ -875,7 +972,7 @@ var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation:
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ React14.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React15.createElement(PinInputPrimitive, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -887,14 +984,14 @@ var PinInput = /* @__PURE__ */ forwardRef12(({ density: propsDensity, elevation:
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const themeContextValue = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
   const { tx } = themeContextValue;
-  return /* @__PURE__ */ React14.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React15.createElement(TextInputPrimitive, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -909,13 +1006,13 @@ var TextInput = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, densit
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React14.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React15.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -930,7 +1027,7 @@ var TextArea = /* @__PURE__ */ forwardRef12(({ __inputScope, classNames, density
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -939,7 +1036,7 @@ var Checkbox = /* @__PURE__ */ forwardRef12(({ __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__ */ React14.createElement(CheckboxPrimitive, {
+  return /* @__PURE__ */ React15.createElement(CheckboxPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -953,16 +1050,16 @@ var Checkbox = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsCheck
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(CheckboxIndicatorPrimitive, {
+  }, /* @__PURE__ */ React15.createElement(CheckboxIndicatorPrimitive, {
     asChild: true
-  }, /* @__PURE__ */ React14.createElement(Icon2, checked && {
+  }, /* @__PURE__ */ React15.createElement(Icon2, checked && {
     weight,
     className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size
     })
   })));
 });
-var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const [checked, onCheckedChange] = useControllableState({
     prop: propsChecked,
@@ -970,7 +1067,7 @@ var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ React14.createElement(SwitchPrimitive, {
+  return /* @__PURE__ */ React15.createElement(SwitchPrimitive, {
     ...props,
     checked,
     onCheckedChange,
@@ -984,7 +1081,7 @@ var Switch = /* @__PURE__ */ forwardRef12(({ __inputScope, checked: propsChecked
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React14.createElement(SwitchThumbPrimitive, {
+  }, /* @__PURE__ */ React15.createElement(SwitchThumbPrimitive, {
     className: tx("input.switchThumb", "input--switch__thumb", {
       size
     })
@@ -997,46 +1094,46 @@ var Input = {
   TextArea,
   Checkbox,
   Switch,
-  Label,
+  Label: Label3,
   Description,
   Validation,
   DescriptionAndValidation
 };
 
-// packages/ui/react-ui/src/components/Lists/List.tsx
+// packages/ui/react-ui/src/components/List/List.tsx
 import { CaretDown, CaretRight } from "@phosphor-icons/react";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React16, { forwardRef as forwardRef13 } from "react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import React17, { forwardRef as forwardRef14 } from "react";
 import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
 
 // packages/ui/react-ui/src/components/DensityProvider/DensityProvider.tsx
-import React15, { createContext as createContext7 } from "react";
+import React16, { createContext as createContext7 } from "react";
 var DensityContext = /* @__PURE__ */ createContext7({
   density: "coarse"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ React15.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ React16.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
 
-// packages/ui/react-ui/src/components/Lists/List.tsx
-var List = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+// packages/ui/react-ui/src/components/List/List.tsx
+var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ React16.createElement(DensityProvider, {
+  return /* @__PURE__ */ React17.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ React16.createElement(ListPrimitive, {
+  }, /* @__PURE__ */ React17.createElement(ListPrimitive, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root3 = asChild ? Slot7 : "div";
+var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root3 = asChild ? Slot8 : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(Root3, {
+  return /* @__PURE__ */ React17.createElement(Root3, {
     ...!asChild && {
       role: "none"
     },
@@ -1050,7 +1147,7 @@ var ListItemEndcap = /* @__PURE__ */ forwardRef13(({ children, classNames, asChi
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1058,10 +1155,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemHeading, {
+  return /* @__PURE__ */ React17.createElement(ListPrimitiveItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1069,26 +1166,26 @@ var ListItemHeading = /* @__PURE__ */ forwardRef13(({ children, classNames, ...p
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef13(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
   const Icon2 = open ? CaretDown : CaretRight;
-  return /* @__PURE__ */ React16.createElement(ListPrimitiveItemOpenTrigger, {
+  return /* @__PURE__ */ React17.createElement(ListPrimitiveItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ React16.createElement(Icon2, {
+  }, children || /* @__PURE__ */ React17.createElement(Icon2, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ React16.createElement(ListPrimitiveItem, {
+  return /* @__PURE__ */ React17.createElement(ListPrimitiveItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1106,24 +1203,24 @@ var ListItem = {
   MockOpenTrigger: MockListItemOpenTrigger
 };
 
-// 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, {
+// packages/ui/react-ui/src/components/List/Tree.tsx
+import React18, { forwardRef as forwardRef15 } from "react";
+var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ forwardRef14(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React17.createElement(List, {
+  return /* @__PURE__ */ React18.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
-  return /* @__PURE__ */ React17.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+  return /* @__PURE__ */ React18.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1148,10 +1245,10 @@ var TreeItem = {
 // packages/ui/react-ui/src/components/Main/Main.tsx
 import { createContext as createContext8 } from "@radix-ui/react-context";
 import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
-import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React18, { forwardRef as forwardRef15, useCallback as useCallback3, useRef } from "react";
+import React19, { forwardRef as forwardRef16, useCallback as useCallback3, useRef } from "react";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
@@ -1170,24 +1267,24 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState3(MotionState.IDLE);
+  const [motionState, setMotionState] = useState3(0);
   const [gestureStartX, setGestureStartX] = useState3(0);
   const setIdle = useCallback2(() => {
-    setMotionState(MotionState.IDLE);
+    setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
   const setFollowing = useCallback2(() => {
-    setMotionState(MotionState.FOLLOWING);
+    setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
   const handlePointerDown = useCallback2(({ screenX }) => {
-    if (motionState === MotionState.IDLE) {
-      setMotionState(MotionState.DEBOUNCING);
+    if (motionState === 0) {
+      setMotionState(1);
       setGestureStartX(screenX);
     }
   }, [
@@ -1197,7 +1294,7 @@ var useSwipeToDismiss = (ref, {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
-        case MotionState.FOLLOWING:
+        case 2:
           if (Math.abs(delta) > dismissThreshold) {
             setIdle();
             onDismiss?.();
@@ -1205,7 +1302,7 @@ var useSwipeToDismiss = (ref, {
             $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
           }
           break;
-        case MotionState.DEBOUNCING:
+        case 1:
           if (Math.abs(delta) > debounceThreshold) {
             setFollowing();
           }
@@ -1310,7 +1407,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  return /* @__PURE__ */ React18.createElement(MainProvider, {
+  return /* @__PURE__ */ React19.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1322,7 +1419,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1332,11 +1429,11 @@ var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const Root3 = isLg ? Primitive7.div : DialogContent2;
-  return /* @__PURE__ */ React18.createElement(DialogRoot2, {
+  const Root3 = isLg ? Primitive8.div : DialogContent2;
+  return /* @__PURE__ */ React19.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React18.createElement(Root3, {
+  }, /* @__PURE__ */ React19.createElement(Root3, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1352,13 +1449,13 @@ var MainSidebar = /* @__PURE__ */ forwardRef15(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React18.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React19.createElement(ElevationProvider, {
     elevation: "group"
   }, children)));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen } = useMainContext(NAVIGATION_SIDEBAR_NAME);
-  return /* @__PURE__ */ React18.createElement(MainSidebar, {
+  return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
@@ -1367,9 +1464,9 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
-  return /* @__PURE__ */ React18.createElement(MainSidebar, {
+  return /* @__PURE__ */ React19.createElement(MainSidebar, {
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
@@ -1378,14 +1475,14 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef15((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef15(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot8 : "main";
-  return /* @__PURE__ */ React18.createElement(Root3, {
+  const Root3 = asChild ? Slot9 : "main";
+  return /* @__PURE__ */ React19.createElement(Root3, {
     ...props,
     className: tx("main.content", "main", {
       isLg,
@@ -1397,13 +1494,13 @@ var MainContent = /* @__PURE__ */ forwardRef15(({ asChild, classNames, bounce, c
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -1430,22 +1527,22 @@ var Main = {
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
 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 React19, { forwardRef as forwardRef16 } from "react";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import React20, { forwardRef as forwardRef17 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef16(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot9 : Primitive8.div;
-  return /* @__PURE__ */ React19.createElement(MessageProvider, {
+  const Root3 = asChild ? Slot10 : Primitive9.div;
+  return /* @__PURE__ */ React20.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React19.createElement(Root3, {
+  }, /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1458,11 +1555,11 @@ var MessageRoot = /* @__PURE__ */ forwardRef16(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root3 = asChild ? Slot9 : Primitive8.h2;
-  return /* @__PURE__ */ React19.createElement(Root3, {
+  const Root3 = asChild ? Slot10 : Primitive9.h2;
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1471,11 +1568,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef16(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef16(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root3 = asChild ? Slot9 : Primitive8.p;
-  return /* @__PURE__ */ React19.createElement(Root3, {
+  const Root3 = asChild ? Slot10 : Primitive9.p;
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1491,38 +1588,38 @@ var Message = {
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
 import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import React20, { forwardRef as forwardRef17 } from "react";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React21, { forwardRef as forwardRef18 } from "react";
 var PopoverRoot = PopoverRootPrimitive;
 var PopoverPortal = PopoverPortalPrimitive;
 var PopoverTrigger = PopoverTriggerPrimitive;
 var PopoverAnchor = PopoverAnchorPrimitive;
 var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(PopoverArrowPrimitive, {
+  return /* @__PURE__ */ React21.createElement(PopoverArrowPrimitive, {
     ...props,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var PopoverContent = /* @__PURE__ */ forwardRef17(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef18(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(PopoverContentPrimitive, {
+  return /* @__PURE__ */ React21.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("popover.content", "popover", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React21.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var PopoverViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot10 : Primitive9.div;
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  const Root3 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1543,17 +1640,17 @@ var Popover = {
 };
 
 // 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) => {
+import React22, { forwardRef as forwardRef19 } from "react";
+var Status = /* @__PURE__ */ forwardRef19(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement("span", {
+  return /* @__PURE__ */ React22.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
       indeterminate
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React21.createElement("span", {
+  }, /* @__PURE__ */ React22.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate
@@ -1568,42 +1665,42 @@ var Status = /* @__PURE__ */ forwardRef18(({ classNames, children, progress = 0,
 
 // packages/ui/react-ui/src/components/ScrollArea/ScrollArea.tsx
 import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
-import React22, { forwardRef as forwardRef19 } from "react";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
+import React23, { forwardRef as forwardRef20 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.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__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.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__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.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__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.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__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -1620,95 +1717,95 @@ 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 React23, { forwardRef as forwardRef20 } from "react";
+import React24, { forwardRef as forwardRef21 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
 var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
-var SelectTriggerButton = /* @__PURE__ */ forwardRef20(({ placeholder, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Trigger, {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef21(({ placeholder, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(Button, props, /* @__PURE__ */ React23.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React24.createElement(Button, props, /* @__PURE__ */ React24.createElement(SelectPrimitive.Value, {
     placeholder
-  }), /* @__PURE__ */ React23.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ React24.createElement(SelectPrimitive.Icon, {
     className: "pis-2"
-  }, /* @__PURE__ */ React23.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React24.createElement(CaretDown2, {
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.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__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React23.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React24.createElement(CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React23.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React24.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
-var SelectItem = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.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__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.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__ */ forwardRef21(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React23.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React23.createElement(SelectPrimitive.ItemIndicator, {
+  }, /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
     className: tx("select.itemIndicator", "option__indicator", {})
-  }, /* @__PURE__ */ React23.createElement(Check2, {
+  }, /* @__PURE__ */ React24.createElement(Check2, {
     weight: "bold"
   })));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.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__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -1737,10 +1834,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React24 from "react";
-var Separator2 = ({ classNames, orientation = "horizontal", ...props }) => {
+import React25 from "react";
+var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React25.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -1750,13 +1847,13 @@ 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 React25, { forwardRef as forwardRef21 } from "react";
-var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import React26, { forwardRef as forwardRef22 } from "react";
+var Tag = /* @__PURE__ */ forwardRef22(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : Primitive10.span;
-  return /* @__PURE__ */ React25.createElement(Root3, {
+  const Root3 = asChild ? Slot12 : Primitive11.span;
+  return /* @__PURE__ */ React26.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -1766,61 +1863,61 @@ var Tag = /* @__PURE__ */ forwardRef21(({ asChild, palette, classNames, ...props
 });
 
 // packages/ui/react-ui/src/components/Toast/Toast.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { Slot as Slot12 } from "@radix-ui/react-slot";
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } 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 React26, { forwardRef as forwardRef22 } from "react";
+import React27, { forwardRef as forwardRef23 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.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__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React27.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React26.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React27.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React26.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React27.createElement(DensityProvider, {
     density: "fine"
   }, children)));
 });
-var ToastBody = /* @__PURE__ */ forwardRef22(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React26.createElement(Root3, {
+  const Root3 = asChild ? Slot13 : Primitive12.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__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React26.createElement(Root3, {
+  const Root3 = asChild ? Slot13 : 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__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React26.createElement(Root3, {
+  const Root3 = asChild ? Slot13 : 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__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : Primitive11.div;
-  return /* @__PURE__ */ React26.createElement(Root3, {
+  const Root3 = asChild ? Slot13 : Primitive12.div;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -1842,46 +1939,46 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React27, { forwardRef as forwardRef23 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+import React28, { forwardRef as forwardRef24 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.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__ */ React27.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(Button, {
+  }, /* @__PURE__ */ React28.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef23((props, forwardedRef) => {
-  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(Link, {
+  }, /* @__PURE__ */ React28.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React28.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef24(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(Button, {
+  }, /* @__PURE__ */ React28.createElement(Button, {
     variant,
     density,
     elevation,
@@ -1891,9 +1988,9 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef23(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React27.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React27.createElement(Separator2, {
+  }, /* @__PURE__ */ React28.createElement(Separator4, {
     orientation: "vertical",
     ...props
   }));
@@ -1909,22 +2006,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 React28, { forwardRef as forwardRef24 } from "react";
+import React29, { forwardRef as forwardRef25 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.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__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React29.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
@@ -1943,7 +2040,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React29, { 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 = () => {
@@ -1971,19 +2068,19 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ React29.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React30.createElement(ThemeContext.Provider, {
     value: {
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard()
     }
-  }, /* @__PURE__ */ React29.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React30.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React29.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React30.createElement(ElevationProvider, {
     elevation: rootElevation
-  }, /* @__PURE__ */ React29.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React30.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -1997,10 +2094,11 @@ export {
   Breadcrumb,
   Button,
   ButtonGroup,
+  ContextMenu2 as ContextMenu,
   DensityContext,
   DensityProvider,
   Dialog,
-  DropdownMenu,
+  DropdownMenu2 as DropdownMenu,
   ElevationContext,
   ElevationProvider,
   Input,
@@ -2014,7 +2112,7 @@ export {
   Popover,
   ScrollArea,
   Select,
-  Separator2 as Separator,
+  Separator4 as Separator,
   Status,
   Tag,
   ThemeContext,