@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/browser/{chunk-7JFD5ZHZ.mjs → chunk-GTHV4WYK.mjs}

@@ -27,27 +27,11 @@ var hasIosKeyboard = () => {
 
 // src/primitives/ThemeProvider/TranslationsProvider.tsx
 import { enUS as dtLocaleEnUs } from "date-fns/locale";
-import i18Next from "i18next";
 import React3, { Suspense, createContext as createContext3, useContext, useEffect, useState } from "react";
-import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
-var initialLng = "en-US";
+import { I18nextProvider, useTranslation as useI18NextTranslation } from "react-i18next";
+import { addResources, i18n } from "@dxos/i18n";
 var initialNs = "dxos-common";
 var initialDtLocale = dtLocaleEnUs;
-var resources = {
-  [initialLng]: {
-    [initialNs]: {
-      "loading translations": "Loading translations\u2026"
-    }
-  }
-};
-void i18Next.use(initReactI18next).init({
-  resources,
-  lng: initialLng,
-  defaultNS: initialNs,
-  interpolation: {
-    escapeValue: false
-  }
-});
 var TranslationsContext = /* @__PURE__ */ createContext3({
   appNs: initialNs,
   dtLocale: initialDtLocale
@@ -65,26 +49,22 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
   useEffect(() => {
     setLoaded(false);
     if (resourceExtensions && resourceExtensions.length) {
-      resourceExtensions.forEach((resource) => {
-        Object.keys(resource).forEach((language) => {
-          Object.keys(resource[language]).forEach((ns) => {
-            i18Next.addResourceBundle(language, ns, resource[language][ns]);
-          });
-        });
-      });
+      addResources(resourceExtensions);
     }
     setLoaded(true);
   }, [
     resourceExtensions
   ]);
-  return /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
+  return /* @__PURE__ */ React3.createElement(I18nextProvider, {
+    i18n
+  }, /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
     value: {
       appNs: appNs ?? initialNs,
       dtLocale: dtLocale ?? initialDtLocale
     }
   }, /* @__PURE__ */ React3.createElement(Suspense, {
     fallback
-  }, loaded ? children : fallback));
+  }, loaded ? children : fallback)));
 };
 
 // src/primitives/ThemeProvider/ThemeProvider.tsx
@@ -845,9 +825,6 @@ var parseLocalFrame = (fileUrl, line, col) => {
   }
 };
 
-// src/components/Input/constants.ts
-var inputTextLabel = "py-1 text-sm text-description";
-
 // src/components/Main/constants.ts
 var mainPaddingTransitions = "dx-main-content-padding-transitions";
 var mainIntrinsicSize = "dx-main-intrinsic-size";
@@ -862,7 +839,7 @@ var bindTheme = (theme) => {
 };
 
 // src/components/Avatars/Avatar.theme.ts
