@dxos/react-ui 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/dist/lib/browser/index.mjs

@@ -23,10 +23,8 @@ import {
   iconButtonTheme,
   iconTheme,
   initialSafeArea,
-  inputTextLabel,
   inputTheme,
   linkTheme,
-  listTheme,
   mainIntrinsicSize,
   mainPaddingTransitions,
   mainTheme,
@@ -46,17 +44,16 @@ import {
   toolbarTheme,
   tooltipContent,
   tooltipTheme,
-  treegridTheme,
   useElevationContext,
   useSafeArea,
   useThemeContext,
   useTooltipContext,
   useTranslation,
   withColumn
-} from "./chunk-F3PLXTDA.mjs";
+} from "./chunk-GTHV4WYK.mjs";
 import {
   translationKey
-} from "./chunk-HFJYTGHU.mjs";
+} from "./chunk-CMHHVHX3.mjs";
 
 // src/index.ts
 import { Trans } from "react-i18next";
@@ -603,15 +600,82 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ size, icon, iconOnly, sq
   }));
 });
 
+// src/components/Button/MicButton.tsx
+import React12, { forwardRef as forwardRef10, useCallback as useCallback4, useRef as useRef2 } from "react";
+var MicButton = /* @__PURE__ */ forwardRef10(({ classNames, icon = "ph--microphone--regular", mode = "toggle", recording, onToggle, onPressStart, onPressEnd, ...props }, forwardedRef) => {
+  const pressedRef = useRef2(false);
+  const beginPress = useCallback4(() => {
+    if (!pressedRef.current) {
+      pressedRef.current = true;
+      onPressStart?.();
+    }
+  }, [
+    onPressStart
+  ]);
+  const endPress = useCallback4(() => {
+    if (pressedRef.current) {
+      pressedRef.current = false;
+      onPressEnd?.();
+    }
+  }, [
+    onPressEnd
+  ]);
+  const handlePointerDown = useCallback4((event) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    beginPress();
+  }, [
+    beginPress
+  ]);
+  const handleKeyDown = useCallback4((event) => {
+    if ((event.key === " " || event.key === "Enter") && !event.repeat) {
+      event.preventDefault();
+      beginPress();
+    }
+  }, [
+    beginPress
+  ]);
+  const handleKeyUp = useCallback4((event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      endPress();
+    }
+  }, [
+    endPress
+  ]);
+  const recordingClassNames = recording ? "bg-error-surface" : void 0;
+  const holdHandlers = mode === "hold" ? {
+    onPointerDown: handlePointerDown,
+    onPointerUp: endPress,
+    onPointerCancel: endPress,
+    onLostPointerCapture: endPress,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    // Releasing focus mid-hold (e.g. tabbing away) must still end the press.
+    onBlur: endPress
+  } : {
+    onClick: onToggle
+  };
+  return /* @__PURE__ */ React12.createElement(IconButton, {
+    ...props,
+    ...holdHandlers,
+    classNames: [
+      recordingClassNames,
+      classNames
+    ],
+    icon,
+    ref: forwardedRef
+  });
+});
+
 // src/components/Button/SystemIconButton.tsx
