@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

package/dist/lib/browser/index.mjs

@@ -1,2180 +1,300 @@
-// src/config/tailwind.ts
-import tailwindcssContainerQueries from "@tailwindcss/container-queries";
-import tailwindcssForms from "@tailwindcss/forms";
-import merge from "lodash.merge";
-import tailwindScrollbar from "tailwind-scrollbar";
-import defaultConfig from "tailwindcss/stubs/config.full.js";
-import tailwindcssLogical from "tailwindcss-logical";
-import tailwindcssRadix from "tailwindcss-radix";
-
-// src/config/tokens/sizes.ts
+// src/defs.ts
+var osTranslations = "org.dxos.i18n.os";
+var hues = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var hueShades = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
+var roles = [
+  "fill",
+  "surface",
+  "foreground",
+  "text",
+  "border"
+];
 var cardMinInlineSize = 18;
 var cardDefaultInlineSize = 20;
 var cardMaxInlineSize = 22;
 var cardMinBlockSize = 18;
 var cardMaxBlockSize = 30;
 
-// src/config/tokens/tokens.ts
-import adapter from "@ch-ui/tailwind-tokens";
-
-// src/config/tokens/physical-colors.ts
-var reflectiveRelation = {
-  initial: 1e3,
-  slope: -1e3,
-  method: "floor"
-};
-var gamuts = [
-  "srgb",
-  "p3",
-  "rec2020"
-];
-var DEG_RAD = Math.PI / 180;
-var hueKeyPoint = (hue) => {
-  const hueDeg = (360 * (hue / 17) + 26) % 360;
-  return {
-    keyPoint: [
-      0.5,
-      0.13 + 0.024 * Math.sin((hueDeg - 15) * DEG_RAD),
-      hueDeg
-    ],
-    lowerCp: 1,
-    upperCp: 1,
-    torsion: 0
-  };
-};
-var huePalettes = {
-  red: hueKeyPoint(0),
-  orange: hueKeyPoint(1),
-  amber: hueKeyPoint(2),
-  yellow: hueKeyPoint(3),
-  lime: hueKeyPoint(4),
-  green: hueKeyPoint(5),
-  emerald: hueKeyPoint(6),
-  teal: hueKeyPoint(7),
-  cyan: hueKeyPoint(8),
-  sky: hueKeyPoint(9),
-  blue: hueKeyPoint(10),
-  indigo: hueKeyPoint(11),
-  violet: hueKeyPoint(12),
-  purple: hueKeyPoint(13),
-  fuchsia: hueKeyPoint(14),
-  pink: hueKeyPoint(15),
-  rose: hueKeyPoint(16)
-};
-var systemPalettes = {
-  neutral: {
-    keyPoint: [
-      0.5,
-      1e-3,
-      260
-    ],
-    lowerCp: 0,
-    upperCp: 0,
-    torsion: 0,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [
-      25,
-      50,
-      75,
-      100,
-      150,
-      200,
-      250,
-      300,
-      400,
-      500,
-      600,
-      700,
-      750,
-      800,
-      850,
-      900
-    ]
-  },
-  // https://oklch.com/#0.5,0.2,260,100 (#0559d2)
-  primary: {
-    keyPoint: [
-      0.5,
-      0.2,
-      260
-    ],
-    lowerCp: 0.86,
-    upperCp: 1,
-    torsion: -30,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [
-      100,
-      150,
-      200,
-      350,
-      400,
-      450,
-      500,
-      750,
-      800,
-      850
-    ]
-  }
-};
-var physicalSeries = {
-  ...huePalettes,
-  ...systemPalettes
-};
-var physicalColors = {
-  namespace: "dx-",
-  definitions: {
-    // @ts-ignore
-    series: physicalSeries,
-    accompanyingSeries: {
-      reflectiveRelation
-    }
-  },
-  conditions: {
-    srgb: [
-      ":root, .dark"
-    ],
-    p3: [
-      "@media (color-gamut: p3)",
-      ":root, .dark"
-    ],
-    rec2020: [
-      "@media (color-gamut: rec2020)",
-      ":root, .dark"
-    ]
-  },
-  series: Object.entries(physicalSeries).reduce((acc, [id]) => {
-    acc[id] = gamuts.reduce((acc2, gamut) => {
-      acc2[gamut] = {
-        extends: id,
-        physicalValueRelation: {
-          extends: "reflectiveRelation"
-        }
-      };
-      return acc2;
-    }, {});
-    return acc;
-  }, {})
-};
-
-// src/config/tokens/sememes-hue.ts
-var hueSememes = [
-  ...Object.keys(huePalettes),
-  "neutral",
-  "primary"
-].reduce((acc, palette) => {
-  acc[`${palette}Cursor`] = {
-    light: [
-      palette,
-      400
-    ],
-    dark: [
-      palette,
-      300
-    ]
-  };
-  acc[`${palette}Text`] = {
-    light: [
-      palette,
-      550
-    ],
-    dark: [
-      palette,
-      300
-    ]
-  };
-  acc[`${palette}Fill`] = {
-    light: [
-      palette,
-      500
-    ],
-    dark: [
-      palette,
-      500
-    ]
-  };
-  acc[`${palette}Surface`] = {
-    light: [
-      palette,
-      200
-    ],
-    dark: [
-      palette,
-      700
-    ]
-  };
-  acc[`${palette}SurfaceText`] = {
-    light: [
-      palette,
-      700
-    ],
-    dark: [
-      palette,
-      200
-    ]
-  };
-  acc[`${palette}Screen`] = {
-    light: [
-      palette,
-      100
-    ],
-    dark: [
-      palette,
-      800
-    ]
-  };
-  return acc;
-}, {});
-var valenceAliasSememeStems = [
-  "Text",
-  "Surface",
-  "SurfaceText",
-  "Fill",
-  "Cursor"
-];
-var valenceMapping = {
-  emerald: [
-    "success"
-  ],
-  cyan: [
-    "info"
-  ],
-  amber: [
-    "warning"
-  ],
-  rose: [
-    "error"
-  ],
-  primary: [
-    "current"
-  ],
-  fuchsia: [
-    "internal"
-  ]
-};
-var valenceAliases = valenceAliasSememeStems.reduce((acc, stem) => {
-  return Object.entries(valenceMapping).reduce((acc2, [hue, valences]) => {
-    acc2[`${hue}${stem}`] = {
-      root: valences.map((valence) => `${valence}${stem}`)
-    };
-    return acc2;
-  }, acc);
-}, {});
-
-// src/config/tokens/sememes-sheet.ts
-var sheetSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  axisSurface: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      800
-    ]
-  },
-  axisText: {
-    light: [
-      "neutral",
-      800
-    ],
-    dark: [
-      "neutral",
-      200
-    ]
-  },
-  axisSelectedSurface: {
-    light: [
-      "neutral",
-      100
-    ],
-    dark: [
-      "neutral",
-      900
-    ]
-  },
-  axisSelectedText: {
-    light: [
-      "neutral",
-      100
-    ],
-    dark: [
-      "neutral",
-      900
-    ]
-  },
-  gridCell: {
-    // TODO(thure): Why override only dark?
-    light: [
-      "neutral",
-      "50/0"
-    ],
-    dark: [
-      "neutral",
-      850
-    ]
-  },
-  gridCellSelected: {
-    // TODO(thure): Can this not just use `attention`?
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      800
-    ]
-  },
-  gridOverlay: {
-    light: [
-      "primary",
-      "500/.5"
-    ],
-    dark: [
-      "primary",
-      "500/.5"
-    ]
-  },
-  gridSelectionOverlay: {
-    light: [
-      "primary",
-      "500/.2"
-    ],
-    dark: [
-      "primary",
-      "500/.2"
-    ]
-  },
-  gridHighlight: {
-    light: [
-      "emerald",
-      "500/.5"
-    ],
-    dark: [
-      "emerald",
-      "500/.5"
-    ]
-  },
-  // TODO(burdon): Factor out def (in common with editor).
-  gridCommented: {
-    light: [
-      "green",
-      200
-    ],
-    dark: [
-      "green",
-      600
-    ]
-  },
-  gridCommentedActive: {
-    light: [
-      "green",
-      "200/.5"
-    ],
-    dark: [
-      "green",
-      "600/.5"
-    ]
-  }
-};
-var sheetAliases = {
-  activeSurface: {
-    root: [
-      "gridLine"
-    ]
-  },
-  accentFocusIndicator: {
-    root: [
-      "gridFocusIndicatorColor"
-    ]
-  },
-  neutralFocusIndicator: {
-    gridFocusStack: [
-      "gridFocusIndicatorColor"
-    ]
-  }
-};
-
-// src/config/tokens/sememes-system.ts
-var getMapValue = (map, key, defaultValue) => {
-  let value = map[key];
-  if (!value) {
-    value = defaultValue();
-    map[key] = value;
-  }
-  return value;
-};
-var applyAlpha = (sememe, alpha) => {
-  if (alpha >= 1) {
-    return sememe;
-  } else {
-    return {
-      light: [
-        sememe.light[0],
-        `${sememe.light[1]}/${alpha}`
-      ],
-      dark: [
-        sememe.dark[0],
-        `${sememe.dark[1]}/${alpha}`
-      ]
-    };
-  }
-};
-var DARK_ELEVATION_MIN = 855;
-var DARK_ELEVATION_MAX = 731;
-var DARK_CONTRAST_MIN = 750;
-var DARK_CONTRAST_MAX = 665;
-var LIGHT_ELEVATION_MIN = 0;
-var LIGHT_ELEVATION_MAX = 0;
-var LIGHT_CONTRAST_MIN = 82;
-var LIGHT_CONTRAST_MAX = 24;
-var ELEVATION_SCALE = 2;
-var CONTRAST_SCALE = 3;
-var darkElevationCadence = (depth) => Math.round(DARK_ELEVATION_MAX + (DARK_ELEVATION_MIN - DARK_ELEVATION_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
-var darkContrastCadence = (depth) => Math.round(DARK_CONTRAST_MAX + (DARK_CONTRAST_MIN - DARK_CONTRAST_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE));
-var lightElevationCadence = (depth) => Math.round(LIGHT_ELEVATION_MIN + (LIGHT_ELEVATION_MAX - LIGHT_ELEVATION_MIN) * ((CONTRAST_SCALE - depth) / CONTRAST_SCALE));
-var lightContrastCadence = (depth) => Math.round(LIGHT_CONTRAST_MAX + (LIGHT_CONTRAST_MIN - LIGHT_CONTRAST_MAX) * (depth / CONTRAST_SCALE));
-var elevationCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
-  light: [
-    "neutral",
-    lightElevationCadence(lightDepth)
-  ],
-  dark: [
-    "neutral",
-    darkElevationCadence(darkDepth)
-  ]
-}, alpha);
-var contrastCadence = (lightDepth, darkDepth = lightDepth, alpha = 1) => applyAlpha({
-  light: [
-    "neutral",
-    lightContrastCadence(lightDepth)
-  ],
-  dark: [
-    "neutral",
-    darkContrastCadence(darkDepth)
-  ]
-}, alpha);
-var systemSememes = {
-  //
-  // Elevation cadence tokens
-  //
-  baseSurface: elevationCadence(0),
-  groupSurface: elevationCadence(1),
-  modalSurface: elevationCadence(2, 1.7),
-  //
-  // Contrast cadence tokens
-  //
-  textInputSurfaceBase: contrastCadence(0, 0),
-  textInputSurfaceGroup: contrastCadence(0, 0.5),
-  textInputSurfaceModal: contrastCadence(0, 1),
-  inputSurfaceBase: contrastCadence(0.8, 0.33),
-  inputSurfaceGroup: contrastCadence(0.8, 0.66),
-  inputSurfaceModal: contrastCadence(0.8, 1),
-  hoverSurfaceBase: contrastCadence(2, 1.5),
-  hoverSurfaceGroup: contrastCadence(2, 2),
-  hoverSurfaceModal: contrastCadence(2, 2.5),
-  separatorBase: contrastCadence(3, 2),
-  separatorGroup: contrastCadence(3, 2.5),
-  separatorModal: contrastCadence(3, 3),
-  subduedSeparator: contrastCadence(3, 1),
-  scrollbarTrack: contrastCadence(0),
-  scrollbarThumbSubdued: contrastCadence(1, 1),
-  scrollbarThumb: contrastCadence(2.5, 2.5),
-  scrollbarThumbHover: contrastCadence(3.5, 3.5),
-  scrollbarThumbActive: contrastCadence(4.5, 4.5),
-  unAccent: {
-    light: [
-      "neutral",
-      400
-    ],
-    dark: [
-      "neutral",
-      400
-    ]
-  },
-  unAccentHover: {
-    light: [
-      "neutral",
-      450
-    ],
-    dark: [
-      "neutral",
-      450
-    ]
-  },
-  hoverOverlay: {
-    light: [
-      "neutral",
-      "450/.1"
-    ],
-    dark: [
-      "neutral",
-      "450/.1"
-    ]
-  },
-  //
-  // Special surfaces.
-  //
-  // Screen overlay for modal dialogs.
-  scrimSurface: applyAlpha({
-    light: [
-      "neutral",
-      LIGHT_CONTRAST_MAX
-    ],
-    dark: [
-      "neutral",
-      DARK_ELEVATION_MIN
-    ]
-  }, 0.65),
-  // High contrast for focused interactive elements. (Technically this is part of the surface cadence, but the contrast cadence is on the opposite side of the elevation cadence as this point.)
-  focusSurface: {
-    light: [
-      "neutral",
-      0
-    ],
-    dark: [
-      "neutral",
-      1e3
-    ]
-  },
-  deckSurface: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      950
-    ]
-  },
-  // For tooltips only; the highest elevation from the opposite theme
-  inverseSurface: {
-    light: [
-      "neutral",
-      DARK_ELEVATION_MIN
-    ],
-    dark: [
-      "neutral",
-      LIGHT_ELEVATION_MIN
-    ]
-  },
-  //
-  // Accent surfaces
-  //
-  accentSurfaceRelated: {
-    light: [
-      "primary",
-      "300/.1"
-    ],
-    dark: [
-      "primary",
-      "400/.1"
-    ]
-  },
-  accentSurfaceHover: {
-    light: [
-      "primary",
-      600
-    ],
-    dark: [
-      "primary",
-      475
-    ]
-  },
-  accentSurface: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      500
-    ]
-  },
-  //
-  // Text (text-) and other foregrounds
-  // TODO(thure): Establish contrast-order cadence for text.
-  //
-  baseText: {
-    light: [
-      "neutral",
-      1e3
-    ],
-    dark: [
-      "neutral",
-      50
-    ]
-  },
-  inverseSurfaceText: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      1e3
-    ]
-  },
-  description: {
-    light: [
-      "neutral",
-      550
-    ],
-    dark: [
-      "neutral",
-      350
-    ]
-  },
-  subdued: {
-    light: [
-      "neutral",
-      700
-    ],
-    dark: [
-      "neutral",
-      300
-    ]
-  },
-  placeholder: {
-    light: [
-      "neutral",
-      500
-    ],
-    dark: [
-      "neutral",
-      500
-    ]
-  },
-  accentText: {
-    light: [
-      "primary",
-      550
-    ],
-    dark: [
-      "primary",
-      400
-    ]
-  },
-  accentSurfaceText: {
-    light: [
-      "neutral",
-      0
-    ],
-    dark: [
-      "neutral",
-      0
-    ]
-  },
-  accentTextHover: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      350
-    ]
-  },
-  accentFocusIndicator: {
-    light: [
-      "primary",
-      300
-    ],
-    dark: [
-      "primary",
-      450
-    ]
-  },
-  neutralFocusIndicator: {
-    light: [
-      "neutral",
-      300
-    ],
-    dark: [
-      "neutral",
-      550
-    ]
-  }
-};
-var aliasDefs = {
-  // Selected items, current items, other surfaces needing special contrast against baseSurface.
-  activeSurface: {
-    root: "inputSurfaceBase"
-  },
-  // Main sidebar panel.
-  sidebarSurface: {
-    root: "groupSurface"
-  },
-  // Plank header.
-  headerSurface: {
-    root: "groupSurface"
-  },
-  // Toolbars, table/sheet headers, etc.
-  toolbarSurface: {
-    root: "groupSurface"
-  },
-  // Forms, cards, etc.
-  cardSurface: {
-    root: "groupSurface"
-  },
-  // Secondary aliases.
-  textInputSurface: {
-    root: "textInputSurfaceBase",
-    group: "textInputSurfaceGroup",
-    modal: "textInputSurfaceModal"
-  },
-  inputSurface: {
-    root: "inputSurfaceBase",
-    group: "inputSurfaceGroup",
-    modal: "inputSurfaceModal"
-  },
-  hoverSurface: {
-    root: "hoverSurfaceBase",
-    group: "hoverSurfaceGroup",
-    modal: "hoverSurfaceModal"
-  },
-  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
-  attention: {
-    root: "focusSurface"
-  },
-  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
-  // TODO(burdon): Review tokens.
-  currentRelated: {
-    root: "modalSurface"
-  },
-  // Borders and dividers.
-  separator: {
-    root: "separatorBase",
-    group: "separatorGroup",
-    modal: "separatorModal"
-  }
-};
-var systemAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values]) => {
-  Object.entries(values).forEach(([key, sememe]) => {
-    const record = getMapValue(aliases, sememe, () => ({}));
-    const list = getMapValue(record, key, () => []);
-    list.push(alias);
-  });
-  return aliases;
-}, {});
-
-// src/config/tokens/alias-colors.ts
-var groupAliases = [
-  "groupSurface",
-  ...systemAliases.groupSurface?.root ?? []
-];
-var modalAliases = [
-  "modalSurface",
-  ...systemAliases.modalSurface?.root ?? []
-];
-var aliasColors = {
-  conditions: {
-    root: [
-      ":root, .dark"
-    ],
-    group: [
-      [
-        ".sidebar-surface, .dark .sidebar-surface",
-        ...groupAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
-      ].join(", ")
-    ],
-    modal: [
-      [
-        ".modal-surface, .dark .modal-surface",
-        ...modalAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`)
-      ].join(", ")
-    ],
-    gridFocusStack: [
-      '[data-grid-focus-indicator-variant="stack"]'
-    ]
-  },
-  aliases: {
-    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
-    ...sheetAliases,
-    ...systemAliases,
-    ...valenceAliases
-  },
-  namespace: "dx-"
-};
-
-// src/config/tokens/lengths.ts
-var lengthsFacet = {
-  physical: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    series: {
-      line: {
-        root: {
-          unit: "px",
-          initial: 0,
-          slope: 1
-        }
-      },
-      // "gap"
-      lacuna: {
-        root: {
-          unit: "rem",
-          initial: 0,
-          slope: 0.125
-        }
-      }
-    }
-  },
-  semantic: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    sememes: {
-      noLine: {
-        root: [
-          "line",
-          0
-        ]
-      },
-      hairLine: {
-        root: [
-          "line",
-          1
-        ]
-      },
-      thickLine: {
-        root: [
-          "line",
-          2
-        ]
-      },
-      trimXs: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      trimSm: {
-        root: [
-          "lacuna",
-          4
-        ]
-      },
-      trimMd: {
-        root: [
-          "lacuna",
-          6
-        ]
-      },
-      trimLg: {
-        root: [
-          "lacuna",
-          12
-        ]
-      },
-      inputFine: {
-        root: [
-          "lacuna",
-          3
-        ]
-      },
-      inputCoarse: {
-        root: [
-          "lacuna",
-          4
-        ]
-      }
-    }
-  },
-  alias: {
-    namespace: "dx-",
-    conditions: {
-      fine: [
-        ":root, .density-fine"
-      ],
-      coarse: [
-        ".density-coarse"
-      ],
-      flush: [
-        ".density-flush"
-      ],
-      gridFocusStack: [
-        '[data-grid-focus-indicator-variant="stack"]'
-      ]
-    },
-    aliases: {
-      noLine: {
-        fine: [
-          "focusOffset"
-        ]
-      },
-      hairLine: {
-        fine: [
-          "modalLine",
-          "landmarkLine",
-          "positionedLine",
-          "gridGap",
-          "gridFocusIndicatorWidth"
-        ]
-      },
-      thickLine: {
-        fine: [
-          "focusLine"
-        ],
-        gridFocusStack: [
-          "gridFocusIndicatorWidth"
-        ]
-      },
-      inputFine: {
-        fine: [
-          "iconButtonPadding"
-        ]
-      },
-      inputCoarse: {
-        coarse: [
-          "iconButtonPadding"
-        ]
-      },
-      trimXs: {
-        fine: [
-          "cardSpacingChrome",
-          "labelSpacingBlock",
-          "inputSpacingBlock"
-        ]
-      },
-      // TODO(burdon): Remove?
-      trimSm: {
-        fine: [
-          "cardSpacingInline",
-          "cardSpacingBlock",
-          "cardSpacingGap"
-        ]
-      },
-      trimMd: {
-        coarse: [
-          "cardSpacingInline",
-          "cardSpacingBlock",
-          "cardSpacingGap"
-        ]
-      }
-    }
+// src/fragments/density.ts
+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 maxSizesFacet = {
-  physical: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    series: {
-      size: {
-        root: {
-          unit: "rem",
-          initial: 0,
-          slope: 1
-        }
-      }
-    }
-  },
-  semantic: {
-    namespace: "dx-",
-    conditions: {
-      root: [
-        ":root"
-      ]
-    },
-    sememes: {
-      "prose-max-width": {
-        root: [
-          "size",
-          50
-        ]
-      },
-      "container-max-width": {
-        root: [
-          "size",
-          50
-        ]
-      },
-      "card-default-width": {
-        root: [
-          "size",
-          cardDefaultInlineSize
-        ]
-      },
-      "card-min-width": {
-        root: [
-          "size",
-          cardMinInlineSize
-        ]
-      },
-      "card-max-width": {
-        root: [
-          "size",
-          cardMaxInlineSize
-        ]
-      },
-      "card-min-height": {
-        root: [
-          "size",
-          cardMinBlockSize
-        ]
-      },
-      "card-max-height": {
-        root: [
-          "size",
-          cardMaxBlockSize
-        ]
-      }
-    }
+var densityBlockSize = (density = "md") => {
+  switch (density) {
+    case "lg":
+      return lgBlockSize;
+    case "sm":
+      return smBlockSize;
+    case "xs":
+      return xsBlockSize;
+    case "md":
+    default:
+      return mdBlockSize;
   }
 };
 
-// src/config/tokens/sememes-calls.ts
-var callsSememes = {
-  callActive: {
-    light: [
-      "green",
-      "500"
-    ],
-    dark: [
-      "green",
-      "500"
-    ]
-  },
-  callAlert: {
-    light: [
-      "rose",
-      "500"
-    ],
-    dark: [
-      "rose",
-      "500"
-    ]
-  }
-};
+// src/fragments/disabled.ts
+var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
+var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
 
-// src/config/tokens/sememes-codemirror.ts
-var codemirrorSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  cmCodeblock: {
-    light: [
-      "neutral",
-      "500/.1"
-    ],
-    dark: [
-      "neutral",
-      "500/.1"
-    ]
-  },
-  cmActiveLine: {
-    light: [
-      "neutral",
-      "200/.5"
-    ],
-    dark: [
-      "neutral",
-      "800/.5"
-    ]
-  },
-  cmSeparator: {
-    light: [
-      "primary",
-      500
-    ],
-    dark: [
-      "primary",
-      500
-    ]
-  },
-  cmCursor: {
-    light: [
-      "neutral",
-      900
-    ],
-    dark: [
-      "neutral",
-      100
-    ]
-  },
-  cmSelection: {
-    light: [
-      "primary",
-      "400/.5"
-    ],
-    dark: [
-      "primary",
-      "600/.5"
-    ]
-  },
-  cmFocusedSelection: {
-    light: [
-      "primary",
-      400
-    ],
-    dark: [
-      "primary",
-      600
-    ]
-  },
-  cmHighlight: {
-    light: [
-      "neutral",
-      950
-    ],
-    dark: [
-      "neutral",
-      50
-    ]
-  },
-  cmHighlightSurface: {
-    light: [
-      "sky",
-      200
-    ],
-    dark: [
-      "cyan",
-      600
-    ]
-  },
-  // TODO(burdon): Factor out defs in common with sheet.
-  cmCommentText: {
-    light: [
-      "neutral",
-      50
-    ],
-    dark: [
-      "neutral",
-      950
-    ]
-  },
-  cmCommentSurface: {
-    light: [
-      "amber",
-      700
-    ],
-    dark: [
-      "amber",
-      200
-    ]
-  }
-};
+// src/fragments/hover.ts
+var ghostHover = "hover:bg-hover-surface";
+var ghostFocusWithin = "focus-within:bg-hover-surface";
+var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
+var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
+var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
+var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
+var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
+var hoverableControlItem = "opacity-(--controls-opacity)";
 
-// src/config/tokens/semantic-colors.ts
-var semanticColors = {
-  conditions: {
-    light: [
-      ":root"
-    ],
-    dark: [
-      ".dark"
-    ]
-  },
-  sememes: {
-    // Define each set of sememes in its own file.
-    ...callsSememes,
-    ...codemirrorSememes,
-    ...hueSememes,
-    ...sheetSememes,
-    ...systemSememes
-  },
-  namespace: "dx-"
-};
+// src/fragments/text.ts
+var descriptionMessage = "text-description border border-dashed border-separator rounded-sm p-4";
 
-// src/config/tokens/tokens.ts
-var hues = Object.keys(huePalettes);
-var tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet
-};
-var adapterConfig = {
-  colors: {
-    facet: "colors",
-    disposition: "overwrite",
-    tokenization: "recursive"
-  },
-  borderWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  ringWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  ringOffsetWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  outlineWidth: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "omit-series"
-  },
-  spacing: {
-    facet: "lengths",
-    disposition: "extend",
-    tokenization: "keep-series"
-  }
-};
-var userDefaultTokenSet = {
-  colors: {
-    physical: {
-      definitions: {
-        series: {
-          neutral: physicalColors.definitions.series.neutral,
-          primary: physicalColors.definitions.series.primary
-        },
-        accompanyingSeries: physicalColors.definitions.accompanyingSeries
-      },
-      conditions: physicalColors.conditions,
-      series: {
-        neutral: physicalColors.series.neutral,
-        primary: physicalColors.series.primary
-      },
-      namespace: physicalColors.namespace
-    },
-    semantic: {
-      conditions: semanticColors.conditions,
-      sememes: systemSememes,
-      namespace: semanticColors.namespace
-    },
-    alias: {
-      conditions: aliasColors.conditions,
-      aliases: systemAliases,
-      namespace: aliasColors.namespace
-    }
+// src/util/elevation.ts
+var surfaceShadow = ({ elevation }) => [
+  elevation === "positioned" ? "shadow-sm" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
+];
+var surfaceZIndex = ({ level, elevation }) => {
+  switch (level) {
+    case "tooltip":
+      return elevation === "dialog" ? [
+        "z-[53]"
+      ] : elevation === "toast" ? [
+        "z-[43]"
+      ] : [
+        "z-50"
+      ];
+    case "menu":
+      return elevation === "dialog" ? [
+        "z-[52]"
+      ] : elevation === "toast" ? [
+        "z-[42]"
+      ] : [
+        "z-20"
+      ];
+    default:
+      return elevation === "dialog" ? [
+        "z-[51]"
+      ] : elevation === "toast" ? [
+        "z-[41]"
+      ] : [
+        "z-[1]"
+      ];
   }
 };
-var tokensTailwindConfig = adapter(tokenSet, adapterConfig);
-
-// src/config/tailwind.ts
-var { extend: extendTokens, ...overrideTokens } = tokensTailwindConfig;
-var tailwindConfig = ({ env = "production", content = [], extensions = [] }) => ({
-  darkMode: "class",
-  theme: {
-    // Configure fonts in theme.css and package.json.
-    fontFamily: {
-      body: [
-        "Inter Variable",
-        ...defaultConfig.theme.fontFamily.sans
-      ],
-      mono: [
-        "JetBrains Mono Variable",
-        ...defaultConfig.theme.fontFamily.mono
-      ]
-    },
-    extend: merge({
-      // Generates is-card-default-width, is-card-min-width, etc.
-      spacing: {
-        "prose-max-width": "var(--dx-prose-max-width)",
-        "container-max-width": "var(--dx-container-max-width)",
-        "card-default-width": "var(--dx-card-default-width)",
-        "card-min-width": "var(--dx-card-min-width)",
-        "card-max-width": "var(--dx-card-max-width)",
-        "card-min-height": "var(--dx-card-min-height)",
-        "card-max-height": "var(--dx-card-max-height)"
-      },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))"
-      },
-      borderRadius: {
-        none: "0",
-        sm: "0.25rem",
-        DEFAULT: "0.5rem",
-        md: "0.75rem",
-        lg: "1rem"
-      },
-      screens: {
-        "pointer-fine": {
-          raw: "(pointer: fine)"
-        },
-        "hover-hover": {
-          raw: "(hover: hover)"
-        },
-        "md": "768px",
-        "lg": "1024px"
-      },
-      fontSize: {
-        // Base size 16px
-        // Scale 1.125
-        "xs": [
-          "0.790rem",
-          {
-            lineHeight: "1rem"
-          }
-        ],
-        "sm": [
-          "0.889rem",
-          {
-            lineHeight: "1.25rem"
-          }
-        ],
-        "base": [
-          "1rem",
-          {
-            lineHeight: "1.5rem"
-          }
-        ],
-        "lg": [
-          "1.125rem",
-          {
-            lineHeight: "1.75rem"
-          }
-        ],
-        "xl": [
-          "1.266rem",
-          {
-            lineHeight: "1.75rem"
-          }
-        ],
-        "2xl": [
-          "1.424rem",
-          {
-            lineHeight: "2rem"
-          }
-        ],
-        "3xl": [
-          "1.602rem",
-          {
-            lineHeight: "2.25rem"
-          }
-        ],
-        "4xl": [
-          "1.802rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "5xl": [
-          "2.027rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "6xl": [
-          "2.281rem",
-          {
-            lineHeight: "2.5rem"
-          }
-        ],
-        "7xl": [
-          "2.566rem",
-          {
-            lineHeight: "2.75rem"
-          }
-        ],
-        "8xl": [
-          "2.887rem",
-          {
-            lineHeight: "3rem"
-          }
-        ],
-        "9xl": [
-          "3.247rem",
-          {
-            lineHeight: "3.25rem"
-          }
-        ]
-      },
-      boxShadow: {
-        "slider": "0 0 0 5px rgba(0, 0, 0, 0.3)"
-      },
-      transitionProperty: {
-        "max-height": "max-height"
-      },
-      transitionTimingFunction: {
-        "in-out-symmetric": "cubic-bezier(0.5, 0, 0.5, 1)"
-      },
-      keyframes: {
-        // Fade
-        "fade-in": {
-          from: {
-            opacity: 0
-          },
-          to: {
-            opacity: 1
-          }
-        },
-        "fade-out": {
-          from: {
-            opacity: 1
-          },
-          to: {
-            opacity: 0
-          }
-        },
-        // Popper chrome
-        "slide-down-and-fade": {
-          from: {
-            opacity: 1,
-            transform: "translateY(0)"
-          },
-          to: {
-            opacity: 0,
-            transform: "translateY(16px)"
-          }
-        },
-        "slide-left-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateX(-16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)"
-          }
-        },
-        "slide-up-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateY(16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateY(0)"
-          }
-        },
-        "slide-right-and-fade": {
-          from: {
-            opacity: 0,
-            transform: "translateX(16px)"
-          },
-          to: {
-            opacity: 1,
-            transform: "translateX(0)"
-          }
-        },
-        // Toast
-        "toast-hide": {
-          "0%": {
-            opacity: "1"
-          },
-          "100%": {
-            opacity: "0"
-          }
-        },
-        "toast-slide-in-right": {
-          "0%": {
-            transform: "translateX(calc(100% + 1rem))"
-          },
-          "100%": {
-            transform: "translateX(0)"
-          }
-        },
-        "toast-slide-in-bottom": {
-          "0%": {
-            transform: "translateY(calc(100% + 1rem))"
-          },
-          "100%": {
-            transform: "translateY(0)"
-          }
-        },
-        "toast-swipe-out": {
-          "0%": {
-            transform: "translateX(var(--radix-toast-swipe-end-x))"
-          },
-          "100%": {
-            transform: "translateX(calc(100% + 1rem))"
-          }
-        },
-        // Accordion
-        "slide-down": {
-          from: {
-            height: "0px"
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)"
-          }
-        },
-        "slide-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)"
-          },
-          to: {
-            height: "0px"
-          }
-        },
-        // Shimmer
-        "shimmer-loop": {
-          "100%": {
-            transform: "translateX(100%)"
-          }
-        },
-        // HALO
-        "halo-pulse": {
-          "0%": {
-            opacity: 0.3
-          },
-          "5%": {
-            opacity: 1
-          },
-          "100%": {
-            opacity: 0.3
-          }
-        },
-        // Progress
-        "progress-indeterminate": {
-          "0%": {
-            left: 0,
-            width: "0%"
-          },
-          "25%": {
-            left: "25%",
-            width: "50%"
-          },
-          "75%": {
-            left: "50%",
-            width: "100%"
-          },
-          "100%": {
-            left: "100%",
-            width: "0%"
-          }
-        },
-        // Border trail effect
-        "trail": {
-          to: {
-            "offset-distance": "100%"
-          }
-        },
-        "trail-offset": {
-          "0%": {
-            "offset-distance": "50%"
-          },
-          "100%": {
-            "offset-distance": "150%"
-          }
-        }
-      },
-      animation: {
-        // Fade
-        "fade-in": "fade-in 200ms ease-out",
-        "fade-out": "fade-out 400ms ease-out",
-        // Popper chrome
-        "slide-down-and-fade": "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-left-and-fade": "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-up-and-fade": "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "slide-right-and-fade": "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        // Toast
-        "toast-hide": "toast-hide 100ms ease-in forwards",
-        "toast-slide-in-right": "toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-slide-in-bottom": "toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        "toast-swipe-out": "toast-swipe-out 100ms ease-out forwards",
-        // Accordion
-        "slide-down": "slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        "slide-up": "slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        // Border trail effect
-        "trail": "trail 6s linear infinite",
-        "trail-offset": "trail-offset 6s linear infinite",
-        // Progress effects
-        "spin": "spin 1.5s linear infinite",
-        "spin-slow": "spin 3s linear infinite",
-        "shimmer": "shimmer-loop 2s infinite",
-        "halo-pulse": "halo-pulse 2s ease-out infinite",
-        "progress-indeterminate": "progress-indeterminate 2s ease-out infinite",
-        "progress-linear": "progress-linear 2s ease-out infinite"
-      }
-    }, extendTokens, ...extensions),
-    ...overrideTokens,
-    colors: {
-      ...overrideTokens.colors,
-      inherit: "inherit",
-      current: "currentColor",
-      transparent: "transparent",
-      black: "black",
-      white: "white"
-    }
-  },
-  plugins: [
-    tailwindcssContainerQueries,
-    tailwindcssForms,
-    tailwindcssLogical,
-    tailwindcssRadix(),
-    // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar({
-      nocompatible: true,
-      preferredStrategy: "pseudoelements"
-    })
-  ],
-  ...env === "development" && {
-    mode: "jit"
-  },
-  content,
-  future: {
-    hoverOnlyWhenSupported: true
-  }
-});
 
 // src/util/hash-styles.ts
-var neutralColor = {
+var neutral = {
   hue: "neutral",
-  text: "text-neutralFill",
-  icon: "text-neutralSurfaceText",
-  bg: "bg-neutralFill",
-  surface: "bg-neutralSurface",
-  border: "border-neutralFill"
+  fill: "bg-neutral-fill",
+  surface: "bg-neutral-surface",
+  foreground: "text-neutral-foreground",
+  text: "text-neutral-text",
+  border: "border-neutral-border"
 };
 var styles = [
+  {
+    hue: "red",
+    fill: "bg-red-fill",
+    surface: "bg-red-surface",
+    foreground: "text-red-foreground",
+    text: "text-red-text",
+    border: "border-red-border"
+  },
   {
     hue: "orange",
-    text: "text-orangeFill",
-    icon: "text-orangeSurfaceText",
-    bg: "bg-orangeFill",
-    surface: "bg-orangeSurface",
-    border: "border-orangeFill"
+    fill: "bg-orange-fill",
+    surface: "bg-orange-surface",
+    foreground: "text-orange-foreground",
+    text: "text-orange-text",
+    border: "border-orange-border"
   },
   {
     hue: "amber",
-    text: "text-amberFill",
-    icon: "text-amberSurfaceText",
-    bg: "bg-amberFill",
-    surface: "bg-amberSurface",
-    border: "border-amberFill"
+    fill: "bg-amber-fill",
+    surface: "bg-amber-surface",
+    foreground: "text-amber-foreground",
+    text: "text-amber-text",
+    border: "border-amber-border"
   },
   {
     hue: "yellow",
-    text: "text-yellowFill",
-    icon: "text-yellowSurfaceText",
-    bg: "bg-yellowFill",
-    surface: "bg-yellowSurface",
-    border: "border-yellowFill"
+    fill: "bg-yellow-fill",
+    surface: "bg-yellow-surface",
+    foreground: "text-yellow-foreground",
+    text: "text-yellow-text",
+    border: "border-yellow-border"
   },
   {
     hue: "lime",
-    text: "text-limeFill",
-    icon: "text-limeSurfaceText",
-    bg: "bg-limeFill",
-    surface: "bg-limeSurface",
-    border: "border-limeFill"
+    fill: "bg-lime-fill",
+    surface: "bg-lime-surface",
+    foreground: "text-lime-foreground",
+    text: "text-lime-text",
+    border: "border-lime-border"
   },
   {
     hue: "green",
-    text: "text-greenFill",
-    icon: "text-greenSurfaceText",
-    bg: "bg-greenFill",
-    surface: "bg-greenSurface",
-    border: "border-greenFill"
+    fill: "bg-green-fill",
+    surface: "bg-green-surface",
+    foreground: "text-green-foreground",
+    text: "text-green-text",
+    border: "border-green-border"
   },
   {
     hue: "emerald",
-    text: "text-emeraldFill",
-    icon: "text-emeraldSurfaceText",
-    bg: "bg-emeraldFill",
-    surface: "bg-emeraldSurface",
-    border: "border-emeraldFill"
+    fill: "bg-emerald-fill",
+    surface: "bg-emerald-surface",
+    foreground: "text-emerald-foreground",
+    text: "text-emerald-text",
+    border: "border-emerald-border"
   },
   {
     hue: "teal",
-    text: "text-tealFill",
-    icon: "text-tealSurfaceText",
-    bg: "bg-tealFill",
-    surface: "bg-tealSurface",
-    border: "border-tealFill"
+    fill: "bg-teal-fill",
+    surface: "bg-teal-surface",
+    foreground: "text-teal-foreground",
+    text: "text-teal-text",
+    border: "border-teal-border"
   },
   {
     hue: "cyan",
-    text: "text-cyanFill",
-    icon: "text-cyanSurfaceText",
-    bg: "bg-cyanFill",
-    surface: "bg-cyanSurface",
-    border: "border-cyanFill"
+    fill: "bg-cyan-fill",
+    surface: "bg-cyan-surface",
+    foreground: "text-cyan-foreground",
+    text: "text-cyan-text",
+    border: "border-cyan-border"
   },
   {
     hue: "sky",
-    text: "text-skyFill",
-    icon: "text-skySurfaceText",
-    bg: "bg-skyFill",
-    surface: "bg-skySurface",
-    border: "border-skyFill"
+    fill: "bg-sky-fill",
+    surface: "bg-sky-surface",
+    foreground: "text-sky-foreground",
+    text: "text-sky-text",
+    border: "border-sky-border"
+  },
+  {
+    hue: "blue",
+    fill: "bg-blue-fill",
+    surface: "bg-blue-surface",
+    foreground: "text-blue-foreground",
+    text: "text-blue-text",
+    border: "border-blue-border"
   },
   {
     hue: "indigo",
-    text: "text-indigoFill",
-    icon: "text-indigoSurfaceText",
-    bg: "bg-indigoFill",
-    surface: "bg-indigoSurface",
-    border: "border-indigoFill"
+    fill: "bg-indigo-fill",
+    surface: "bg-indigo-surface",
+    foreground: "text-indigo-foreground",
+    text: "text-indigo-text",
+    border: "border-indigo-border"
   },
   {
     hue: "violet",
-    text: "text-violetFill",
-    icon: "text-violetSurfaceText",
-    bg: "bg-violetFill",
-    surface: "bg-violetSurface",
-    border: "border-violetFill"
+    fill: "bg-violet-fill",
+    surface: "bg-violet-surface",
+    foreground: "text-violet-foreground",
+    text: "text-violet-text",
+    border: "border-violet-border"
   },
   {
     hue: "purple",
-    text: "text-purpleFill",
-    icon: "text-purpleSurfaceText",
-    bg: "bg-purpleFill",
-    surface: "bg-purpleSurface",
-    border: "border-purpleFill"
+    fill: "bg-purple-fill",
+    surface: "bg-purple-surface",
+    foreground: "text-purple-foreground",
+    text: "text-purple-text",
+    border: "border-purple-border"
   },
   {
     hue: "fuchsia",
-    text: "text-fuchsiaFill",
-    icon: "text-fuchsiaSurfaceText",
-    bg: "bg-fuchsiaFill",
-    surface: "bg-fuchsiaSurface",
-    border: "border-fuchsiaFill"
+    fill: "bg-fuchsia-fill",
+    surface: "bg-fuchsia-surface",
+    foreground: "text-fuchsia-foreground",
+    text: "text-fuchsia-text",
+    border: "border-fuchsia-border"
   },
   {
-    hue: "rose",
-    text: "text-roseFill",
-    icon: "text-roseSurfaceText",
-    bg: "bg-roseFill",
-    surface: "bg-roseSurface",
-    border: "border-roseFill"
+    hue: "pink",
+    fill: "bg-pink-fill",
+    surface: "bg-pink-surface",
+    foreground: "text-pink-foreground",
+    text: "text-pink-text",
+    border: "border-pink-border"
   },
   {
-    hue: "pink",
-    text: "text-pinkFill",
-    icon: "text-pinkSurfaceText",
-    bg: "bg-pinkFill",
-    surface: "bg-pinkSurface",
-    border: "border-pinkFill"
+    hue: "rose",
+    fill: "bg-rose-fill",
+    surface: "bg-rose-surface",
+    foreground: "text-rose-foreground",
+    text: "text-rose-text",
+    border: "border-rose-border"
   }
 ];
+var palette = {
+  neutral,
+  hues: styles
+};
 var getStyles = (hue) => {
-  return styles.find((color) => color.hue === hue) || neutralColor;
+  return styles.find((color) => color.hue === hue) || neutral;
+};
+var getHashStyles = (id) => {
+  return getStyles(getHashHue(id));
 };
 var getHashHue = (id) => {
   return id ? styles[getHash(id) % styles.length].hue : "neutral";
 };
-var getHashStyles = (id) => {
-  const hue = getHashHue(id);
-  return getStyles(hue);
-};
 var getHash = (id) => id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
 
 // src/util/mx.ts
-import { extendTailwindMerge, validators as validators2 } from "tailwind-merge";
-
-// src/util/withLogical.ts
-import { mergeConfigs, validators } from "tailwind-merge";
-var getLength = () => [
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getLengthWithAuto = () => [
-  "auto",
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getLengthWithEmpty = () => [
-  "",
-  validators.isLength,
-  validators.isArbitraryLength
-];
-var getAny = () => [
-  validators.isAny
-];
-var getRounded = () => [
-  "none",
-  "",
-  validators.isTshirtSize,
-  "full",
-  validators.isArbitraryLength
-];
-var classGroupsConfig = {
-  float: [
-    {
-      float: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  clear: [
-    {
-      clear: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  resize: [
-    {
-      resize: [
-        "block ",
-        "inline"
-      ]
-    }
-  ],
-  "text-alignment": [
-    {
-      text: [
-        "start",
-        "end"
-      ]
-    }
-  ],
-  "logical.overscroll-b": [
-    {
-      "overscroll-b": [
-        "auto ",
-        "contain",
-        "auto"
-      ]
-    }
-  ],
-  "logical.overscroll-i": [
-    {
-      "overscroll-b": [
-        "auto ",
-        "contain",
-        "auto"
-      ]
-    }
-  ],
-  "logical.bs": [
-    {
-      bs: getLength()
-    }
-  ],
-  "logical.min-bs": [
-    {
-      "min-bs": getAny()
-    }
-  ],
-  "logical.max-bs": [
-    {
-      "max-bs": getAny()
-    }
-  ],
-  "logical.is": [
-    {
-      is: getLength()
-    }
-  ],
-  "logical.min-is": [
-    {
-      "min-is": getAny()
-    }
-  ],
-  "logical.max-is": [
-    {
-      "max-is": getAny()
-    }
-  ],
-  "logical.mlb": [
-    {
-      mlb: getAny()
-    }
-  ],
-  "logical.mli": [
-    {
-      mli: getAny()
-    }
-  ],
-  "logical.mbs": [
-    {
-      mbs: getAny()
-    }
-  ],
-  "logical.mbe": [
-    {
-      mbe: getAny()
-    }
-  ],
-  "logical.mis": [
-    {
-      mis: getAny()
-    }
-  ],
-  "logical.mie": [
-    {
-      mie: getAny()
-    }
-  ],
-  "logical.plb": [
-    {
-      plb: getAny()
-    }
-  ],
-  "logical.pli": [
-    {
-      pli: getAny()
-    }
-  ],
-  "logical.pbs": [
-    {
-      pbs: getAny()
-    }
-  ],
-  "logical.pbe": [
-    {
-      pbe: getAny()
-    }
-  ],
-  "logical.pis": [
-    {
-      pis: getAny()
-    }
-  ],
-  "logical.pie": [
-    {
-      pie: getAny()
-    }
-  ],
-  "logical.space-b": [
-    {
-      "space-b": getLength()
-    }
-  ],
-  "logical.space-i": [
-    {
-      "space-i": getLength()
-    }
-  ],
-  "logical.inset-block": [
-    {
-      "inset-block": getLengthWithAuto()
-    }
-  ],
-  "logical.inset-inline": [
-    {
-      "inset-inline": getLengthWithAuto()
-    }
-  ],
-  "logical.block-start": [
-    {
-      "block-start": getLengthWithAuto()
-    }
-  ],
-  "logical.block-end": [
-    {
-      "block-end": getLengthWithAuto()
-    }
-  ],
-  "logical.inline-start": [
-    {
-      "inline-start": getLengthWithAuto()
-    }
-  ],
-  "logical.inline-end": [
-    {
-      "inline-end": getLengthWithAuto()
-    }
-  ],
-  "logical.border-li": [
-    {
-      "border-li": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-lb": [
-    {
-      "border-lb": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-bs": [
-    {
-      "border-bs": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-be": [
-    {
-      "border-be": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-is": [
-    {
-      "border-is": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-ie": [
-    {
-      "border-ie": getLengthWithEmpty()
-    }
-  ],
-  "logical.border-color-bs": [
-    {
-      "border-bs": getAny()
-    }
-  ],
-  "logical.border-color-be": [
-    {
-      "border-be": getAny()
-    }
-  ],
-  "logical.border-color-is": [
-    {
-      "border-is": getAny()
-    }
-  ],
-  "logical.border-color-ie": [
-    {
-      "border-ie": getAny()
-    }
-  ],
-  "logical.rounded-bs": [
-    {
-      "rounded-bs": getRounded()
-    }
-  ],
-  "logical.rounded-be": [
-    {
-      "rounded-be": getRounded()
-    }
-  ],
-  "logical.rounded-is": [
-    {
-      "rounded-is": getRounded()
-    }
-  ],
-  "logical.rounded-ie": [
-    {
-      "rounded-ie": getRounded()
-    }
-  ],
-  "logical.rounded-ss": [
-    {
-      "rounded-ss": getRounded()
-    }
-  ],
-  "logical.rounded-se": [
-    {
-      "rounded-se": getRounded()
-    }
-  ],
-  "logical.rounded-es": [
-    {
-      "rounded-es": getRounded()
-    }
-  ],
-  "logical.rounded-ee": [
-    {
-      "rounded-ee": getRounded()
-    }
-  ],
-  "logical.divide-b": [
-    {
-      "divide-b": getLengthWithEmpty()
-    }
-  ],
-  "logical.divide-i": [
-    {
-      "divide-i": getLengthWithEmpty()
-    }
-  ]
-};
-var withLogical = (prevConfig) => {
-  return mergeConfigs(prevConfig, {
-    extend: {
-      classGroups: classGroupsConfig,
-      conflictingClassGroups: {
-        "inset-block": [
-          "logical.block-start",
-          "logical.block-end"
-        ],
-        "inset-inline": [
-          "logical.inline-start",
-          "logical.inline-end"
-        ],
-        p: [
-          "logical.plb",
-          "logical.pli",
-          "logical.pbs",
-          "logical.pbe",
-          "logical.pis",
-          "logical.pie"
-        ],
-        pli: [
-          "logical.pis",
-          "logical.pie"
-        ],
-        plb: [
-          "logical.pbs",
-          "logical.pbe"
-        ],
-        m: [
-          "logical.mlb",
-          "logical.mli",
-          "logical.mbs",
-          "logical.mbe",
-          "logical.mis",
-          "logical.mie"
-        ],
-        mli: [
-          "logical.mis",
-          "logical.mie"
-        ],
-        mlb: [
-          "logical.mbs",
-          "logical.mbe"
-        ],
-        overscroll: [
-          "overscroll-i",
-          "overscroll-b"
-        ],
-        rounded: [
-          "logical.rounded-bs",
-          "logical.rounded-be",
-          "logical.rounded-is",
-          "logical.rounded-ie",
-          "logical.rounded-ss",
-          "logical.rounded-se",
-          "logical.rounded-es",
-          "logical.rounded-ee"
-        ],
-        "logical.rounded-bs": [
-          "logical.rounded-ss",
-          "logical.rounded-se"
-        ],
-        "logical.rounded-be": [
-          "logical.rounded-es",
-          "logical.rounded-ee"
-        ],
-        "logical.rounded-is": [
-          "logical.rounded-ss",
-          "logical.rounded-es"
-        ],
-        "logical.rounded-ie": [
-          "logical.rounded-ee",
-          "logical.rounded-se"
-        ],
-        "logical.border-li": [
-          "logical.border-is",
-          "logical.border-ie"
-        ],
-        "logical.border-lb": [
-          "logical.border-bs",
-          "logical.border-be"
-        ],
-        "border-color": [
-          "logical.border-color-bs",
-          "logical.border-color-be",
-          "logical.border-color-is",
-          "logical.border-color-ie"
-        ],
-        border: [
-          "logical.border-bs",
-          "logical.border-be",
-          "logical.border-is",
-          "logical.border-ie"
-        ]
-      }
-    }
-  });
-};
-
-// src/util/mx.ts
+import { extendTailwindMerge, validators } from "tailwind-merge";
 var mx = extendTailwindMerge({
   extend: {
     classGroups: {
@@ -2194,11 +314,12 @@ var mx = extendTailwindMerge({
         "font-extrabold",
         "font-black",
         // Arbitrary numbers
-        validators2.isArbitraryNumber
+        validators.isArbitraryNumber
       ],
       density: [
-        "density-fine",
-        "density-coarse"
+        "dx-density-sm",
+        "dx-density-md",
+        "dx-density-lg"
       ],
       "dx-focus-ring": [
         "dx-focus-ring",
@@ -2218,1291 +339,251 @@ var mx = extendTailwindMerge({
       ]
     }
   }
-}, withLogical);
-
-// src/styles/components/anchored-overflow.ts
-var anchoredOverflowRoot = (_props, ...etc) => mx("overflow-anchored overflow-auto", ...etc);
-var anchoredOverflowAnchor = (_props, ...etc) => mx("overflow-anchor is-px bs-px", ...etc);
-var anchoredOverflowTheme = {
-  root: anchoredOverflowRoot,
-  anchor: anchoredOverflowAnchor
-};
-
-// src/styles/fragments/density.ts
-var coarseBlockSize = "min-bs-[2.5rem]";
-var coarseTextPadding = "pli-3";
-var coarseButtonPadding = "pli-4";
-var coarseDimensions = `${coarseBlockSize} ${coarseTextPadding}`;
-var coarseButtonDimensions = `${coarseBlockSize} ${coarseButtonPadding}`;
-var fineBlockSize = "min-bs-[2.5rem] pointer-fine:min-bs-[2rem]";
-var fineTextPadding = "pli-2";
-var fineButtonPadding = "pli-2.5";
-var fineDimensions = `${fineBlockSize} ${fineTextPadding}`;
-var fineButtonDimensions = `${fineBlockSize} ${fineButtonPadding}`;
-var densityBlockSize = (density = "coarse") => density === "fine" ? fineBlockSize : coarseBlockSize;
-
-// src/styles/fragments/disabled.ts
-var staticDisabled = "opacity-40 cursor-not-allowed shadow-none";
-var dataDisabled = "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed";
-
-// src/styles/fragments/dimension.ts
-var textBlockWidth = "is-full mli-auto max-is-[--text-content]";
+});
 
-// src/styles/fragments/elevation.ts
-var contentShadow = (_) => [
-  "shadow-none"
-];
-var surfaceShadow = ({ elevation }) => [
-  elevation === "positioned" ? "shadow" : elevation === "dialog" || elevation === "toast" ? "shadow-md" : "shadow-none"
-];
-var surfaceZIndex = ({ level, elevation }) => {
-  switch (level) {
-    case "tooltip":
-      return elevation === "dialog" ? [
-        "z-[53]"
-      ] : elevation === "toast" ? [
-        "z-[43]"
-      ] : [
-        "z-30"
-      ];
-    case "menu":
-      return elevation === "dialog" ? [
-        "z-[52]"
-      ] : elevation === "toast" ? [
-        "z-[42]"
-      ] : [
-        "z-20"
-      ];
-    default:
-      return elevation === "dialog" ? [
-        "z-[51]"
-      ] : elevation === "toast" ? [
-        "z-[41]"
-      ] : [
-        "z-[1]"
-      ];
+// src/util/size.ts
+var sizeMap = {
+  0: {
+    w: "w-0",
+    h: "h-0"
+  },
+  px: {
+    w: "w-px",
+    h: "h-px"
+  },
+  0.5: {
+    w: "w-0.5",
+    h: "h-0.5"
+  },
+  1: {
+    w: "w-1",
+    h: "h-1"
+  },
+  1.5: {
+    w: "w-1.5",
+    h: "h-1.5"
+  },
+  2: {
+    w: "w-2",
+    h: "h-2"
+  },
+  2.5: {
+    w: "w-2.5",
+    h: "h-2.5"
+  },
+  3: {
+    w: "w-3",
+    h: "h-3"
+  },
+  3.5: {
+    w: "w-3.5",
+    h: "h-3.5"
+  },
+  4: {
+    w: "w-4",
+    h: "h-4"
+  },
+  5: {
+    w: "w-5",
+    h: "h-5"
+  },
+  6: {
+    w: "w-6",
+    h: "h-6"
+  },
+  7: {
+    w: "w-7",
+    h: "h-7"
+  },
+  8: {
+    w: "w-8",
+    h: "h-8"
+  },
+  9: {
+    w: "w-9",
+    h: "h-9"
+  },
+  10: {
+    w: "w-10",
+    h: "h-10"
+  },
+  11: {
+    w: "w-11",
+    h: "h-11"
+  },
+  12: {
+    w: "w-12",
+    h: "h-12"
+  },
+  14: {
+    w: "w-14",
+    h: "h-14"
+  },
+  16: {
+    w: "w-16",
+    h: "h-16"
+  },
+  20: {
+    w: "w-20",
+    h: "h-20"
+  },
+  24: {
+    w: "w-24",
+    h: "h-24"
+  },
+  28: {
+    w: "w-28",
+    h: "h-28"
+  },
+  32: {
+    w: "w-32",
+    h: "h-32"
+  },
+  36: {
+    w: "w-36",
+    h: "h-36"
+  },
+  40: {
+    w: "w-40",
+    h: "h-40"
+  },
+  44: {
+    w: "w-44",
+    h: "h-44"
+  },
+  48: {
+    w: "w-48",
+    h: "h-48"
+  },
+  52: {
+    w: "w-52",
+    h: "h-52"
+  },
+  56: {
+    w: "w-56",
+    h: "h-56"
+  },
+  60: {
+    w: "w-60",
+    h: "h-60"
+  },
+  64: {
+    w: "w-64",
+    h: "h-64"
+  },
+  72: {
+    w: "w-72",
+    h: "h-72"
+  },
+  80: {
+    w: "w-80",
+    h: "h-80"
+  },
+  96: {
+    w: "w-96",
+    h: "h-96"
   }
 };
-
-// src/styles/fragments/focus.ts
-var focusRing = "dx-focus-ring";
-var dropRing = "ring-1 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-var dropRingInner = "before:z-[1] before:absolute before:inset-0 before:ring-1 before:ring-inset before:ring-primary-350 before:dark:ring-primary-450";
-var subduedFocus = "focus:outline-none focus-visible:outline-none focus:ring-0 ring-0 focus:border-0 border-0";
-var staticFocusRing = "ring-2 ring-offset-0 ring-primary-350 ring-offset-white dark:ring-primary-450 dark:ring-offset-black";
-
-// src/styles/fragments/group.ts
-var group = (props) => [
-  props.elevation === "base" ? "bg-transparent border border-separator" : "bg-modalSurface",
-  surfaceShadow(props)
-];
-
-// src/styles/fragments/hover.ts
-var hoverColors = "transition-colors duration-100 linear hover:bg-hoverSurface";
-var ghostHover = "hover:bg-hoverSurface";
-var ghostFocusWithin = "focus-within:bg-hoverSurface";
-var subtleHover = "hover:bg-hoverOverlay";
-var hoverableControls = "[--controls-opacity:1] hover-hover:[--controls-opacity:0] hover-hover:hover:[--controls-opacity:1]";
-var groupHoverControlItemWithTransition = "transition-opacity duration-200 opacity-0 group-hover:opacity-100";
-var hoverableFocusedKeyboardControls = "focus-visible:[--controls-opacity:1]";
-var hoverableFocusedWithinControls = "focus-within:[--controls-opacity:1]";
-var hoverableFocusedControls = "focus:[--controls-opacity:1]";
-var hoverableOpenControlItem = "hover-hover:aria-[expanded=true]:[--controls-opacity:1]";
-var hoverableControlItem = "opacity-[--controls-opacity]";
-var hoverableControlItemTransition = "transition-opacity duration-200";
-var staticHoverableControls = "hover-hover:[--controls-opacity:1]";
-
-// src/styles/fragments/layout.ts
-var bounceLayout = "fixed inset-0 z-0 overflow-auto overscroll-auto";
-var fixedInsetFlexLayout = "flex flex-col fixed inset-0 overflow-hidden overscroll-none";
-
-// src/styles/fragments/motion.ts
-var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slide-down-and-fade data-[side=right]:animate-slide-left-and-fade data-[side=bottom]:animate-slide-up-and-fade data-[side=left]:animate-slide-right-and-fade";
-
-// src/styles/fragments/ornament.ts
-var separatorBorderColor = "border-separator";
-var subduedSeparatorBorderColor = "border-subduedSeparator";
-var inlineSeparator = "self-stretch border-ie mli-1";
-var blockSeparator = "self-stretch border-be mlb-1";
-
-// src/styles/fragments/selected.ts
-var ghostSelectedCurrent = [
-  ghostHover,
-  "aria-[current]:bg-inputSurface hover:aria-[current]:bg-hoverSurface",
-  "aria-selected:bg-primary-100 dark:aria-selected:bg-primary-850 hover:aria-selected:bg-primary-150 hover:dark:aria-selected:bg-primary-800",
-  "aria-[current]:aria-selected:bg-primary-200 dark:aria-[current]:aria-selected:bg-primary-750 hover:aria-[current]:aria-selected:bg-primary-200 hover:dark:aria-[current]:aria-selected:bg-primary-750"
-];
-var ghostHighlighted = "data-[highlighted]:bg-primary-100 dark:data-[highlighted]:bg-primary-600 hover:data-[highlighted]:bg-primary-150 hover:dark:data-[highlighted]:bg-primary-500";
-var ghostSelectedTrackingInterFromNormal = "tracking-[0.0092em]";
-var ghostSelected = "aria-selected:bg-baseSurface aria-selected:text-accentText hover:aria-selected:text-accentTextHover aria-selected:font-semibold aria-selected:tracking-normal transition-[color,font-variation-settings,letter-spacing]";
-var ghostSelectedContainerMd = "@md:aria-selected:bg-baseSurface @md:aria-selected:text-accentText @md:hover:aria-selected:text-accentTextHover @md:aria-selected:font-semibold @md:aria-selected:tracking-normal @md:transition-[color,font-variation-settings,letter-spacing]";
-var staticGhostSelectedCurrent = ({ current, selected }) => [
-  current && selected ? "bg-primary-200 dark:bg-primary-750 hover:bg-primary-200 hover:dark:bg-primary-750" : current ? "bg-inputSurface hover:bg-hoverSurface" : selected ? "bg-primary-100 dark:bg-primary-850 hover:bg-primary-150 hover:dark:bg-primary-800" : ghostHover
-];
-var staticGhostSelected = ({ selected }) => selected ? [
-  "bg-primary-200 dark:bg-primary-750"
-] : [];
-
-// src/styles/fragments/shimmer.ts
-var shimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
-var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
-
-// src/styles/fragments/surface.ts
-var baseSurface = "base-surface";
-var sidebarSurface = "sidebar-surface backdrop-blur-md dark:backdrop-blur-lg";
-var sidebarBorder = "border-separator";
-var activeSurface = "base-surface";
-var groupBorder = "border-separator";
-var modalSurface = "modal-surface backdrop-blur-md";
-var attentionSurface = "attention-surface";
-var accentSurface = "bg-accentSurface text-accentSurfaceText";
-
-// src/styles/fragments/size.ts
-var sizeWidthMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "is-0"
-  ],
-  [
-    "px",
-    "is-px"
-  ],
-  [
-    0.5,
-    "is-0.5"
-  ],
-  [
-    1,
-    "is-1"
-  ],
-  [
-    1.5,
-    "is-1.5"
-  ],
-  [
-    2,
-    "is-2"
-  ],
-  [
-    2.5,
-    "is-2.5"
-  ],
-  [
-    3,
-    "is-3"
-  ],
-  [
-    3.5,
-    "is-3.5"
-  ],
-  [
-    4,
-    "is-4"
-  ],
-  [
-    5,
-    "is-5"
-  ],
-  [
-    6,
-    "is-6"
-  ],
-  [
-    7,
-    "is-7"
-  ],
-  [
-    8,
-    "is-8"
-  ],
-  [
-    9,
-    "is-9"
-  ],
-  [
-    10,
-    "is-10"
-  ],
-  [
-    11,
-    "is-11"
-  ],
-  [
-    12,
-    "is-12"
-  ],
-  [
-    14,
-    "is-14"
-  ],
-  [
-    16,
-    "is-16"
-  ],
-  [
-    20,
-    "is-20"
-  ],
-  [
-    24,
-    "is-24"
-  ],
-  [
-    28,
-    "is-28"
-  ],
-  [
-    32,
-    "is-32"
-  ],
-  [
-    36,
-    "is-36"
-  ],
-  [
-    40,
-    "is-40"
-  ],
-  [
-    44,
-    "is-44"
-  ],
-  [
-    48,
-    "is-48"
-  ],
-  [
-    52,
-    "is-52"
-  ],
-  [
-    56,
-    "is-56"
-  ],
-  [
-    60,
-    "is-60"
-  ],
-  [
-    64,
-    "is-64"
-  ],
-  [
-    72,
-    "is-72"
-  ],
-  [
-    80,
-    "is-80"
-  ],
-  [
-    96,
-    "is-96"
-  ]
-]);
-var sizeHeightMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "bs-0"
-  ],
-  [
-    "px",
-    "bs-px"
-  ],
-  [
-    0.5,
-    "bs-0.5"
-  ],
-  [
-    1,
-    "bs-1"
-  ],
-  [
-    1.5,
-    "bs-1.5"
-  ],
-  [
-    2,
-    "bs-2"
-  ],
-  [
-    2.5,
-    "bs-2.5"
-  ],
-  [
-    3,
-    "bs-3"
-  ],
-  [
-    3.5,
-    "bs-3.5"
-  ],
-  [
-    4,
-    "bs-4"
-  ],
-  [
-    5,
-    "bs-5"
-  ],
-  [
-    6,
-    "bs-6"
-  ],
-  [
-    7,
-    "bs-7"
-  ],
-  [
-    8,
-    "bs-8"
-  ],
-  [
-    9,
-    "bs-9"
-  ],
-  [
-    10,
-    "bs-10"
-  ],
-  [
-    11,
-    "bs-11"
-  ],
-  [
-    12,
-    "bs-12"
-  ],
-  [
-    14,
-    "bs-14"
-  ],
-  [
-    16,
-    "bs-16"
-  ],
-  [
-    20,
-    "bs-20"
-  ],
-  [
-    24,
-    "bs-24"
-  ],
-  [
-    28,
-    "bs-28"
-  ],
-  [
-    32,
-    "bs-32"
-  ],
-  [
-    36,
-    "bs-36"
-  ],
-  [
-    40,
-    "bs-40"
-  ],
-  [
-    44,
-    "bs-44"
-  ],
-  [
-    48,
-    "bs-48"
-  ],
-  [
-    52,
-    "bs-52"
-  ],
-  [
-    56,
-    "bs-56"
-  ],
-  [
-    60,
-    "bs-60"
-  ],
-  [
-    64,
-    "bs-64"
-  ],
-  [
-    72,
-    "bs-72"
-  ],
-  [
-    80,
-    "bs-80"
-  ],
-  [
-    96,
-    "bs-96"
-  ]
-]);
-var sizes = new Set(sizeWidthMap.keys());
-var getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
-var getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
-var getSize = (size) => mx(getSizeHeight(size), getSizeWidth(size));
-var computeSize = (value, defaultSize) => {
-  if (sizes.has(value)) {
+var SIZE_VALUES = Object.keys(sizeMap).map((key) => key === "px" ? "px" : Number(key));
+var getHeight = (size) => sizeMap[size]?.h;
+var getWidth = (size) => sizeMap[size]?.w;
+var getSize = (size) => mx(getHeight(size), getWidth(size));
+var sizeValue = (size) => size === "px" ? 1 : size;
+var sizeToRem = (size) => size === "px" ? "1px" : `${size * 0.25}rem`;
+var iconSize = (size) => ({
+  "--icon-size": size ? sizeToRem(size) : "initial"
+});
+var snapSize = (value, defaultSize) => {
+  if (SIZE_VALUES.includes(value)) {
     return value;
   } else if (value <= 0) {
     return 0;
-  } else if (value === 1) {
+  } else if (value < 0.5) {
     return "px";
   } else {
     const wholeSeries = Math.floor(value);
     const halfSeries = Math.floor(value * 2) / 2;
     const doubleSeries = Math.floor(value / 2) * 2;
     const quadrupleSeries = Math.floor(value / 4) * 4;
-    if (sizes.has(halfSeries)) {
+    if (SIZE_VALUES.includes(halfSeries)) {
       return halfSeries;
-    } else if (sizes.has(wholeSeries)) {
+    } else if (SIZE_VALUES.includes(wholeSeries)) {
       return wholeSeries;
-    } else if (sizes.has(doubleSeries)) {
+    } else if (SIZE_VALUES.includes(doubleSeries)) {
       return doubleSeries;
-    } else if (sizes.has(quadrupleSeries)) {
+    } else if (SIZE_VALUES.includes(quadrupleSeries)) {
       return quadrupleSeries;
     } else {
       return defaultSize;
     }
   }
 };
-var sizeValue = (size) => size === "px" ? 1 : size;
 
-// src/styles/fragments/text.ts
-var placeholderText = "placeholder-neutral-300 dark:placeholder-neutral-500";
-var staticPlaceholderText = "text-neutral-300 dark:text-neutral-500";
-var descriptionText = "text-sm font-normal text-description";
-var descriptionTextPrimary = "text-sm font-normal text-baseText";
-var descriptionMessage = [
-  descriptionText,
-  "border border-dashed border-separator rounded p-4"
-];
-var chromeText = "text-sm font-normal";
-
-// src/styles/fragments/valence.ts
-var successText = "text-xs font-medium text-successText";
-var infoText = "text-xs font-medium text-infoText";
-var warningText = "text-xs font-medium text-warningText";
-var errorText = "text-xs font-medium text-errorText";
-var valenceColorText = (valence) => {
+// src/util/valence.ts
+var textValence = (valence) => {
   switch (valence) {
     case "success":
-      return successText;
+      return "font-medium text-success-text";
     case "info":
-      return infoText;
+      return "font-medium text-info-text";
     case "warning":
-      return warningText;
+      return "font-medium text-warning-text";
     case "error":
-      return errorText;
-    default:
-      return void 0;
+      return "font-medium text-error-text";
   }
 };
-var neutralMessageColors = "border border-dashed border-separator text-subdued";
-var successMessageColors = "text-successSurfaceText bg-successSurface";
-var infoMessageColors = "text-infoSurfaceText bg-infoSurface";
-var warningMessageColors = "text-warningSurfaceText bg-warningSurface";
-var errorMessageColors = "text-errorSurfaceText bg-errorSurface";
 var messageValence = (valence) => {
   switch (valence) {
     case "success":
-      return successMessageColors;
-    case "info":
-      return infoMessageColors;
-    case "warning":
-      return warningMessageColors;
-    case "error":
-      return errorMessageColors;
-    default:
-      return neutralMessageColors;
-  }
-};
-
-// src/styles/components/avatar.ts
-var avatarRoot = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mie-1" : "-mie-2"), ...etc);
-var avatarLabel = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
-var avatarDescription = ({ srOnly }, ...etc) => mx(descriptionText, srOnly && "sr-only", ...etc);
-var avatarFrame = ({ variant }, ...etc) => mx("is-full bs-full bg-[--surface-bg]", variant === "circle" ? "rounded-full" : "rounded", ...etc);
-var avatarStatusIcon = ({ status, size = 3 }, ...etc) => mx("absolute block-end-0 inline-end-0", getSize(size), status === "inactive" ? "text-amber-350 dark:text-amber-250" : status === "active" ? "text-emerald-350 dark:text-emerald-250" : "text-neutral-350 dark:text-neutral-250", ...etc);
-var avatarRing = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded", 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 plb-1 pli-2 relative z-[1] flex items-center justify-center", size && getSizeHeight(size), ...etc);
-var avatarGroupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : descriptionText, ...etc);
-var avatarTheme = {
-  root: avatarRoot,
-  label: avatarLabel,
-  description: avatarDescription,
-  statusIcon: avatarStatusIcon,
-  frame: avatarFrame,
-  ring: avatarRing,
-  fallbackText: avatarFallbackText,
-  group: avatarGroup,
-  groupLabel: avatarGroupLabel,
-  groupDescription: avatarGroupDescription
-};
-
-// src/styles/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/styles/components/button.ts
-var primaryButtonColors = "text-accentSurfaceText bg-accentSurface hover:bg-accentSurfaceHover 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-inputSurface";
-var defaultButtonColors = mx(staticDefaultButtonColors, "data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface");
-var ghostButtonColors = mx(ghostHover, "hover:text-inherit data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface");
-var buttonRoot = (_props, ...etc) => {
-  return mx("dx-button dx-focus-ring group max-is-full [&_span]:truncate", ...etc);
-};
-var buttonGroup = (_props, ...etc) => {
-  return mx("inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
-};
-var buttonTheme = {
-  root: buttonRoot,
-  group: buttonGroup
-};
-
-// src/styles/components/dialog.ts
-var sizeMap = {
-  sm: "md:!max-is-[24rem]",
-  md: "md:!max-is-[32rem]",
-  lg: "md:!max-is-[40rem]",
-  xl: "md:!max-is-[60rem]"
-};
-var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
-var dialogContent = ({ inOverlayLayout, size }, ...etc) => {
-  return mx("@container dx-dialog__content dx-focus-ring modal-surface density-coarse is-full gap-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", size && sizeMap[size], ...etc);
-};
-var dialogHeader = (_props, ...etc) => mx("dx-dialog__header flex items-center justify-between", ...etc);
-var dialogBody = (_props, ...etc) => mx("dx-dialog__body flex flex-col gap-4 bs-full overflow-hidden", ...etc);
-var dialogActionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center density-coarse", ...etc);
-var dialogTitle = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
-var dialogDescription = ({ srOnly }, ...etc) => mx("dx-dialog__description", descriptionText, srOnly && "sr-only", ...etc);
-var dialogTheme = {
-  overlay: dialogOverlay,
-  content: dialogContent,
-  header: dialogHeader,
-  body: dialogBody,
-  actionbar: dialogActionBar,
-  title: dialogTitle,
-  description: dialogDescription
-};
-
-// src/styles/components/icon.ts
-var iconRoot = ({ size }, etc) => mx("shrink-0 bs-[1em] is-[1em] text-[var(--icons-color,currentColor)]", size && getSize(size), etc);
-var iconTheme = {
-  root: iconRoot
-};
-
-// src/styles/components/icon-button.ts
-var iconButtonRoot = ({ iconOnly }, ...etc) => {
-  return mx("gap-2", iconOnly && "p-iconButtonPadding min-bs-0", ...etc);
-};
-var iconButtonTheme = {
-  root: iconButtonRoot
-};
-
-// src/styles/components/input.ts
-var neutralInputValence = "";
-var successInputValence = "shadow-emerald-500/50 dark:shadow-emerald-600/50";
-var infoInputValence = "shadow-cyan-500/50 dark:shadow-cyan-600/50";
-var warningInputValence = "shadow-amber-500/50 dark:shadow-amber-600/50";
-var errorInputValence = "shadow-rose-500/50 dark:shadow-rose-600/50";
-var textInputSurfaceFocus = "transition-colors bg-textInputSurface focus:bg-focusSurface border border-separator focus:border-separator";
-var textInputSurfaceHover = "hover:bg-textInputSurface focus:hover:bg-focusSurface";
-var booleanInputSurface = "shadow-inner transition-colors bg-unAccent aria-checked:bg-accentSurface aria-[checked=mixed]:bg-accentSurface";
-var booleanInputSurfaceHover = "hover:bg-unAccentHover hover:aria-checked:bg-accentSurfaceHover hover:aria-[checked=mixed]:bg-accentSurfaceHover";
-var inputTextLabel = "text-description text-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0";
-var inputValence = (valence) => {
-  switch (valence) {
-    case "success":
-      return successInputValence;
+      return "font-medium text-success-text border-success-text bg-success-surface";
     case "info":
-      return infoInputValence;
+      return "font-medium text-info-text border-info-text bg-info-surface";
     case "warning":
-      return warningInputValence;
+      return "font-medium text-warning-text border-warning-text bg-warning-surface";
     case "error":
-      return errorInputValence;
+      return "font-medium text-error-text border-error-text bg-error-surface";
     default:
-      return null;
+      return "font-medium text-neutral-text border-neutral-text bg-neutral-surface";
   }
 };
-var sharedSubduedInputStyles = (props) => [
-  'plb-0 is-full bg-transparent text-current [[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === "fine" ? fineBlockSize : coarseBlockSize,
-  placeholderText,
-  subduedFocus,
-  props.disabled && staticDisabled
-];
-var sharedDefaultInputStyles = (props) => [
-  'plb-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  textInputSurfaceFocus,
-  placeholderText,
-  props.density === "fine" ? fineDimensions : coarseDimensions,
-  props.disabled ? staticDisabled : textInputSurfaceHover
-];
-var sharedStaticInputStyles = (props) => [
-  'plb-0 is-full text-baseText rounded-sm text-[color:var(--surface-text)] [[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  textInputSurfaceFocus,
-  textInputSurfaceHover,
-  props.focused && "bg-attention",
-  placeholderText,
-  inputValence(props.validationValence),
-  props.disabled && staticDisabled,
-  props.focused && staticFocusRing
-];
-var inputInput = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), !props.disabled && focusRing, inputValence(props.validationValence) || neutralInputValence, ...etc);
-var inputCheckbox = ({ size = 5 }, ...etc) => mx("dx-checkbox dx-focus-ring", getSize(size), ...etc);
-var inputCheckboxIndicator = ({ size = 5, checked }, ...etc) => mx(getSize(computeSize(sizeValue(size) * 0.65, 4)), !checked && "invisible", ...etc);
-var inputSwitch = ({ size = 5, disabled }, ...etc) => mx(
-  getSizeHeight(size),
-  getSizeWidth(computeSize(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 pli-1 mx-1 relative",
-  focusRing,
-  ...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 mli-auto", props.disabled && "cursor-not-allowed", ...etc);
-var inputLabel = (props, ...etc) => mx("block", inputTextLabel, props.srOnly && "sr-only", ...etc);
-var inputDescription = (props, ...etc) => mx(descriptionText, props.srOnly && "sr-only", ...etc);
-var inputDescriptionAndValidation = (props, ...etc) => mx("leading-none mlb-labelSpacingBlock", props.srOnly && "sr-only", ...etc);
-var inputValidation = (props, ...etc) => mx(descriptionText, props.srOnly ? "sr-only" : valenceColorText(props.validationValence), ...etc);
-var inputTheme = {
-  input: inputInput,
-  inputWithSegments: inputWithSegmentsInput,
-  checkbox: inputCheckbox,
-  checkboxIndicator: inputCheckboxIndicator,
-  label: inputLabel,
-  description: inputDescription,
-  validation: inputValidation,
-  switch: inputSwitch,
-  switchThumb: inputSwitchThumb,
-  descriptionAndValidation: inputDescriptionAndValidation
-};
-
-// src/styles/components/link.ts
-var linkRoot = ({ variant }, ...etc) => mx("underline decoration-1 underline-offset-2 transition-color rounded-sm", variant === "neutral" ? "text-inherit hover:opacity-90 visited:text-inherit visited:hover:opacity-90" : "text-accentText hover:text-accentTextHover visited:text-accentText visited:hover:text-accentTextHover", focusRing, ...etc);
-var linkTheme = {
-  root: linkRoot
-};
-
-// src/styles/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", ...etc);
-var listItemDragHandleIcon = (_props, ...etc) => mx(getSize(5), "mbs-2.5", ...etc);
-var listItemOpenTrigger = ({ density }, ...etc) => mx("is-5 rounded flex justify-center items-center", densityBlockSize(density), ghostHover, focusRing, ...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
-  }
-};
-
-// src/styles/components/main.ts
-var topbarBlockPaddingStart = "pbs-[--topbar-size] sticky-top-from-topbar-bottom";
-var bottombarBlockPaddingEnd = "pbe-[--statusbar-size] 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/styles/components/menu.ts
-var menuViewport = (_props, ...etc) => mx("rounded p-1 max-bs-[--radix-dropdown-menu-content-available-height] overflow-y-auto", ...etc);
-var menuContent = ({ elevation }, ...etc) => mx(
-  "is-48 rounded md:is-56 border border-separator",
-  surfaceZIndex({
-    elevation,
-    level: "menu"
-  }),
-  surfaceShadow({
-    elevation: "positioned"
-  }),
-  modalSurface,
-  ...etc
-);
-var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-sm pli-2 plb-2 text-sm", "data-[highlighted]:bg-hoverSurface", subduedFocus, dataDisabled, ...etc);
-var menuSeparator = (_props, ...etc) => mx("mlb-1 mli-2 bs-px bg-separator", ...etc);
-var menuGroupLabel = (_props, ...etc) => mx(descriptionText, "select-none pli-2 plb-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/styles/components/message.ts
-var messageRoot = ({ valence }, etc) => {
-  return mx("p-trimSm rounded-md", messageValence(valence), etc);
-};
-var messageTitle = (_, etc) => {
-  return mx("font-medium flex gap-trimSm", etc);
-};
-var messageIcon = (_, etc) => {
-  return mx("flex bs-[1lh] items-center", etc);
-};
-var messageContent = (_, etc) => {
-  return mx("first:font-medium", etc);
-};
-var messageTheme = {
-  root: messageRoot,
-  content: messageContent,
-  icon: messageIcon,
-  title: messageTitle
-};
-
-// src/styles/components/popover.ts
-var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("flex flex-col rounded-md", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-hidden", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-hidden", ...etc);
-var popoverContent = ({ elevation }, ...etc) => mx("border border-separator rounded-md", modalSurface, surfaceShadow({
-  elevation: "positioned"
-}), surfaceZIndex({
-  elevation,
-  level: "menu"
-}), focusRing, ...etc);
-var popoverArrow = (_props, ...etc) => mx("fill-separator", ...etc);
-var popoverTheme = {
-  content: popoverContent,
-  viewport: popoverViewport,
-  arrow: popoverArrow
-};
-
-// src/styles/components/scroll-area.ts
-var scrollAreaRoot = ({ orientation, margin, thin }, ...etc) => mx(
-  "overflow-hidden",
-  orientation === "vertical" && "group/scroll-v bs-full is-full min-bs-0",
-  orientation === "horizontal" && "group/scroll-h bs-full is-full min-is-0",
-  orientation === "all" && "group/scroll-all bs-full is-full min-bs-0 min-is-0",
-  // Balance left/right, top/bottom "margin" with scrollbar.
-  margin && [
-    orientation === "vertical" && (thin ? "pis-[4px]" : "pis-[8px]"),
-    orientation === "horizontal" && (thin ? "pbs-[4px]" : "pbs-[8px]"),
-    orientation === "all" && (thin ? "pis-[4px] pbs-[8px]" : "pis-[8px] pbs-[8px]")
-  ],
-  ...etc
-);
-var scrollAreaViewport = ({ orientation, autoHide, padding: padding2, snap, thin }, ...etc) => mx(
-  "bs-full is-full",
-  orientation === "vertical" && "flex flex-col overflow-y-scroll",
-  orientation === "horizontal" && "flex overflow-x-scroll",
-  orientation === "all" && "overflow-scroll",
-  thin ? "[&::-webkit-scrollbar]:is-[4px] [&::-webkit-scrollbar]:bs-[4px]" : "[&::-webkit-scrollbar]:is-[8px] [&::-webkit-scrollbar]:bs-[8px]",
-  // '[&::-webkit-scrollbar-thumb]:rounded-full',
-  "[&::-webkit-scrollbar-thumb]:bg-transparent",
-  "[&::-webkit-scrollbar-corner]:bg-transparent",
-  // TODO(burdon): Define token.
-  autoHide ? [
-    orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
-  ] : [
-    orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator",
-    orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-subduedSeparator"
-  ],
-  // TODO(burdon): Are scrollbars reserved on native devices?
-  padding2 && [
-    orientation === "vertical" && "pli-[4px]",
-    orientation === "horizontal" && "pbe-[4px]",
-    orientation === "all" && "pis-[4px] pbe-[4px]"
-  ],
-  snap && [
-    orientation === "vertical" && "snap-y snap-mandatory",
-    orientation === "horizontal" && "snap-x snap-mandatory",
-    orientation === "all" && "snap-both snap-mandatory"
-  ],
-  ...etc
-);
-var scrollAreaTheme = {
-  root: scrollAreaRoot,
-  viewport: scrollAreaViewport
-};
-
-// src/styles/components/select.ts
-var selectContent = ({ elevation }, ...etc) => {
-  return mx("min-w-[--radix-select-trigger-width] rounded max-bs-[--radix-select-content-available-height] border border-separator", modalSurface, surfaceShadow({
-    elevation: "positioned"
-  }), surfaceZIndex({
-    elevation,
-    level: "menu"
-  }), ...etc);
-};
-var selectViewport = (_props, ...etc) => mx(...etc);
-var selectItem = (_props, ...etc) => mx("flex items-center min-bs-[2rem] pli-3 plb-1 gap-2", "text-baseText leading-none select-none outline-none", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", ghostHighlighted, ...etc);
-var selectItemIndicator = (_props, ...etc) => mx("items-center", ...etc);
-var selectArrow = (_props, ...etc) => mx("fill-separator", ...etc);
-var selectSeparator = (_props, ...etc) => mx(blockSeparator, separatorBorderColor, ...etc);
-var selectScrollButton = (_props, ...etc) => mx(modalSurface, "flex items-center justify-center cursor-default bs-6 is-full", ...etc);
-var selectTheme = {
-  content: selectContent,
-  viewport: selectViewport,
-  item: selectItem,
-  itemIndicator: selectItemIndicator,
-  arrow: selectArrow,
-  separator: selectSeparator,
-  scrollButton: selectScrollButton
-};
-
-// src/styles/components/separator.ts
-var separatorRoot = ({ orientation, subdued }, ...etc) => mx(orientation === "vertical" ? inlineSeparator : blockSeparator, subdued ? subduedSeparatorBorderColor : separatorBorderColor, ...etc);
-var separatorTheme = {
-  root: separatorRoot
-};
-
-// src/styles/components/skeleton.ts
-var skeletonRoot = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-250 dark:bg-neutral-750 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded", ...etc);
-var skeletonTheme = {
-  root: skeletonRoot
-};
-
-// src/styles/components/status.ts
-var statusRoot = ({ variant = "default" }, ...etc) => mx("bs-1 relative bg-hoverOverlay rounded-full overflow-hidden", variant === "main-bottom" ? "is-full block" : "is-20 inline-block", ...etc);
-var statusBar = ({ indeterminate, variant = "default" }, ...etc) => mx("absolute inset-block-0 block rounded-full", variant === "main-bottom" ? "bg-accentSurface" : "bg-unAccent", indeterminate ? "animate-progress-indeterminate" : "inline-start-0", ...etc);
-var statusTheme = {
-  root: statusRoot,
-  bar: statusBar
-};
-
-// src/styles/components/tag.ts
-var tagRoot = ({ palette = "neutral" }, ...etc) => mx("dx-tag", ...etc);
-var tagTheme = {
-  root: tagRoot
-};
-
-// src/styles/components/toast.ts
-var toastViewport = (_props, ...etc) => mx(
-  // TODO(burdon): block-end should take into account status bar.
-  "z-40 fixed block-end-[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)] is-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:is-full md:max-is-sm",
-  "rounded-md flex flex-col gap-2",
-  ...etc
-);
-var toastRoot = (_props, ...etc) => mx("rounded-md flex p-2 gap-2", modalSurface, 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]", focusRing, ...etc);
-var toastBody = (_props, ...etc) => mx("grow flex flex-col gap-1 justify-center pis-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(descriptionText, "shrink-0", srOnly && "sr-only", ...etc);
-var toastTheme = {
-  viewport: toastViewport,
-  root: toastRoot,
-  body: toastBody,
-  title: toastTitle,
-  description: toastDescription,
-  actions: toastActions
-};
-
-// src/styles/components/toolbar.ts
-var toolbarLayout = "is-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none contain-layout";
-var toolbarRoot = ({ density, disabled, layoutManaged }, ...etc) => {
-  return mx("bg-toolbarSurface dx-toolbar", density === "coarse" && "bs-[var(--rail-size)] !pli-3", disabled && "*:opacity-20", !layoutManaged && toolbarLayout, ...etc);
-};
-var toolbarInner = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && [
-    "flex gap-1",
-    textBlockWidth
-  ], ...etc);
-};
-var toolbarTheme = {
-  root: toolbarRoot,
-  inner: toolbarInner
-};
-
-// src/styles/components/tooltip.ts
-var tooltipContent = ({ elevation }, ...etc) => mx(
-  "inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText",
-  // popperMotion,
-  surfaceShadow({
-    elevation: "positioned"
-  }),
-  surfaceZIndex({
-    elevation,
-    level: "tooltip"
-  }),
-  chromeText,
-  ...etc
-);
-var tooltipArrow = (_props, ...etc) => mx("fill-inverseSurface", ...etc);
-var tooltipTheme = {
-  content: tooltipContent,
-  arrow: tooltipArrow
-};
-
-// src/styles/components/treegrid.ts
-var levelStyles = /* @__PURE__ */ new Map([
-  [
-    1,
-    "[&>.indent:first-of-type]:pis-0 font-medium"
-  ],
-  [
-    2,
-    "[&>.indent:first-of-type]:pis-0"
-  ],
-  [
-    3,
-    "[&>.indent:first-of-type]:pis-1"
-  ],
-  [
-    4,
-    "[&>.indent:first-of-type]:pis-2"
-  ],
-  [
-    5,
-    "[&>.indent:first-of-type]:pis-3"
-  ],
-  [
-    6,
-    "[&>.indent:first-of-type]:pis-4"
-  ],
-  [
-    7,
-    "[&>.indent:first-of-type]:pis-5"
-  ],
-  [
-    8,
-    "[&>.indent:first-of-type]:pis-6"
-  ]
-]);
-var treegridRoot = (_, ...etc) => mx("grid", ...etc);
-var treegridRow = ({ level = 1 }, ...etc) => mx("contents", 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/styles/primitives/container.ts
-var padding = {
-  sm: "pli-2",
-  md: "pli-3",
-  lg: "pli-6"
-};
-var containerColumn = ({ variant }, ...etc) => mx(variant && padding[variant], ...etc);
-var containerTheme = {
-  column: containerColumn
-};
-
-// src/styles/theme.ts
-import { get } from "@dxos/util";
-var defaultTheme = {
-  themeName: () => "default",
-  //
-  // Primitives
-  //
-  container: containerTheme,
-  //
-  // Components
-  //
-  anchoredOverflow: anchoredOverflowTheme,
-  avatar: avatarTheme,
-  breadcrumb: breadcrumbTheme,
-  button: buttonTheme,
-  dialog: dialogTheme,
-  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,
-  status: statusTheme,
-  tag: tagTheme,
-  toast: toastTheme,
-  toolbar: toolbarTheme,
-  tooltip: tooltipTheme,
-  treegrid: treegridTheme
-};
-var missing = /* @__PURE__ */ new Set();
-var bindTheme = (theme) => {
-  return (path, defaultClassName, styleProps, ...etc) => {
-    const result = get(theme, path);
-    const className = typeof result === "function" && result(styleProps ?? {}, ...etc);
-    if (!className) {
-      if (!missing.has(path)) {
-        missing.add(path);
-      }
-    }
-    return className || defaultClassName;
-  };
-};
-var defaultTx = bindTheme(defaultTheme);
-
-// src/index.ts
-var { theme: tokens } = tailwindConfig({});
-var osTranslations = "dxos.org/i18n/os";
 export {
-  accentSurface,
-  activeSurface,
-  anchoredOverflowAnchor,
-  anchoredOverflowRoot,
-  anchoredOverflowTheme,
-  attentionSurface,
-  avatarDescription,
-  avatarFallbackText,
-  avatarFrame,
-  avatarGroup,
-  avatarGroupDescription,
-  avatarGroupLabel,
-  avatarLabel,
-  avatarRing,
-  avatarRoot,
-  avatarStatusIcon,
-  avatarTheme,
-  baseSurface,
-  bindTheme,
-  blockSeparator,
-  bottombarBlockPaddingEnd,
-  bounceLayout,
-  breadcrumbCurrent,
-  breadcrumbList,
-  breadcrumbListItem,
-  breadcrumbRoot,
-  breadcrumbSeparator,
-  breadcrumbTheme,
-  buttonGroup,
-  buttonRoot,
-  buttonTheme,
   cardDefaultInlineSize,
+  cardMaxBlockSize,
   cardMaxInlineSize,
+  cardMinBlockSize,
   cardMinInlineSize,
-  chromeText,
-  coarseBlockSize,
-  coarseButtonDimensions,
-  coarseButtonPadding,
-  coarseDimensions,
-  coarseTextPadding,
-  computeSize,
-  containerTheme,
-  contentShadow,
   dataDisabled,
-  defaultButtonColors,
-  defaultTheme,
-  defaultTx,
   densityBlockSize,
+  densityDimensions,
   descriptionMessage,
-  descriptionText,
-  descriptionTextPrimary,
-  dialogActionBar,
-  dialogBody,
-  dialogContent,
-  dialogDescription,
-  dialogHeader,
-  dialogOverlay,
-  dialogTheme,
-  dialogTitle,
-  dropRing,
-  dropRingInner,
-  errorInputValence,
-  errorMessageColors,
-  errorText,
-  fineBlockSize,
-  fineButtonDimensions,
-  fineButtonPadding,
-  fineDimensions,
-  fineTextPadding,
-  fixedInsetFlexLayout,
-  focusRing,
   getHashHue,
   getHashStyles,
+  getHeight,
   getSize,
-  getSizeHeight,
-  getSizeWidth,
   getStyles,
-  ghostButtonColors,
+  getWidth,
   ghostFocusWithin,
-  ghostHighlighted,
   ghostHover,
-  ghostSelected,
-  ghostSelectedContainerMd,
-  ghostSelectedCurrent,
-  ghostSelectedTrackingInterFromNormal,
-  group,
-  groupBorder,
   groupHoverControlItemWithTransition,
-  hoverColors,
   hoverableControlItem,
-  hoverableControlItemTransition,
   hoverableControls,
-  hoverableFocusedControls,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
   hoverableOpenControlItem,
+  hueShades,
   hues,
-  iconButtonRoot,
-  iconButtonTheme,
-  iconRoot,
-  iconTheme,
-  infoInputValence,
-  infoMessageColors,
-  infoText,
-  inlineSeparator,
-  inputCheckbox,
-  inputCheckboxIndicator,
-  inputDescription,
-  inputDescriptionAndValidation,
-  inputInput,
-  inputLabel,
-  inputSwitch,
-  inputSwitchThumb,
-  inputTextLabel,
-  inputTheme,
-  inputValence,
-  inputValidation,
-  inputWithSegmentsInput,
-  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,
-  messageIcon,
-  messageRoot,
-  messageTheme,
-  messageTitle,
+  iconSize,
   messageValence,
-  modalSurface,
   mx,
-  neutralInputValence,
-  neutralMessageColors,
   osTranslations,
-  placeholderText,
-  popoverArrow,
-  popoverContent,
-  popoverTheme,
-  popoverViewport,
-  popperMotion,
-  primaryButtonColors,
-  scrollAreaRoot,
-  scrollAreaTheme,
-  scrollAreaViewport,
-  selectArrow,
-  selectContent,
-  selectItem,
-  selectItemIndicator,
-  selectScrollButton,
-  selectSeparator,
-  selectTheme,
-  selectViewport,
-  separatorBorderColor,
-  separatorRoot,
-  separatorTheme,
-  shimmer,
-  sidebarBorder,
-  sidebarSurface,
-  sizeHeightMap,
+  palette,
+  roles,
+  sizeToRem,
   sizeValue,
-  sizeWidthMap,
-  skeletonRoot,
-  skeletonTheme,
-  staticDefaultButtonColors,
+  snapSize,
   staticDisabled,
-  staticFocusRing,
-  staticGhostSelected,
-  staticGhostSelectedCurrent,
-  staticHoverableControls,
-  staticPlaceholderText,
-  statusBar,
-  statusRoot,
-  statusTheme,
-  strongShimmer,
-  styles,
-  subduedFocus,
-  subduedSeparatorBorderColor,
-  subtleHover,
-  successInputValence,
-  successMessageColors,
-  successText,
   surfaceShadow,
   surfaceZIndex,
-  tagRoot,
-  tagTheme,
-  textBlockWidth,
-  toastActions,
-  toastBody,
-  toastDescription,
-  toastRoot,
-  toastTheme,
-  toastTitle,
-  toastViewport,
-  tokens,
-  toolbarInner,
-  toolbarLayout,
-  toolbarRoot,
-  toolbarTheme,
-  tooltipArrow,
-  tooltipContent,
-  tooltipTheme,
-  topbarBlockPaddingStart,
-  treegridCell,
-  treegridRoot,
-  treegridRow,
-  treegridTheme,
-  userDefaultTokenSet,
-  valenceColorText,
-  warningInputValence,
-  warningMessageColors,
-  warningText
+  textValence
 };
 //# sourceMappingURL=index.mjs.map