@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/dist/lib/browser/index.mjs

@@ -0,0 +1,3199 @@
+// packages/ui/react-ui-theme/src/config/tokens/index.ts
+import adapter from "@ch-ui/tailwind-tokens";
+
+// packages/ui/react-ui-theme/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;
+  }, {})
+};
+
+// packages/ui/react-ui-theme/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);
+}, {});
+
+// packages/ui/react-ui-theme/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"
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/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(1, 0.5),
+  inputSurfaceGroup: contrastCadence(1, 1),
+  inputSurfaceModal: contrastCadence(1, 1.5),
+  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),
+  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
+    ]
+  },
+  // 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",
+      500
+    ],
+    dark: [
+      "neutral",
+      400
+    ]
+  },
+  subdued: {
+    light: [
+      "neutral",
+      700
+    ],
+    dark: [
+      "neutral",
+      300
+    ]
+  },
+  accentText: {
+    light: [
+      "primary",
+      550
+    ],
+    dark: [
+      "primary",
+      400
+    ]
+  },
+  accentTextHover: {
+    light: [
+      "primary",
+      500
+    ],
+    dark: [
+      "primary",
+      350
+    ]
+  },
+  neutralFocusIndicator: {
+    light: [
+      "neutral",
+      300
+    ],
+    dark: [
+      "neutral",
+      450
+    ]
+  },
+  accentFocusIndicator: {
+    light: [
+      "primary",
+      300
+    ],
+    dark: [
+      "primary",
+      450
+    ]
+  },
+  accentSurfaceText: {
+    light: [
+      "neutral",
+      0
+    ],
+    dark: [
+      "neutral",
+      0
+    ]
+  }
+};
+var aliasDefs = {
+  // The background color appearing in overscroll and between planks when Deck is enabled.
+  deckSurface: {
+    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"
+  },
+  separator: {
+    root: "separatorBase",
+    group: "separatorGroup",
+    modal: "separatorModal"
+  },
+  // Selected items, current items, other surfaces needing special contrast against baseSurface.
+  activeSurface: {
+    root: "inputSurface"
+  },
+  // Main sidebar panel.
+  sidebarSurface: {
+    root: "groupSurface"
+  },
+  // Plank header.
+  headerSurface: {
+    root: "groupSurface"
+  },
+  // Forms, cards, etc.
+  cardSurface: {
+    root: "groupSurface"
+  },
+  // Toolbars, table/sheet headers, etc.
+  toolbarSurface: {
+    root: "groupSurface"
+  },
+  // TODO: 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.
+  currentRelated: {
+    root: "accentSurfaceRelated"
+  }
+};
+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;
+}, {});
+
+// packages/ui/react-ui-theme/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(", ")
+    ]
+  },
+  aliases: {
+    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
+    ...sheetAliases,
+    ...systemAliases,
+    ...valenceAliases
+  },
+  namespace: "dx-"
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/lengths.ts
+var lengthsFacet = {
+  physical: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    series: {
+      line: {
+        root: {
+          unit: "px",
+          initial: 0,
+          slope: 1
+        }
+      },
+      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
+        ]
+      },
+      // TODO(burdon): Can/should these be hyphenated?
+      trimXs: {
+        root: [
+          "lacuna",
+          3
+        ]
+      },
+      trimSm: {
+        root: [
+          "lacuna",
+          6
+        ]
+      },
+      trimMd: {
+        root: [
+          "lacuna",
+          9
+        ]
+      },
+      trimLg: {
+        root: [
+          "lacuna",
+          12
+        ]
+      }
+    }
+  },
+  alias: {
+    namespace: "dx-",
+    conditions: {
+      fine: [
+        ':root, .density-fine, [data-density="fine"]'
+      ],
+      coarse: [
+        '.density-coarse, [data-density="coarse"]'
+      ],
+      flush: [
+        '.density-flush, [data-density="flush"]'
+      ]
+    },
+    aliases: {
+      noLine: {
+        fine: [
+          "focusOffset"
+        ]
+      },
+      hairLine: {
+        fine: [
+          "modalLine",
+          "landmarkLine",
+          "positionedLine",
+          "gridGap"
+        ]
+      },
+      thickLine: {
+        fine: [
+          "focusLine"
+        ]
+      },
+      trimXs: {
+        fine: [
+          "cardSpacingChrome",
+          "labelSpacingBlock"
+        ]
+      },
+      trimSm: {
+        fine: [
+          "cardSpacingInline",
+          "cardSpacingBlock",
+          "inputSpacingBlock"
+        ]
+      },
+      trimMd: {
+        coarse: [
+          "cardSpacingInline",
+          "cardSpacingBlock"
+        ]
+      }
+    }
+  }
+};
+var maxSizesFacet = {
+  physical: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    series: {
+      size: {
+        root: {
+          unit: "rem",
+          initial: 0,
+          slope: 10
+        }
+      }
+    }
+  },
+  semantic: {
+    namespace: "dx-",
+    conditions: {
+      root: [
+        ":root"
+      ]
+    },
+    sememes: {
+      prose: {
+        root: [
+          "size",
+          5
+        ]
+      },
+      containerMaxWidth: {
+        root: [
+          "size",
+          5
+        ]
+      },
+      popoverMaxWidth: {
+        root: [
+          "size",
+          2
+        ]
+      }
+    }
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/sememes-calls.ts
+var callsSememes = {
+  callActive: {
+    light: [
+      "green",
+      "500"
+    ],
+    dark: [
+      "green",
+      "500"
+    ]
+  },
+  callAlert: {
+    light: [
+      "rose",
+      "500"
+    ],
+    dark: [
+      "rose",
+      "500"
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/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 def (in common with sheet).
+  cmComment: {
+    light: [
+      "neutral",
+      950
+    ],
+    dark: [
+      "neutral",
+      50
+    ]
+  },
+  cmCommentSurface: {
+    light: [
+      "green",
+      200
+    ],
+    dark: [
+      "green",
+      600
+    ]
+  }
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/semantic-colors.ts
+var semanticColors = {
+  conditions: {
+    light: [
+      ":root"
+    ],
+    dark: [
+      ".dark"
+    ]
+  },
+  sememes: {
+    // Please define each set of sememes in its own file.
+    ...callsSememes,
+    ...codemirrorSememes,
+    ...sheetSememes,
+    ...hueSememes,
+    ...systemSememes
+  },
+  namespace: "dx-"
+};
+
+// packages/ui/react-ui-theme/src/config/tokens/index.ts
+var tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet
+};
+var hues = Object.keys(huePalettes);
+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
+    }
+  }
+};
+var tokensTailwindConfig = adapter(tokenSet, adapterConfig);
+
+// packages/ui/react-ui-theme/src/config/tailwind.ts
+import tailwindContainers 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";
+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({
+      spacing: {
+        prose: "var(--dx-prose)",
+        containerMaxWidth: "var(--dx-containerMaxWidth)",
+        popoverMaxWidth: "var(--dx-popoverMaxWidth)"
+      },
+      borderRadius: {
+        none: "0",
+        sm: "0.25rem",
+        DEFAULT: "0.5rem",
+        md: ".75rem",
+        lg: "1rem"
+      },
+      screens: {
+        "pointer-fine": {
+          raw: "(pointer: fine)"
+        },
+        "hover-hover": {
+          raw: "(hover: hover)"
+        }
+      },
+      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: {
+        // Popper chrome
+        slideDownAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        slideUpAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateY(2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: 0,
+            transform: "translateX(-2px)"
+          },
+          to: {
+            opacity: 1,
+            transform: "translateX(0)"
+          }
+        },
+        fadeIn: {
+          from: {
+            opacity: 0
+          },
+          to: {
+            opacity: 1
+          }
+        },
+        // Accordion
+        slideDown: {
+          from: {
+            height: "0px"
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)"
+          }
+        },
+        slideUp: {
+          from: {
+            height: "var(--radix-accordion-content-height)"
+          },
+          to: {
+            height: "0px"
+          }
+        },
+        // 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))"
+          }
+        },
+        // Shimmer
+        "shimmer-loop": {
+          "100%": {
+            transform: "translateX(100%)"
+          }
+        },
+        "halo-pulse": {
+          "0%": {
+            opacity: 0.3
+          },
+          "5%": {
+            opacity: 1
+          },
+          "100%": {
+            opacity: 0.3
+          }
+        },
+        "progress-indeterminate": {
+          "0%": {
+            left: 0,
+            width: "0%"
+          },
+          "25%": {
+            left: "25%",
+            width: "50%"
+          },
+          "75%": {
+            left: "50%",
+            width: "100%"
+          },
+          "100%": {
+            left: "100%",
+            width: "0%"
+          }
+        },
+        "progress-linear": {
+          "0%": {
+            transform: "translateX(-100%)"
+          },
+          "85%, 100%": {
+            transform: `translateX(${100 / 28 * 100}%)`
+          }
+        }
+      },
+      animation: {
+        "fade-in": "fadeIn 100ms ease-in forwards",
+        // Popper chrome
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 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
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        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: [
+    tailwindcssLogical,
+    tailwindcssForms,
+    tailwindcssRadix(),
+    tailwindContainers,
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar
+  ],
+  ...env === "development" && {
+    mode: "jit"
+  },
+  content,
+  future: {
+    hoverOnlyWhenSupported: true
+  }
+});
+
+// packages/ui/react-ui-theme/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;
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/src/styles/fragments/dimension.ts
+var textBlockWidth = "is-full mli-auto max-is-[--text-content]";
+
+// packages/ui/react-ui-theme/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]"
+      ];
+  }
+};
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/src/styles/fragments/group.ts
+var group = (props) => [
+  props.elevation === "base" ? "bg-transparent border border-separator" : "bg-modalSurface",
+  surfaceShadow(props)
+];
+
+// packages/ui/react-ui-theme/src/styles/fragments/hover.ts
+var hoverColors = "transition-colors duration-100 linear hover:bg-hoverSurface";
+var ghostHover = "hover:bg-hoverSurface";
+var subtleHover = "hover:bg-neutral-100/20 dark:hover:bg-neutral-800/20";
+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 staticHoverableControls = "hover-hover:[--controls-opacity:1]";
+var hoverableControlItemTransition = "transition-opacity duration-200";
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/src/styles/fragments/motion.ts
+var popperMotion = "will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade";
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/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"
+] : [];
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/src/util/hash.ts
+var colors = [
+  {
+    color: "orange",
+    bg: "bg-orangeFill",
+    text: "text-orangeFill",
+    tag: "bg-orangeSurface"
+  },
+  {
+    color: "amber",
+    bg: "bg-amberFill",
+    text: "text-amberFill",
+    tag: "bg-amberSurface"
+  },
+  {
+    color: "yellow",
+    bg: "bg-yellowFill",
+    text: "text-yellowFill",
+    tag: "bg-yellowSurface"
+  },
+  {
+    color: "lime",
+    bg: "bg-limeFill",
+    text: "text-limeFill",
+    tag: "bg-limeSurface"
+  },
+  {
+    color: "green",
+    bg: "bg-greenFill",
+    text: "text-greenFill",
+    tag: "bg-greenSurface"
+  },
+  {
+    color: "emerald",
+    bg: "bg-emeraldFill",
+    text: "text-emeraldFill",
+    tag: "bg-emeraldSurface"
+  },
+  {
+    color: "teal",
+    bg: "bg-tealFill",
+    text: "text-tealFill",
+    tag: "bg-tealSurface"
+  },
+  {
+    color: "cyan",
+    bg: "bg-cyanFill",
+    text: "text-cyanFill",
+    tag: "bg-cyanSurface"
+  },
+  {
+    color: "sky",
+    bg: "bg-skyFill",
+    text: "text-skyFill",
+    tag: "bg-skySurface"
+  },
+  {
+    color: "indigo",
+    bg: "bg-indigoFill",
+    text: "text-indigoFill",
+    tag: "bg-indigoSurface"
+  },
+  {
+    color: "violet",
+    bg: "bg-violetFill",
+    text: "text-violetFill",
+    tag: "bg-violetSurface"
+  },
+  {
+    color: "purple",
+    bg: "bg-purpleFill",
+    text: "text-purpleFill",
+    tag: "bg-purpleSurface"
+  },
+  {
+    color: "fuchsia",
+    bg: "bg-fuchsiaFill",
+    text: "text-fuchsiaFill",
+    tag: "bg-fuchsiaSurface"
+  },
+  {
+    color: "rose",
+    bg: "bg-roseFill",
+    text: "text-roseFill",
+    tag: "bg-roseSurface"
+  },
+  {
+    color: "pink",
+    bg: "bg-pinkFill",
+    text: "text-pinkFill",
+    tag: "bg-pinkSurface"
+  }
+];
+var getHashColor = (type) => {
+  if (!type) {
+    return {
+      color: "neutral",
+      bg: "bg-neutralFill",
+      text: "text-neutralFill",
+      tag: "bg-neutralSurface"
+    };
+  }
+  const hash = type.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return colors[hash % colors.length];
+};
+
+// packages/ui/react-ui-theme/src/util/mx.ts
+import { extendTailwindMerge, validators as validators2 } from "tailwind-merge";
+
+// packages/ui/react-ui-theme/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"
+        ]
+      }
+    }
+  });
+};
+
+// packages/ui/react-ui-theme/src/util/mx.ts
+var mx = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-family": [
+        "font-body",
+        "font-mono"
+      ],
+      "font-weight": [
+        // App weights
+        "font-thin",
+        "font-extralight",
+        "font-light",
+        "font-normal",
+        "font-medium",
+        "font-semibold",
+        "font-bold",
+        "font-extrabold",
+        "font-black",
+        // Arbitrary numbers
+        validators2.isArbitraryNumber
+      ]
+    }
+  }
+}, withLogical);
+
+// packages/ui/react-ui-theme/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)) {
+    return value;
+  } else if (value <= 0) {
+    return 0;
+  } else if (value === 1) {
+    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)) {
+      return halfSeries;
+    } else if (sizes.has(wholeSeries)) {
+      return wholeSeries;
+    } else if (sizes.has(doubleSeries)) {
+      return doubleSeries;
+    } else if (sizes.has(quadrupleSeries)) {
+      return quadrupleSeries;
+    } else {
+      return defaultSize;
+    }
+  }
+};
+var sizeValue = (size) => size === "px" ? 1 : size;
+
+// packages/ui/react-ui-theme/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";
+
+// packages/ui/react-ui-theme/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) => {
+  switch (valence) {
+    case "success":
+      return successText;
+    case "info":
+      return infoText;
+    case "warning":
+      return warningText;
+    case "error":
+      return errorText;
+    default:
+      return void 0;
+  }
+};
+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;
+  }
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/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", ...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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/dialog.ts
+var dialogOverlay = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
+var dialogContent = ({ inOverlayLayout }, ...etc) => mx("dx-dialog__content modal-surface density-coarse @container dx-focus-ring", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", ...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,
+  title: dialogTitle,
+  description: dialogDescription
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/icon-button.ts
+var iconButtonRoot = (_props, ...etc) => {
+  return mx("ch-icon-button dx-focus-ring gap-2", ...etc);
+};
+var iconButtonTheme = {
+  root: iconButtonRoot
+};
+
+// packages/ui/react-ui-theme/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-xs font-medium mbs-inputSpacingBlock mbe-labelSpacingBlock first:mbs-0";
+var inputValence = (valence) => {
+  switch (valence) {
+    case "success":
+      return successInputValence;
+    case "info":
+      return infoInputValence;
+    case "warning":
+      return warningInputValence;
+    case "error":
+      return errorInputValence;
+    default:
+      return null;
+  }
+};
+var sharedSubduedInputStyles = (props) => [
+  'py-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) => [
+  'py-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) => [
+  'py-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
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/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-start justify-center", ...etc);
+var listItemHeading = ({ density }, ...etc) => mx(densityBlockSize(density), ...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
+  }
+};
+
+// packages/ui/react-ui-theme/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 mainSidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
+var mainPadding = "dx-main-content-padding";
+var mainPaddingTransitions = "dx-main-content-padding-transitions";
+var mainContent = ({ bounce }, ...etc) => mx(mainPadding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-focus-ring-main", ...etc);
+var mainIntrinsicSize = "dx-main-intrinsic-size";
+var mainOverlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
+var mainTheme = {
+  content: mainContent,
+  sidebar: mainSidebar,
+  overlay: mainOverlay
+};
+
+// packages/ui/react-ui-theme/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, popperMotion, ...etc);
+var menuItem = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/message.ts
+var messageRoot = ({ valence }, etc) => {
+  return mx("p-trimMd rounded-md is-full", messageValence(valence), etc);
+};
+var messageTitle = (_, etc) => {
+  return mx("mbe-trimSm last:mbe-0 font-medium flex items-center gap-trimXs", etc);
+};
+var messageIcon = (_, etc) => {
+  return mx(etc);
+};
+var messageContent = (_, etc) => {
+  return mx("first:font-medium", etc);
+};
+var messageTheme = {
+  root: messageRoot,
+  content: messageContent,
+  icon: messageIcon,
+  title: messageTitle
+};
+
+// packages/ui/react-ui-theme/src/styles/components/popover.ts
+var popoverViewport = ({ constrainBlock, constrainInline }, ...etc) => mx("rounded-md", constrainBlock && "max-bs-[--radix-popover-content-available-height] overflow-y-auto", constrainInline && "max-is-[--radix-popover-content-available-width] overflow-x-auto", ...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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/scroll-area.ts
+var scrollAreaRoot = (_props, ...etc) => mx("overflow-hidden", ...etc);
+var scrollAreaViewport = (_props, ...etc) => mx("is-full bs-full [&>div]:table-fixed [&>div]:is-full", ...etc);
+var scrollAreaScrollbar = (_props, ...etc) => mx("flex select-none touch-none p-0.5 ease-out", "data-[orientation=vertical]:is-1.5 sm:data-[orientation=vertical]:data-[variant=coarse]:is-3", "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:bs-1.5 sm:data-[orientation=horizontal]:data-[variant=coarse]:bs-3", "sm:data-[variant=coarse]:bg-separator rounded-full", "[&>div]:bg-unAccent sm:[&[data-variant=coarse]>div]:bg-attention", ...etc);
+var scrollAreaThumb = (_props, ...etc) => mx("flex-1 rounded-full relative", "before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[6px] before:min-h-[6px]", ...etc);
+var scrollAreaCorner = (_props, ...etc) => mx(...etc);
+var scrollAreaTheme = {
+  root: scrollAreaRoot,
+  viewport: scrollAreaViewport,
+  scrollbar: scrollAreaScrollbar,
+  thumb: scrollAreaThumb,
+  corner: scrollAreaCorner
+};
+
+// packages/ui/react-ui-theme/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 selectTriggerIcon = (_props, ...etc) => mx(getSize(2), ...etc);
+var selectTheme = {
+  content: selectContent,
+  viewport: selectViewport,
+  item: selectItem,
+  itemIndicator: selectItemIndicator,
+  arrow: selectArrow,
+  separator: selectSeparator,
+  scrollButton: selectScrollButton,
+  triggerIcon: selectTriggerIcon
+};
+
+// packages/ui/react-ui-theme/src/styles/components/separator.ts
+var separatorRoot = ({ orientation, subdued }, ...etc) => mx(orientation === "vertical" ? inlineSeparator : blockSeparator, subdued ? subduedSeparatorBorderColor : separatorBorderColor, ...etc);
+var separatorTheme = {
+  root: separatorRoot
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/tag.ts
+var tagRoot = ({ palette = "neutral" }, ...etc) => mx("dx-tag", ...etc);
+var tagTheme = {
+  root: tagRoot
+};
+
+// packages/ui/react-ui-theme/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)] w-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:w-full md:max-w-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
+};
+
+// packages/ui/react-ui-theme/src/styles/components/toolbar.ts
+var toolbarLayout = "is-full shrink-0 flex flex-nowrap items-center gap-1 p-2 overflow-x-auto scrollbar-none contain-layout";
+var toolbarRoot = ({ layoutManaged }, ...etc) => {
+  return mx("bg-toolbarSurface dx-toolbar", !layoutManaged && toolbarLayout, ...etc);
+};
+var toolbarTheme = {
+  root: toolbarRoot
+};
+
+// packages/ui/react-ui-theme/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
+};
+
+// packages/ui/react-ui-theme/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 dx-focus-ring-inset", 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
+};
+
+// packages/ui/react-ui-theme/src/styles/theme.ts
+import { get } from "@dxos/util";
+var defaultTheme = {
+  themeName: () => "default",
+  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,
+  select: selectTheme,
+  scrollArea: scrollAreaTheme,
+  separator: separatorTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme
+};
+var bindTheme = (theme) => {
+  return (path, defaultClassName, styleProps, ...options) => {
+    const result = get(theme, path);
+    return typeof result === "function" ? result(styleProps, ...options) : defaultClassName;
+  };
+};
+var defaultTx = bindTheme(defaultTheme);
+
+// packages/ui/react-ui-theme/src/index.ts
+var tokens = tailwindConfig({}).theme;
+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,
+  chromeText,
+  coarseBlockSize,
+  coarseButtonDimensions,
+  coarseButtonPadding,
+  coarseDimensions,
+  coarseTextPadding,
+  computeSize,
+  contentShadow,
+  dataDisabled,
+  defaultButtonColors,
+  defaultTheme,
+  defaultTx,
+  densityBlockSize,
+  descriptionMessage,
+  descriptionText,
+  descriptionTextPrimary,
+  dialogContent,
+  dialogDescription,
+  dialogOverlay,
+  dialogTheme,
+  dialogTitle,
+  dropRing,
+  dropRingInner,
+  errorInputValence,
+  errorMessageColors,
+  errorText,
+  fineBlockSize,
+  fineButtonDimensions,
+  fineButtonPadding,
+  fineDimensions,
+  fineTextPadding,
+  fixedInsetFlexLayout,
+  focusRing,
+  getHashColor,
+  getSize,
+  getSizeHeight,
+  getSizeWidth,
+  ghostButtonColors,
+  ghostHighlighted,
+  ghostHover,
+  ghostSelected,
+  ghostSelectedContainerMd,
+  ghostSelectedCurrent,
+  ghostSelectedTrackingInterFromNormal,
+  group,
+  groupBorder,
+  groupHoverControlItemWithTransition,
+  hoverColors,
+  hoverableControlItem,
+  hoverableControlItemTransition,
+  hoverableControls,
+  hoverableFocusedControls,
+  hoverableFocusedKeyboardControls,
+  hoverableFocusedWithinControls,
+  hoverableOpenControlItem,
+  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,
+  messageValence,
+  modalSurface,
+  mx,
+  neutralInputValence,
+  neutralMessageColors,
+  placeholderText,
+  popoverArrow,
+  popoverContent,
+  popoverTheme,
+  popoverViewport,
+  popperMotion,
+  primaryButtonColors,
+  scrollAreaCorner,
+  scrollAreaRoot,
+  scrollAreaScrollbar,
+  scrollAreaTheme,
+  scrollAreaThumb,
+  scrollAreaViewport,
+  selectArrow,
+  selectContent,
+  selectItem,
+  selectItemIndicator,
+  selectScrollButton,
+  selectSeparator,
+  selectTheme,
+  selectTriggerIcon,
+  selectViewport,
+  separatorBorderColor,
+  separatorRoot,
+  separatorTheme,
+  shimmer,
+  sidebarBorder,
+  sidebarSurface,
+  sizeHeightMap,
+  sizeValue,
+  sizeWidthMap,
+  staticDefaultButtonColors,
+  staticDisabled,
+  staticFocusRing,
+  staticGhostSelected,
+  staticGhostSelectedCurrent,
+  staticHoverableControls,
+  staticPlaceholderText,
+  statusBar,
+  statusRoot,
+  statusTheme,
+  strongShimmer,
+  subduedFocus,
+  subduedSeparatorBorderColor,
+  subtleHover,
+  successInputValence,
+  successMessageColors,
+  successText,
+  surfaceShadow,
+  surfaceZIndex,
+  tagRoot,
+  tagTheme,
+  textBlockWidth,
+  toastActions,
+  toastBody,
+  toastDescription,
+  toastRoot,
+  toastTheme,
+  toastTitle,
+  toastViewport,
+  tokens,
+  toolbarLayout,
+  toolbarRoot,
+  toolbarTheme,
+  tooltipArrow,
+  tooltipContent,
+  tooltipTheme,
+  topbarBlockPaddingStart,
+  treegridCell,
+  treegridRoot,
+  treegridRow,
+  treegridTheme,
+  userDefaultTokenSet,
+  valenceColorText,
+  warningInputValence,
+  warningMessageColors,
+  warningText
+};
+//# sourceMappingURL=index.mjs.map