-import React13, { forwardRef as forwardRef11 } from "react";
+import React14, { forwardRef as forwardRef12, useCallback as useCallback5, useRef as useRef3 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { translationKey as translationKey2 } from "#translations";
 
 // src/components/Button/ToggleIconButton.tsx
-import React12, { forwardRef as forwardRef10 } from "react";
+import React13, { forwardRef as forwardRef11 } from "react";
 import { mx as mx6 } from "@dxos/ui-theme";
-var ToggleIconButton = /* @__PURE__ */ forwardRef10(({ active, icon, activeIcon, iconClassNames, ...props }, forwardedRef) => /* @__PURE__ */ React12.createElement(IconButton, {
+var ToggleIconButton = /* @__PURE__ */ forwardRef11(({ active, icon, activeIcon, iconClassNames, ...props }, forwardedRef) => /* @__PURE__ */ React13.createElement(IconButton, {
   ...props,
   ref: forwardedRef,
   icon: active && activeIcon ? activeIcon : icon,
@@ -619,9 +683,9 @@ var ToggleIconButton = /* @__PURE__ */ forwardRef10(({ active, icon, activeIcon,
 }));
 
 // src/components/Button/SystemIconButton.tsx
-var StarIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+var StarIconButton = /* @__PURE__ */ forwardRef12(({ label, active, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+  return /* @__PURE__ */ React14.createElement(ToggleIconButton, {
     ...props,
     active,
     icon: "ph--star--regular",
@@ -631,9 +695,9 @@ var StarIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props },
   });
 });
 StarIconButton.displayName = "SystemIconButton.Star";
-var BookmarkIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+var BookmarkIconButton = /* @__PURE__ */ forwardRef12(({ label, active, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+  return /* @__PURE__ */ React14.createElement(ToggleIconButton, {
     ...props,
     active,
     icon: "ph--bookmark-simple--regular",
@@ -643,9 +707,9 @@ var BookmarkIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props
   });
 });
 BookmarkIconButton.displayName = "SystemIconButton.Bookmark";
-var ExpanderIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props }, forwardedRef) => {
+var ExpanderIconButton = /* @__PURE__ */ forwardRef12(({ label, active, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(ToggleIconButton, {
+  return /* @__PURE__ */ React14.createElement(ToggleIconButton, {
     ...props,
     active,
     icon: "ph--caret-right--regular",
@@ -654,9 +718,9 @@ var ExpanderIconButton = /* @__PURE__ */ forwardRef11(({ label, active, ...props
   });
 });
 ExpanderIconButton.displayName = "SystemIconButton.Expander";
-var AddIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+var AddIconButton = /* @__PURE__ */ forwardRef12(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(IconButton, {
+  return /* @__PURE__ */ React14.createElement(IconButton, {
     ...props,
     icon: "ph--plus--regular",
     label: label ?? t("system-button.add.label"),
@@ -664,9 +728,9 @@ var AddIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwarded
   });
 });
 AddIconButton.displayName = "SystemIconButton.Add";
-var DeleteIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+var DeleteIconButton = /* @__PURE__ */ forwardRef12(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(IconButton, {
+  return /* @__PURE__ */ React14.createElement(IconButton, {
     ...props,
     icon: "ph--trash--regular",
     label: label ?? t("system-button.delete.label"),
@@ -674,9 +738,9 @@ var DeleteIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwar
   });
 });
 DeleteIconButton.displayName = "SystemIconButton.Delete";
-var EditIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+var EditIconButton = /* @__PURE__ */ forwardRef12(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(IconButton, {
+  return /* @__PURE__ */ React14.createElement(IconButton, {
     ...props,
     icon: "ph--pen--regular",
     label: label ?? t("system-button.edit.label"),
@@ -684,9 +748,9 @@ var EditIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwarde
   });
 });
 EditIconButton.displayName = "SystemIconButton.Edit";
-var CloseIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forwardedRef) => {
+var CloseIconButton = /* @__PURE__ */ forwardRef12(({ label, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey2);
-  return /* @__PURE__ */ React13.createElement(IconButton, {
+  return /* @__PURE__ */ React14.createElement(IconButton, {
     ...props,
     icon: "ph--x--regular",
     label: label ?? t("system-button.close.label"),
@@ -694,6 +758,68 @@ var CloseIconButton = /* @__PURE__ */ forwardRef11(({ label, ...props }, forward
   });
 });
 CloseIconButton.displayName = "SystemIconButton.Close";
+var ClipboardIconButton = /* @__PURE__ */ forwardRef12(({ label, onCopy, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  const handleCopy = useCallback5(() => {
+    const text = onCopy();
+    if (text) {
+      void navigator.clipboard.writeText(text);
+    }
+  }, [
+    onCopy
+  ]);
+  return /* @__PURE__ */ React14.createElement(IconButton, {
+    ...props,
+    icon: "ph--clipboard--regular",
+    label: label ?? t("system-button.clipboard.label"),
+    onClick: handleCopy,
+    ref: forwardedRef
+  });
+});
+ClipboardIconButton.displayName = "SystemIconButton.Clipboard";
+var UploadIconButton = /* @__PURE__ */ forwardRef12(({ accept, onFileChange, label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  const fileInputRef = useRef3(null);
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("input", {
+    className: "sr-only",
+    type: "file",
+    accept,
+    onChange: onFileChange,
+    ref: fileInputRef
+  }), /* @__PURE__ */ React14.createElement(IconButton, {
+    icon: "ph--upload-simple--regular",
+    label: label ?? t("system-button.upload.label"),
+    ...props,
+    onClick: () => fileInputRef.current?.click(),
+    ref: forwardedRef
+  }));
+});
+UploadIconButton.displayName = "SystemIconButton.Upload";
+var DownloadIconButton = /* @__PURE__ */ forwardRef12(({ filename, onDownload, label, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey2);
+  const handleDownload = useCallback5(() => {
+    const blob = onDownload();
+    if (!blob) {
+      return;
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [
+    onDownload
+  ]);
+  return /* @__PURE__ */ React14.createElement(IconButton, {
+    icon: "ph--download-simple--regular",
+    label: label ?? t("system-button.download.label"),
+    ...props,
+    onClick: handleDownload,
+    ref: forwardedRef
+  });
+});
+DownloadIconButton.displayName = "SystemIconButton.Download";
 var SystemIconButton = {
   Star: StarIconButton,
   Bookmark: BookmarkIconButton,
@@ -701,19 +827,22 @@ var SystemIconButton = {
   Add: AddIconButton,
   Delete: DeleteIconButton,
   Edit: EditIconButton,
-  Close: CloseIconButton
+  Close: CloseIconButton,
+  Clipboard: ClipboardIconButton,
+  Upload: UploadIconButton,
+  Download: DownloadIconButton
 };
 
 // src/components/Button/Toggle.tsx
 import * as TogglePrimitive from "@radix-ui/react-toggle";
-import React14, { forwardRef as forwardRef12 } from "react";
-var Toggle = /* @__PURE__ */ forwardRef12(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React14.createElement(TogglePrimitive.Root, {
+import React15, { forwardRef as forwardRef13 } from "react";
+var Toggle = /* @__PURE__ */ forwardRef13(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React15.createElement(TogglePrimitive.Root, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ React14.createElement(Button, {
+  }, /* @__PURE__ */ React15.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
@@ -721,22 +850,22 @@ var Toggle = /* @__PURE__ */ forwardRef12(({ defaultPressed, pressed, onPressedC
 
 // src/components/Button/ToggleGroup.tsx
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React15, { forwardRef as forwardRef13 } from "react";
-var ToggleGroup = /* @__PURE__ */ forwardRef13(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Root, {
+import React16, { forwardRef as forwardRef14 } from "react";
+var ToggleGroup = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React16.createElement(ToggleGroupPrimitive.Root, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React16.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ forwardRef13(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Item, {
+var ToggleGroupItem = /* @__PURE__ */ forwardRef14(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React16.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(Button, {
+  }, /* @__PURE__ */ React16.createElement(Button, {
     variant,
     elevation,
     density,
@@ -745,11 +874,11 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef13(({ variant, elevation, densit
     ref: forwardedRef
   }));
 });
-var ToggleGroupIconItem = /* @__PURE__ */ forwardRef13(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React15.createElement(ToggleGroupPrimitive.Item, {
+var ToggleGroupIconItem = /* @__PURE__ */ forwardRef14(({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React16.createElement(ToggleGroupPrimitive.Item, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React15.createElement(IconButton, {
+  }, /* @__PURE__ */ React16.createElement(IconButton, {
     variant,
     elevation,
     density,
@@ -763,7 +892,7 @@ var ToggleGroupIconItem = /* @__PURE__ */ forwardRef13(({ variant, label, icon,
 
 // src/components/Calendar/Calendar.tsx
 import { CalendarDate, parseDate } from "@internationalized/date";
-import React16, { forwardRef as forwardRef14 } from "react";
+import React17, { forwardRef as forwardRef15 } from "react";
 import { Button as RACButton, Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading, RangeCalendar as RACRangeCalendar } from "react-aria-components";
 var toCalendarDate = (date) => {
   if (!date) {
@@ -779,7 +908,7 @@ var fromCalendarDate = (value) => {
 };
 var CalendarShell = ({ classNames, className, isDisabled, forwardedRef, children }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     ref: forwardedRef,
     className: tx("calendar.root", {}, classNames, className) ?? void 0,
     "aria-disabled": isDisabled || void 0
@@ -787,38 +916,38 @@ var CalendarShell = ({ classNames, className, isDisabled, forwardedRef, children
 };
 var CalendarChrome = () => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement("header", {
+  return /* @__PURE__ */ React17.createElement("header", {
     className: tx("calendar.nav", {}) ?? void 0
-  }, /* @__PURE__ */ React16.createElement(RACButton, {
+  }, /* @__PURE__ */ React17.createElement(RACButton, {
     slot: "previous",
     className: tx("calendar.button_previous", {}) ?? void 0
-  }, /* @__PURE__ */ React16.createElement(Icon, {
+  }, /* @__PURE__ */ React17.createElement(Icon, {
     size: 4,
     icon: "ph--caret-left--regular"
-  })), /* @__PURE__ */ React16.createElement(RACHeading, {
+  })), /* @__PURE__ */ React17.createElement(RACHeading, {
     className: tx("calendar.caption_label", {}) ?? void 0
-  }), /* @__PURE__ */ React16.createElement(RACButton, {
+  }), /* @__PURE__ */ React17.createElement(RACButton, {
     slot: "next",
     className: tx("calendar.button_next", {}) ?? void 0
-  }, /* @__PURE__ */ React16.createElement(Icon, {
+  }, /* @__PURE__ */ React17.createElement(Icon, {
     size: 4,
     icon: "ph--caret-right--regular"
   })));
 };
 var CalendarGridContent = () => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React16.createElement(RACCalendarGrid, {
+  return /* @__PURE__ */ React17.createElement(RACCalendarGrid, {
     className: tx("calendar.month_grid", {}) ?? void 0
-  }, /* @__PURE__ */ React16.createElement(RACCalendarGridHeader, {
+  }, /* @__PURE__ */ React17.createElement(RACCalendarGridHeader, {
     className: tx("calendar.weekdays", {}) ?? void 0
-  }, (day) => /* @__PURE__ */ React16.createElement(RACCalendarHeaderCell, {
+  }, (day) => /* @__PURE__ */ React17.createElement(RACCalendarHeaderCell, {
     className: tx("calendar.weekday", {}) ?? void 0
-  }, day)), /* @__PURE__ */ React16.createElement(RACCalendarGridBody, null, (date) => /* @__PURE__ */ React16.createElement(RACCalendarCell, {
+  }, day)), /* @__PURE__ */ React17.createElement(RACCalendarGridBody, null, (date) => /* @__PURE__ */ React17.createElement(RACCalendarCell, {
     date,
     className: tx("calendar.day", {}) ?? void 0
   })));
 };
-var CalendarRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
+var CalendarRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   const { classNames, className, isDisabled, minValue, maxValue, defaultMonth } = props;
   const defaultFocused = toCalendarDate(defaultMonth) ?? void 0;
   if (props.mode === "range") {
@@ -846,12 +975,12 @@ var CalendarRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
         }
       }
     };
-    return /* @__PURE__ */ React16.createElement(CalendarShell, {
+    return /* @__PURE__ */ React17.createElement(CalendarShell, {
       classNames,
       className,
       isDisabled,
       forwardedRef
-    }, /* @__PURE__ */ React16.createElement(RACRangeCalendar, racProps2, /* @__PURE__ */ React16.createElement(CalendarChrome, null), /* @__PURE__ */ React16.createElement(CalendarGridContent, null)));
+    }, /* @__PURE__ */ React17.createElement(RACRangeCalendar, racProps2, /* @__PURE__ */ React17.createElement(CalendarChrome, null), /* @__PURE__ */ React17.createElement(CalendarGridContent, null)));
   }
   const racProps = {
     isDisabled,
@@ -861,12 +990,12 @@ var CalendarRoot = /* @__PURE__ */ forwardRef14((props, forwardedRef) => {
     value: toCalendarDate(props.selected),
     onChange: (next) => props.onSelect?.(fromCalendarDate(next))
   };
-  return /* @__PURE__ */ React16.createElement(CalendarShell, {
+  return /* @__PURE__ */ React17.createElement(CalendarShell, {
     classNames,
     className,
     isDisabled,
     forwardedRef
-  }, /* @__PURE__ */ React16.createElement(RACCalendar, racProps, /* @__PURE__ */ React16.createElement(CalendarChrome, null), /* @__PURE__ */ React16.createElement(CalendarGridContent, null)));
+  }, /* @__PURE__ */ React17.createElement(RACCalendar, racProps, /* @__PURE__ */ React17.createElement(CalendarChrome, null), /* @__PURE__ */ React17.createElement(CalendarGridContent, null)));
 });
 CalendarRoot.displayName = "Calendar.Root";
 var Calendar = {
@@ -877,7 +1006,7 @@ var Calendar = {
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import DOMPurify from "dompurify";
-import React21, { forwardRef as forwardRef17, useId as useId3, useMemo as useMemo5 } from "react";
+import React22, { forwardRef as forwardRef18, useId as useId3, useMemo as useMemo5 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { iconSize } from "@dxos/ui-theme";
 import { translationKey as translationKey3 } from "#translations";
@@ -885,27 +1014,26 @@ import { translationKey as translationKey3 } from "#translations";
 // src/components/Column/Column.tsx
 import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
 import { Slot as Slot7 } from "@radix-ui/react-slot";
-import React17 from "react";
+import React18 from "react";
 var COLUMN_ROOT_NAME = "Column.Root";
 var gutterSizes = {
-  xs: "var(--dx-gutter-xs)",
   sm: "var(--dx-gutter-sm)",
   md: "var(--dx-gutter-md)",
   lg: "var(--dx-gutter-lg)"
 };
-var ColumnRoot = slottable(({ children, asChild, role, gutter = "md", ...props }, forwardedRef) => {
+var ColumnRoot = slottable(({ children, asChild, role, gutter = "lg", ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
   const gutterSize = gutterSizes[gutter];
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     style: {
       ...rest.style,
       "--gutter": gutterSize,
       "--dx-col": "2 / span 1",
-      gridTemplateColumns: [
+      "gridTemplateColumns": [
         gutterSize,
         "minmax(0,1fr)",
         gutterSize
@@ -923,7 +1051,7 @@ var ColumnRow = slottable(({ children, asChild, role, ...props }, forwardedRef)
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     className: tx("column.row", {}, className),
@@ -936,7 +1064,7 @@ var ColumnBleed = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
     className: tx("column.bleed", {}, className),
     ref: forwardedRef
@@ -948,7 +1076,7 @@ var ColumnCenter = slottable(({ children, asChild, ...props }, forwardedRef) =>
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
     className: tx("column.center", {}, className),
     ref: forwardedRef
@@ -960,7 +1088,7 @@ var ColumnBlock = slottable(({ children, asChild, end, compact, square, ...props
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot7 : Primitive7.div;
-  return /* @__PURE__ */ React17.createElement(Comp, {
+  return /* @__PURE__ */ React18.createElement(Comp, {
     ...rest,
     "data-slot": end ? "end" : "start",
     className: tx("column.block", {
@@ -981,18 +1109,18 @@ var Column = {
 };
 
 // src/components/Image/Image.tsx
-import React18, { useCallback as useCallback4, useRef as useRef2, useState as useState3 } from "react";
+import React19, { useCallback as useCallback6, useRef as useRef4, useState as useState3 } from "react";
 import { mx as mx7 } from "@dxos/ui-theme";
 var cache = /* @__PURE__ */ new Map();
 var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin, sampleSize = 64, contrast = 0.9 }) => {
   const [crossOriginState, setCrossOriginState] = useState3(crossOrigin);
   const [dominantColor, setDominantColor] = useState3(void 0);
   const [imageLoaded, setImageLoaded] = useState3(false);
-  const canvasRef = useRef2(null);
+  const canvasRef = useRef4(null);
   const handleImageError = () => {
     setCrossOriginState(void 0);
   };
-  const handleImageLoad = useCallback4(({ target }) => {
+  const handleImageLoad = useCallback6(({ target }) => {
     const rgb = cache.get(src);
     if (rgb) {
       setDominantColor(rgb);
@@ -1022,7 +1150,7 @@ var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin, sampleSi
     contrast,
     src
   ]);
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     // `isolate` (`isolation: isolate`) creates a new stacking context so
     // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
     // the z-10 leaks into the parent's stacking context and elevates the
@@ -1033,20 +1161,20 @@ var Image = ({ classNames, src, alt = "", fit = "contain", crossOrigin, sampleSi
     style: {
       backgroundColor: dominantColor
     }
-  }, /* @__PURE__ */ React18.createElement("canvas", {
+  }, /* @__PURE__ */ React19.createElement("canvas", {
     ref: canvasRef,
     style: {
       display: "none"
     },
     "aria-hidden": "true"
-  }), /* @__PURE__ */ React18.createElement("div", {
+  }), /* @__PURE__ */ React19.createElement("div", {
     className: "absolute inset-0 pointer-events-none",
     style: {
       background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
       transition: "opacity 0.7s ease-in-out",
       opacity: 0.5
     }
-  }), /* @__PURE__ */ React18.createElement("img", {
+  }), /* @__PURE__ */ React19.createElement("img", {
     src,
     alt,
     crossOrigin: crossOriginState,
@@ -1145,15 +1273,15 @@ var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import React19, { forwardRef as forwardRef15 } from "react";
+import React20, { forwardRef as forwardRef16 } from "react";
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ forwardRef15(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ forwardRef16(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -1163,18 +1291,18 @@ var ContextMenuContent = /* @__PURE__ */ forwardRef15(({ classNames, children, c
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ forwardRef15(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ forwardRef16(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Comp = asChild ? Slot8 : Primitive8.div;
-  return /* @__PURE__ */ React19.createElement(Comp, {
+  return /* @__PURE__ */ React20.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", {}, classNames),
     ref: forwardedRef
@@ -1182,33 +1310,33 @@ var ContextMenuArrow = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, f
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef15(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ React20.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", {}, classNames),
     ref: forwardedRef
@@ -1239,7 +1367,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React20, { forwardRef as forwardRef16, useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3 } from "react";
+import React21, { forwardRef as forwardRef17, useCallback as useCallback7, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef5 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -1248,24 +1376,24 @@ var useMenuScope = createMenuScope();
 var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
 var DropdownMenuRoot = ({ __scopeDropdownMenu, children, dir, modal = true, open: openProp, defaultOpen, onOpenChange }) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const triggerRef = useRef3(null);
+  const triggerRef = useRef5(null);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React20.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ React21.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
     triggerId: useId2(),
     triggerRef,
     contentId: useId2(),
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback5(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback7(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ React20.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ React21.createElement(MenuPrimitive.Root, {
     ...menuScope,
     dir,
     modal,
@@ -1275,14 +1403,14 @@ var DropdownMenuRoot = ({ __scopeDropdownMenu, children, dir, modal = true, open
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenu.Trigger";
-var DropdownMenuTrigger = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ React20.createElement(Primitive9.button, {
+  }, /* @__PURE__ */ React21.createElement(Primitive9.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1336,7 +1464,7 @@ var DropdownMenuVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1346,29 +1474,29 @@ var PORTAL_NAME = "DropdownMenu.Portal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ forwardRef16(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ forwardRef17(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Comp = asChild ? Slot9 : Primitive9.div;
-  return /* @__PURE__ */ React20.createElement(Comp, {
+  return /* @__PURE__ */ React21.createElement(Comp, {
     ...props,
     className: tx("menu.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var CONTENT_NAME = "DropdownMenu.Content";
-var DropdownMenuContent = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuContent = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
   const elevation = useElevationContext();
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const hasInteractedOutsideRef = useRef3(false);
+  const hasInteractedOutsideRef = useRef5(false);
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   const computedCollisionBoundary = useMemo4(() => {
     const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
@@ -1386,7 +1514,7 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef16((props, forwardedRef) =>
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Content, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
@@ -1428,10 +1556,10 @@ var DropdownMenuContent = /* @__PURE__ */ forwardRef16((props, forwardedRef) =>
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenu.Group";
-var DropdownMenuGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1439,11 +1567,11 @@ var DropdownMenuGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenu.Label";
-var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", {}, classNames),
@@ -1452,11 +1580,11 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef16((props, forwardedRef)
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenu.Item";
-var DropdownMenuItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1465,11 +1593,11 @@ var DropdownMenuItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenu.CheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", {}, classNames),
@@ -1478,10 +1606,10 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef16((props, forwardedRef
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenu.RadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1489,11 +1617,11 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef16((props, forwardedRef)
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenu.RadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", {}, classNames),
@@ -1502,10 +1630,10 @@ var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef16((props, forwardedRef) =
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenu.ItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1513,11 +1641,11 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef16((props, forwardedRe
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenu.Separator";
-var DropdownMenuSeparator = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", {}, classNames),
@@ -1526,11 +1654,11 @@ var DropdownMenuSeparator = /* @__PURE__ */ forwardRef16((props, forwardedRef) =
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenu.Arrow";
-var DropdownMenuArrow = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", {}, classNames),
@@ -1546,17 +1674,17 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenu.SubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1564,10 +1692,10 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef16((props, forwardedRef)
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenu.SubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ React20.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ React21.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1612,15 +1740,15 @@ var CARD_ROOT_NAME = "Card.Root";
 var CardRoot = composable(({ children, id, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Column.Root, {
+  return /* @__PURE__ */ React22.createElement(Column.Root, {
     asChild: true,
-    gutter: density === "lg" ? "lg" : density === "sm" || density === "xs" ? "sm" : "md",
+    gutter: "lg",
     classNames: tx("card.root", {
       border,
       fullWidth
     }, className),
     role: role ?? "group"
-  }, /* @__PURE__ */ React21.createElement("div", {
+  }, /* @__PURE__ */ React22.createElement("div", {
     ...rest,
     ...id && {
       "data-object-id": id
@@ -1634,7 +1762,7 @@ var CardHeader = slottable(({ children, asChild, style, ...props }, forwardedRef
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot10 : "header";
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     style: {
       ...iconSize(5),
@@ -1646,9 +1774,9 @@ var CardHeader = slottable(({ children, asChild, style, ...props }, forwardedRef
 });
 CardHeader.displayName = CARD_HEADER_NAME;
 var CARD_DRAG_HANDLE_NAME = "Card.DragHandle";
-var CardDragHandle = /* @__PURE__ */ forwardRef17(({ testId = "drag-handle", label }, forwardedRef) => {
+var CardDragHandle = /* @__PURE__ */ forwardRef18(({ testId = "drag-handle", label }, forwardedRef) => {
   const { t } = useTranslation3(translationKey3);
-  return /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(IconButton, {
+  return /* @__PURE__ */ React22.createElement(CardBlock, null, /* @__PURE__ */ React22.createElement(IconButton, {
     "data-testid": testId,
     tabIndex: -1,
     noTooltip: true,
@@ -1671,11 +1799,11 @@ var CARD_ACTION_LABEL_KEYS = {
   close: "toolbar-close.label",
   delete: "toolbar-delete.label"
 };
-var CardActionIconButton = /* @__PURE__ */ forwardRef17(({ action, onClick, label }, forwardedRef) => {
+var CardActionIconButton = /* @__PURE__ */ forwardRef18(({ action, onClick, label }, forwardedRef) => {
   const { t } = useTranslation3(translationKey3);
-  return /* @__PURE__ */ React21.createElement(CardBlock, {
+  return /* @__PURE__ */ React22.createElement(CardBlock, {
     end: true
-  }, /* @__PURE__ */ React21.createElement(IconButton, {
+  }, /* @__PURE__ */ React22.createElement(IconButton, {
     iconOnly: true,
     icon: CARD_ACTION_ICONS[action],
     variant: "ghost",
@@ -1689,31 +1817,31 @@ CardActionIconButton.displayName = CARD_ACTION_ICON_BUTTON_NAME;
 var CARD_MENU_NAME = "Card.Menu";
 function CardMenu({ context, items }) {
   const { t } = useTranslation3(translationKey3);
-  return /* @__PURE__ */ React21.createElement(CardBlock, {
+  return /* @__PURE__ */ React22.createElement(CardBlock, {
     end: true
-  }, /* @__PURE__ */ React21.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React22.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React22.createElement(DropdownMenu.Trigger, {
     disabled: !items?.length,
     asChild: true
-  }, /* @__PURE__ */ React21.createElement(IconButton, {
+  }, /* @__PURE__ */ React22.createElement(IconButton, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     label: t("toolbar-menu.label")
-  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React21.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React21.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => (
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React22.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React22.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React22.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => (
     // `context` is the generic payload threaded to each handler; the cast is the
     // generic boundary (T may be `void`, so `context` is typed `T | undefined`).
-    /* @__PURE__ */ React21.createElement(DropdownMenu.Item, {
+    /* @__PURE__ */ React22.createElement(DropdownMenu.Item, {
       key: index,
       onSelect: () => onSelect(context)
     }, label)
-  ))), /* @__PURE__ */ React21.createElement(DropdownMenu.Arrow, null)))));
+  ))), /* @__PURE__ */ React22.createElement(DropdownMenu.Arrow, null)))));
 }
 CardMenu.displayName = CARD_MENU_NAME;
 var CARD_BLOCK_NAME = "Card.Block";
 var CardBlock = composable(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React21.createElement(Column.Block, {
+  return /* @__PURE__ */ React22.createElement(Column.Block, {
     ...rest,
     classNames: tx("card.block", {}, className),
     ref: forwardedRef
@@ -1727,7 +1855,7 @@ var CardTitle = slottable(({ children, asChild, ...props }, forwardedRef) => {
     role: "heading"
   });
   const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     className: tx("card.title", {}, className),
     ref: forwardedRef
@@ -1739,7 +1867,7 @@ var CardBody = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot10 : Primitive10.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     className: tx("card.body", {}, className),
     ref: forwardedRef
@@ -1752,13 +1880,13 @@ var CardSection = slottable(({ children, asChild, title, role, ...props }, forwa
   const Comp = asChild ? Slot10 : Primitive10.div;
   const { tx } = useThemeContext();
   const titleId = useId3();
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     role: role ?? (title ? "group" : "none"),
     "aria-labelledby": title ? titleId : void 0,
     className: tx("card.section", {}, className),
     ref: forwardedRef
-  }, title && /* @__PURE__ */ React21.createElement("div", {
+  }, title && /* @__PURE__ */ React22.createElement("div", {
     id: titleId,
     className: tx("card.section-title", {})
   }, title), children);
@@ -1769,7 +1897,7 @@ var CardRow = slottable(({ children, asChild, fullWidth, style, ...props }, forw
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     style: {
       ...iconSize(4),
@@ -1787,14 +1915,14 @@ var CardText = slottable(({ children, asChild, role, truncate, variant = "defaul
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot10 : Primitive10.div;
-  return /* @__PURE__ */ React21.createElement(Comp, {
+  return /* @__PURE__ */ React22.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     className: tx("card.text", {
       variant
     }, className),
     ref: forwardedRef
-  }, /* @__PURE__ */ React21.createElement("span", {
+  }, /* @__PURE__ */ React22.createElement("span", {
     className: tx("card.text-span", {
       variant,
       truncate
@@ -1808,7 +1936,7 @@ function CardHtml({ html = "", variant = "default", ...props }) {
   const sanitized = useMemo5(() => DOMPurify.sanitize(html), [
     html
   ]);
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     ...props,
     className: tx("card.text", {
       variant
@@ -1825,7 +1953,7 @@ function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, fit = "c
   const { tx } = useThemeContext();
   const aspect = aspectProp === "auto" ? "aspect-auto" : "aspect-video";
   if (image) {
-    return /* @__PURE__ */ React21.createElement(Image, {
+    return /* @__PURE__ */ React22.createElement(Image, {
       classNames: [
         tx("card.poster", {}),
         aspect,
@@ -1838,14 +1966,14 @@ function CardPoster({ classNames, alt, aspect: aspectProp, image, icon, fit = "c
     });
   }
   if (icon) {
-    return /* @__PURE__ */ React21.createElement("div", {
+    return /* @__PURE__ */ React22.createElement("div", {
       role: "image",
       className: tx("card.poster-icon", {}, [
         aspect,
         classNames
       ]),
       "aria-label": alt
-    }, /* @__PURE__ */ React21.createElement(Icon, {
+    }, /* @__PURE__ */ React22.createElement(Icon, {
       icon,
       size: 10
     }));
@@ -1855,18 +1983,18 @@ CardPoster.displayName = CARD_POSTER_NAME;
 var CARD_ACTION_NAME = "Card.Action";
 function CardAction({ icon, actionIcon = "ph--arrow-right--regular", label, onClick }) {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(Button, {
+  return /* @__PURE__ */ React22.createElement(Button, {
     variant: "ghost",
     classNames: tx("card.action", {}),
     onClick
-  }, icon && /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(Icon, {
+  }, icon && /* @__PURE__ */ React22.createElement(CardBlock, null, /* @__PURE__ */ React22.createElement(Icon, {
     icon,
     size: 4
-  })), /* @__PURE__ */ React21.createElement("span", {
+  })), /* @__PURE__ */ React22.createElement("span", {
     className: tx("card.action-label", {})
-  }, label), actionIcon && /* @__PURE__ */ React21.createElement(CardBlock, {
+  }, label), actionIcon && /* @__PURE__ */ React22.createElement(CardBlock, {
     end: true
-  }, /* @__PURE__ */ React21.createElement(Icon, {
+  }, /* @__PURE__ */ React22.createElement(Icon, {
     icon: actionIcon,
     size: 4
   })));
@@ -1875,21 +2003,21 @@ CardAction.displayName = CARD_ACTION_NAME;
 var CARD_LINK_NAME = "Card.Link";
 function CardLink({ label, href }) {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement("a", {
+  return /* @__PURE__ */ React22.createElement("a", {
     className: tx("card.link", {}),
     "data-variant": "ghost",
     href,
     target: "_blank",
     rel: "noreferrer"
-  }, /* @__PURE__ */ React21.createElement(CardBlock, null, /* @__PURE__ */ React21.createElement(Icon, {
+  }, /* @__PURE__ */ React22.createElement(CardBlock, null, /* @__PURE__ */ React22.createElement(Icon, {
     icon: "ph--link--regular",
     size: 4
-  })), /* @__PURE__ */ React21.createElement("span", {
+  })), /* @__PURE__ */ React22.createElement("span", {
     className: tx("card.link-label", {})
-  }, label), /* @__PURE__ */ React21.createElement(CardBlock, {
+  }, label), /* @__PURE__ */ React22.createElement(CardBlock, {
     end: true,
     classNames: "invisible group-hover:visible"
-  }, /* @__PURE__ */ React21.createElement(Icon, {
+  }, /* @__PURE__ */ React22.createElement(Icon, {
     icon: "ph--arrow-square-out--regular",
     size: 4
   })));
@@ -1920,17 +2048,17 @@ var Card = {
 // src/components/Carousel/Carousel.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { createContext as createContext3 } from "@radix-ui/react-context";
-import React23, { useCallback as useCallback6, useEffect as useEffect3, useState as useState5 } from "react";
+import React24, { Children as Children2, cloneElement, isValidElement as isValidElement2, useCallback as useCallback8, useEffect as useEffect3, useRef as useRef6, useState as useState5 } from "react";
 import { mx as mx9 } from "@dxos/ui-theme";
 
 // src/components/MediaPlayer/MediaPlayer.tsx
-import React22, { useState as useState4 } from "react";
+import React23, { useState as useState4 } from "react";
 import { mx as mx8 } from "@dxos/ui-theme";
 var FIT_CLASS = {
-  cover: "object-cover",
-  contain: "object-contain",
-  fill: "object-fill",
-  none: "object-none",
+  "cover": "object-cover",
+  "contain": "object-contain",
+  "fill": "object-fill",
+  "none": "object-none",
   "scale-down": "object-scale-down"
 };
 var VIDEO_EXTENSIONS = [
@@ -1968,7 +2096,7 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
   if (isEmbedUrl(src)) {
     const resolved = kind ?? detectMediaKind(src) ?? "video";
     if (resolved === "audio") {
-      return /* @__PURE__ */ React22.createElement("audio", {
+      return /* @__PURE__ */ React23.createElement("audio", {
         className: mx8("w-full", classNames),
         src,
         controls,
@@ -1979,7 +2107,7 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
         "aria-label": alt
       });
     }
-    return /* @__PURE__ */ React22.createElement("video", {
+    return /* @__PURE__ */ React23.createElement("video", {
       className: mx8("max-w-full max-h-full aspect-video", fitClass, classNames),
       src,
       controls,
@@ -1991,14 +2119,14 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
     });
   }
   if (isCloudflareStreamEmbed(src)) {
-    return /* @__PURE__ */ React22.createElement(IframePlayer, {
+    return /* @__PURE__ */ React23.createElement(IframePlayer, {
       key: src,
       classNames,
       src,
       alt
     });
   }
-  return /* @__PURE__ */ React22.createElement("img", {
+  return /* @__PURE__ */ React23.createElement("img", {
     className: mx8(fitClass, classNames),
     src,
     alt: alt ?? "",
@@ -2010,9 +2138,9 @@ var MediaPlayer = ({ classNames, src, kind, controls = true, autoPlay = false, l
 };
 var IframePlayer = ({ src, alt, classNames }) => {
   const [loaded, setLoaded] = useState4(false);
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React23.createElement("div", {
     className: mx8("relative bg-baseSurface", classNames)
-  }, /* @__PURE__ */ React22.createElement("iframe", {
+  }, /* @__PURE__ */ React23.createElement("iframe", {
     src,
     title: alt ?? "Embedded media",
     loading: "lazy",
@@ -2032,50 +2160,93 @@ var IframePlayer = ({ src, alt, classNames }) => {
 var CAROUSEL_NAME = "Carousel";
 var [CarouselProvider, useCarouselContext] = createContext3(CAROUSEL_NAME);
 var useCarousel = () => useCarouselContext("useCarousel");
-var CarouselRoot = ({ children, count, autorun = false, intervalMs = 5e3, defaultIndex = 0 }) => {
+var CarouselRoot = ({ children, count, autoAdvance = 0, defaultIndex = 0, transition = "none", continuous = false }) => {
   const [index, setIndexState] = useState5(defaultIndex);
-  const [autoAdvance, setAutoAdvance] = useState5(autorun);
+  const [offset, setOffset] = useState5(defaultIndex);
+  const [animate, setAnimate] = useState5(true);
+  const [autoEnabled, setAutoEnabled] = useState5(autoAdvance > 0);
+  const wraps = continuous && transition === "slide" && count > 1;
+  const indexRef = useRef6(index);
+  useEffect3(() => {
+    indexRef.current = index;
+  }, [
+    index
+  ]);
   useEffect3(() => {
     if (index >= count) {
       setIndexState(0);
+      setOffset(0);
     }
   }, [
     count,
     index
   ]);
+  const advance = useCallback8((delta, stopAuto) => {
+    if (stopAuto) {
+      setAutoEnabled(false);
+    }
+    const current = indexRef.current;
+    const nextIndex = (current + delta + count) % count;
+    setAnimate(true);
+    if (wraps && delta === 1 && current === count - 1) {
+      setOffset(count);
+    } else if (wraps && delta === -1 && current === 0) {
+      setOffset(-1);
+    } else {
+      setOffset(nextIndex);
+    }
+    setIndexState(nextIndex);
+  }, [
+    count,
+    wraps
+  ]);
   useEffect3(() => {
-    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+    if (!autoEnabled || count <= 1 || autoAdvance <= 0) {
       return;
     }
-    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    const handle = setInterval(() => advance(1, false), autoAdvance);
     return () => clearInterval(handle);
   }, [
-    autoAdvance,
+    autoEnabled,
     count,
-    intervalMs
+    autoAdvance,
+    advance
   ]);
-  const setIndex = useCallback6((next2) => {
-    setAutoAdvance(false);
+  const setIndex = useCallback8((next2) => {
+    setAutoEnabled(false);
+    setAnimate(true);
+    setOffset(next2);
     setIndexState(next2);
   }, []);
-  const next = useCallback6(() => {
-    setAutoAdvance(false);
-    setIndexState((i) => (i + 1) % count);
-  }, [
-    count
+  const next = useCallback8(() => advance(1, true), [
+    advance
+  ]);
+  const prev = useCallback8(() => advance(-1, true), [
+    advance
   ]);
-  const prev = useCallback6(() => {
-    setAutoAdvance(false);
-    setIndexState((i) => (i - 1 + count) % count);
+  const settle = useCallback8(() => {
+    if (offset === count) {
+      setAnimate(false);
+      setOffset(0);
+    } else if (offset === -1) {
+      setAnimate(false);
+      setOffset(count - 1);
+    }
   }, [
+    offset,
     count
   ]);
   if (count === 0) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(CarouselProvider, {
+  return /* @__PURE__ */ React24.createElement(CarouselProvider, {
     index,
     count,
+    transition,
+    continuous: wraps,
+    offset,
+    animate,
+    settle,
     setIndex,
     next,
     prev
@@ -2088,7 +2259,7 @@ var CarouselContent = composable(({ children, ...props }, forwardedRef) => (
   // its content height. With no parent height constraint, the `1fr` row simply tracks
   // row-1 content — preserving the existing aspect-video behaviour for unbounded use.
   // TODO(burdon): Move to Carousel.theme.ts
-  /* @__PURE__ */ React23.createElement("div", {
+  /* @__PURE__ */ React24.createElement("div", {
     ...composableProps(props, {
       classNames: "w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center"
     }),
@@ -2098,8 +2269,8 @@ var CarouselContent = composable(({ children, ...props }, forwardedRef) => (
 CarouselContent.displayName = "Carousel.Content";
 var CarouselViewport = ({ children, classNames }) => {
   const { t } = useTranslation(translationKey);
-  const { count, next, prev } = useCarousel();
-  const handleKeyDown = useCallback6((event) => {
+  const { count, transition, continuous, offset, animate, settle, next, prev } = useCarousel();
+  const handleKeyDown = useCallback8((event) => {
     if (count <= 1) {
       return;
     }
@@ -2115,7 +2286,27 @@ var CarouselViewport = ({ children, classNames }) => {
     next,
     prev
   ]);
-  return /* @__PURE__ */ React23.createElement("div", {
+  const slides = Children2.toArray(children);
+  const first = slides[0];
+  const last = slides[slides.length - 1];
+  const trackChildren = continuous && slides.length > 1 ? [
+    /* @__PURE__ */ isValidElement2(last) ? /* @__PURE__ */ cloneElement(last, {
+      key: "clone-last"
+    }) : last,
+    ...slides,
+    /* @__PURE__ */ isValidElement2(first) ? /* @__PURE__ */ cloneElement(first, {
+      key: "clone-first"
+    }) : first
+  ] : slides;
+  const translate = continuous ? -(offset + 1) * 100 : -offset * 100;
+  const handleTransitionEnd = useCallback8((event) => {
+    if (event.target === event.currentTarget && event.propertyName === "transform") {
+      settle();
+    }
+  }, [
+    settle
+  ]);
+  return /* @__PURE__ */ React24.createElement("div", {
     // TODO(burdon): Move to ui-theme.
     className: mx9("relative w-full aspect-video overflow-hidden", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", classNames),
     tabIndex: 0,
@@ -2123,23 +2314,36 @@ var CarouselViewport = ({ children, classNames }) => {
     "aria-roledescription": "carousel",
     "aria-label": t("carousel-viewport.label"),
     onKeyDown: handleKeyDown
-  }, children);
+  }, transition === "slide" ? (
+    // Lay slides side-by-side in a flex track and translate by the active index. Each slide
+    // sizes itself to the viewport via `shrink-0 basis-full` (see `Carousel.Slide`).
+    // `motion-reduce` respects the user's reduced-motion preference; the snap after a wrap also
+    // disables the transition (`animate === false`).
+    /* @__PURE__ */ React24.createElement("div", {
+      className: mx9("flex h-full motion-reduce:transition-none", animate ? "transition-transform duration-300 ease-out" : "transition-none"),
+      style: {
+        transform: `translateX(${translate}%)`
+      },
+      onTransitionEnd: handleTransitionEnd
+    }, trackChildren)
+  ) : children);
 };
 CarouselViewport.displayName = "Carousel.Viewport";
 var CarouselSlide = ({ index, classNames, src, kind, alt, controls, autoPlay, loop, muted, crossOrigin }) => {
-  const { index: active } = useCarousel();
-  if (active !== index) {
+  const { index: active, transition } = useCarousel();
+  if (transition !== "slide" && active !== index) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement("div", {
-    className: mx9("absolute inset-0 w-full h-full bg-baseSurface", classNames)
-  }, /* @__PURE__ */ React23.createElement(MediaPlayer, {
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx9(transition === "slide" ? "relative shrink-0 basis-full h-full bg-baseSurface" : "absolute inset-0 w-full h-full bg-baseSurface", classNames)
+  }, /* @__PURE__ */ React24.createElement(MediaPlayer, {
     src,
     kind,
     alt,
     classNames: "w-full h-full",
     controls,
-    autoPlay,
+    // In `slide` mode every slide is mounted; only auto-play the active one to avoid off-screen playback.
+    autoPlay: autoPlay && active === index,
     loop,
     muted,
     crossOrigin
@@ -2150,9 +2354,9 @@ var CarouselPrevious = ({ classNames }) => {
   const { t } = useTranslation(translationKey);
   const { count, prev } = useCarousel();
   if (count <= 1) {
-    return /* @__PURE__ */ React23.createElement("div", null);
+    return /* @__PURE__ */ React24.createElement("div", null);
   }
-  return /* @__PURE__ */ React23.createElement(IconButton, {
+  return /* @__PURE__ */ React24.createElement(IconButton, {
     classNames: mx9("self-center", classNames),
     square: true,
     variant: "ghost",
@@ -2167,9 +2371,9 @@ var CarouselNext = ({ classNames }) => {
   const { t } = useTranslation(translationKey);
   const { count, next } = useCarousel();
   if (count <= 1) {
-    return /* @__PURE__ */ React23.createElement("div", null);
+    return /* @__PURE__ */ React24.createElement("div", null);
   }
-  return /* @__PURE__ */ React23.createElement(IconButton, {
+  return /* @__PURE__ */ React24.createElement(IconButton, {
     classNames: mx9("self-center", classNames),
     square: true,
     variant: "ghost",
@@ -2190,29 +2394,31 @@ var CarouselIndicators = ({ classNames }) => {
   if (count <= 1) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     className: "col-start-2 overflow-hidden"
-  }, /* @__PURE__ */ React23.createElement("div", {
+  }, /* @__PURE__ */ React24.createElement("div", {
     ...arrowNavigationAttrs,
     className: mx9("flex items-center justify-center", classNames),
     role: "tablist",
     "aria-label": t("carousel-indicators.label")
   }, Array.from({
     length: count
-  }).map((_, i) => /* @__PURE__ */ React23.createElement(IconButton, {
+  }).map((_, i) => /* @__PURE__ */ React24.createElement(IconButton, {
     key: i,
     role: "tab",
     "aria-selected": i === index,
-    classNames: i === index ? "text-primary-500" : "text-description",
+    classNames: mx9(i === index ? "text-primary-500" : "text-description"),
+    variant: "ghost",
+    density: "sm",
+    size: 3,
+    square: true,
     icon: i === index ? "ph--circle--fill" : "ph--circle--regular",
     iconOnly: true,
     label: t("carousel-go-to.label", {
       index: i + 1
     }),
     onClick: () => setIndex(i),
-    onFocus: () => setIndex(i),
-    size: 3,
-    variant: "ghost"
+    onFocus: () => setIndex(i)
   }))));
 };
 CarouselIndicators.displayName = "Carousel.Indicators";
@@ -2224,9 +2430,9 @@ var CarouselCaption = ({ children, classNames }) => {
   }
   return (
     // TODO(burdon): Move to ui-theme.
-    /* @__PURE__ */ React23.createElement("div", {
+    /* @__PURE__ */ React24.createElement("div", {
       className: "col-start-2"
-    }, /* @__PURE__ */ React23.createElement("p", {
+    }, /* @__PURE__ */ React24.createElement("p", {
       className: mx9("text-center text-description", classNames)
     }, content))
   );
@@ -2244,7 +2450,7 @@ var Carousel = {
 };
 
 // src/components/Clipboard/ClipboardProvider.tsx
-import React24, { createContext as createContext4, useCallback as useCallback7, useContext as useContext3, useState as useState6 } from "react";
+import React25, { createContext as createContext4, useCallback as useCallback9, useContext as useContext3, useState as useState6 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -2253,11 +2459,11 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 var useClipboard = () => useContext3(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
   const [textValue, setInternalTextValue] = useState6("");
-  const setTextValue = useCallback7(async (nextValue) => {
+  const setTextValue = useCallback9(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ React24.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ React25.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -2266,14 +2472,14 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // src/components/Clipboard/CopyButton.tsx
-import React25 from "react";
+import React26 from "react";
 import { mx as mx10, osTranslations } from "@dxos/ui-theme";
 var inactiveLabelStyles = "invisible h-px -mb-px overflow-hidden";
 var CopyButton = ({ classNames, value, size = 5, ...props }) => {
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ React25.createElement(Button, {
+  return /* @__PURE__ */ React26.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -2281,18 +2487,18 @@ var CopyButton = ({ classNames, value, size = 5, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ React25.createElement("div", {
+  }, /* @__PURE__ */ React26.createElement("div", {
     className: mx10("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React25.createElement("span", {
+  }, /* @__PURE__ */ React26.createElement("span", {
     className: "px-1"
-  }, t("copy.label")), /* @__PURE__ */ React25.createElement(Icon, {
+  }, t("copy.label")), /* @__PURE__ */ React26.createElement(Icon, {
     icon: "ph--copy--regular",
     size
-  })), /* @__PURE__ */ React25.createElement("div", {
+  })), /* @__PURE__ */ React26.createElement("div", {
     className: mx10("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ React25.createElement("span", {
+  }, /* @__PURE__ */ React26.createElement("span", {
     className: "px-1"
-  }, t("copy-success.label")), /* @__PURE__ */ React25.createElement(Icon, {
+  }, t("copy-success.label")), /* @__PURE__ */ React26.createElement(Icon, {
     icon: "ph--check--regular",
     size
   })));
@@ -2303,7 +2509,7 @@ var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ..
   const isCopied = textValue === value;
   const label = isCopied ? t("copy-success.label") : props.label ?? t("copy.label");
   const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
-  return /* @__PURE__ */ React25.createElement(IconButton, {
+  return /* @__PURE__ */ React26.createElement(IconButton, {
     iconOnly: true,
     label,
     icon: "ph--copy--regular",
@@ -2328,7 +2534,7 @@ var Clipboard = {
 // src/components/DatePicker/DatePicker.tsx
 import { createContext as createContext5 } from "@radix-ui/react-context";
 import { format as formatDate } from "date-fns";
-import React27, { forwardRef as forwardRef19, useCallback as useCallback9, useState as useState8 } from "react";
+import React28, { forwardRef as forwardRef20, useCallback as useCallback11, useState as useState8 } from "react";
 
 // src/components/Popover/Popover.tsx
 import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
@@ -2346,7 +2552,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot11 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React26, { forwardRef as forwardRef18, useCallback as useCallback8, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef4, useState as useState7 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef7, useState as useState7 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope2(POPOVER_NAME, [
@@ -2357,31 +2563,31 @@ var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
-  const triggerRef = useRef4(null);
+  const triggerRef = useRef7(null);
   const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
   const [open = false, setOpen] = useControllableState2({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React26.createElement(PopoverProvider, {
+  return /* @__PURE__ */ React27.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React27.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: useId4(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: useCallback10(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: useCallback8(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: useCallback8(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: useCallback10(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: useCallback10(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "Popover.Anchor";
-var PopoverAnchor = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -2393,7 +2599,7 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React27.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2401,13 +2607,13 @@ var PopoverAnchor = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "Popover.Trigger";
-var PopoverTrigger = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { __scopePopover, asChild, ...triggerProps } = props;
   const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
   const Comp = asChild ? Slot11 : Primitive11.button;
-  const trigger = /* @__PURE__ */ React26.createElement(Comp, {
+  const trigger = /* @__PURE__ */ React27.createElement(Comp, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2417,7 +2623,7 @@ var PopoverTrigger = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
     ref: composedTriggerRef,
     onClick: composeEventHandlers2(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React27.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2433,7 +2639,7 @@ var PopoverVirtualTrigger = (props) => {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ React27.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2446,48 +2652,48 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ React26.createElement(PortalProvider, {
+  return /* @__PURE__ */ React27.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ React26.createElement(Presence, {
+  }, /* @__PURE__ */ React27.createElement(Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ React26.createElement(PortalPrimitive, {
+  }, /* @__PURE__ */ React27.createElement(PortalPrimitive, {
     asChild: true,
     container
   }, children)));
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "Popover.Content";
-var PopoverContent = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ React26.createElement(Presence, {
+  return /* @__PURE__ */ React27.createElement(Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ React26.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ React27.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ React26.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ React27.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const contentRef = useRef4(null);
+  const contentRef = useRef7(null);
   const composedRefs = useComposedRefs2(forwardedRef, contentRef);
-  const isRightClickOutsideRef = useRef4(false);
+  const isRightClickOutsideRef = useRef7(false);
   useEffect4(() => {
     const content = contentRef.current;
     if (content) {
       return hideOthers(content);
     }
   }, []);
-  return /* @__PURE__ */ React26.createElement(RemoveScroll, {
+  return /* @__PURE__ */ React27.createElement(RemoveScroll, {
     as: Slot11,
     allowPinchZoom: true
-  }, /* @__PURE__ */ React26.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ React27.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // Make sure we're not trapping once it's been closed (closed !== unmounted when animating out).
@@ -2514,11 +2720,11 @@ var PopoverContentModal = /* @__PURE__ */ forwardRef18((props, forwardedRef) =>
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const hasInteractedOutsideRef = useRef4(false);
-  const hasPointerDownOutsideRef = useRef4(false);
-  return /* @__PURE__ */ React26.createElement(PopoverContentImpl, {
+  const hasInteractedOutsideRef = useRef7(false);
+  const hasPointerDownOutsideRef = useRef7(false);
+  return /* @__PURE__ */ React27.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2553,7 +2759,7 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef18((props, forwardedRef)
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverContentImpl = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
@@ -2577,13 +2783,13 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
     collisionBoundary,
     context.triggerRef.current
   ]);
-  return /* @__PURE__ */ React26.createElement(FocusScope, {
+  return /* @__PURE__ */ React27.createElement(FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React26.createElement(DismissableLayer, {
+  }, /* @__PURE__ */ React27.createElement(DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2591,7 +2797,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React26.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ React27.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -2617,10 +2823,10 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   })));
 });
 var CLOSE_NAME = "Popover.Close";
-var PopoverClose = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ React26.createElement(Primitive11.button, {
+  return /* @__PURE__ */ React27.createElement(Primitive11.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2629,11 +2835,11 @@ var PopoverClose = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "Popover.Arrow";
-var PopoverArrow = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React26.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ React27.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", {}, classNames),
@@ -2641,10 +2847,10 @@ var PopoverArrow = /* @__PURE__ */ forwardRef18((props, forwardedRef) => {
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Comp = asChild ? Slot11 : Primitive11.div;
-  return /* @__PURE__ */ React26.createElement(Comp, {
+  return /* @__PURE__ */ React27.createElement(Comp, {
     ...props,
     className: tx("popover.viewport", {
       constrainInline,
@@ -2673,7 +2879,7 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
   const [internalOpen, setInternalOpen] = useState8(defaultOpen ?? false);
   const controlled = value !== void 0 || onValueChange !== void 0;
   const resolvedValue = controlled ? value : internalValue;
-  const setValue = useCallback9((next) => {
+  const setValue = useCallback11((next) => {
     if (!controlled) {
       setInternalValue(next);
     }
@@ -2683,7 +2889,7 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
     onValueChange
   ]);
   const resolvedOpen = open ?? internalOpen;
-  const handleOpenChange = useCallback9((next) => {
+  const handleOpenChange = useCallback11((next) => {
     if (open === void 0) {
       setInternalOpen(next);
     }
@@ -2692,14 +2898,14 @@ var DatePickerRoot = ({ mode = "single", value, defaultValue, onValueChange, wit
     open,
     onOpenChange
   ]);
-  return /* @__PURE__ */ React27.createElement(DatePickerProvider, {
+  return /* @__PURE__ */ React28.createElement(DatePickerProvider, {
     mode,
     value: resolvedValue,
     setValue,
     withTime,
     open: resolvedOpen,
     onOpenChange: handleOpenChange
-  }, /* @__PURE__ */ React27.createElement(Popover.Root, {
+  }, /* @__PURE__ */ React28.createElement(Popover.Root, {
     open: resolvedOpen,
     onOpenChange: handleOpenChange
   }, children));
@@ -2720,36 +2926,36 @@ var formatValue = (mode, value, fmt) => {
     }
   }
 };
-var DatePickerTrigger = /* @__PURE__ */ forwardRef19(({ classNames, format: fmt = "PPP", placeholder, icon = true, children, ...props }, forwardedRef) => {
+var DatePickerTrigger = /* @__PURE__ */ forwardRef20(({ classNames, format: fmt = "PPP", placeholder, icon = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { t } = useTranslation(translationKey);
   const { mode, value } = useDatePickerContext("DatePickerTrigger");
   const placeholderText = placeholder ?? t(`date-picker.placeholder.${mode}.label`);
   const label = formatValue(mode, value, fmt) ?? placeholderText;
   const hasValue = label !== placeholderText;
-  return /* @__PURE__ */ React27.createElement(Popover.Trigger, {
+  return /* @__PURE__ */ React28.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React27.createElement("button", {
+  }, /* @__PURE__ */ React28.createElement("button", {
     ref: forwardedRef,
     type: "button",
     ...props,
     className: tx("datePicker.trigger", {
       hasValue
     }, classNames) ?? void 0
-  }, children ?? /* @__PURE__ */ React27.createElement(React27.Fragment, null, icon && /* @__PURE__ */ React27.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React28.createElement(React28.Fragment, null, icon && /* @__PURE__ */ React28.createElement(Icon, {
     size: 4,
     icon: "ph--calendar--regular"
   }), label)));
 });
 DatePickerTrigger.displayName = "DatePickerTrigger";
-var DatePickerContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
+var DatePickerContent = /* @__PURE__ */ forwardRef20(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(Popover.Portal, null, /* @__PURE__ */ React27.createElement(Popover.Content, {
+  return /* @__PURE__ */ React28.createElement(Popover.Portal, null, /* @__PURE__ */ React28.createElement(Popover.Content, {
     ref: forwardedRef,
     align: "start",
     sideOffset: 4,
     ...props
-  }, /* @__PURE__ */ React27.createElement("div", {
+  }, /* @__PURE__ */ React28.createElement("div", {
     className: tx("datePicker.content", {}, classNames)
   }, children)));
 });
@@ -2769,7 +2975,7 @@ var DatePickerCalendar = ({ classNames } = {}) => {
   const { mode, value, setValue, withTime, onOpenChange } = useDatePickerContext("DatePickerCalendar");
   if (mode === "single") {
     const date = value;
-    return /* @__PURE__ */ React27.createElement(Calendar.Root, {
+    return /* @__PURE__ */ React28.createElement(Calendar.Root, {
       mode: "single",
       classNames,
       selected: date,
@@ -2783,7 +2989,7 @@ var DatePickerCalendar = ({ classNames } = {}) => {
     });
   }
   const range = value;
-  return /* @__PURE__ */ React27.createElement(Calendar.Root, {
+  return /* @__PURE__ */ React28.createElement(Calendar.Root, {
     mode: "range",
     classNames,
     selected: range,
@@ -2816,12 +3022,12 @@ import { createContext as createContext6 } from "@radix-ui/react-context";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
-import React28, { forwardRef as forwardRef20 } from "react";
+import React29, { forwardRef as forwardRef21 } from "react";
 import { useTranslation as useTranslation4 } from "react-i18next";
 import { osTranslations as osTranslations2 } from "@dxos/ui-theme";
-var DialogRoot = (props) => /* @__PURE__ */ React28.createElement(ElevationProvider, {
+var DialogRoot = (props) => /* @__PURE__ */ React29.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React28.createElement(DialogPrimitive.Root, {
+}, /* @__PURE__ */ React29.createElement(DialogPrimitive.Root, {
   // NOTE: Radix warning unless set to undefined.
   // https://www.radix-ui.com/primitives/docs/components/dialog#description
   "aria-describedby": void 0,
@@ -2832,23 +3038,23 @@ var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DIALOG_OVERLAY_NAME = "Dialog.Overlay";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext6(DIALOG_OVERLAY_NAME, {});
-var DialogOverlay = /* @__PURE__ */ forwardRef20(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ forwardRef21(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React29.createElement(DialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ React29.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 var DIALOG_CONTENT_NAME = "Dialog.Content";
-var DialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size = "md", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef21(({ classNames, children, size = "sm", inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Content, {
+  return /* @__PURE__ */ React29.createElement(DialogPrimitive.Content, {
     ...props,
     // NOTE: Radix warning unless set to undefined.
     // https://www.radix-ui.com/primitives/docs/components/dialog#description
@@ -2858,9 +3064,9 @@ var DialogContent = /* @__PURE__ */ forwardRef20(({ classNames, children, size =
       inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React28.createElement(Column.Root, {
+  }, /* @__PURE__ */ React29.createElement(Column.Root, {
     classNames: "dx-expander",
-    gutter: "sm"
+    gutter: "lg"
   }, children));
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
@@ -2868,7 +3074,7 @@ var DialogHeader = slottable(({ children, asChild, ...props }, forwardedRef) =>
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(Comp, {
+  return /* @__PURE__ */ React29.createElement(Comp, {
     ...rest,
     className: tx("dialog.header", {}, className),
     ref: forwardedRef
@@ -2884,9 +3090,9 @@ var DIALOG_ACTION_LABEL_KEYS = {
   close: "close-dialog.label",
   delete: "toolbar-delete.label"
 };
-var DialogActionIconButton = /* @__PURE__ */ forwardRef20(({ action, label, ...props }, forwardedRef) => {
+var DialogActionIconButton = /* @__PURE__ */ forwardRef21(({ action, label, ...props }, forwardedRef) => {
   const { t } = useTranslation4(osTranslations2);
-  return /* @__PURE__ */ React28.createElement(IconButton, {
+  return /* @__PURE__ */ React29.createElement(IconButton, {
     ...props,
     label: label ?? t(DIALOG_ACTION_LABEL_KEYS[action]),
     icon: DIALOG_ACTION_ICONS[action],
@@ -2901,16 +3107,16 @@ var DialogBody = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(Comp, {
+  return /* @__PURE__ */ React29.createElement(Comp, {
     ...rest,
     className: tx("dialog.body", {}, className),
     ref: forwardedRef
   }, children);
 });
 DialogBody.displayName = "Dialog.Body";
-var DialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Title, {
+  return /* @__PURE__ */ React29.createElement(DialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -2919,9 +3125,9 @@ var DialogTitle = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }
   });
 });
 DialogTitle.displayName = "Dialog.Title";
-var DialogDescription = /* @__PURE__ */ forwardRef20(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(DialogPrimitive.Description, {
+  return /* @__PURE__ */ React29.createElement(DialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -2934,7 +3140,7 @@ var DialogActionBar = slottable(({ children, asChild, ...props }, forwardedRef)
   const { className: classNames, ...rest } = composableProps(props);
   const Comp = asChild ? Slot12 : Primitive12.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(Comp, {
+  return /* @__PURE__ */ React29.createElement(Comp, {
     ...rest,
     className: tx("dialog.actionbar", {}, classNames),
     ref: forwardedRef
@@ -2960,10 +3166,10 @@ var Dialog = {
 // src/components/Dialog/AlertDialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { createContext as createContext7 } from "@radix-ui/react-context";
-import React29, { forwardRef as forwardRef21 } from "react";
-var AlertDialogRoot = (props) => /* @__PURE__ */ React29.createElement(ElevationProvider, {
+import React30, { forwardRef as forwardRef22 } from "react";
+var AlertDialogRoot = (props) => /* @__PURE__ */ React30.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Root, props));
+}, /* @__PURE__ */ React30.createElement(AlertDialogPrimitive.Root, props));
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
 var AlertDialogCancel = AlertDialogPrimitive.Cancel;
@@ -2973,37 +3179,37 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialog.Content";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext7(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ forwardRef21(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ forwardRef22(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Overlay, {
+  return /* @__PURE__ */ React30.createElement(AlertDialogPrimitive.Overlay, {
     ...props,
     "data-block-align": blockAlign,
     className: tx("dialog.overlay", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React29.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ React30.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ forwardRef21(({ classNames, children, size = "md", ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ forwardRef22(({ classNames, children, size = "md", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Content, {
+  return /* @__PURE__ */ React30.createElement(AlertDialogPrimitive.Content, {
     ...props,
     className: tx("dialog.content", {
       inOverlayLayout,
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React29.createElement(Column.Root, {
+  }, /* @__PURE__ */ React30.createElement(Column.Root, {
     classNames: "dx-expander",
-    gutter: "sm"
+    gutter: "lg"
   }, children));
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
-var AlertDialogTitle = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ forwardRef22(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Title, {
+  return /* @__PURE__ */ React30.createElement(AlertDialogPrimitive.Title, {
     ...props,
     className: tx("dialog.title", {
       srOnly
@@ -3011,9 +3217,9 @@ var AlertDialogTitle = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...pr
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ forwardRef21(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ forwardRef22(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(AlertDialogPrimitive.Description, {
+  return /* @__PURE__ */ React30.createElement(AlertDialogPrimitive.Description, {
     ...props,
     className: tx("dialog.description", {
       srOnly
@@ -3043,40 +3249,40 @@ var AlertDialog = {
 import { ErrorBoundary } from "@dxos/react-error-boundary";
 
 // src/components/ErrorFallback/ErrorFallback.tsx
-import React30 from "react";
+import React31 from "react";
 import { safeStringify } from "@dxos/util";
 import { translationKey as translationKey4 } from "#translations";
 var ErrorFallback = ({ children, error, title, data }) => {
   const { t } = useTranslation(translationKey4);
   const isDev = true;
   const message = error instanceof Error ? error.message : String(error);
-  return /* @__PURE__ */ React30.createElement("div", {
+  return /* @__PURE__ */ React31.createElement("div", {
     role: "alert",
     "data-testid": "error-boundary-fallback",
     className: "flex flex-col p-4 gap-4 overflow-auto"
-  }, /* @__PURE__ */ React30.createElement("h1", {
+  }, /* @__PURE__ */ React31.createElement("h1", {
     className: "text-lg text-info-text"
-  }, title ?? "Runtime Error"), /* @__PURE__ */ React30.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React30.createElement(Section, {
+  }, title ?? "Runtime Error"), /* @__PURE__ */ React31.createElement("p", null, message), isDev && error instanceof Error && /* @__PURE__ */ React31.createElement(Section, {
     title: "Stack",
     onClick: () => {
       const text = error instanceof Error ? error.stack ?? error.message : String(error);
       void navigator.clipboard.writeText(text);
     }
-  }, /* @__PURE__ */ React30.createElement(ErrorStack, {
+  }, /* @__PURE__ */ React31.createElement(ErrorStack, {
     error
-  })), data && /* @__PURE__ */ React30.createElement(Section, {
+  })), data && /* @__PURE__ */ React31.createElement(Section, {
     title: "Data",
     onClick: () => {
       void navigator.clipboard.writeText(JSON.stringify(data, void 0, 2));
     }
-  }, /* @__PURE__ */ React30.createElement("pre", {
+  }, /* @__PURE__ */ React31.createElement("pre", {
     className: "overflow-x-auto text-xs"
   }, safeStringify(data, void 0, 2))), children);
 };
 var Section = ({ children, title, onClick }) => {
-  return /* @__PURE__ */ React30.createElement("div", {
+  return /* @__PURE__ */ React31.createElement("div", {
     className: "flex flex-col gap-1"
-  }, onClick && /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement(IconButton, {
+  }, onClick && /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement(IconButton, {
     classNames: "text-xs uppercase",
     label: title ?? "Copy",
     icon: "ph--clipboard-text--regular",
@@ -3118,14 +3324,14 @@ import { useArrowNavigationGroup as useArrowNavigationGroup2, useFocusableGroup,
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
-import React31, { createContext as createContext8, useCallback as useCallback10, useContext as useContext4, useRef as useRef5, useState as useState10 } from "react";
+import React32, { createContext as createContext8, useCallback as useCallback12, useContext as useContext4, useRef as useRef8, useState as useState10 } from "react";
 var FOCUS_STATE_ATTR = "focus-state";
 var FocusContext = /* @__PURE__ */ createContext8({});
 var useFocus = () => useContext4(FocusContext);
 var Group3 = slottable(({ children, asChild, orientation = "vertical", border = false, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot13 : Primitive13.div;
   const { tx } = useThemeContext();
-  const rootRef = useRef5(null);
+  const rootRef = useRef8(null);
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited-trap-focus"
   });
@@ -3136,20 +3342,20 @@ var Group3 = slottable(({ children, asChild, orientation = "vertical", border =
   const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
   const [state, setState] = useState10();
   const [groupHasFocus, setGroupHasFocus] = useState10(false);
-  const handleFocusIn = useCallback10(() => setGroupHasFocus(true), []);
-  const handleFocusOut = useCallback10((event) => {
+  const handleFocusIn = useCallback12(() => setGroupHasFocus(true), []);
+  const handleFocusOut = useCallback12((event) => {
     const related = event.relatedTarget;
     if (!related || !rootRef.current?.contains(related)) {
       setGroupHasFocus(false);
     }
   }, []);
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React31.createElement(FocusContext.Provider, {
+  return /* @__PURE__ */ React32.createElement(FocusContext.Provider, {
     value: {
       setFocus: setState,
       groupHasFocus
     }
-  }, /* @__PURE__ */ React31.createElement(Comp, {
+  }, /* @__PURE__ */ React32.createElement(Comp, {
     ...rest,
     tabIndex: 0,
     className: tx("focus.group", {
@@ -3173,27 +3379,27 @@ var Item4 = slottable(({ children, asChild, current, border = false, onCurrentCh
     }
   });
   const [focused, setFocused] = useState10(false);
-  const handleClick = useCallback10((event) => {
+  const handleClick = useCallback12((event) => {
     onCurrentChange?.();
     onClick?.(event);
   }, [
     onCurrentChange,
     onClick
   ]);
-  const handleKeyDown = useCallback10((event) => {
+  const handleKeyDown = useCallback12((event) => {
     if (event.key === "Enter") {
       onCurrentChange?.();
     }
   }, [
     onCurrentChange
   ]);
-  const handleFocus = useCallback10((event) => {
+  const handleFocus = useCallback12((event) => {
     setFocused(true);
     onFocus?.(event);
   }, [
     onFocus
   ]);
-  const handleBlur = useCallback10((event) => {
+  const handleBlur = useCallback12((event) => {
     setFocused(false);
     onBlur?.(event);
   }, [
@@ -3201,7 +3407,7 @@ var Item4 = slottable(({ children, asChild, current, border = false, onCurrentCh
   ]);
   const isCurrent = current ?? focused;
   const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React31.createElement(Comp, {
+  return /* @__PURE__ */ React32.createElement(Comp, {
     ...rest,
     tabIndex: 0,
     className: tx("focus.item", {
@@ -3225,16 +3431,15 @@ var Focus = {
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { createContext as createContext9 } from "@radix-ui/react-context";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React33, { forwardRef as forwardRef23, useCallback as useCallback12, useEffect as useEffect6, useRef as useRef6, useState as useState12 } from "react";
+import React34, { forwardRef as forwardRef24, useCallback as useCallback14, useEffect as useEffect6, useRef as useRef9, useState as useState12 } from "react";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { DescriptionAndValidation as DescriptionAndValidationPrimitive, Description as DescriptionPrimitive, INPUT_NAME as INPUT_NAME2, InputRoot, Label as LabelPrimitive, PinInput as PinInputPrimitive, TextArea as TextAreaPrimitive, TextInput as TextInputPrimitive, Validation as ValidationPrimitive, useInputContext as useInputContext2 } from "@dxos/react-input";
-import { mx as mx11 } from "@dxos/ui-theme";
 import { translationKey as translationKey5 } from "#translations";
 
 // src/components/Input/SegmentedInput.tsx
 import { CalendarDate as CalendarDate2, CalendarDateTime, parseDate as parseDate2, parseDateTime, parseTime } from "@internationalized/date";
 import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
-import React32, { forwardRef as forwardRef22, useCallback as useCallback11, useState as useState11 } from "react";
+import React33, { forwardRef as forwardRef23, useCallback as useCallback13, useState as useState11 } from "react";
 import { DateField, DateInput, DateSegment, TimeField } from "react-aria-components";
 import { INPUT_NAME, useInputContext } from "@dxos/react-input";
 var tryParse = (parser, value) => {
@@ -3252,27 +3457,28 @@ var formatCalendarDate = (date) => `${pad(date.year, 4)}-${pad(date.month)}-${pa
 var formatCalendarDateTime = (datetime) => `${pad(datetime.year, 4)}-${pad(datetime.month)}-${pad(datetime.day)}T${pad(datetime.hour)}:${pad(datetime.minute)}`;
 var formatTime = (time) => `${pad(time.hour)}:${pad(time.minute)}`;
 var toCalendarDate2 = (date) => new CalendarDate2(date.getFullYear(), date.getMonth() + 1, date.getDate());
-var fieldClass = "inline-flex items-center gap-px font-mono tabular-nums focus-within:bg-attention-surface";
-var segmentClass = "rounded-xs outline-none text-end [caret-color:currentColor]! data-[type=year]:min-w-[4ch] data-[type=month]:min-w-[2ch] data-[type=day]:min-w-[2ch] data-[type=hour]:min-w-[2ch] data-[type=minute]:min-w-[2ch] data-[placeholder]:text-subdued data-[type=literal]:text-subdued data-[focused]:bg-accent-bg data-[focused]:text-accent-fg data-[invalid]:text-rose-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
+var fieldClassNames = "inline-flex flex-nowrap items-center gap-px whitespace-nowrap tabular-nums focus-within:bg-attention-surface";
+var segmentClassNames = "shrink-0 rounded-xs outline-none text-end [caret-color:currentColor]! data-[type=year]:min-w-[4ch] data-[type=month]:min-w-[1ch] data-[type=day]:min-w-[1ch] data-[type=hour]:min-w-[1ch] data-[type=minute]:min-w-[1ch] data-[placeholder]:text-subdued data-[type=literal]:text-subdued data-[focused]:bg-accent-bg data-[focused]:text-accent-fg data-[invalid]:text-rose-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
+var timeSegmentClassNames = `${segmentClassNames} data-[type=dayPeriod]:text-xs data-[type=dayPeriod]:text-description`;
 var BIDI_FORMAT_RE = /^[‪-‮⁦-⁩]+$/;
-var renderSegment = (segment) => {
+var renderSegment = (segment, classNames = segmentClassNames) => {
   if (segment.type === "literal") {
     if (BIDI_FORMAT_RE.test(segment.text)) {
-      return /* @__PURE__ */ React32.createElement("span", {
+      return /* @__PURE__ */ React33.createElement("span", {
         "aria-hidden": true,
-        className: "select-none w-[2ch] first:hidden last:hidden"
+        className: "select-none w-[1ch] first:hidden last:hidden"
       });
     }
     if (segment.text.includes(",")) {
-      return /* @__PURE__ */ React32.createElement("span", {
+      return /* @__PURE__ */ React33.createElement("span", {
         "aria-hidden": true,
         className: "select-none"
       }, " ");
     }
   }
-  return /* @__PURE__ */ React32.createElement(DateSegment, {
+  return /* @__PURE__ */ React33.createElement(DateSegment, {
     segment,
-    className: segmentClass
+    className: classNames
   });
 };
 var useFieldChrome = ({ __inputScope, density: densityProp, elevation: elevationProp }) => {
@@ -3290,9 +3496,9 @@ var useFieldChrome = ({ __inputScope, density: densityProp, elevation: elevation
     errorMessageId
   };
 };
-var PickerWrapper = ({ pickerValue, onPickerChange, withTime, disabled = false, children, calendar }) => {
+var PickerWrapper = ({ children, pickerValue, withTime, disabled = false, calendar, onPickerChange }) => {
   const [open, setOpen] = useState11(false);
-  const openPicker = useCallback11(() => {
+  const openPicker = useCallback13(() => {
     if (!disabled) {
       setOpen(true);
     }
@@ -3300,18 +3506,18 @@ var PickerWrapper = ({ pickerValue, onPickerChange, withTime, disabled = false,
     disabled
   ]);
   useInputTrigger(disabled ? void 0 : openPicker);
-  return /* @__PURE__ */ React32.createElement(DatePicker.Root, {
+  return /* @__PURE__ */ React33.createElement(DatePicker.Root, {
     mode: "single",
     withTime,
     value: pickerValue,
     onValueChange: disabled ? void 0 : onPickerChange,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ React32.createElement(Popover.Anchor, {
+  }, /* @__PURE__ */ React33.createElement(Popover.Anchor, {
     asChild: true
-  }, children), /* @__PURE__ */ React32.createElement(DatePicker.Content, null, calendar));
+  }, children), /* @__PURE__ */ React33.createElement(DatePicker.Content, null, calendar));
 };
-var SegmentedDate = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedDate = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3324,15 +3530,15 @@ var SegmentedDate = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, de
   });
   const parsed = tryParse(parseDate2, stringValue);
   const fieldProps = {
-    value: parsed,
-    onChange: (next) => setStringValue(next ? formatCalendarDate(next) : ""),
-    isDisabled: disabled,
+    "value": parsed,
+    "onChange": (next) => setStringValue(next ? formatCalendarDate(next) : ""),
+    "isDisabled": disabled,
     autoFocus,
     "aria-label": ariaLabel ?? "date",
-    granularity: "day",
-    shouldForceLeadingZeros: true
+    "granularity": "day",
+    "shouldForceLeadingZeros": true
   };
-  const field = /* @__PURE__ */ React32.createElement(DateField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
+  const field = /* @__PURE__ */ React33.createElement(DateField, fieldProps, /* @__PURE__ */ React33.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3351,18 +3557,18 @@ var SegmentedDate = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, de
       density,
       elevation,
       validationValence
-    }, fieldClass, classNames)
+    }, fieldClassNames, classNames)
   }, renderSegment));
-  return /* @__PURE__ */ React32.createElement(PickerWrapper, {
+  return /* @__PURE__ */ React33.createElement(PickerWrapper, {
     pickerValue: parsed ? new Date(parsed.year, parsed.month - 1, parsed.day) : void 0,
     onPickerChange: (next) => setStringValue(next ? formatCalendarDate(toCalendarDate2(next)) : ""),
     withTime: false,
     disabled,
-    calendar: /* @__PURE__ */ React32.createElement(DatePicker.Calendar, null)
+    calendar: /* @__PURE__ */ React33.createElement(DatePicker.Calendar, null)
   }, field);
 });
 SegmentedDate.displayName = "Input.SegmentedDate";
-var SegmentedTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedTime = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3375,16 +3581,16 @@ var SegmentedTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, de
   });
   const parsed = tryParse(parseTime, stringValue);
   const fieldProps = {
-    value: parsed,
-    onChange: (next) => setStringValue(next ? formatTime(next) : ""),
-    isDisabled: disabled,
+    "value": parsed,
+    "onChange": (next) => setStringValue(next ? formatTime(next) : ""),
+    "isDisabled": disabled,
     autoFocus,
     "aria-label": ariaLabel ?? "time",
-    granularity: "minute",
+    "granularity": "minute",
     hourCycle,
-    shouldForceLeadingZeros: true
+    "shouldForceLeadingZeros": true
   };
-  return /* @__PURE__ */ React32.createElement(TimeField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
+  return /* @__PURE__ */ React33.createElement(TimeField, fieldProps, /* @__PURE__ */ React33.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3403,11 +3609,11 @@ var SegmentedTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, de
       density,
       elevation,
       validationValence
-    }, fieldClass, classNames)
-  }, renderSegment));
+    }, fieldClassNames, classNames)
+  }, (segment) => renderSegment(segment, timeSegmentClassNames)));
 });
 SegmentedTime.displayName = "Input.SegmentedTime";
-var SegmentedDateTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
+var SegmentedDateTime = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, value, defaultValue, onValueChange, disabled, autoFocus, id, hourCycle = 24, "aria-label": ariaLabel }, forwardedRef) => {
   const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
     __inputScope,
     density: densityProp,
@@ -3420,16 +3626,16 @@ var SegmentedDateTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames
   });
   const parsed = tryParse(parseDateTime, stringValue);
   const fieldProps = {
-    value: parsed,
-    onChange: (next) => setStringValue(next ? formatCalendarDateTime(next) : ""),
-    isDisabled: disabled,
+    "value": parsed,
+    "onChange": (next) => setStringValue(next ? formatCalendarDateTime(next) : ""),
+    "isDisabled": disabled,
     autoFocus,
     "aria-label": ariaLabel ?? "date-time",
-    granularity: "minute",
+    "granularity": "minute",
     hourCycle,
-    shouldForceLeadingZeros: true
+    "shouldForceLeadingZeros": true
   };
-  const field = /* @__PURE__ */ React32.createElement(DateField, fieldProps, /* @__PURE__ */ React32.createElement(DateInput, {
+  const field = /* @__PURE__ */ React33.createElement(DateField, fieldProps, /* @__PURE__ */ React33.createElement(DateInput, {
     ref: forwardedRef,
     ...id ?? contextId ? {
       id: id ?? contextId
@@ -3448,14 +3654,14 @@ var SegmentedDateTime = /* @__PURE__ */ forwardRef22(({ __inputScope, classNames
       density,
       elevation,
       validationValence
-    }, fieldClass, classNames)
+    }, fieldClassNames, classNames)
   }, renderSegment));
-  return /* @__PURE__ */ React32.createElement(PickerWrapper, {
+  return /* @__PURE__ */ React33.createElement(PickerWrapper, {
     pickerValue: parsed ? new Date(parsed.year, parsed.month - 1, parsed.day, parsed.hour, parsed.minute) : void 0,
     onPickerChange: (next) => setStringValue(next ? formatCalendarDateTime(new CalendarDateTime(next.getFullYear(), next.getMonth() + 1, next.getDate(), next.getHours(), next.getMinutes())) : ""),
     withTime: true,
     disabled,
-    calendar: /* @__PURE__ */ React32.createElement(DatePicker.Calendar, null)
+    calendar: /* @__PURE__ */ React33.createElement(DatePicker.Calendar, null)
   }, field);
 });
 SegmentedDateTime.displayName = "Input.SegmentedDateTime";
@@ -3481,9 +3687,9 @@ var useInputTrigger = (handler) => {
   ]);
 };
 var Root8 = (props) => {
-  const handlerRef = useRef6(null);
+  const handlerRef = useRef9(null);
   const [hasTrigger, setHasTrigger] = useState12(false);
-  const registerTrigger = useCallback12((handler) => {
+  const registerTrigger = useCallback14((handler) => {
     handlerRef.current = handler;
     setHasTrigger(true);
     return () => {
@@ -3493,23 +3699,23 @@ var Root8 = (props) => {
       }
     };
   }, []);
-  const trigger = useCallback12(() => {
+  const trigger = useCallback14(() => {
     handlerRef.current?.();
   }, []);
-  return /* @__PURE__ */ React33.createElement(InputTriggerProvider, {
+  return /* @__PURE__ */ React34.createElement(InputTriggerProvider, {
     registerTrigger,
     trigger,
     hasTrigger
-  }, /* @__PURE__ */ React33.createElement(InputRoot, props));
+  }, /* @__PURE__ */ React34.createElement(InputRoot, props));
 };
 Root8.displayName = "Input.Root";
-var TriggerIcon = /* @__PURE__ */ forwardRef23(({ classNames, icon = "ph--calendar--regular", "aria-label": ariaLabel, label, ...props }, forwardedRef) => {
+var TriggerIcon = /* @__PURE__ */ forwardRef24(({ classNames, icon = "ph--calendar--regular", "aria-label": ariaLabel, label, ...props }, forwardedRef) => {
   const { t } = useTranslation5(translationKey5);
   const ctx = useInputTriggerContext("Input.TriggerIcon");
   if (!ctx.hasTrigger) {
     return null;
   }
-  return /* @__PURE__ */ React33.createElement(IconButton, {
+  return /* @__PURE__ */ React34.createElement(IconButton, {
     ref: forwardedRef,
     variant: "ghost",
     icon,
@@ -3522,9 +3728,9 @@ var TriggerIcon = /* @__PURE__ */ forwardRef23(({ classNames, icon = "ph--calend
   });
 });
 TriggerIcon.displayName = "Input.TriggerIcon";
-var Label3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Label3 = /* @__PURE__ */ forwardRef24(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(LabelPrimitive, {
+  return /* @__PURE__ */ React34.createElement(LabelPrimitive, {
     ...props,
     className: tx("input.label", {
       srOnly
@@ -3533,9 +3739,9 @@ var Label3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...pr
   }, children);
 });
 Label3.displayName = "Input.Label";
-var Description3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var Description3 = /* @__PURE__ */ forwardRef24(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(DescriptionPrimitive, {
+  return /* @__PURE__ */ React34.createElement(DescriptionPrimitive, {
     ...props,
     className: tx("input.description", {
       srOnly
@@ -3544,10 +3750,10 @@ var Description3 = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly,
   }, children);
 });
 Description3.displayName = "Input.Description";
-var Validation = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ forwardRef24(({ __inputScope, classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React33.createElement(ValidationPrimitive, {
+  return /* @__PURE__ */ React34.createElement(ValidationPrimitive, {
     ...props,
     className: tx("input.validation", {
       srOnly,
@@ -3557,9 +3763,9 @@ var Validation = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, child
   }, children);
 });
 Validation.displayName = "Input.Validation";
-var DescriptionAndValidation = /* @__PURE__ */ forwardRef23(({ classNames, children, srOnly, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ forwardRef24(({ classNames, children, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(DescriptionAndValidationPrimitive, {
+  return /* @__PURE__ */ React34.createElement(DescriptionAndValidationPrimitive, {
     ...props,
     className: tx("input.descriptionAndValidation", {
       srOnly
@@ -3568,17 +3774,17 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef23(({ classNames, child
   }, children);
 });
 DescriptionAndValidation.displayName = "Input.DescriptionAndValidation";
-var PinInput = /* @__PURE__ */ forwardRef23(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ forwardRef24(({ classNames, density: propsDensity, elevation: propsElevation, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  return /* @__PURE__ */ React33.createElement(PinInputPrimitive, {
+  return /* @__PURE__ */ React34.createElement(PinInputPrimitive, {
     ...props,
     ...props.autoFocus && !hasIosKeyboard2 && {
       autoFocus: true
     },
-    className: tx("input.inputWithSegments", {
+    className: tx("input.pin", {
       disabled: props.disabled
     }, classNames) || "",
     segmentClassName: tx("input.segment", {
@@ -3590,13 +3796,13 @@ var PinInput = /* @__PURE__ */ forwardRef23(({ classNames, density: propsDensity
   });
 });
 PinInput.displayName = "Input.PinInput";
-var TextInput = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ forwardRef24(({ __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(densityProp);
   const elevation = useElevationContext(elevationProp);
   const { validationValence } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React33.createElement(TextInputPrimitive, {
+  return /* @__PURE__ */ React34.createElement(TextInputPrimitive, {
     ...props,
     "data-1p-ignore": noAutoFill,
     className: tx("input.input", {
@@ -3613,13 +3819,13 @@ var TextInput = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, densit
   });
 });
 TextInput.displayName = "Input.TextInput";
-var TextArea = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ forwardRef24(({ __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 } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React33.createElement(TextAreaPrimitive, {
+  return /* @__PURE__ */ React34.createElement(TextAreaPrimitive, {
     ...props,
     className: tx("input.textArea", {
       variant,
@@ -3635,7 +3841,7 @@ var TextArea = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, density
   });
 });
 TextArea.displayName = "Input.TextArea";
-var Checkbox = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ forwardRef24(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, ...props }, forwardedRef) => {
   const [checked, onCheckedChange] = useControllableState4({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
@@ -3643,7 +3849,7 @@ var Checkbox = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext2(INPUT_NAME2, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React33.createElement(CheckboxPrimitive.Root, {
+  return /* @__PURE__ */ React34.createElement(CheckboxPrimitive.Root, {
     ...props,
     checked,
     onCheckedChange,
@@ -3653,11 +3859,11 @@ var Checkbox = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked
       "aria-invalid": "true",
       "aria-errormessage": errorMessageId
     },
-    className: tx("input.checkbox", {
+    "className": tx("input.checkbox", {
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React33.createElement(Icon, {
+  }, /* @__PURE__ */ React34.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
     classNames: tx("input.checkboxIndicator", {
       size,
@@ -3666,16 +3872,19 @@ var Checkbox = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked
   }));
 });
 Checkbox.displayName = "Input.Checkbox";
-var Switch = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+var Switch = /* @__PURE__ */ forwardRef24(({ __inputScope, classNames, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
   const [checked, onCheckedChange] = useControllableState4({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext2(INPUT_NAME2, __inputScope);
-  return /* @__PURE__ */ React33.createElement("input", {
+  return /* @__PURE__ */ React34.createElement("input", {
     type: "checkbox",
-    className: mx11("dx-checkbox--switch dx-focus-ring", classNames),
+    className: tx("input.switch", {
+      disabled: props.disabled
+    }, classNames),
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -3691,6 +3900,15 @@ var Switch = /* @__PURE__ */ forwardRef23(({ __inputScope, classNames, checked:
   });
 });
 Switch.displayName = "Input.Switch";
+var Block = /* @__PURE__ */ forwardRef24(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React34.createElement("div", {
+    ...props,
+    className: tx("input.block"),
+    ref: forwardedRef
+  }, children);
+});
+Block.displayName = "Input.Block";
 var Time = SegmentedTime;
 var Date2 = SegmentedDate;
 var DateTime = SegmentedDateTime;
@@ -3705,355 +3923,28 @@ var Input = {
   DateTime,
   Checkbox,
   Switch,
+  Block,
   Label: Label3,
   Description: Description3,
   Validation,
   DescriptionAndValidation
 };
 
-// src/components/List/List.tsx
-import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
-import { Slot as Slot14 } from "@radix-ui/react-slot";
-import React35, { forwardRef as forwardRef24 } from "react";
-import { LIST_ITEM_NAME, LIST_NAME, ListItemCollapsibleContent, List as ListPrimitive, ListItem as ListPrimitiveItem, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, useListContext, useListItemContext } from "@dxos/react-list";
-
-// src/components/List/ListDropIndicator.tsx
-import React34 from "react";
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-(--line-thickness) left-[calc(var(--line-inset)+var(--terminal-radius))] right-(--line-inset) before:left-(--terminal-inset)",
-  vertical: "w-(--line-thickness) top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-(--line-inset) before:top-(--terminal-inset)"
-};
-var edgeStyles = {
-  top: "top-(--line-offset) before:top-(--offset-terminal)",
-  right: "right-(--line-offset) before:right-(--offset-terminal)",
-  bottom: "bottom-(--line-offset) before:bottom-(--offset-terminal)",
-  left: "left-(--line-offset) before:left-(--offset-terminal)"
-};
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React34.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
-      "--line-inset": `${lineInset}px`,
-      "--terminal-size": `${terminalSize}px`,
-      "--terminal-radius": `${terminalSize / 2}px`,
-      "--terminal-inset": `${terminalInset}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
-    },
-    className: `absolute z-10 pointer-events-none bg-accent-bg before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
-  });
-};
-
-// src/components/List/List.tsx
-var List = composable(({ children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext(props.density);
-  const { className, ...rest } = composableProps(props);
-  return /* @__PURE__ */ React35.createElement(DensityProvider, {
-    density
-  }, /* @__PURE__ */ React35.createElement(ListPrimitive, {
-    ...rest,
-    className: tx("list.root", {}, className),
-    ref: forwardedRef
-  }, children));
-});
-var ListItemEndcap = /* @__PURE__ */ forwardRef24(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Comp = asChild ? Slot14 : Primitive14.div;
-  const density = useDensityContext();
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React35.createElement(Comp, {
-    ...!asChild && {
-      role: "none"
-    },
-    ...props,
-    className: tx("list.item.endcap", {
-      density
-    }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var MockListItemOpenTrigger = ({ classNames, ...props }) => {
-  const density = useDensityContext();
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React35.createElement("div", {
-    ...props,
-    className: tx("list.item.openTrigger", {
-      density
-    }, classNames)
-  });
-};
-var ListItemHeading = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React35.createElement(ListPrimitiveItemHeading, {
-    ...props,
-    className: tx("list.item.heading", {
-      density
-    }, classNames),
-    ref: forwardedRef
-  }, /* @__PURE__ */ React35.createElement("span", null, children));
-});
-var ListItemOpenTrigger = /* @__PURE__ */ forwardRef24(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-  return /* @__PURE__ */ React35.createElement(ListPrimitiveItemOpenTrigger, {
-    ...props,
-    className: tx("list.item.openTrigger", {
-      density
-    }, classNames),
-    ref: forwardedRef
-  }, children || /* @__PURE__ */ React35.createElement(Icon, {
-    size: 3,
-    icon: open ? "ph--caret-down--bold" : "ph--caret-right--bold",
-    classNames: tx("list.item.openTriggerIcon", {})
-  }));
-});
-var ListItemRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const density = useDensityContext();
-  return /* @__PURE__ */ React35.createElement(ListPrimitiveItem, {
-    ...props,
-    className: tx("list.item.root", {
-      density,
-      collapsible: props.collapsible
-    }, classNames),
-    ref: forwardedRef
-  }, children);
-});
-var ListItem = {
-  Root: ListItemRoot,
-  Endcap: ListItemEndcap,
-  Heading: ListItemHeading,
-  OpenTrigger: ListItemOpenTrigger,
-  CollapsibleContent: ListItemCollapsibleContent,
-  MockOpenTrigger: MockListItemOpenTrigger,
-  DropIndicator: ListDropIndicator
-};
-
-// src/components/List/Tree.tsx
-import React37, { forwardRef as forwardRef25 } from "react";
-
-// src/components/List/TreeDropIndicator.tsx
-import React36 from "react";
-var edgeToOrientationMap2 = {
-  "reorder-above": "sibling",
-  "reorder-below": "sibling",
-  "make-child": "child",
-  reparent: "child"
-};
-var orientationStyles2 = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling: "h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-bg before:left-(--negative-terminal-size)",
-  child: "inset-0 border-[length:var(--line-thickness)] before:invisible"
-};
-var instructionStyles = {
-  "reorder-above": "top-(--line-offset) before:top-(--offset-terminal)",
-  "reorder-below": "bottom-(--line-offset) before:bottom-(--offset-terminal)",
-  "make-child": "border-accent-bg",
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: ""
-};
-var strokeSize2 = 2;
-var terminalSize2 = 8;
-var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
-var TreeDropIndicator = ({ instruction, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
-  const isBlocked = instruction.type === "instruction-blocked";
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap2[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-  return /* @__PURE__ */ React36.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize2}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize2}px`,
-      "--terminal-radius": `${terminalSize2 / 2}px`,
-      "--negative-terminal-size": `-${terminalSize2}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
-      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
-    },
-    className: `absolute z-10 pointer-events-none before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
-  });
-};
-
-// src/components/List/Tree.tsx
-var TreeRoot = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(List, {
-    ...props,
-    ref: forwardedRef
-  });
-});
-var TreeBranch = /* @__PURE__ */ forwardRef25(({ __listScope, ...props }, forwardedRef) => {
-  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ React37.createElement(List, {
-    ...props,
-    "aria-labelledby": headingId,
-    ref: forwardedRef
-  });
-});
-var TreeItemRoot = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
-  return /* @__PURE__ */ React37.createElement(ListItem.Root, {
-    role: "treeitem",
-    ...props,
-    ref: forwardedRef
-  });
-});
-var TreeItemHeading = ListItem.Heading;
-var TreeItemOpenTrigger = ListItem.OpenTrigger;
-var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
-var TreeItemBody = ListItem.CollapsibleContent;
-var Tree = {
-  Root: TreeRoot,
-  Branch: TreeBranch
-};
-var TreeItem = {
-  Root: TreeItemRoot,
-  Heading: TreeItemHeading,
-  Body: TreeItemBody,
-  OpenTrigger: TreeItemOpenTrigger,
-  MockOpenTrigger: MockTreeItemOpenTrigger,
-  DropIndicator: TreeDropIndicator
-};
-
-// src/components/List/Treegrid.tsx
-import { useFocusFinders } from "@fluentui/react-tabster";
-import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
-import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
-import { Slot as Slot15 } from "@radix-ui/react-slot";
-import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
-import React38, { forwardRef as forwardRef26, useCallback as useCallback13 } from "react";
-var TREEGRID_ROW_NAME = "Treegrid.Row";
-var [createTreegridRowContext, createTreegridRowScope] = createContextScope3(TREEGRID_ROW_NAME, []);
-var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
-var TREEGRID_PATH_SEPARATOR = "~";
-var TREEGRID_PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = composable(({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { className, role: _role, ...rest } = composableProps(props, {
-    classNames
-  });
-  const Comp = asChild ? Slot15 : Primitive15.div;
-  const { findFirstFocusable } = useFocusFinders();
-  const handleKeyDown = useCallback13((event) => {
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowUp": {
-        const direction = event.key === "ArrowDown" ? "down" : "up";
-        const target = event.target;
-        const ancestorWithArrowKeys = target.closest(`[data-arrow-keys*="${direction}"], [data-arrow-keys="all"]`);
-        if (!ancestorWithArrowKeys) {
-          const currentRow = target.closest('[role="row"]');
-          if (currentRow) {
-            const treegrid = currentRow.closest('[role="treegrid"]');
-            if (treegrid) {
-              const rows = Array.from(treegrid.querySelectorAll('[role="row"]'));
-              const currentIndex = rows.indexOf(currentRow);
-              const nextIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
-              const targetRow = rows[nextIndex];
-              if (targetRow) {
-                const firstFocusable = findFirstFocusable(targetRow);
-                if (firstFocusable) {
-                  event.preventDefault();
-                  firstFocusable.focus();
-                }
-              }
-            }
-          }
-        }
-        break;
-      }
-    }
-    onKeyDownProp?.(event);
-  }, [
-    findFirstFocusable,
-    onKeyDownProp
-  ]);
-  return /* @__PURE__ */ React38.createElement(Comp, {
-    role: "treegrid",
-    ...rest,
-    className: tx("treegrid.root", {}, className),
-    style: {
-      ...style,
-      gridTemplateColumns
-    },
-    onKeyDown: handleKeyDown,
-    ref: forwardedRef
-  }, children);
-});
-var TreegridRow = /* @__PURE__ */ forwardRef26(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Comp = asChild ? Slot15 : Primitive15.div;
-  const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
-  const level = pathParts.length - 1;
-  const [open, onOpenChange] = useControllableState5({
-    prop: propsOpen,
-    onChange: propsOnOpenChange,
-    defaultProp: defaultOpen
-  });
-  return /* @__PURE__ */ React38.createElement(TreegridRowProvider, {
-    open,
-    onOpenChange,
-    scope: __treegridRowScope
-  }, /* @__PURE__ */ React38.createElement(Comp, {
-    role: "row",
-    "aria-level": level,
-    className: tx("treegrid.row", {
-      level
-    }, classNames),
-    ...parentOf && {
-      "aria-expanded": open,
-      "aria-owns": parentOf
-    },
-    ...props,
-    id,
-    ref: forwardedRef
-  }, children));
-});
-var TreegridCell = /* @__PURE__ */ forwardRef26(({ classNames, children, indent, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ React38.createElement("div", {
-    role: "gridcell",
-    className: tx("treegrid.cell", {
-      indent
-    }, classNames),
-    ...props,
-    ref: forwardedRef
-  }, children);
-});
-var Treegrid = {
-  Root: TreegridRoot,
-  Row: TreegridRow,
-  Cell: TreegridCell
-};
-
 // src/components/Main/Main.tsx
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
 import { createContext as createContext10 } from "@radix-ui/react-context";
 import { DialogContent as DialogContent2, Root as DialogRoot2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
-import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
-import { Slot as Slot16 } from "@radix-ui/react-slot";
-import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
-import React39, { forwardRef as forwardRef27, useCallback as useCallback15, useEffect as useEffect8, useRef as useRef7, useState as useState14 } from "react";
+import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
+import React35, { forwardRef as forwardRef25, useCallback as useCallback16, useEffect as useEffect8, useRef as useRef10, useState as useState14 } from "react";
 import { addEventListener } from "@dxos/async";
 import { log as log2 } from "@dxos/log";
 import { useForwardedRef, useMediaQuery } from "@dxos/react-hooks";
 import { osTranslations as osTranslations3 } from "@dxos/ui-theme";
 
 // src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback14, useEffect as useEffect7, useState as useState13 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect7, useState as useState13 } from "react";
 var useSwipeToDismiss = (ref, {
   onDismiss,
   dismissThreshold = 64,
@@ -4064,20 +3955,20 @@ var useSwipeToDismiss = (ref, {
   const $root = ref.current;
   const [motionState, setMotionState] = useState13(0);
   const [gestureStartX, setGestureStartX] = useState13(0);
-  const setIdle = useCallback14(() => {
+  const setIdle = useCallback15(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = useCallback14(() => {
+  const setFollowing = useCallback15(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = useCallback14(({ screenX }) => {
+  const handlePointerDown = useCallback15(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -4085,7 +3976,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = useCallback14(({ screenX }) => {
+  const handlePointerMove = useCallback15(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -4109,7 +4000,7 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = useCallback14(() => {
+  const handlePointerUp = useCallback15(() => {
     setIdle();
   }, [
     setIdle
@@ -4156,7 +4047,7 @@ var handleOpenAutoFocus = (event) => {
 };
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = useCallback15((event) => {
+  const handleKeyDown = useCallback16((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -4199,38 +4090,38 @@ var useSidebars = (consumerName) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback15(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: useCallback16(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: useCallback15(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback15(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback15(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: useCallback16(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback16(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback16(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback15(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: useCallback16(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: useCallback15(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback15(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback15(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: useCallback16(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback16(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback16(() => setComplementarySidebarState("closed"), [])
   };
 };
 var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState = "closed", onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState = "closed", onComplementarySidebarStateChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg");
-  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState6({
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState5({
     prop: propsNavigationSidebarState,
     defaultProp: defaultNavigationSidebarState,
     onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState6({
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState5({
     prop: propsComplementarySidebarState,
     defaultProp: defaultComplementarySidebarState,
     onChange: onComplementarySidebarStateChange
   });
   const [resizing, setResizing] = useState14(false);
-  const resizeInterval = useRef7(null);
+  const resizeInterval = useRef10(null);
   useEffect8(() => addEventListener(window, "resize", () => {
     setResizing(true);
     if (resizeInterval.current) {
@@ -4241,7 +4132,7 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
       resizeInterval.current = null;
     }, 3e3);
   }), []);
-  return /* @__PURE__ */ React39.createElement(MainProvider, {
+  return /* @__PURE__ */ React35.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -4251,11 +4142,11 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   }, children);
 };
 MainRoot.displayName = MAIN_ROOT_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_OVERLAY_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React39.createElement("div", {
+  return /* @__PURE__ */ React35.createElement("div", {
     ...props,
     onClick: () => {
       setNavigationSidebarState("collapsed");
@@ -4272,16 +4163,16 @@ var MainOverlay = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwar
   });
 });
 MainOverlay.displayName = MAIN_OVERLAY_NAME;
-var MainSidebar = /* @__PURE__ */ forwardRef27(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef25(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg");
   const { tx } = useThemeContext();
   const { t } = useTranslation(osTranslations3);
   const ref = useForwardedRef(forwardedRef);
-  const noopRef = useRef7(null);
+  const noopRef = useRef10(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = useCallback15((event) => {
+  const handleKeyDown = useCallback16((event) => {
     const focusGroupParent = event.target.closest("[data-tabster]");
     if (event.key === "Escape" && focusGroupParent) {
       event.preventDefault();
@@ -4292,14 +4183,14 @@ var MainSidebar = /* @__PURE__ */ forwardRef27(({ classNames, children, swipeToD
   }, [
     props.onKeyDown
   ]);
-  const Root13 = isLg ? Primitive16.div : DialogContent2;
-  return /* @__PURE__ */ React39.createElement(DialogRoot2, {
+  const Root13 = isLg ? Primitive14.div : DialogContent2;
+  return /* @__PURE__ */ React35.createElement(DialogRoot2, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
-  }, !isLg && /* @__PURE__ */ React39.createElement(DialogTitle2, {
+  }, !isLg && /* @__PURE__ */ React35.createElement(DialogTitle2, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ React39.createElement(Root13, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ React35.createElement(Root13, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -4317,10 +4208,10 @@ var MainSidebar = /* @__PURE__ */ forwardRef27(({ classNames, children, swipeToD
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ React39.createElement(MainSidebar, {
+  return /* @__PURE__ */ React35.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: navigationSidebarState,
@@ -4331,10 +4222,10 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ React39.createElement(MainSidebar, {
+  return /* @__PURE__ */ React35.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: complementarySidebarState,
@@ -4345,12 +4236,12 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef27((props, forwardedRef
   });
 });
 MainComplementarySidebar.displayName = COMPLEMENTARY_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef27(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef25(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot16 : role ? Primitive16.div : "main";
+  const Comp = asChild ? Slot14 : role ? Primitive14.div : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ React39.createElement(Comp, {
+  return /* @__PURE__ */ React35.createElement(Comp, {
     ...handlesFocus && {
       ...mover
     },
@@ -4377,9 +4268,9 @@ var Main = {
 
 // src/components/Message/Message.tsx
 import { createContext as createContext11 } from "@radix-ui/react-context";
-import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
-import { Slot as Slot17 } from "@radix-ui/react-slot";
-import React40, { forwardRef as forwardRef28 } from "react";
+import { Primitive as Primitive15 } from "@radix-ui/react-primitive";
+import { Slot as Slot15 } from "@radix-ui/react-slot";
+import React36, { forwardRef as forwardRef26 } from "react";
 import { useTranslation as useTranslation6 } from "react-i18next";
 import { useId as useId5 } from "@dxos/react-hooks";
 import { translationKey as translationKey6 } from "#translations";
@@ -4419,16 +4310,16 @@ var valenceVars = {
   }
 };
 var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef28(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef26(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId5("message__title", propsTitleId);
   const descriptionId = useId5("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  return /* @__PURE__ */ React40.createElement(MessageProvider, {
+  return /* @__PURE__ */ React36.createElement(MessageProvider, {
     titleId,
     descriptionId,
     valence
-  }, /* @__PURE__ */ React40.createElement(Column.Root, {
+  }, /* @__PURE__ */ React36.createElement(Column.Root, {
     asChild,
     role: valence === "neutral" ? "paragraph" : "alert",
     "aria-labelledby": titleId,
@@ -4447,22 +4338,22 @@ var MessageRoot = /* @__PURE__ */ forwardRef28(({ asChild, valence = "neutral",
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "Message.Title";
-var MessageTitle = /* @__PURE__ */ forwardRef28(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef26(({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
   const { t } = useTranslation6(translationKey6);
   const { tx } = useThemeContext();
   const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
   const icon = iconProp ?? messageIcons[valence];
-  return /* @__PURE__ */ React40.createElement(Column.Row, {
+  return /* @__PURE__ */ React36.createElement(Column.Row, {
     classNames: tx("message.header", {}, classNames),
     ref: forwardedRef
-  }, icon && /* @__PURE__ */ React40.createElement(Column.Block, null, /* @__PURE__ */ React40.createElement(Icon, {
+  }, icon && /* @__PURE__ */ React36.createElement(Column.Block, null, /* @__PURE__ */ React36.createElement(Icon, {
     icon
-  })), /* @__PURE__ */ React40.createElement("h2", {
+  })), /* @__PURE__ */ React36.createElement("h2", {
     className: tx("message.title", {}, classNames),
     id: titleId
-  }, children), onClose && /* @__PURE__ */ React40.createElement(Column.Block, {
+  }, children), onClose && /* @__PURE__ */ React36.createElement(Column.Block, {
     end: true
-  }, /* @__PURE__ */ React40.createElement(IconButton, {
+  }, /* @__PURE__ */ React36.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
@@ -4473,11 +4364,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef28(({ classNames, children, icon: i
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_CONTENT_NAME = "Message.Content";
-var MessageContent = /* @__PURE__ */ forwardRef28(({ asChild, classNames, children, ...props }, forwardedRef) => {
+var MessageContent = /* @__PURE__ */ forwardRef26(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-  const Comp = asChild ? Slot17 : Primitive17.p;
-  return /* @__PURE__ */ React40.createElement(Comp, {
+  const Comp = asChild ? Slot15 : Primitive15.p;
+  return /* @__PURE__ */ React36.createElement(Comp, {
     ...props,
     className: tx("message.content", {}, classNames),
     id: descriptionId,
@@ -4493,16 +4384,16 @@ var Message = {
 var Callout = Message;
 
 // src/components/Panel/Panel.tsx
-import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
-import { Slot as Slot18 } from "@radix-ui/react-slot";
-import React41 from "react";
+import { Primitive as Primitive16 } from "@radix-ui/react-primitive";
+import { Slot as Slot16 } from "@radix-ui/react-slot";
+import React37 from "react";
 var GRID_TEMPLATE_ROWS = "auto 1fr auto";
 var GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
 var PanelRoot = slottable(({ children, asChild, role, style, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React37.createElement(Comp, {
     ...rest,
     role: role ?? "none",
     style: {
@@ -4517,9 +4408,9 @@ var PanelRoot = slottable(({ children, asChild, role, style, ...props }, forward
 PanelRoot.displayName = "Panel.Root";
 var PanelToolbar = slottable(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React37.createElement(Comp, {
     ...rest,
     "data-slot": "toolbar",
     className: tx("panel.toolbar", {
@@ -4531,9 +4422,9 @@ var PanelToolbar = slottable(({ children, asChild, size, ...props }, forwardedRe
 PanelToolbar.displayName = "Panel.Toolbar";
 var PanelContent = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React37.createElement(Comp, {
     ...rest,
     "data-slot": "content",
     className: tx("panel.content", {}, className),
@@ -4543,9 +4434,9 @@ var PanelContent = slottable(({ children, asChild, ...props }, forwardedRef) =>
 PanelContent.displayName = "Panel.Content";
 var PanelStatusbar = slottable(({ children, asChild, size, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot18 : Primitive18.div;
+  const Comp = asChild ? Slot16 : Primitive16.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React41.createElement(Comp, {
+  return /* @__PURE__ */ React37.createElement(Comp, {
     ...rest,
     "data-slot": "statusbar",
     className: tx("panel.statusbar", {
@@ -4564,9 +4455,9 @@ var Panel = {
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { createContext as createContext12 } from "@radix-ui/react-context";
-import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
-import { Slot as Slot19 } from "@radix-ui/react-slot";
-import React42, { useMemo as useMemo7 } from "react";
+import { Primitive as Primitive17 } from "@radix-ui/react-primitive";
+import { Slot as Slot17 } from "@radix-ui/react-slot";
+import React38, { useMemo as useMemo7 } from "react";
 
 // src/components/ScrollArea/scrollbar.ts
 var scrollbar = {
@@ -4588,13 +4479,14 @@ var scrollbar = {
 var SCROLLAREA_NAME = "ScrollArea";
 var [ScrollAreaProvider, useScrollAreaContext] = createContext12(SCROLLAREA_NAME);
 var SCROLLAREA_ROOT_NAME = "ScrollArea.Root";
-var ScrollAreaRoot = slottable(({ children, asChild, orientation = "vertical", autoHide = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
+var ScrollAreaRoot = slottable(({ children, asChild, orientation = "vertical", autoHide = true, scrollbars = true, centered = false, padding = false, thin = false, snap = false, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot19 : Primitive19.div;
+  const Comp = asChild ? Slot17 : Primitive17.div;
   const options = useMemo7(() => ({
     orientation,
     autoHide,
+    scrollbars,
     centered,
     padding,
     thin,
@@ -4602,12 +4494,13 @@ var ScrollAreaRoot = slottable(({ children, asChild, orientation = "vertical", a
   }), [
     orientation,
     autoHide,
+    scrollbars,
     centered,
     padding,
     thin,
     snap
   ]);
-  return /* @__PURE__ */ React42.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React42.createElement(Comp, {
+  return /* @__PURE__ */ React38.createElement(ScrollAreaProvider, options, /* @__PURE__ */ React38.createElement(Comp, {
     ...rest,
     className: tx("scrollArea.root", options, className),
     ref: forwardedRef
@@ -4621,12 +4514,12 @@ var ScrollAreaViewport = slottable(({ children, asChild, ...props }, forwardedRe
   const density = options.thin ? scrollbar.md : scrollbar.lg;
   const { className, ...rest } = composableProps(props);
   const { style, ...restWithoutStyle } = rest;
-  const Comp = asChild ? Slot19 : Primitive19.div;
-  return /* @__PURE__ */ React42.createElement(Comp, {
+  const Comp = asChild ? Slot17 : Primitive17.div;
+  return /* @__PURE__ */ React38.createElement(Comp, {
     ...restWithoutStyle,
     style: {
-      "--scroll-width": `${density.size}px`,
-      "--scroll-padding": `${density.padding}px`,
+      "--scroll-width": options.scrollbars ? `${density.size}px` : "0px",
+      "--scroll-padding": options.scrollbars ? `${density.padding}px` : "0px",
       ...style
     },
     className: tx("scrollArea.viewport", options, className),
@@ -4641,23 +4534,23 @@ var ScrollArea = {
 
 // src/components/ScrollContainer/ScrollContainer.tsx
 import { createContext as createContext13 } from "@radix-ui/react-context";
-import React43, { forwardRef as forwardRef29, useCallback as useCallback16, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo8, useRef as useRef8, useState as useState15 } from "react";
+import React39, { forwardRef as forwardRef27, useCallback as useCallback17, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo8, useRef as useRef11, useState as useState15 } from "react";
 import { addEventListener as addEventListener2, combine } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
 import { useMergeRefs } from "@dxos/react-hooks";
-import { mx as mx12 } from "@dxos/ui-theme";
+import { mx as mx11 } from "@dxos/ui-theme";
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui/src/components/ScrollContainer/ScrollContainer.tsx";
 var isBottom = (el) => {
   return !!(el && el.scrollHeight - el.scrollTop === el.clientHeight);
 };
 var [ScrollContainerProvider, useScrollContainerContext] = createContext13("ScrollContainer");
-var ScrollContainerRoot = /* @__PURE__ */ forwardRef29(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
-  const scrollerRef = useRef8(null);
-  const autoScrollRef = useRef8(false);
+var ScrollContainerRoot = /* @__PURE__ */ forwardRef27(({ children, pin, behavior: behaviorProp = "smooth" }, forwardedRef) => {
+  const scrollerRef = useRef11(null);
+  const autoScrollRef = useRef11(false);
   const [pinned, setPinned] = useState15(pin);
   const [overflow, setOverflow] = useState15(false);
-  const timeoutRef = useRef8(void 0);
-  const scrollToBottom = useCallback16((behavior = behaviorProp) => {
+  const timeoutRef = useRef11(void 0);
+  const scrollToBottom = useCallback17((behavior = behaviorProp) => {
     if (scrollerRef.current) {
       if (behavior !== "instant") {
         autoScrollRef.current = true;
@@ -4698,10 +4591,10 @@ var ScrollContainerRoot = /* @__PURE__ */ forwardRef29(({ children, pin, behavio
   useImperativeHandle(forwardedRef, () => controller, [
     controller
   ]);
-  const setViewport = useCallback16((el) => {
+  const setViewport = useCallback17((el) => {
     scrollerRef.current = el;
   }, []);
-  return /* @__PURE__ */ React43.createElement(ScrollContainerProvider, {
+  return /* @__PURE__ */ React39.createElement(ScrollContainerProvider, {
     pinned,
     overflow,
     controller,
@@ -4712,7 +4605,7 @@ var ScrollContainerRoot = /* @__PURE__ */ forwardRef29(({ children, pin, behavio
 });
 ScrollContainerRoot.displayName = "ScrollContainer.Root";
 var ScrollContainerContent = composable(({ children, thin, padding, centered, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React43.createElement(ScrollArea.Root, {
+  return /* @__PURE__ */ React39.createElement(ScrollArea.Root, {
     ...composableProps(props, {
       classNames: "relative isolate"
     }),
@@ -4725,7 +4618,7 @@ var ScrollContainerContent = composable(({ children, thin, padding, centered, ..
 ScrollContainerContent.displayName = "ScrollContainer.Content";
 var VIEWPORT_NAME = "ScrollContainer.Viewport";
 var ScrollContainerViewport = slottable(({ children, asChild, ...props }, forwardedRef) => {
-  const scrollerRef = useRef8(null);
+  const scrollerRef = useRef11(null);
   const mergedRef = useMergeRefs([
     forwardedRef,
     scrollerRef
@@ -4743,11 +4636,11 @@ var ScrollContainerViewport = slottable(({ children, asChild, ...props }, forwar
     setPinned,
     setOverflow
   ]);
-  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(ScrollArea.Viewport, {
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ScrollArea.Viewport, {
     asChild,
     ...composableProps(props),
     ref: mergedRef
-  }, children), /* @__PURE__ */ React43.createElement(ScrollContainerPinEffect, {
+  }, children), /* @__PURE__ */ React39.createElement(ScrollContainerPinEffect, {
     scrollerRef
   }));
 });
@@ -4792,9 +4685,9 @@ var ScrollContainerPinEffect = ({ scrollerRef }) => {
 var FADE_NAME = "ScrollContainer.Fade";
 function ScrollContainerFade() {
   const { overflow } = useScrollContainerContext(FADE_NAME);
-  return /* @__PURE__ */ React43.createElement("div", {
+  return /* @__PURE__ */ React39.createElement("div", {
     "data-visible": overflow,
-    className: mx12(
+    className: mx11(
       // NOTE: Gradients may not be visible with dark reader extensions.
       "z-10 absolute top-0 inset-x-0 h-24 w-full",
       'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
@@ -4806,9 +4699,9 @@ ScrollContainerFade.displayName = FADE_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "ScrollContainer.ScrollDownButton";
 function ScrollContainerScrollDownButton({ classNames }) {
   const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
-  return /* @__PURE__ */ React43.createElement("div", {
-    className: mx12("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
-  }, /* @__PURE__ */ React43.createElement(IconButton, {
+  return /* @__PURE__ */ React39.createElement("div", {
+    className: mx11("absolute bottom-2 right-4 opacity-100 transition-opacity duration-300", pinned && "opacity-0", classNames)
+  }, /* @__PURE__ */ React39.createElement(IconButton, {
     variant: "primary",
     icon: "ph--arrow-down--regular",
     iconOnly: true,
@@ -4828,35 +4721,35 @@ var ScrollContainer = {
 
 // src/components/Select/Select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React44, { forwardRef as forwardRef30 } from "react";
+import React40, { forwardRef as forwardRef28 } 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__ */ forwardRef30(({ children, placeholder, classNames, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef28(({ children, placeholder, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React44.createElement(Button, {
+  }, /* @__PURE__ */ React40.createElement(Button, {
     ...props,
     classNames: tx("select.triggerButton", {}, classNames)
-  }, /* @__PURE__ */ React44.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React40.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React44.createElement(SelectPrimitive.Icon, {
+  }, children), /* @__PURE__ */ React40.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React44.createElement(Icon, {
+  }, /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }))));
 });
 SelectTriggerButton.displayName = "Select.TriggerButton";
-var SelectContent = /* @__PURE__ */ forwardRef30(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef28(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Content, {
     ...props,
     "data-arrow-keys": "up down",
     collisionPadding: safeCollisionPadding,
@@ -4868,42 +4761,42 @@ var SelectContent = /* @__PURE__ */ forwardRef30(({ classNames, children, collis
   }, children);
 });
 SelectContent.displayName = "Select.Content";
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React44.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-up--bold"
   }));
 });
 SelectScrollUpButton2.displayName = "Select.ScrollUpButton";
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React44.createElement(Icon, {
+  }, children ?? /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--caret-down--bold"
   }));
 });
 SelectScrollDownButton2.displayName = "Select.ScrollDownButton";
-var SelectViewport2 = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 SelectViewport2.displayName = "Select.Viewport";
-var SelectItem = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
@@ -4911,24 +4804,24 @@ var SelectItem = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forward
 });
 SelectItem.displayName = "Select.Item";
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef30(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef28(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 SelectItemIndicator.displayName = "Select.ItemIndicator";
-var SelectOption = /* @__PURE__ */ forwardRef30(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef28(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React44.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React44.createElement("span", {
+  }, /* @__PURE__ */ React40.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React40.createElement("span", {
     className: "grow"
-  }), /* @__PURE__ */ React44.createElement(Icon, {
+  }), /* @__PURE__ */ React40.createElement(Icon, {
     size: 3,
     icon: "ph--check--regular"
   }));
@@ -4936,18 +4829,18 @@ var SelectOption = /* @__PURE__ */ forwardRef30(({ children, classNames, ...prop
 SelectOption.displayName = "Select.Option";
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", {}, classNames),
     ref: forwardedRef
   });
 });
 SelectSeparator.displayName = "Select.Separator";
-var SelectArrow = /* @__PURE__ */ forwardRef30(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef28(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React44.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React40.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", {}, classNames),
     ref: forwardedRef
@@ -4977,10 +4870,10 @@ var Select = {
 
 // src/components/Separator/Separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import React45, { forwardRef as forwardRef31 } from "react";
-var Separator4 = /* @__PURE__ */ forwardRef31(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
+import React41, { forwardRef as forwardRef29 } from "react";
+var Separator4 = /* @__PURE__ */ forwardRef29(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React45.createElement(SeparatorPrimitive.Root, {
+  return /* @__PURE__ */ React41.createElement(SeparatorPrimitive.Root, {
     ...props,
     orientation,
     className: tx("separator.root", {
@@ -4992,10 +4885,10 @@ var Separator4 = /* @__PURE__ */ forwardRef31(({ classNames, orientation = "hori
 });
 
 // src/components/Skeleton/Skeleton.tsx
-import React46, { forwardRef as forwardRef32 } from "react";
-var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default", ...props }, forwardedRef) => {
+import React42, { forwardRef as forwardRef30 } from "react";
+var Skeleton = /* @__PURE__ */ forwardRef30(({ classNames, variant = "default", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React46.createElement("div", {
+  return /* @__PURE__ */ React42.createElement("div", {
     ...props,
     className: tx("skeleton.root", {
       variant
@@ -5005,64 +4898,278 @@ var Skeleton = /* @__PURE__ */ forwardRef32(({ classNames, variant = "default",
 });
 
 // src/components/Splitter/Splitter.tsx
-import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
-import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
-import { Slot as Slot20 } from "@radix-ui/react-slot";
-import React47 from "react";
+import { useComposedRefs as useComposedRefs4 } from "@radix-ui/react-compose-refs";
+import { createContext as createContext14 } from "@radix-ui/react-context";
+import { Primitive as Primitive18 } from "@radix-ui/react-primitive";
+import { Slot as Slot18 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
+import React43, { useCallback as useCallback18, useEffect as useEffect10, useRef as useRef12, useState as useState16 } from "react";
 var SPLITTER_NAME = "Splitter";
-var [createSplitterContext, createSplitterScope] = createContextScope4(SPLITTER_NAME);
-var [SplitterProvider, useSplitterContext] = createSplitterContext(SPLITTER_NAME);
+var [SplitterProvider, useSplitterContext] = createContext14(SPLITTER_NAME);
+var getRem = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+var clampStyle = (minSize, orientation) => orientation === "horizontal" ? {
+  minInlineSize: `${minSize}rem`,
+  maxInlineSize: `calc(100% - ${minSize}rem)`
+} : {
+  minBlockSize: `${minSize}rem`,
+  maxBlockSize: `calc(100% - ${minSize}rem)`
+};
+var endMinStyle = (minSize, orientation) => orientation === "horizontal" ? {
+  minInlineSize: `${minSize}rem`
+} : {
+  minBlockSize: `${minSize}rem`
+};
+var panelStyle = (position, mode, anchor, size, minSize, orientation) => {
+  if (mode !== "split") {
+    const fills = mode === "start" && position === "start" || mode === "end" && position === "end";
+    return {
+      flexGrow: fills ? 1 : 0,
+      flexShrink: 1,
+      flexBasis: 0
+    };
+  }
+  if (size === void 0) {
+    return {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      ...endMinStyle(minSize, orientation)
+    };
+  }
+  return position === anchor ? {
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: `${size}rem`,
+    ...clampStyle(minSize, orientation)
+  } : {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    ...endMinStyle(minSize, orientation)
+  };
+};
+var handlePosition = (orientation, anchor, size, minSize) => {
+  if (size === void 0) {
+    return orientation === "horizontal" ? {
+      insetBlock: 0,
+      insetInlineStart: "50%",
+      transform: "translateX(-50%)"
+    } : {
+      insetInline: 0,
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)"
+    };
+  }
+  const offset = `clamp(${minSize}rem, ${size}rem, calc(100% - ${minSize}rem))`;
+  if (orientation === "horizontal") {
+    return anchor === "end" ? {
+      insetBlock: 0,
+      insetInlineEnd: offset,
+      transform: "translateX(50%)"
+    } : {
+      insetBlock: 0,
+      insetInlineStart: offset,
+      transform: "translateX(-50%)"
+    };
+  }
+  return anchor === "end" ? {
+    insetInline: 0,
+    insetBlockEnd: offset,
+    transform: "translateY(50%)"
+  } : {
+    insetInline: 0,
+    insetBlockStart: offset,
+    transform: "translateY(-50%)"
+  };
+};
 var ROOT_NAME = "Splitter.Root";
-var SplitterRoot = slottable(({ asChild, mode = "top", ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
+var SplitterRoot = slottable(({ asChild, children, orientation = "vertical", mode = "split", anchor = "start", size: sizeProp, defaultSize, onSizeChange, transition = 250, resizable = false, minSize = 0, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { __scopeSplitter, ...rest } = props;
-  const { className, ...restProps } = composableProps(rest);
-  const Comp = asChild ? Slot20 : Primitive20.div;
-  return /* @__PURE__ */ React47.createElement(SplitterProvider, {
-    scope: __scopeSplitter,
+  const rootRef = useRef12(null);
+  const composedRef = useComposedRefs4(forwardedRef, rootRef);
+  const [size, setSize] = useControllableState6({
+    prop: sizeProp,
+    defaultProp: defaultSize,
+    onChange: onSizeChange
+  });
+  const [dragging, setDragging] = useState16(false);
+  const [animating, setAnimating] = useState16(false);
+  const previousMode = useRef12(mode);
+  useEffect10(() => {
+    if (previousMode.current === mode) {
+      return;
+    }
+    previousMode.current = mode;
+    if (transition <= 0) {
+      return;
+    }
+    setAnimating(true);
+    const timer = setTimeout(() => setAnimating(false), transition);
+    return () => clearTimeout(timer);
+  }, [
     mode,
-    ratio,
     transition
-  }, /* @__PURE__ */ React47.createElement(Comp, {
-    ...restProps,
-    ref: forwardedRef,
-    className: tx("splitter.root", {}, className)
+  ]);
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot18 : Primitive18.div;
+  return /* @__PURE__ */ React43.createElement(SplitterProvider, {
+    orientation,
+    mode,
+    anchor,
+    size,
+    transition,
+    resizable,
+    minSize,
+    animating,
+    dragging,
+    rootRef,
+    setSize,
+    setDragging
+  }, /* @__PURE__ */ React43.createElement(Comp, {
+    ...rest,
+    ref: composedRef,
+    className: tx("splitter.root", {
+      orientation
+    }, className)
   }, children));
 });
 SplitterRoot.displayName = ROOT_NAME;
 var PANEL_NAME = "Splitter.Panel";
-var SplitterPanel = slottable(({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
+var SplitterPanel = slottable(({ asChild, children, position, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const { __scopeSplitter, ...rest } = props;
-  const Comp = asChild ? Slot20 : Primitive20.div;
-  const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
-  const { className, ...restProps } = composableProps(rest);
-  const isTopPanel = position === "top";
-  const topOffset = isTopPanel ? "0%" : mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%`;
-  const height = isTopPanel ? mode === "top" ? "100%" : mode === "bottom" ? "0%" : `${ratio * 100}%` : mode === "bottom" ? "100%" : mode === "top" ? "0%" : `${(1 - ratio) * 100}%`;
-  return /* @__PURE__ */ React47.createElement(Comp, {
-    ...restProps,
+  const { orientation, mode, anchor, size, minSize, transition, dragging, animating } = useSplitterContext(PANEL_NAME);
+  const { className, style, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot18 : Primitive18.div;
+  const animate = transition > 0 && animating && !dragging;
+  return /* @__PURE__ */ React43.createElement(Comp, {
+    ...rest,
     ref: forwardedRef,
     className: tx("splitter.panel", {}, className),
     style: {
-      top: topOffset,
-      height,
-      transition: `top ${transition}ms, height ${transition}ms ease-out`,
+      ...panelStyle(position, mode, anchor, size, minSize, orientation),
+      transition: animate ? `flex-grow ${transition}ms ease-out, flex-basis ${transition}ms ease-out` : void 0,
       ...style
     }
   }, children);
 });
 SplitterPanel.displayName = PANEL_NAME;
+var HANDLE_NAME = "Splitter.Handle";
+var SplitterHandle = slottable(({ asChild, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { orientation, anchor, size, resizable, minSize, rootRef, setSize, setDragging } = useSplitterContext(HANDLE_NAME);
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot18 : Primitive18.div;
+  const extentRem = useCallback18(() => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    if (!rect) {
+      return (size ?? minSize) + minSize;
+    }
+    return (orientation === "horizontal" ? rect.width : rect.height) / getRem();
+  }, [
+    orientation,
+    rootRef,
+    size,
+    minSize
+  ]);
+  const handlePointerDown = useCallback18((event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, [
+    setDragging
+  ]);
+  const handlePointerMove = useCallback18((event) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+      return;
+    }
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const rem = getRem();
+    const offset = (orientation === "horizontal" ? event.clientX - rect.left : event.clientY - rect.top) / rem;
+    const extent = (orientation === "horizontal" ? rect.width : rect.height) / rem;
+    const next = anchor === "end" ? extent - offset : offset;
+    setSize(Math.min(Math.max(next, minSize), Math.max(minSize, extent - minSize)));
+  }, [
+    orientation,
+    anchor,
+    minSize,
+    rootRef,
+    setSize
+  ]);
+  const handlePointerUp = useCallback18((event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    setDragging(false);
+  }, [
+    setDragging
+  ]);
+  const handleKeyDown = useCallback18((event) => {
+    const horizontal = orientation === "horizontal";
+    const step = event.shiftKey ? 4 : 1;
+    const base = size ?? extentRem() / 2;
+    let next;
+    if (event.key === (horizontal ? "ArrowRight" : "ArrowDown")) {
+      next = base + step;
+    } else if (event.key === (horizontal ? "ArrowLeft" : "ArrowUp")) {
+      next = base - step;
+    } else if (event.key === "Home") {
+      next = minSize;
+    } else if (event.key === "End") {
+      next = extentRem() - minSize;
+    }
+    if (next === void 0) {
+      return;
+    }
+    event.preventDefault();
+    setSize(Math.min(Math.max(next, minSize), Math.max(minSize, extentRem() - minSize)));
+  }, [
+    orientation,
+    size,
+    minSize,
+    extentRem,
+    setSize
+  ]);
+  if (!resizable) {
+    return null;
+  }
+  return /* @__PURE__ */ React43.createElement(Comp, {
+    ...rest,
+    ref: forwardedRef,
+    role: "separator",
+    tabIndex: 0,
+    "aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+    "aria-valuemin": Math.round(minSize),
+    "aria-valuenow": size !== void 0 ? Math.round(size) : void 0,
+    className: tx("splitter.handle", {
+      orientation
+    }, className),
+    style: handlePosition(orientation, anchor, size, minSize),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerUp,
+    onKeyDown: handleKeyDown
+  }, children);
+});
+SplitterHandle.displayName = HANDLE_NAME;
 var Splitter = {
   Root: SplitterRoot,
-  Panel: SplitterPanel
+  Panel: SplitterPanel,
+  Handle: SplitterHandle
 };
 
 // src/components/Status/Status.tsx
-import React48, { forwardRef as forwardRef33 } from "react";
-var Status = /* @__PURE__ */ forwardRef33(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+import React44, { forwardRef as forwardRef31 } from "react";
+var Status = /* @__PURE__ */ forwardRef31(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React48.createElement("span", {
+  return /* @__PURE__ */ React44.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", {
@@ -5070,7 +5177,7 @@ var Status = /* @__PURE__ */ forwardRef33(({ classNames, children, progress = 0,
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React48.createElement("span", {
+  }, /* @__PURE__ */ React44.createElement("span", {
     role: "none",
     className: tx("status.bar", {
       indeterminate,
@@ -5085,65 +5192,65 @@ var Status = /* @__PURE__ */ forwardRef33(({ classNames, children, progress = 0,
 });
 
 // src/components/Tag/Tag.tsx
-import { Primitive as Primitive21 } from "@radix-ui/react-primitive";
-import { Slot as Slot21 } from "@radix-ui/react-slot";
-import React49, { forwardRef as forwardRef34 } from "react";
-var Tag = /* @__PURE__ */ forwardRef34(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive19 } from "@radix-ui/react-primitive";
+import { Slot as Slot19 } from "@radix-ui/react-slot";
+import React45, { forwardRef as forwardRef32 } from "react";
+var Tag = /* @__PURE__ */ forwardRef32(({ asChild, hue = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Comp = asChild ? Slot21 : Primitive21.span;
-  return /* @__PURE__ */ React49.createElement(Comp, {
+  const Comp = asChild ? Slot19 : Primitive19.span;
+  return /* @__PURE__ */ React45.createElement(Comp, {
     ...props,
     className: tx("tag.root", {
-      palette
+      hue
     }, classNames),
-    "data-hue": palette,
+    "data-hue": hue,
     ref: forwardedRef
   });
 });
 
 // src/components/Toast/Toast.tsx
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import React50, { forwardRef as forwardRef35 } from "react";
+import React46, { forwardRef as forwardRef33 } from "react";
 import { useTranslation as useTranslation7 } from "react-i18next";
 import { translationKey as translationKey7 } from "#translations";
 var ToastProvider = ToastPrimitive.Provider;
-var ToastViewport = /* @__PURE__ */ forwardRef35(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef33(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Viewport, {
+  return /* @__PURE__ */ React46.createElement(ToastPrimitive.Viewport, {
     ...props,
     className: tx("toast.viewport", {}, classNames),
     ref: forwardedRef
   });
 });
 ToastViewport.displayName = "Toast.Viewport";
-var ToastRoot = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Root, {
+  return /* @__PURE__ */ React46.createElement(ToastPrimitive.Root, {
     ...props,
     className: tx("toast.root", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React50.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React46.createElement(ElevationProvider, {
     elevation: "toast"
-  }, /* @__PURE__ */ React50.createElement(Column.Root, {
+  }, /* @__PURE__ */ React46.createElement(Column.Root, {
     classNames: tx("toast.grid", {})
   }, children)));
 });
 ToastRoot.displayName = "Toast.Root";
-var ToastTitle = /* @__PURE__ */ forwardRef35(({ classNames, children, icon, onClose, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef33(({ classNames, children, icon, onClose, ...props }, forwardedRef) => {
   const { t } = useTranslation7(translationKey7);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React50.createElement(Column.Row, {
+  return /* @__PURE__ */ React46.createElement(Column.Row, {
     classNames: tx("toast.header", {})
-  }, icon && /* @__PURE__ */ React50.createElement(Column.Block, null, /* @__PURE__ */ React50.createElement(Icon, {
+  }, icon && /* @__PURE__ */ React46.createElement(Column.Block, null, /* @__PURE__ */ React46.createElement(Icon, {
     icon,
     size: 5
-  })), /* @__PURE__ */ React50.createElement(ToastPrimitive.Title, {
+  })), /* @__PURE__ */ React46.createElement(ToastPrimitive.Title, {
     ...props,
     className: tx("toast.title", {}, classNames),
     ref: forwardedRef
-  }, children), onClose && /* @__PURE__ */ React50.createElement(Column.Block, {
+  }, children), onClose && /* @__PURE__ */ React46.createElement(Column.Block, {
     end: true
-  }, /* @__PURE__ */ React50.createElement(IconButton, {
+  }, /* @__PURE__ */ React46.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
@@ -5152,22 +5259,22 @@ var ToastTitle = /* @__PURE__ */ forwardRef35(({ classNames, children, icon, onC
   })));
 });
 ToastTitle.displayName = "Toast.Title";
-var ToastDescription = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React50.createElement(ToastPrimitive.Description, {
+  return /* @__PURE__ */ React46.createElement(ToastPrimitive.Description, {
     ...props,
     className: tx("toast.description", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 ToastDescription.displayName = "Toast.Description";
-var ToastActions = /* @__PURE__ */ forwardRef35(({ classNames, children, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef33(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React50.createElement(Column.Center, {
+  return /* @__PURE__ */ React46.createElement(Column.Center, {
     classNames: tx("toast.actions", {}, classNames),
     ref: forwardedRef,
     ...props
-  }, /* @__PURE__ */ React50.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React46.createElement(DensityProvider, {
     density: "sm"
   }, children));
 });
@@ -5186,16 +5293,16 @@ var Toast = {
 };
 
 // src/components/Toolbar/Toolbar.tsx
-import { Primitive as Primitive22 } from "@radix-ui/react-primitive";
-import { Slot as Slot22 } from "@radix-ui/react-slot";
+import { Primitive as Primitive20 } from "@radix-ui/react-primitive";
+import { Slot as Slot20 } from "@radix-ui/react-slot";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React51, { forwardRef as forwardRef36 } from "react";
+import React47, { forwardRef as forwardRef34 } from "react";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import { translationKey as translationKey8 } from "#translations";
 var ToolbarRoot = composable(({ children, density, disabled, layoutManaged, orientation, ...props }, forwardedRef) => {
   const { className, role, ...rest } = composableProps(props);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Root, {
     ...rest,
     ...role !== "none" && {
       role
@@ -5213,56 +5320,56 @@ var ToolbarRoot = composable(({ children, density, disabled, layoutManaged, orie
 ToolbarRoot.displayName = "Toolbar.Root";
 var ToolbarText = slottable(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot22 : Primitive22.div;
+  const Comp = asChild ? Slot20 : Primitive20.div;
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React51.createElement(Comp, {
+  return /* @__PURE__ */ React47.createElement(Comp, {
     ...rest,
     className: tx("toolbar.text", {}, className),
     ref: forwardedRef
   }, children);
 });
 ToolbarText.displayName = "Toolbar.Text";
-var ToolbarButton = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef34((props, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(Button, {
+  }, /* @__PURE__ */ React47.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
 ToolbarButton.displayName = "Toolbar.Button";
-var ToolbarIconButton = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+var ToolbarIconButton = /* @__PURE__ */ forwardRef34((props, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(IconButton, {
+  }, /* @__PURE__ */ React47.createElement(IconButton, {
     ...props,
     ref: forwardedRef
   }));
 });
 ToolbarIconButton.displayName = "Toolbar.IconButton";
-var ToolbarToggle = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Button, {
+var ToolbarToggle = /* @__PURE__ */ forwardRef34((props, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(Toggle, {
+  }, /* @__PURE__ */ React47.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
 ToolbarToggle.displayName = "Toolbar.Toggle";
-var ToolbarLink = /* @__PURE__ */ forwardRef36((props, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef34((props, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(Link, {
+  }, /* @__PURE__ */ React47.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
 ToolbarLink.displayName = "Toolbar.Link";
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef36(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef34(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React47.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
@@ -5270,11 +5377,11 @@ var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef36(({ classNames, children,
   }));
 });
 ToolbarToggleGroup2.displayName = "Toolbar.ToggleGroup";
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef36(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef34(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(Button, {
+  }, /* @__PURE__ */ React47.createElement(Button, {
     variant,
     density,
     elevation,
@@ -5284,11 +5391,11 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef36(({ variant, density, e
   }));
 });
 ToolbarToggleGroupItem.displayName = "Toolbar.ToggleGroupItem";
-var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef36(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React51.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef34(({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React47.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(IconButton, {
+  }, /* @__PURE__ */ React47.createElement(IconButton, {
     variant,
     density,
     elevation,
@@ -5301,22 +5408,22 @@ var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef36(({ variant, densit
   }));
 });
 ToolbarToggleGroupIconItem.displayName = "Toolbar.ToggleGroupIconItem";
-var ToolbarSeparator = /* @__PURE__ */ forwardRef36(({ variant = "gap", ...props }, forwardedRef) => {
-  return variant === "line" ? /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Separator, {
+var ToolbarSeparator = /* @__PURE__ */ forwardRef34(({ variant = "gap", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(Separator4, {
+  }, /* @__PURE__ */ React47.createElement(Separator4, {
     orientation: "vertical",
     ...props,
     ref: forwardedRef
-  })) : /* @__PURE__ */ React51.createElement(ToolbarPrimitive.Separator, {
+  })) : /* @__PURE__ */ React47.createElement(ToolbarPrimitive.Separator, {
     className: "grow",
     ref: forwardedRef
   });
 });
 ToolbarSeparator.displayName = "Toolbar.Separator";
-var ToolbarDragHandle = /* @__PURE__ */ forwardRef36(({ testId = "drag-handle", label }, forwardedRef) => {
+var ToolbarDragHandle = /* @__PURE__ */ forwardRef34(({ testId = "drag-handle", label }, forwardedRef) => {
   const { t } = useTranslation8(translationKey8);
-  return /* @__PURE__ */ React51.createElement(ToolbarIconButton, {
+  return /* @__PURE__ */ React47.createElement(ToolbarIconButton, {
     "data-testid": testId,
     tabIndex: -1,
     noTooltip: true,
@@ -5338,9 +5445,9 @@ var TOOLBAR_ACTION_LABEL_KEYS = {
   close: "toolbar-close.label",
   delete: "toolbar-delete.label"
 };
-var ToolbarActionIconButton = /* @__PURE__ */ forwardRef36(({ action, onClick, label }, forwardedRef) => {
+var ToolbarActionIconButton = /* @__PURE__ */ forwardRef34(({ action, onClick, label }, forwardedRef) => {
   const { t } = useTranslation8(translationKey8);
-  return /* @__PURE__ */ React51.createElement(ToolbarIconButton, {
+  return /* @__PURE__ */ React47.createElement(ToolbarIconButton, {
     iconOnly: true,
     icon: TOOLBAR_ACTION_ICONS[action],
     variant: "ghost",
@@ -5353,18 +5460,18 @@ var ToolbarActionIconButton = /* @__PURE__ */ forwardRef36(({ action, onClick, l
 ToolbarActionIconButton.displayName = "Toolbar.ActionIconButton";
 function ToolbarMenu({ context, items }) {
   const { t } = useTranslation8(translationKey8);
-  return /* @__PURE__ */ React51.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Trigger, {
+  return /* @__PURE__ */ React47.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React47.createElement(DropdownMenu.Trigger, {
     disabled: !items?.length,
     asChild: true
-  }, /* @__PURE__ */ React51.createElement(ToolbarIconButton, {
+  }, /* @__PURE__ */ React47.createElement(ToolbarIconButton, {
     iconOnly: true,
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     label: t("toolbar-menu.label")
-  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React51.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React51.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React51.createElement(DropdownMenu.Item, {
+  })), (items?.length ?? 0) > 0 && /* @__PURE__ */ React47.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React47.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React47.createElement(DropdownMenu.Viewport, null, items?.map(({ label, onClick: onSelect }, index) => /* @__PURE__ */ React47.createElement(DropdownMenu.Item, {
     key: index,
     onSelect: () => onSelect(context)
-  }, label))), /* @__PURE__ */ React51.createElement(DropdownMenu.Arrow, null))));
+  }, label))), /* @__PURE__ */ React47.createElement(DropdownMenu.Arrow, null))));
 }
 ToolbarMenu.displayName = "Toolbar.Menu";
 var Toolbar = {
@@ -5415,14 +5522,11 @@ export {
   IconButton,
   Image,
   Input,
-  LIST_ITEM_NAME,
-  LIST_NAME,
   Link,
-  List,
-  ListItem,
   Main,
   MediaPlayer,
   Message,
+  MicButton,
   Panel,
   Popover,
   ScrollArea,
@@ -5436,8 +5540,6 @@ export {
   Splitter,
   Status,
   SystemIconButton,
-  TREEGRID_PARENT_OF_SEPARATOR,
-  TREEGRID_PATH_SEPARATOR,
   Tag,
   TextTooltip,
   ThemeContext,
@@ -5453,9 +5555,6 @@ export {
   Tooltip,
   Trans,
   TranslationsContext,
-  Tree,
-  TreeItem,
-  Treegrid,
   avatarTheme,
   bindTheme,
   breadcrumbTheme,
@@ -5466,7 +5565,6 @@ export {
   composableProps,
   createDropdownMenuScope,
   createPopoverScope,
-  createSplitterScope,
   createTooltipScope,
   defaultTheme,
   defaultTx,
@@ -5477,12 +5575,10 @@ export {
   iconButtonTheme,
   iconTheme,
   initialSafeArea,
-  inputTextLabel,
   inputTheme,
   isEmbedUrl,
   isLabel,
   linkTheme,
-  listTheme,
   mainIntrinsicSize,
   mainPaddingTransitions,
   mainTheme,
@@ -5507,7 +5603,6 @@ export {
   toolbarTheme,
   tooltipContent,
   tooltipTheme,
-  treegridTheme,
   useAvatarContext,
   useButtonGroupContext,
   useCarousel,
@@ -5521,8 +5616,6 @@ export {
   useIconHref,
   useInputTrigger,
   useLandmarkMover,
-  useListContext,
-  useListItemContext,
   useMainContext,
   usePx,
   useSafeArea,