-import { mx as mx3, getSize, getHeight } from "@dxos/ui-theme";
+import { getHeight, getSize, mx as mx3 } from "@dxos/ui-theme";
 var root = ({ size = 10, inGroup }, ...etc) => mx3("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
 var label = ({ srOnly }, ...etc) => mx3(srOnly && "sr-only", ...etc);
 var description = ({ srOnly }, ...etc) => mx3("text-description", srOnly && "sr-only", ...etc);
@@ -925,19 +902,24 @@ var iconButtonTheme = {
 
 // src/components/Card/Card.theme.ts
 import { mx as mx7 } from "@dxos/ui-theme";
-var root5 = ({ border, fullWidth }, ...etc) => mx7("dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", "bg-card-surface", border && "border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var header = (_, ...etc) => mx7("dx-card__header dx-density-md bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! shadow-none [contain:none]", ...etc);
+var root5 = ({ border, fullWidth }, ...etc) => mx7("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
+var header = (_, ...etc) => mx7("dx-card__header col-span-3 grid grid-cols-subgrid items-center", "[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2", ...etc);
 var title = (_props, ...etc) => mx7("dx-card__title grow truncate", ...etc);
-var body = (_props, ...etc) => mx7("dx-card__body contents pb-1 last:pb-0", ...etc);
+var body = (_props, ...etc) => mx7("dx-card__body contents", ...etc);
+var block = (_props, ...etc) => mx7("dx-card__block", ...etc);
 var text = ({ variant = "default", truncate: _truncate }, ...etc) => mx7("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
 var textSpan = ({ variant = "default", truncate }, ...etc) => mx7(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
-var poster = (_props, ...etc) => mx7("dx-card__poster col-span-3 max-h-[200px]", ...etc);
+var poster = (_props, ...etc) => mx7("dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none", ...etc);
 var posterIcon = (_props, ...etc) => mx7("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
-var action = (_props, ...etc) => mx7("dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden", ...etc);
+var action = (_props, ...etc) => mx7("dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden", ...etc);
 var actionLabel = (_props, ...etc) => mx7("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
-var link = (_props, ...etc) => mx7("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
-var linkLabel = (_props, ...etc) => mx7("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
-var row = ({ fullWidth }, ...etc) => mx7("dx-card__row", fullWidth ? "col-span-full" : "col-span-3 grid grid-cols-subgrid", ...etc);
+var link = (_props, ...etc) => mx7("dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
+var linkLabel = (_props, ...etc) => mx7("dx-card__link-label min-w-0 flex-1 truncate text-sm!", ...etc);
+var row = ({ fullWidth }, ...etc) => mx7("dx-card__row overflow-hidden", fullWidth ? "col-span-full" : (
+  // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
+  // block children, whose inner nodes are not grid items of this row.
+  "col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2"
+), ...etc);
 var section = (_props, ...etc) => mx7("dx-card__section col-span-full grid grid-cols-subgrid", ...etc);
 var sectionTitle = (_props, ...etc) => mx7("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
 var cardTheme = {
@@ -945,6 +927,7 @@ var cardTheme = {
   header,
   title,
   body,
+  block,
   row,
   section,
   "section-title": sectionTitle,
@@ -964,8 +947,9 @@ var root6 = (_, ...etc) => {
   return mx8("dx-column-root grid", ...etc);
 };
 var row2 = (_, ...etc) => {
-  return mx8("col-span-3 grid grid-cols-subgrid", ...etc);
+  return mx8("col-span-3 grid grid-cols-subgrid", "[&>*:not(.dx-gutter)]:col-start-2", ...etc);
 };
+var block2 = ({ end, compact, square }, ...etc) => mx8("dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]", end ? "col-start-3" : "col-start-1", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
 var bleed = (_, ...etc) => {
   return mx8("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
 };
@@ -975,6 +959,7 @@ var center = (_, ...etc) => {
 var columnTheme = {
   root: root6,
   row: row2,
+  block: block2,
   bleed,
   center
 };
@@ -992,7 +977,7 @@ var content = ({ inOverlayLayout, size = "md" }, ...etc) => {
   return mx9("@container", "dx-dialog__content dx-focus-ring dx-modal-surface py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
 };
 var header2 = (_props, ...etc) => mx9("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
-var body2 = (_props, ...etc) => mx9("dx-dialog__body dx-expander", withColumn.propagate(), ...etc);
+var body2 = (_props, ...etc) => mx9("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
 var actionBar = (_props, ...etc) => mx9("dx-dialog__actionbar flex items-center pt-4 gap-2", withColumn.center(), ...etc);
 var title2 = ({ srOnly }, ...etc) => mx9("dx-dialog__title", srOnly && "sr-only", ...etc);
 var description2 = ({ srOnly }, ...etc) => mx9("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
@@ -1019,19 +1004,17 @@ import { getSize as getSize2, mx as mx11 } from "@dxos/ui-theme";
 var root7 = ({ size }, etc) => {
   return mx11("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize2(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
 };
-var block = ({ compact, square }, ...etc) => mx11("grid place-items-center [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
+var block3 = ({ compact, square }, ...etc) => mx11("grid place-items-center shrink-0 [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
 var iconTheme = {
   root: root7,
-  block
+  block: block3
 };
 
 // src/components/Input/Input.theme.ts
 import { densityDimensions, staticDisabled } from "@dxos/ui-theme";
-import { getSize as getSize3, getHeight as getHeight2, getWidth, mx as mx12, snapSize, sizeValue, textValence } from "@dxos/ui-theme";
-var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator";
+import { getSize as getSize3, mx as mx12, sizeValue, snapSize, textValence } from "@dxos/ui-theme";
+var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-input-separator focus:border-separator";
 var textInputSurfaceHover = "hover:bg-focus-surface";
-var booleanInputSurface = "shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-bg aria-[checked=mixed]:bg-accent-bg";
-var booleanInputSurfaceHover = "hover:bg-un-accent-hover hover:aria-checked:bg-accent-bg-hover hover:aria-[checked=mixed]:bg-accent-bg-hover";
 var valence = (valence2) => {
   switch (valence2) {
     case "success":
@@ -1070,37 +1053,28 @@ var sharedStaticInputStyles = (props) => [
 ];
 var input = (props, ...etc) => props.variant === "subdued" ? mx12(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx12(...sharedStaticInputStyles(props), ...etc) : mx12(...sharedDefaultInputStyles(props), !props.disabled && "dx-focus-ring", valence(props.validationValence), ...etc);
 var textArea = (props, ...etc) => input(props, ...etc);
-var checkbox = ({ size = 5 }, ...etc) => mx12("dx-checkbox dx-focus-ring", getSize3(size), ...etc);
-var checkboxIndicator = ({ size = 5, checked }, ...etc) => mx12(getSize3(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
-var switchRoot = ({ size = 5, disabled }, ...etc) => mx12(
-  getHeight2(size),
-  getWidth(snapSize(sizeValue(size) * 1.75, 9)),
-  booleanInputSurface,
-  !disabled && booleanInputSurfaceHover,
-  // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
-  "cursor-pointer shrink-0 rounded-full px-1 mx-1 relative",
-  "dx-focus-ring",
-  ...etc
-);
-var switchThumb = ({ size = 5 }, ...etc) => mx12(getSize3(size === "px" ? "px" : size - 2), "block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]", ...etc);
-var withSegmentsInput = (props, ...etc) => mx12("font-mono selection:bg-transparent mx-auto", props.density === "lg" ? "text-lg" : props.density === "sm" ? "text-sm" : props.density === "xs" ? "text-xs" : "text-base pointer-fine:text-sm", props.disabled && "cursor-not-allowed", ...etc);
-var segment = (props, ...etc) => mx12("flex items-center justify-center font-mono", props.density === "lg" ? "size-12 rounded-xs" : props.density === "sm" ? "size-7 rounded-xs" : props.density === "xs" ? "size-6 rounded-xs" : "size-10 pointer-fine:size-8 rounded-xs", "bg-input-surface text-base-fg transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", valence(props.validationValence), props.disabled && staticDisabled, ...etc);
-var label2 = (props, ...etc) => mx12("block", inputTextLabel, props.srOnly && "sr-only", ...etc);
+var checkbox = ({ size = 4 }, ...etc) => mx12("dx-checkbox dx-focus-ring", getSize3(size), ...etc);
+var checkboxIndicator = ({ size = 4, checked }, ...etc) => mx12(getSize3(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
+var switch_ = (_props, ...etc) => mx12("dx-checkbox--switch dx-focus-ring", ...etc);
+var pin = (props, ...etc) => mx12("font-mono selection:bg-transparent mx-auto", props.density === "lg" ? "text-lg" : props.density === "sm" ? "text-sm" : props.density === "xs" ? "text-xs" : "text-base pointer-fine:text-sm", props.disabled && "cursor-not-allowed", ...etc);
+var segment = (props, ...etc) => mx12("flex items-center justify-center tabular-nums", props.density === "lg" ? "size-12 rounded-xs" : props.density === "sm" ? "size-7 rounded-xs" : props.density === "xs" ? "size-6 rounded-xs" : "size-10 pointer-fine:size-8 rounded-xs", "bg-input-surface text-base-fg transition-colors border border-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", valence(props.validationValence), props.disabled && staticDisabled, ...etc);
+var label2 = (props, ...etc) => mx12("block text-sm text-description", props.srOnly && "sr-only", ...etc);
 var description3 = (props, ...etc) => mx12("text-description", props.srOnly && "sr-only", ...etc);
 var descriptionAndValidation = (props, ...etc) => mx12("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
-var validation = (props, ...etc) => mx12(inputTextLabel, props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
+var validation = (props, ...etc) => mx12("text-sm text-description", props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
 var triggerIcon = (_p, ...etc) => mx12("shrink-0 inline-flex items-center justify-center size-7 rounded-xs", "bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface", "dx-focus-ring", ...etc);
+var block4 = (props, ...etc) => mx12("grid place-items-center w-[var(--dx-rail-item)] h-[var(--dx-rail-item)]", ...etc);
 var inputTheme = {
   input,
   textArea,
-  inputWithSegments: withSegmentsInput,
+  pin,
   segment,
-  checkbox,
-  checkboxIndicator,
   label: label2,
   description: description3,
-  switch: switchRoot,
-  switchThumb,
+  checkbox,
+  checkboxIndicator,
+  switch: switch_,
+  block: block4,
   validation,
   descriptionAndValidation,
   triggerIcon
@@ -1113,81 +1087,12 @@ var linkTheme = {
   root: root8
 };
 
-// src/components/List/List.theme.ts
-import { densityBlockSize, ghostHover } from "@dxos/ui-theme";
-import { getSize as getSize4, mx as mx14 } from "@dxos/ui-theme";
-var root9 = (_, ...etc) => mx14(...etc);
-var item = ({ collapsible }, ...etc) => mx14(!collapsible && "flex", ...etc);
-var itemEndcap = ({ density }, ...etc) => mx14(density === "lg" ? getSize4(10) : density === "sm" ? getSize4(7) : density === "xs" ? getSize4(6) : getSize4(8), "shrink-0 flex items-center justify-center", ...etc);
-var itemHeading = ({ density }, ...etc) => mx14(densityBlockSize(density), "flex items-center overflow-hidden [&>span]:truncate", ...etc);
-var itemDragHandleIcon = (_props, ...etc) => mx14(getSize4(5), "mt-2.5", ...etc);
-var itemOpenTrigger = ({ density }, ...etc) => mx14("w-5 rounded-sm flex justify-center items-center", densityBlockSize(density), ghostHover, "dx-focus-ring", ...etc);
-var itemOpenTriggerIcon = (_props, ...etc) => {
-  return mx14(getSize4(5), ...etc);
-};
-var listTheme = {
-  root: root9,
-  item: {
-    root: item,
-    endcap: itemEndcap,
-    heading: itemHeading,
-    dragHandleIcon: itemDragHandleIcon,
-    openTrigger: itemOpenTrigger,
-    openTriggerIcon: itemOpenTriggerIcon
-  }
-};
-
-// src/components/List/Treegrid.theme.ts
-import { mx as mx15 } from "@dxos/ui-theme";
-var levelStyles = /* @__PURE__ */ new Map([
-  [
-    1,
-    "[&>.indent:first-of-type]:pl-0 font-medium"
-  ],
-  [
-    2,
-    "[&>.indent:first-of-type]:pl-0"
-  ],
-  [
-    3,
-    "[&>.indent:first-of-type]:pl-1"
-  ],
-  [
-    4,
-    "[&>.indent:first-of-type]:pl-2"
-  ],
-  [
-    5,
-    "[&>.indent:first-of-type]:pl-3"
-  ],
-  [
-    6,
-    "[&>.indent:first-of-type]:pl-4"
-  ],
-  [
-    7,
-    "[&>.indent:first-of-type]:pl-5"
-  ],
-  [
-    8,
-    "[&>.indent:first-of-type]:pl-6"
-  ]
-]);
-var root10 = (_, ...etc) => mx15("grid", ...etc);
-var row3 = ({ level = 1 }, ...etc) => mx15(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
-var cell = ({ indent }, ...etc) => mx15(indent && "indent", ...etc);
-var treegridTheme = {
-  root: root10,
-  row: row3,
-  cell
-};
-
 // src/components/Main/Main.theme.ts
-import { mx as mx16 } from "@dxos/ui-theme";
+import { mx as mx14 } from "@dxos/ui-theme";
 var padding = "dx-main-content-padding";
-var content2 = ({ bounce }, ...etc) => mx16(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
-var sidebar = (_, ...etc) => mx16("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
-var overlay2 = (_, ...etc) => mx16("dx-main-overlay", ...etc);
+var content2 = ({ bounce }, ...etc) => mx14(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
+var sidebar = (_, ...etc) => mx14("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
+var overlay2 = (_, ...etc) => mx14("dx-main-overlay", ...etc);
 var mainTheme = {
   content: content2,
   sidebar,
@@ -1196,89 +1101,81 @@ var mainTheme = {
 
 // src/components/Menu/Menu.theme.ts
 import { dataDisabled } from "@dxos/ui-theme";
-import { mx as mx17, surfaceShadow as surfaceShadow2, surfaceZIndex as surfaceZIndex2 } from "@dxos/ui-theme";
-var content3 = ({ elevation }, ...etc) => mx17("dx-popover-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex2({
+import { mx as mx15, surfaceShadow as surfaceShadow2, surfaceZIndex as surfaceZIndex2 } from "@dxos/ui-theme";
+var content3 = ({ elevation }, ...etc) => mx15("dx-popover-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex2({
   elevation,
   level: "menu"
 }), surfaceShadow2({
   elevation: "positioned"
 }), ...etc);
-var viewport = (_props, ...etc) => mx17("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
-var item2 = (_props, ...etc) => mx17("flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
-var separator2 = (_props, ...etc) => mx17("my-1 mx-2 h-px bg-separator", ...etc);
-var groupLabel2 = (_props, ...etc) => mx17("text-description", "select-none px-2 py-2", ...etc);
-var arrow = (_props, ...etc) => mx17("fill-separator", ...etc);
+var viewport = (_props, ...etc) => mx15("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
+var item = (_props, ...etc) => mx15("flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
+var separator2 = (_props, ...etc) => mx15("my-1 mx-2 h-px bg-separator", ...etc);
+var groupLabel2 = (_props, ...etc) => mx15("text-description", "select-none px-2 py-2", ...etc);
+var arrow = (_props, ...etc) => mx15("fill-separator", ...etc);
 var menuTheme = {
   content: content3,
   viewport,
-  item: item2,
+  item,
   separator: separator2,
   groupLabel: groupLabel2,
   arrow
 };
 
 // src/components/Message/Message.theme.ts
-import { mx as mx18, messageValence } from "@dxos/ui-theme";
-var root11 = ({ valence: valence2 }, etc) => {
-  return mx18("p-1 rounded-sm", messageValence(valence2), etc);
+import { messageValence, mx as mx16 } from "@dxos/ui-theme";
+var root9 = ({ valence: valence2 }, etc) => {
+  return mx16("p-1 rounded-sm", messageValence(valence2), etc);
 };
 var header3 = (_, etc) => {
-  return mx18("items-center", etc);
+  return mx16("items-center", etc);
 };
 var title3 = (_, etc) => {
-  return mx18("col-start-2 overflow-hidden truncate", etc);
-};
-var icon = (_, etc) => {
-  return mx18("col-start-1 grid place-items-center", etc);
-};
-var close = (_, etc) => {
-  return mx18("col-start-3", etc);
+  return mx16("col-start-2 overflow-hidden truncate", etc);
 };
 var content4 = (_, etc) => {
-  return mx18("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
+  return mx16("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
 };
 var messageTheme = {
-  root: root11,
+  root: root9,
   header: header3,
-  icon,
   title: title3,
-  close,
   content: content4
 };
 
 // src/components/Panel/Panel.theme.ts
-import { mx as mx19 } from "@dxos/ui-theme";
+import { mx as mx17 } from "@dxos/ui-theme";
 var sizes = {
   lg: "h-(--dx-topbar-size)",
   md: "h-(--dx-toolbar-size)",
   sm: "h-(--dx-statusbar-size)"
 };
-var root12 = (_, ...etc) => mx19(
+var root10 = (_, ...etc) => mx17(
   "dx-container grid grid-cols-[100%] overflow-hidden",
   // Add uncategorized children to content slot.
   "[&>*:not([data-slot])]:[grid-area:content]",
   ...etc
 );
-var toolbar = ({ size = "md" }, ...etc) => mx19("[grid-area:toolbar]", "shrink-0", sizes[size], ...etc);
-var content5 = (_, ...etc) => mx19("[grid-area:content] min-h-0", ...etc);
-var statusbar = ({ size = "md" }, ...etc) => mx19("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
+var toolbar = ({ size = "md" }, ...etc) => mx17("[grid-area:toolbar]", "shrink-0", "bg-toolbar-surface", sizes[size], ...etc);
+var content5 = (_, ...etc) => mx17("[grid-area:content] min-h-0", ...etc);
+var statusbar = ({ size = "md" }, ...etc) => mx17("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
 var panelTheme = {
-  root: root12,
+  root: root10,
   toolbar,
   content: content5,
   statusbar
 };
 
 // src/components/Popover/Popover.theme.ts
-import { mx as mx20, surfaceShadow as surfaceShadow3, surfaceZIndex as surfaceZIndex3 } from "@dxos/ui-theme";
-var content6 = ({ elevation }, ...etc) => mx20("dx-popover-surface border border-separator rounded-sm", surfaceShadow3({
+import { mx as mx18, surfaceShadow as surfaceShadow3, surfaceZIndex as surfaceZIndex3 } from "@dxos/ui-theme";
+var content6 = ({ elevation }, ...etc) => mx18("dx-popover-surface overflow-hidden border border-separator rounded-sm", surfaceShadow3({
   elevation: "positioned"
 }), surfaceZIndex3({
   elevation,
   level: "menu"
 }), "dx-focus-ring", ...etc);
-var viewport2 = ({ constrainBlock, constrainInline }, ...etc) => mx20("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
-var arrow2 = (_props, ...etc) => mx20("fill-separator", ...etc);
+var viewport2 = ({ constrainBlock, constrainInline }, ...etc) => mx18("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
+var arrow2 = (_props, ...etc) => mx18("fill-separator", ...etc);
 var popoverTheme = {
   content: content6,
   viewport: viewport2,
@@ -1286,8 +1183,8 @@ var popoverTheme = {
 };
 
 // src/components/ScrollArea/ScrollArea.theme.ts
-import { mx as mx21 } from "@dxos/ui-theme";
-var root13 = ({ orientation }, ...etc) => mx21(
+import { mx as mx19 } from "@dxos/ui-theme";
+var root11 = ({ orientation }, ...etc) => mx19(
   // Expand
   "dx-container",
   orientation === "vertical" && "group/scroll-v flex flex-col",
@@ -1301,7 +1198,7 @@ var root13 = ({ orientation }, ...etc) => mx21(
   ...etc
 );
 var viewport3 = ({ orientation, centered, padding: padding2, snap, autoHide }, ...etc) => {
-  return mx21(
+  return mx19(
     "flex-1 min-h-0 w-full",
     // Reset --dx-col so nested components don't try to grid-position themselves.
     // ScrollArea has already consumed --gutter for padding.
@@ -1341,32 +1238,32 @@ var viewport3 = ({ orientation, centered, padding: padding2, snap, autoHide }, .
   );
 };
 var scrollAreaTheme = {
-  root: root13,
+  root: root11,
   viewport: viewport3
 };
 
 // src/components/Select/Select.theme.ts
-import { mx as mx22, surfaceShadow as surfaceShadow4, surfaceZIndex as surfaceZIndex4 } from "@dxos/ui-theme";
+import { mx as mx20, surfaceShadow as surfaceShadow4, surfaceZIndex as surfaceZIndex4 } from "@dxos/ui-theme";
 var content7 = ({ elevation }, ...etc) => {
-  return mx22("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow4({
+  return mx20("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow4({
     elevation: "positioned"
   }), surfaceZIndex4({
     elevation,
     level: "menu"
   }), ...etc);
 };
-var triggerButton = (_props, ...etc) => mx22("grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
-var viewport4 = (_props, ...etc) => mx22(...etc);
-var item3 = (_props, ...etc) => mx22("flex items-center min-h-[2rem] px-2.5 py-1 gap-2", "text-base-fg leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
-var itemIndicator = (_props, ...etc) => mx22("items-center", ...etc);
-var arrow3 = (_props, ...etc) => mx22("fill-separator", ...etc);
-var separator3 = (_props, ...etc) => mx22("self-stretch border-b my-1 border-separator", ...etc);
-var scrollButton = (_props, ...etc) => mx22("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
+var triggerButton = (_props, ...etc) => mx20("bg-input-surface grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
+var viewport4 = (_props, ...etc) => mx20(...etc);
+var item2 = (_props, ...etc) => mx20("flex items-center min-h-[2rem] px-2.5 py-1 gap-2", "text-base-fg leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
+var itemIndicator = (_props, ...etc) => mx20("items-center", ...etc);
+var arrow3 = (_props, ...etc) => mx20("fill-separator", ...etc);
+var separator3 = (_props, ...etc) => mx20("self-stretch border-b my-1 border-separator", ...etc);
+var scrollButton = (_props, ...etc) => mx20("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
 var selectTheme = {
   content: content7,
   triggerButton,
   viewport: viewport4,
-  item: item3,
+  item: item2,
   itemIndicator,
   arrow: arrow3,
   separator: separator3,
@@ -1374,111 +1271,106 @@ var selectTheme = {
 };
 
 // src/components/Separator/Separator.theme.ts
-import { mx as mx23 } from "@dxos/ui-theme";
-var root14 = ({ orientation, subdued }, ...etc) => mx23("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
+import { mx as mx21 } from "@dxos/ui-theme";
+var root12 = ({ orientation, subdued }, ...etc) => mx21("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
 var separatorTheme = {
-  root: root14
+  root: root12
 };
 
 // src/components/Skeleton/Skeleton.theme.ts
-import { mx as mx24 } from "@dxos/ui-theme";
-var root15 = ({ variant = "default" }, ...etc) => mx24("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
+import { mx as mx22 } from "@dxos/ui-theme";
+var root13 = ({ variant = "default" }, ...etc) => mx22("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
 var skeletonTheme = {
-  root: root15
+  root: root13
 };
 
 // src/components/Splitter/Splitter.theme.ts
-import { mx as mx25 } from "@dxos/ui-theme";
-var root16 = (_props, ...etc) => mx25("relative h-full overflow-hidden", ...etc);
-var panel = (_props, ...etc) => mx25("absolute inset-x-0 flex flex-col overflow-hidden", ...etc);
+import { mx as mx23 } from "@dxos/ui-theme";
+var root14 = ({ orientation }, ...etc) => mx23("relative flex w-full h-full overflow-hidden", orientation === "vertical" ? "flex-col" : "flex-row", ...etc);
+var panel = (_props, ...etc) => mx23("relative grid overflow-hidden min-w-0 min-h-0", ...etc);
+var handle = ({ orientation }, ...etc) => mx23("group absolute z-10 touch-none select-none", "before:absolute before:block before:bg-separator", "before:transition-colors before:duration-100 before:ease-in-out hover:before:bg-focus-ring-subtle focus-visible:before:bg-focus-ring-subtle active:before:bg-focus-ring-subtle", orientation === "vertical" ? "h-[7px] cursor-row-resize before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-px" : "w-[7px] cursor-col-resize before:inset-y-0 before:left-1/2 before:-translate-x-1/2 before:w-px", ...etc);
 var splitterTheme = {
-  root: root16,
-  panel
+  root: root14,
+  panel,
+  handle
 };
 
 // src/components/Status/Status.theme.ts
-import { mx as mx26 } from "@dxos/ui-theme";
-var root17 = ({ variant = "default" }, ...etc) => mx26("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block bg-base-surface", ...etc);
-var bar = ({ variant = "default", indeterminate }, ...etc) => mx26("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
+import { mx as mx24 } from "@dxos/ui-theme";
+var root15 = ({ variant = "default" }, ...etc) => mx24("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block bg-base-surface", ...etc);
+var bar = ({ variant = "default", indeterminate }, ...etc) => mx24("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
 var statusTheme = {
-  root: root17,
+  root: root15,
   bar
 };
 
 // src/components/Tag/Tag.theme.ts
-import { mx as mx27 } from "@dxos/ui-theme";
-var root18 = (_, ...etc) => mx27("dx-tag", ...etc);
+import { mx as mx25 } from "@dxos/ui-theme";
+var root16 = (_, ...etc) => mx25("dx-tag", ...etc);
 var tagTheme = {
-  root: root18
+  root: root16
 };
 
 // src/components/Toast/Toast.theme.ts
-import { mx as mx28, surfaceShadow as surfaceShadow5 } from "@dxos/ui-theme";
-var viewport5 = (_props, ...etc) => mx28(
-  // TODO(burdon): block-end should take into account status bar.
-  "z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm",
-  "rounded-md flex flex-col gap-2",
-  ...etc
-);
-var root19 = (_props, ...etc) => mx28("dx-popover-surface rounded-md p-1", surfaceShadow5({
+import { mx as mx26, surfaceShadow as surfaceShadow5 } from "@dxos/ui-theme";
+var viewport5 = (_props, ...etc) => mx26("z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)]", "inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)]", "w-auto md:end-[calc(env(safe-area-inset-right)+4rem)] md:left-auto md:w-full md:max-w-sm", "rounded-md flex flex-col gap-2", ...etc);
+var root17 = (_props, ...etc) => mx26("dx-popover-surface rounded-md p-1", surfaceShadow5({
   elevation: "toast"
 }), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
-var grid = (_props, ...etc) => mx28("gap-y-1 pbe-1", ...etc);
-var header4 = (_props, ...etc) => mx28("items-center", ...etc);
-var icon2 = (_props, ...etc) => mx28("col-start-1 grid place-items-center", ...etc);
-var title4 = (_props, ...etc) => mx28("col-start-2 truncate font-medium", ...etc);
-var close2 = (_props, ...etc) => mx28("col-start-3", ...etc);
-var description4 = (_props, ...etc) => mx28("col-start-2 overflow-hidden text-description", ...etc);
-var actions = (_props, ...etc) => mx28("flex gap-2 mbs-1", ...etc);
+var grid = (_props, ...etc) => mx26("gap-y-1 pbe-1", ...etc);
+var header4 = (_props, ...etc) => mx26("items-center", ...etc);
+var title4 = (_props, ...etc) => mx26("col-start-2 truncate font-medium", ...etc);
+var description4 = (_props, ...etc) => mx26("col-start-2 overflow-hidden text-description", ...etc);
+var actions = (_props, ...etc) => mx26("flex gap-2 mbs-1", ...etc);
 var toastTheme = {
   viewport: viewport5,
-  root: root19,
+  root: root17,
   grid,
   header: header4,
-  icon: icon2,
   title: title4,
-  close: close2,
   description: description4,
   actions
 };
 
 // src/components/Toolbar/Toolbar.theme.ts
-import { mx as mx29 } from "@dxos/ui-theme";
+import { mx as mx27 } from "@dxos/ui-theme";
 var layout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
-var root20 = ({ density, disabled, layoutManaged }, ...etc) => {
-  return mx29("bg-toolbar-surface dx-toolbar shadow-sm", density === "lg" && "h-(--dx-rail-size) px-3!", density === "sm" && "h-7 px-2!", density === "xs" && "h-6 px-1!", disabled && "*:opacity-20", !layoutManaged && layout, ...etc);
+var root18 = ({ density, disabled, layoutManaged }, ...etc) => {
+  return mx27("bg-toolbar-surface dx-toolbar shadow-sm", density === "lg" && "h-(--dx-rail-size) px-3!", density === "sm" && "h-7 px-2!", density === "xs" && "h-6 px-1!", disabled && "*:opacity-20", !layoutManaged && layout, ...etc);
 };
 var text2 = (_, ...etc) => {
-  return mx29("px-2 grow truncate items-center", ...etc);
+  return mx27("px-2 grow truncate items-center", ...etc);
 };
 var toolbarTheme = {
-  root: root20,
+  root: root18,
   text: text2
 };
 
 // src/components/Tooltip/Tooltip.theme.ts
-import { mx as mx30 } from "@dxos/ui-theme";
-var arrow4 = (_props, ...etc) => mx30("fill-inverse-surface", ...etc);
+import { mx as mx28 } from "@dxos/ui-theme";
+var arrow4 = (_props, ...etc) => mx28("fill-inverse-surface", ...etc);
 var tooltipTheme = {
   content: tooltipContent,
   arrow: arrow4
 };
 
 // src/components/Calendar/Calendar.theme.ts
-import { mx as mx31 } from "@dxos/ui-theme";
-var root21 = (_p, ...etc) => mx31("relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg", ...etc);
-var nav = (_p, ...etc) => mx31("flex items-center justify-between pb-1", ...etc);
-var caption_label = (_p, ...etc) => mx31("flex-1 text-center text-sm font-medium", ...etc);
-var button_previous = (_p, ...etc) => mx31("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
-var button_next = (_p, ...etc) => mx31("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
-var month_grid = (_p, ...etc) => mx31("w-full border-collapse", ...etc);
-var weekdays = (_p, ...etc) => mx31("", ...etc);
-var weekday = (_p, ...etc) => mx31("w-9 h-7 text-xs font-thin text-description", ...etc);
-var day = (_p, ...etc) => mx31(
+import { mx as mx29 } from "@dxos/ui-theme";
+var root19 = (_p, ...etc) => mx29("relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg", ...etc);
+var nav = (_p, ...etc) => mx29("flex items-center justify-between pb-1", ...etc);
+var caption_label = (_p, ...etc) => mx29("flex-1 text-center text-sm font-medium", ...etc);
+var button_previous = (_p, ...etc) => mx29("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
+var button_next = (_p, ...etc) => mx29("h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
+var month_grid = (_p, ...etc) => mx29("w-full border-collapse", ...etc);
+var weekdays = (_p, ...etc) => mx29("", ...etc);
+var weekday = (_p, ...etc) => mx29("w-9 h-7 text-xs font-thin text-description", ...etc);
+var day = (_p, ...etc) => mx29(
   "relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer",
   "outline-none",
   "data-[hovered]:bg-hover-surface",
   "data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500",
+  // Highlight today (overridden by the selected style below when today is also the selected day).
+  "data-[today]:text-orange-500 data-[today]:font-medium",
   "data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500",
   "data-[outside-month]:text-description/40",
   "data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent",
@@ -1489,7 +1381,7 @@ var day = (_p, ...etc) => mx31(
   ...etc
 );
 var calendarTheme = {
-  root: root21,
+  root: root19,
   nav,
   caption_label,
   button_previous,
@@ -1501,10 +1393,10 @@ var calendarTheme = {
 };
 
 // src/components/DatePicker/DatePicker.theme.ts
-import { mx as mx32 } from "@dxos/ui-theme";
-var trigger = ({ hasValue }, ...etc) => mx32("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "bg-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
-var content8 = (_p, ...etc) => mx32("flex flex-col gap-2 p-2", ...etc);
-var timeField = (_p, ...etc) => mx32("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
+import { mx as mx30 } from "@dxos/ui-theme";
+var trigger = ({ hasValue }, ...etc) => mx30("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "bg-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
+var content8 = (_p, ...etc) => mx30("flex flex-col gap-2 p-2", ...etc);
+var timeField = (_p, ...etc) => mx30("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
 var datePickerTheme = {
   trigger,
   content: content8,
@@ -1534,7 +1426,6 @@ var defaultTheme = {
   iconButton: iconButtonTheme,
   input: inputTheme,
   link: linkTheme,
-  list: listTheme,
   main: mainTheme,
   message: messageTheme,
   menu: menuTheme,
@@ -1548,8 +1439,7 @@ var defaultTheme = {
   tag: tagTheme,
   toast: toastTheme,
   toolbar: toolbarTheme,
-  tooltip: tooltipTheme,
-  treegrid: treegridTheme
+  tooltip: tooltipTheme
 };
 var defaultTx = bindTheme(defaultTheme);
 
@@ -1574,7 +1464,6 @@ export {
   withColumn,
   parseCaptureOwnerStack,
   ErrorStack,
-  inputTextLabel,
   mainPaddingTransitions,
   mainIntrinsicSize,
   bindTheme,
@@ -1589,8 +1478,6 @@ export {
   iconTheme,
   inputTheme,
   linkTheme,
-  listTheme,
-  treegridTheme,
   mainTheme,
   menuTheme,
   messageTheme,
@@ -1609,4 +1496,4 @@ export {
   defaultTheme,
   defaultTx
 };
-//# sourceMappingURL=chunk-7JFD5ZHZ.mjs.map
+//# sourceMappingURL=chunk-GTHV4WYK.mjs.map