@dxos/ui-theme 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/dist/lib/browser/index.mjs

@@ -46,12 +46,40 @@ var cardMinBlockSize = 18;
 var cardMaxBlockSize = 30;
 
 // src/fragments/density.ts
-var fineBlockSize = "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
-var coarseBlockSize = "min-h-[2.5rem]";
-var fineDimensions = `${fineBlockSize} px-2`;
-var coarseDimensions = `${coarseBlockSize} px-3`;
-var densityDimensions = (density = "fine") => density === "fine" ? fineDimensions : coarseDimensions;
-var densityBlockSize = (density = "fine") => density === "fine" ? fineBlockSize : coarseBlockSize;
+var lgBlockSize = "min-h-[2.5rem]";
+var mdBlockSize = "min-h-[2.5rem] pointer-fine:min-h-[2rem]";
+var smBlockSize = "min-h-[1.75rem]";
+var xsBlockSize = "min-h-[1.5rem]";
+var lgDimensions = `${lgBlockSize} px-3`;
+var mdDimensions = `${mdBlockSize} px-2`;
+var smDimensions = `${smBlockSize} px-1.5`;
+var xsDimensions = `${xsBlockSize} px-1`;
+var densityDimensions = (density = "md") => {
+  switch (density) {
+    case "lg":
+      return lgDimensions;
+    case "sm":
+      return smDimensions;
+    case "xs":
+      return xsDimensions;
+    case "md":
+    default:
+      return mdDimensions;
+  }
+};
+var densityBlockSize = (density = "md") => {
+  switch (density) {
+    case "lg":
+      return lgBlockSize;
+    case "sm":
+      return smBlockSize;
+    case "xs":
+      return xsBlockSize;
+    case "md":
+    default:
+      return mdBlockSize;
+  }
+};
 
 // src/fragments/disabled.ts
 var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
@@ -106,146 +134,146 @@ var surfaceZIndex = ({ level, elevation }) => {
 // src/util/hash-styles.ts
 var neutral = {
   hue: "neutral",
-  fill: "bg-neutral-fill",
+  bg: "bg-neutral-bg",
   surface: "bg-neutral-surface",
-  foreground: "text-neutral-foreground",
+  fg: "text-neutral-fg",
   text: "text-neutral-text",
   border: "border-neutral-border"
 };
 var styles = [
   {
     hue: "red",
-    fill: "bg-red-fill",
+    bg: "bg-red-bg",
     surface: "bg-red-surface",
-    foreground: "text-red-foreground",
+    fg: "text-red-fg",
     text: "text-red-text",
     border: "border-red-border"
   },
   {
     hue: "orange",
-    fill: "bg-orange-fill",
+    bg: "bg-orange-bg",
     surface: "bg-orange-surface",
-    foreground: "text-orange-foreground",
+    fg: "text-orange-fg",
     text: "text-orange-text",
     border: "border-orange-border"
   },
   {
     hue: "amber",
-    fill: "bg-amber-fill",
+    bg: "bg-amber-bg",
     surface: "bg-amber-surface",
-    foreground: "text-amber-foreground",
+    fg: "text-amber-fg",
     text: "text-amber-text",
     border: "border-amber-border"
   },
   {
     hue: "yellow",
-    fill: "bg-yellow-fill",
+    bg: "bg-yellow-bg",
     surface: "bg-yellow-surface",
-    foreground: "text-yellow-foreground",
+    fg: "text-yellow-fg",
     text: "text-yellow-text",
     border: "border-yellow-border"
   },
   {
     hue: "lime",
-    fill: "bg-lime-fill",
+    bg: "bg-lime-bg",
     surface: "bg-lime-surface",
-    foreground: "text-lime-foreground",
+    fg: "text-lime-fg",
     text: "text-lime-text",
     border: "border-lime-border"
   },
   {
     hue: "green",
-    fill: "bg-green-fill",
+    bg: "bg-green-bg",
     surface: "bg-green-surface",
-    foreground: "text-green-foreground",
+    fg: "text-green-fg",
     text: "text-green-text",
     border: "border-green-border"
   },
   {
     hue: "emerald",
-    fill: "bg-emerald-fill",
+    bg: "bg-emerald-bg",
     surface: "bg-emerald-surface",
-    foreground: "text-emerald-foreground",
+    fg: "text-emerald-fg",
     text: "text-emerald-text",
     border: "border-emerald-border"
   },
   {
     hue: "teal",
-    fill: "bg-teal-fill",
+    bg: "bg-teal-bg",
     surface: "bg-teal-surface",
-    foreground: "text-teal-foreground",
+    fg: "text-teal-fg",
     text: "text-teal-text",
     border: "border-teal-border"
   },
   {
     hue: "cyan",
-    fill: "bg-cyan-fill",
+    bg: "bg-cyan-bg",
     surface: "bg-cyan-surface",
-    foreground: "text-cyan-foreground",
+    fg: "text-cyan-fg",
     text: "text-cyan-text",
     border: "border-cyan-border"
   },
   {
     hue: "sky",
-    fill: "bg-sky-fill",
+    bg: "bg-sky-bg",
     surface: "bg-sky-surface",
-    foreground: "text-sky-foreground",
+    fg: "text-sky-fg",
     text: "text-sky-text",
     border: "border-sky-border"
   },
   {
     hue: "blue",
-    fill: "bg-blue-fill",
+    bg: "bg-blue-bg",
     surface: "bg-blue-surface",
-    foreground: "text-blue-foreground",
+    fg: "text-blue-fg",
     text: "text-blue-text",
     border: "border-blue-border"
   },
   {
     hue: "indigo",
-    fill: "bg-indigo-fill",
+    bg: "bg-indigo-bg",
     surface: "bg-indigo-surface",
-    foreground: "text-indigo-foreground",
+    fg: "text-indigo-fg",
     text: "text-indigo-text",
     border: "border-indigo-border"
   },
   {
     hue: "violet",
-    fill: "bg-violet-fill",
+    bg: "bg-violet-bg",
     surface: "bg-violet-surface",
-    foreground: "text-violet-foreground",
+    fg: "text-violet-fg",
     text: "text-violet-text",
     border: "border-violet-border"
   },
   {
     hue: "purple",
-    fill: "bg-purple-fill",
+    bg: "bg-purple-bg",
     surface: "bg-purple-surface",
-    foreground: "text-purple-foreground",
+    fg: "text-purple-fg",
     text: "text-purple-text",
     border: "border-purple-border"
   },
   {
     hue: "fuchsia",
-    fill: "bg-fuchsia-fill",
+    bg: "bg-fuchsia-bg",
     surface: "bg-fuchsia-surface",
-    foreground: "text-fuchsia-foreground",
+    fg: "text-fuchsia-fg",
     text: "text-fuchsia-text",
     border: "border-fuchsia-border"
   },
   {
     hue: "pink",
-    fill: "bg-pink-fill",
+    bg: "bg-pink-bg",
     surface: "bg-pink-surface",
-    foreground: "text-pink-foreground",
+    fg: "text-pink-fg",
     text: "text-pink-text",
     border: "border-pink-border"
   },
   {
     hue: "rose",
-    fill: "bg-rose-fill",
+    bg: "bg-rose-bg",
     surface: "bg-rose-surface",
-    foreground: "text-rose-foreground",
+    fg: "text-rose-fg",
     text: "text-rose-text",
     border: "border-rose-border"
   }
@@ -254,6 +282,11 @@ var palette = {
   neutral,
   hues: styles
 };
+var validHues = /* @__PURE__ */ new Set([
+  neutral.hue,
+  ...styles.map((s) => s.hue)
+]);
+var toHue = (hue) => hue && validHues.has(hue) ? hue : "neutral";
 var getStyles = (hue) => {
   return styles.find((color) => color.hue === hue) || neutral;
 };
@@ -266,10 +299,7 @@ var getHashHue = (id) => {
 var getHash = (id) => id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
 
 // src/util/mx.ts
-import { Children, createElement, forwardRef, isValidElement } from "react";
 import { extendTailwindMerge, validators } from "tailwind-merge";
-import { log } from "@dxos/log";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/ui-theme/src/util/mx.ts";
 var mx = extendTailwindMerge({
   extend: {
     classGroups: {
@@ -292,8 +322,9 @@ var mx = extendTailwindMerge({
         validators.isArbitraryNumber
       ],
       density: [
-        "dx-density-fine",
-        "dx-density-coarse"
+        "dx-density-sm",
+        "dx-density-md",
+        "dx-density-lg"
       ],
       "dx-focus-ring": [
         "dx-focus-ring",
@@ -314,55 +345,6 @@ var mx = extendTailwindMerge({
     }
   }
 });
-var composableProps = ({ className, classNames, role, style, ...props }, { classNames: defaultClassNames, ...defaults } = {}) => ({
-  // Default props.
-  ...defaults,
-  // Spread supplied props.
-  ...props,
-  // Prefer explicit role, then defaults role, then 'none'.
-  role: role ?? defaults.role ?? "none",
-  // Merge styles.
-  style: {
-    ...defaults.style,
-    ...style
-  },
-  // Compose classnames.
-  className: mx(defaultClassNames, className, classNames)
-});
-var COMPOSABLE = /* @__PURE__ */ Symbol.for("dxos.composable");
-function slottable(render) {
-  const wrapped = (props, forwardedRef) => {
-    let warn = false;
-    if (props.asChild) {
-      try {
-        const child = Children.only(props.children);
-        if (isValidElement(child) && typeof child.type !== "string" && !child.type[COMPOSABLE]) {
-          warn = true;
-          log.warn("slot child is not composable; create it with composable() or slottable()", {
-            child: child.type.displayName ?? child.type.name
-          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 100, S: this });
-        }
-      } catch {
-      }
-    }
-    const result = render(props, forwardedRef);
-    if (warn) {
-      return createElement("div", {
-        role: "none",
-        className: "dx-slot-warning"
-      }, result);
-    }
-    return result;
-  };
-  const component = forwardRef(wrapped);
-  component[COMPOSABLE] = true;
-  return component;
-}
-function composable(render) {
-  const component = forwardRef(render);
-  component[COMPOSABLE] = true;
-  return component;
-}
 
 // src/util/size.ts
 var sizeMap = {
@@ -553,710 +535,42 @@ var textValence = (valence) => {
       return "font-medium text-warning-text";
     case "error":
       return "font-medium text-error-text";
+    default:
+      return "font-medium";
   }
 };
 var messageValence = (valence) => {
   switch (valence) {
     case "success":
-      return "font-medium text-success-text border-success-text bg-success-surface";
+      return "font-medium border-success-text text-success-fg bg-success-surface";
     case "info":
-      return "font-medium text-info-text border-info-text bg-info-surface";
+      return "font-medium border-info-text text-info-fg bg-info-surface";
     case "warning":
-      return "font-medium text-warning-text border-warning-text bg-warning-surface";
+      return "font-medium border-warning-text text-warning-fg bg-warning-surface";
     case "error":
-      return "font-medium text-error-text border-error-text bg-error-surface";
+      return "font-medium border-error-text text-error-fg bg-error-surface";
     default:
-      return "font-medium text-neutral-text border-neutral-text bg-neutral-surface";
-  }
-};
-
-// src/theme/components/avatar.ts
-var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
-var avatarLabel = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
-var avatarDescription = ({ srOnly }, ...etc) => mx("text-description", srOnly && "sr-only", ...etc);
-var avatarFrame = ({ variant }, ...etc) => mx("h-full w-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
-var avatarStatusIcon = ({ status, size = 3 }, ...etc) => mx("absolute bottom-0 end-0", getSize(size), status === "inactive" ? "text-amber-400 dark:text-amber-300" : status === "active" ? "text-emerald-400 dark:text-emerald-300" : "text-neutral-400 dark:text-neutral-300", ...etc);
-var avatarRing = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded-sm", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-emerald-400 dark:border-emerald-400" : status === "error" ? "border-rose-400 dark:border-rose-500" : status === "warning" ? "border-amber-400 dark:border-amber-500" : status === "inactive" ? "border-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
-var avatarFallbackText = (_props, ...etc) => mx("fill-white", ...etc);
-var avatarGroup = (_props, ...etc) => mx("inline-flex items-center", ...etc);
-var avatarGroupLabel = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getHeight(size), ...etc);
-var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : "text-description", ...etc);
-var avatarTheme = {
-  root: avatarRoot,
-  label: avatarLabel,
-  description: avatarDescription,
-  statusIcon: avatarStatusIcon,
-  frame: avatarFrame,
-  ring: avatarRing,
-  fallbackText: avatarFallbackText,
-  group: avatarGroup,
-  groupLabel: avatarGroupLabel,
-  groupDescription: avatarGroupDescription
-};
-
-// src/theme/components/breadcrumb.ts
-var breadcrumbRoot = (_props, ...etc) => mx("shrink-0 flex items-center", ...etc);
-var breadcrumbList = (_props, ...etc) => mx("contents", ...etc);
-var breadcrumbListItem = (_props, ...etc) => mx("contents", ...etc);
-var breadcrumbCurrent = (_props, ...etc) => mx(...etc);
-var breadcrumbSeparator = (_props, ...etc) => mx("opacity-50", ...etc);
-var breadcrumbTheme = {
-  root: breadcrumbRoot,
-  list: breadcrumbList,
-  listItem: breadcrumbListItem,
-  current: breadcrumbCurrent,
-  separator: breadcrumbSeparator
-};
-
-// src/theme/components/card.ts
-var cardRoot = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden", border && "bg-card-surface border border-separator dark:border-subdued-separator rounded-xs dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
-var cardToolbar = (_, ...etc) => mx("dx-card__toolbar dx-density-fine bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! [contain:none]", ...etc);
-var cardTitle = (_props, ...etc) => mx("dx-card__title grow truncate", ...etc);
-var cardContent = (_props, ...etc) => mx("dx-card__content contents pb-1 last:pb-0", ...etc);
-var cardHeading = ({ variant = "default" }, ...etc) => mx("dx-card__heading", variant === "default" && "py-1", variant === "subtitle" && "py-2 text-xs text-description font-medium uppercase", ...etc);
-var cardText = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
-var cardTextSpan = ({ variant = "default", truncate }, ...etc) => mx(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
-var cardPoster = (_props, ...etc) => mx("dx-card__poster col-span-3 max-h-[200px]", ...etc);
-var cardPosterIcon = (_props, ...etc) => mx("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
-var cardAction = (_props, ...etc) => mx("dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden", ...etc);
-var cardActionLabel = (_props, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
-var cardLink = (_props, ...etc) => mx("dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!", ...etc);
-var cardLinkLabel = (_props, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate", ...etc);
-var cardRow = (_, ...etc) => mx("dx-card__row col-span-3 grid grid-cols-subgrid", ...etc);
-var cardIconBlock = ({ padding }, ...etc) => mx("dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center", padding && "[&>*]:p-1", ...etc);
-var cardTheme = {
-  root: cardRoot,
-  toolbar: cardToolbar,
-  title: cardTitle,
-  content: cardContent,
-  row: cardRow,
-  heading: cardHeading,
-  text: cardText,
-  "text-span": cardTextSpan,
-  poster: cardPoster,
-  "poster-icon": cardPosterIcon,
-  action: cardAction,
-  "action-label": cardActionLabel,
-  link: cardLink,
-  "link-label": cardLinkLabel,
-  "icon-block": cardIconBlock
-};
-
-// src/theme/components/button.ts
-var primaryButtonColors = "text-accent-foreground bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100";
-var staticDefaultButtonColors = "bg-input-surface text-input-foreground";
-var defaultButtonColors = mx(staticDefaultButtonColors, "data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
-var ghostButtonColors = mx(ghostHover, "hover:text-inherit data-[state=open]:bg-input-surface aria-pressed:text-accent-text aria-pressed:bg-base-surface aria-checked:text-accent-text aria-checked:bg-base-surface");
-var buttonRoot = (_props, ...etc) => {
-  return mx("dx-button dx-focus-ring group [&_span]:truncate", ...etc);
-};
-var buttonGroup = (_props, ...etc) => {
-  return mx("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
-};
-var buttonTheme = {
-  root: buttonRoot,
-  group: buttonGroup
-};
-
-// src/theme/primitives/column.ts
-var withColumn = {
-  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
-  center: () => "[grid-column:var(--dx-col,auto)]",
-  /** Propagates the Column grid to children via subgrid. No-op outside Column.
-  *  Direct children default to center column unless they are a dx-container (ScrollArea). */
-  propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
-  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
-  consumed: () => "[--dx-col:auto]"
-};
-var columnRoot = (_, ...etc) => {
-  return mx("dx-column-root grid", ...etc);
-};
-var columnRow = (_, ...etc) => {
-  return mx("col-span-3 grid grid-cols-subgrid", ...etc);
-};
-var columnBleed = (_, ...etc) => {
-  return mx("col-span-full grid grid-cols-subgrid min-h-0", ...etc);
-};
-var columnCenter = (_, ...etc) => {
-  return mx(withColumn.center(), "min-h-0", ...etc);
-};
-var columnTheme = {
-  root: columnRoot,
-  row: columnRow,
-  bleed: columnBleed,
-  center: columnCenter
-};
-
-// src/theme/components/dialog.ts
-var sizeMap2 = {
-  sm: "md:max-w-[24rem]",
-  md: "md:max-w-[32rem]!",
-  lg: "md:max-w-[40rem]!",
-  xl: "md:max-w-[60rem]!"
-};
-var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
-var dialogContent = ({ inOverlayLayout, size = "md" }, ...etc) => {
-  return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface dx-density-coarse py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap2[size], ...etc);
-};
-var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
-var dialogBody = (_props, ...etc) => mx("dx-dialog__body dx-expander", withColumn.propagate(), ...etc);
-var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse", withColumn.center(), ...etc);
-var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
-var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
-var dialogTheme = {
-  overlay: dialogOverlay,
-  content: dialogContent,
-  header: dialogHeader,
-  body: dialogBody,
-  actionbar: dialogActionBar,
-  title: dialogTitle,
-  description: dialogDescription
-};
-
-// src/theme/components/focus.ts
-var focusRing = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
-var focusTheme = {
-  group: focusRing,
-  item: focusRing
-};
-
-// src/theme/components/icon.ts
-var iconRoot = ({ size }, etc) => {
-  return mx("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
-};
-var iconTheme = {
-  root: iconRoot
-};
-
-// src/theme/components/icon-button.ts
-var iconButtonRoot = ({ iconOnly, square }, ...etc) => {
-  return mx("px-1.5", !iconOnly && "gap-1.5", square && "aspect-square", ...etc);
-};
-var iconButtonTheme = {
-  root: iconButtonRoot
-};
-
-// src/theme/components/input.ts
-var inputTextLabel = "py-1 text-sm text-description";
-var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator";
-var textInputSurfaceHover = "hover:bg-focus-surface";
-var booleanInputSurface = "shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-surface aria-[checked=mixed]:bg-accent-surface";
-var booleanInputSurfaceHover = "hover:bg-un-accent-hover hover:aria-checked:bg-accent-surface-hover hover:aria-[checked=mixed]:bg-accent-surface-hover";
-var inputValence = (valence) => {
-  switch (valence) {
-    case "success":
-      return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
-    case "info":
-      return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
-    case "warning":
-      return "shadow-amber-500/50 dark:shadow-amber-600/50";
-    case "error":
-      return "shadow-rose-500/50 dark:shadow-rose-600/50";
-  }
-};
-var sharedSubduedInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full bg-transparent text-current placeholder-placeholder",
-  "dx-focus-subdued",
-  densityDimensions(props.density),
-  props.disabled && staticDisabled
-];
-var sharedDefaultInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
-  textInputSurfaceFocus,
-  densityDimensions(props.density),
-  props.disabled ? staticDisabled : textInputSurfaceHover
-];
-var sharedStaticInputStyles = (props) => [
-  '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  "py-0 w-full text-base-foreground rounded-xs placeholder-placeholder",
-  textInputSurfaceFocus,
-  textInputSurfaceHover,
-  props.focused && "bg-attention-surface",
-  inputValence(props.validationValence),
-  props.disabled && staticDisabled,
-  props.focused && "dx-focus-static"
-];
-var inputInput = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), !props.disabled && "dx-focus-ring", inputValence(props.validationValence), ...etc);
-var inputTextArea = (props, ...etc) => inputInput(props, ...etc);
-var inputCheckbox = ({ size = 5 }, ...etc) => mx("dx-checkbox dx-focus-ring", getSize(size), ...etc);
-var inputCheckboxIndicator = ({ size = 5, checked }, ...etc) => mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
-var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
-  getHeight(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 inputSwitchThumb = ({ size = 5 }, ...etc) => mx(getSize(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 inputWithSegmentsInput = (props, ...etc) => mx("font-mono selection:bg-transparent mx-auto", props.density === "fine" ? "text-base pointer-fine:text-sm" : "text-lg", props.disabled && "cursor-not-allowed", ...etc);
-var inputSegment = (props, ...etc) => mx("flex items-center justify-center font-mono", props.density === "fine" ? "size-10 pointer-fine:size-8 rounded-xs" : "size-12 rounded-xs", "bg-input-surface text-base-foreground 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", inputValence(props.validationValence), props.disabled && staticDisabled, ...etc);
-var inputLabel = (props, ...etc) => mx("block", inputTextLabel, props.srOnly && "sr-only", ...etc);
-var inputDescription = (props, ...etc) => mx("text-description", props.srOnly && "sr-only", ...etc);
-var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
-var inputValidation = (props, ...etc) => mx(inputTextLabel, props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
-var inputTheme = {
-  input: inputInput,
-  textArea: inputTextArea,
-  inputWithSegments: inputWithSegmentsInput,
-  segment: inputSegment,
-  checkbox: inputCheckbox,
-  checkboxIndicator: inputCheckboxIndicator,
-  label: inputLabel,
-  description: inputDescription,
-  switch: inputSwitch,
-  switchThumb: inputSwitchThumb,
-  validation: inputValidation,
-  descriptionAndValidation: inputDescriptionAndValidation
-};
-
-// src/theme/components/link.ts
-var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-xs", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "text-accent-text hover:text-accent-text-hover visited:text-accent-text visited:hover:text-accent-text-hover", "dx-focus-ring", ...etc);
-var linkTheme = {
-  root: linkRoot
-};
-
-// src/theme/components/list.ts
-var listRoot = (_, ...etc) => mx(...etc);
-var listItem = ({ collapsible }, ...etc) => mx(!collapsible && "flex", ...etc);
-var listItemEndcap = ({ density }, ...etc) => mx(density === "fine" ? getSize(8) : getSize(10), "shrink-0 flex items-center justify-center", ...etc);
-var listItemHeading = ({ density }, ...etc) => mx(densityBlockSize(density), "flex items-center overflow-hidden [&>span]:truncate", ...etc);
-var listItemDragHandleIcon = (_props, ...etc) => mx(getSize(5), "mt-2.5", ...etc);
-var listItemOpenTrigger = ({ density }, ...etc) => mx("w-5 rounded-sm flex justify-center items-center", densityBlockSize(density), ghostHover, "dx-focus-ring", ...etc);
-var listItemOpenTriggerIcon = (_props, ...etc) => {
-  return mx(getSize(5), ...etc);
-};
-var listTheme = {
-  root: listRoot,
-  item: {
-    root: listItem,
-    endcap: listItemEndcap,
-    heading: listItemHeading,
-    dragHandleIcon: listItemDragHandleIcon,
-    openTrigger: listItemOpenTrigger,
-    openTriggerIcon: listItemOpenTriggerIcon
+      return "font-medium border-neutral-text text-neutral-fg bg-neutral-surface";
   }
 };
-
-// src/theme/components/main.ts
-var topbarBlockPaddingStart = "py-(--dx-topbar-size) dx-sticky-top-from-topbar-bottom";
-var bottombarBlockPaddingEnd = "pb-(--dx-statusbar-size) dx-sticky-bottom-from-statusbar-bottom";
-var mainPadding = "dx-main-content-padding";
-var mainPaddingTransitions = "dx-main-content-padding-transitions";
-var mainIntrinsicSize = "dx-main-intrinsic-size";
-var mainContent = ({ bounce }, ...etc) => mx(mainPadding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
-var mainSidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
-var mainOverlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
-var mainTheme = {
-  content: mainContent,
-  sidebar: mainSidebar,
-  overlay: mainOverlay
-};
-
-// src/theme/components/menu.ts
-var menuContent = ({ elevation }, ...etc) => mx("dx-modal-surface w-48 rounded-sm md:w-56 border border-separator", surfaceZIndex({
-  elevation,
-  level: "menu"
-}), surfaceShadow({
-  elevation: "positioned"
-}), ...etc);
-var menuViewport = (_props, ...etc) => mx("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
-var menuItem = (_props, ...etc) => mx("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 menuSeparator = (_props, ...etc) => mx("my-1 mx-2 h-px bg-separator", ...etc);
-var menuGroupLabel = (_props, ...etc) => mx("text-description", "select-none px-2 py-2", ...etc);
-var menuArrow = (_props, ...etc) => mx("fill-separator", ...etc);
-var menuTheme = {
-  content: menuContent,
-  viewport: menuViewport,
-  item: menuItem,
-  separator: menuSeparator,
-  groupLabel: menuGroupLabel,
-  arrow: menuArrow
-};
-
-// src/theme/components/message.ts
-var messageRoot = ({ valence }, etc) => {
-  return mx("grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm", messageValence(valence), etc);
-};
-var messageHeader = (_, etc) => {
-  return mx("col-span-full grid grid-cols-subgrid items-center", etc);
-};
-var messageTitle = (_, etc) => {
-  return mx("col-start-2 truncate", etc);
-};
-var messageIcon = (_, etc) => {
-  return mx("col-start-1 grid place-items-center", etc);
-};
-var messageContent = (_, etc) => {
-  return mx("col-start-2 grid grid-cols-subgrid inline first:font-medium", etc);
-};
-var messageTheme = {
-  root: messageRoot,
-  header: messageHeader,
-  icon: messageIcon,
-  title: messageTitle,
-  content: messageContent
-};
-
-// src/theme/components/popover.ts
-var popoverContent = ({ elevation }, ...etc) => mx("dx-modal-surface border border-separator rounded-sm", surfaceShadow({
-  elevation: "positioned"
-}), surfaceZIndex({
-  elevation,
-  level: "menu"
-}), "dx-focus-ring", ...etc);
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("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 popoverArrow = (_props, ...etc) => mx("fill-separator", ...etc);
-var popoverTheme = {
-  content: popoverContent,
-  viewport: popoverViewport,
-  arrow: popoverArrow
-};
-
-// src/theme/components/scroll-area.ts
-var scrollbar = {
-  thin: {
-    size: 4,
-    padding: 4
-  },
-  coarse: {
-    size: 8,
-    padding: 8
-  }
-};
-var scrollAreaRoot = ({ orientation }, ...etc) => mx(
-  // Expand
-  "dx-container",
-  orientation === "vertical" && "group/scroll-v flex flex-col",
-  orientation === "horizontal" && "group/scroll-h flex",
-  orientation === "all" && "group/scroll-all",
-  // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
-  "[.dx-column-root_&]:col-span-full",
-  ...etc
-);
-var scrollAreaViewport = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
-  return mx(
-    "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.
-    withColumn.consumed(),
-    orientation === "vertical" && "overflow-y-scroll",
-    orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain",
-    orientation === "all" && "overflow-scroll",
-    "[&::-webkit-scrollbar-corner]:bg-transparent",
-    "[&::-webkit-scrollbar-track]:bg-transparent",
-    "[&::-webkit-scrollbar-thumb]:rounded-none",
-    "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]",
-    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
-    // If centered, left padding compensates for scrollbar width so content is visually centered.
-    (orientation === "vertical" || orientation === "all") && (padding ? [
-      centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]",
-      "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"
-    ] : centered && "pl-[var(--scroll-width)]"),
-    (orientation === "horizontal" || orientation === "all") && (padding ? [
-      centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]",
-      "pb-[var(--scroll-padding)]"
-    ] : centered && "pt-[var(--scroll-width)]"),
-    snap && [
-      orientation === "vertical" && "snap-y snap-mandatory",
-      orientation === "horizontal" && "snap-x snap-mandatory",
-      orientation === "all" && "snap-both snap-mandatory"
-    ],
-    autoHide ? [
-      orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-    ] : [
-      orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
-      orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
-    ],
-    ...etc
-  );
-};
-var scrollAreaTheme = {
-  root: scrollAreaRoot,
-  viewport: scrollAreaViewport
-};
-
-// src/theme/components/select.ts
-var selectContent = ({ elevation }, ...etc) => {
-  return mx("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow({
-    elevation: "positioned"
-  }), surfaceZIndex({
-    elevation,
-    level: "menu"
-  }), ...etc);
-};
-var selectViewport = (_props, ...etc) => mx(...etc);
-var selectItem = (_props, ...etc) => mx("flex items-center min-h-[2rem] px-3 py-1 gap-2", "text-base-foreground leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
-var selectItemIndicator = (_props, ...etc) => mx("items-center", ...etc);
-var selectArrow = (_props, ...etc) => mx("fill-separator", ...etc);
-var selectSeparator = (_props, ...etc) => mx("self-stretch border-b my-1 border-separator", ...etc);
-var selectScrollButton = (_props, ...etc) => mx("dx-modal-surface flex items-center justify-center cursor-default h-6 w-full", ...etc);
-var selectTheme = {
-  content: selectContent,
-  viewport: selectViewport,
-  item: selectItem,
-  itemIndicator: selectItemIndicator,
-  arrow: selectArrow,
-  separator: selectSeparator,
-  scrollButton: selectScrollButton
-};
-
-// src/theme/components/splitter.ts
-var splitterRoot = (_props, ...etc) => mx("relative h-full overflow-hidden", ...etc);
-var splitterPanel = (_props, ...etc) => mx("absolute inset-x-0 flex flex-col overflow-hidden", ...etc);
-var splitterTheme = {
-  root: splitterRoot,
-  panel: splitterPanel
-};
-
-// src/theme/components/separator.ts
-var separatorRoot = ({ orientation, subdued }, ...etc) => mx("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
-var separatorTheme = {
-  root: separatorRoot
-};
-
-// src/theme/components/skeleton.ts
-var skeletonRoot = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
-var skeletonTheme = {
-  root: skeletonRoot
-};
-
-// src/theme/components/status.ts
-var statusRoot = ({ variant = "default" }, ...etc) => mx("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-20 inline-block bg-base-surface", ...etc);
-var statusBar = ({ variant = "default", indeterminate }, ...etc) => mx("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: statusRoot,
-  bar: statusBar
-};
-
-// src/theme/components/tag.ts
-var tagRoot = (_, ...etc) => mx("dx-tag", ...etc);
-var tagTheme = {
-  root: tagRoot
-};
-
-// src/theme/components/toast.ts
-var toastViewport = (_props, ...etc) => mx(
-  // 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 toastRoot = (_props, ...etc) => mx("dx-modal-surface rounded-md flex p-2 gap-2", surfaceShadow({
-  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 toastBody = (_props, ...etc) => mx("grow flex flex-col gap-1 justify-center pl-2", ...etc);
-var toastActions = (_props, ...etc) => mx("shrink-0 flex flex-col gap-1 justify-center", ...etc);
-var toastTitle = ({ srOnly }, ...etc) => mx("shrink-0 font-medium", srOnly && "sr-only", ...etc);
-var toastDescription = ({ srOnly }, ...etc) => mx("text-description", "shrink-0", srOnly && "sr-only", ...etc);
-var toastTheme = {
-  viewport: toastViewport,
-  root: toastRoot,
-  body: toastBody,
-  title: toastTitle,
-  description: toastDescription,
-  actions: toastActions
-};
-
-// src/theme/components/toolbar.ts
-var toolbarLayout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
-var toolbarRoot = ({ density, disabled, layoutManaged }, ...etc) => {
-  return mx("bg-toolbar-surface dx-toolbar", density === "coarse" && "h-(--dx-rail-size) px-3!", disabled && "*:opacity-20", !layoutManaged && toolbarLayout, ...etc);
-};
-var toolbarText = (_, ...etc) => {
-  return mx("px-2 grow truncate items-center", ...etc);
-};
-var toolbarTheme = {
-  root: toolbarRoot,
-  text: toolbarText
-};
-
-// src/theme/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-foreground rounded-sm", surfaceShadow({
-  elevation: "positioned"
-}), surfaceZIndex({
-  elevation,
-  level: "tooltip"
-}), ...etc);
-var tooltipArrow = (_props, ...etc) => mx("fill-inverse-surface", ...etc);
-var tooltipTheme = {
-  content: tooltipContent,
-  arrow: tooltipArrow
-};
-
-// src/theme/components/treegrid.ts
-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 treegridRoot = (_, ...etc) => mx("grid", ...etc);
-var treegridRow = ({ level = 1 }, ...etc) => mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
-var treegridCell = ({ indent }, ...etc) => mx(indent && "indent", ...etc);
-var treegridTheme = {
-  root: treegridRoot,
-  row: treegridRow,
-  cell: treegridCell
-};
-
-// src/theme/primitives/panel.ts
-var sizes = {
-  lg: "h-(--dx-topbar-size)",
-  md: "h-(--dx-toolbar-size)",
-  sm: "h-(--dx-statusbar-size)"
-};
-var panelRoot = (_, ...etc) => mx(
-  // prettier-ignore
-  "dx-container grid grid-cols-[100%] overflow-hidden",
-  // Add uncategorized children to content slot.
-  "[&>*:not([data-slot])]:[grid-area:content]",
-  ...etc
-);
-var panelToolbar = ({ size = "md" }, ...etc) => mx("[grid-area:toolbar]", "shrink-0", sizes[size], ...etc);
-var panelContent = (_, ...etc) => mx("[grid-area:content] min-h-0", ...etc);
-var panelStatusbar = ({ size = "md" }, ...etc) => mx("[grid-area:statusbar]", "shrink-0", sizes[size], ...etc);
-var panelTheme = {
-  root: panelRoot,
-  toolbar: panelToolbar,
-  content: panelContent,
-  statusbar: panelStatusbar
-};
-
-// src/theme/theme.ts
-import { getDeep } from "@dxos/util";
-var defaultTheme = {
-  themeName: () => "default",
-  //
-  // Primitives
-  //
-  column: columnTheme,
-  panel: panelTheme,
-  //
-  // Components
-  //
-  avatar: avatarTheme,
-  breadcrumb: breadcrumbTheme,
-  button: buttonTheme,
-  card: cardTheme,
-  dialog: dialogTheme,
-  focus: focusTheme,
-  icon: iconTheme,
-  iconButton: iconButtonTheme,
-  input: inputTheme,
-  link: linkTheme,
-  list: listTheme,
-  main: mainTheme,
-  message: messageTheme,
-  menu: menuTheme,
-  popover: popoverTheme,
-  scrollArea: scrollAreaTheme,
-  select: selectTheme,
-  separator: separatorTheme,
-  skeleton: skeletonTheme,
-  splitter: splitterTheme,
-  status: statusTheme,
-  tag: tagTheme,
-  toast: toastTheme,
-  toolbar: toolbarTheme,
-  tooltip: tooltipTheme,
-  treegrid: treegridTheme
-};
-var bindTheme = (theme) => {
-  return (path, styleProps, ...etc) => {
-    const result = getDeep(theme, path.split("."));
-    return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
-  };
-};
-var defaultTx = bindTheme(defaultTheme);
+var buttonValence = (_valence) => "text-(--dx-valence-text) bg-(--dx-valence-bg) hover:bg-(--dx-valence-bg-hover)";
 export {
-  avatarDescription,
-  avatarFallbackText,
-  avatarFrame,
-  avatarGroup,
-  avatarGroupDescription,
-  avatarGroupLabel,
-  avatarLabel,
-  avatarRing,
-  avatarRoot,
-  avatarStatusIcon,
-  avatarTheme,
-  bindTheme,
-  bottombarBlockPaddingEnd,
-  breadcrumbCurrent,
-  breadcrumbList,
-  breadcrumbListItem,
-  breadcrumbRoot,
-  breadcrumbSeparator,
-  breadcrumbTheme,
-  buttonTheme,
+  buttonValence,
   cardDefaultInlineSize,
   cardMaxBlockSize,
   cardMaxInlineSize,
   cardMinBlockSize,
   cardMinInlineSize,
-  cardTheme,
-  columnTheme,
-  composable,
-  composableProps,
   dataDisabled,
-  defaultButtonColors,
-  defaultTheme,
-  defaultTx,
   densityBlockSize,
   densityDimensions,
   descriptionMessage,
-  dialogActionBar,
-  dialogBody,
-  dialogContent,
-  dialogDescription,
-  dialogHeader,
-  dialogOverlay,
-  dialogTheme,
-  dialogTitle,
-  focusTheme,
   getHashHue,
   getHashStyles,
   getHeight,
   getSize,
   getStyles,
   getWidth,
-  ghostButtonColors,
   ghostFocusWithin,
   ghostHover,
   groupHoverControlItemWithTransition,
@@ -1267,104 +581,19 @@ export {
   hoverableOpenControlItem,
   hueShades,
   hues,
-  iconButtonRoot,
-  iconButtonTheme,
-  iconRoot,
   iconSize,
-  iconTheme,
-  inputTextLabel,
-  inputTheme,
-  linkRoot,
-  linkTheme,
-  listItem,
-  listItemDragHandleIcon,
-  listItemEndcap,
-  listItemHeading,
-  listItemOpenTrigger,
-  listItemOpenTriggerIcon,
-  listRoot,
-  listTheme,
-  mainContent,
-  mainIntrinsicSize,
-  mainOverlay,
-  mainPadding,
-  mainPaddingTransitions,
-  mainSidebar,
-  mainTheme,
-  menuArrow,
-  menuContent,
-  menuGroupLabel,
-  menuItem,
-  menuSeparator,
-  menuTheme,
-  menuViewport,
-  messageContent,
-  messageHeader,
-  messageIcon,
-  messageRoot,
-  messageTheme,
-  messageTitle,
   messageValence,
   mx,
   osTranslations,
   palette,
-  panelTheme,
-  popoverArrow,
-  popoverContent,
-  popoverTheme,
-  popoverViewport,
-  primaryButtonColors,
   roles,
-  scrollAreaRoot,
-  scrollAreaTheme,
-  scrollAreaViewport,
-  scrollbar,
-  selectArrow,
-  selectContent,
-  selectItem,
-  selectItemIndicator,
-  selectScrollButton,
-  selectSeparator,
-  selectTheme,
-  selectViewport,
-  separatorRoot,
-  separatorTheme,
   sizeToRem,
   sizeValue,
-  skeletonRoot,
-  skeletonTheme,
-  slottable,
   snapSize,
-  splitterTheme,
-  staticDefaultButtonColors,
   staticDisabled,
-  statusBar,
-  statusRoot,
-  statusTheme,
   surfaceShadow,
   surfaceZIndex,
-  tagRoot,
-  tagTheme,
   textValence,
-  toastActions,
-  toastBody,
-  toastDescription,
-  toastRoot,
-  toastTheme,
-  toastTitle,
-  toastViewport,
-  toolbarLayout,
-  toolbarRoot,
-  toolbarText,
-  toolbarTheme,
-  tooltipArrow,
-  tooltipContent,
-  tooltipTheme,
-  topbarBlockPaddingStart,
-  treegridCell,
-  treegridRoot,
-  treegridRow,
-  treegridTheme,
-  withColumn
+  toHue
 };
 //# sourceMappingURL=index.mjs.map