@mitcsutt/kiln-ui 0.4.0 → 0.5.0

package/dist/components/layout/Box/Box.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.module.js","names":["box","Box_module_default"],"sources":["../../../../src/components/layout/Box/Box.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. Axis padding (--box-px/-py)\n * falls back to the all-sides value (--box-p) per breakpoint.\n *\n * --box-fill / --box-on (read-only): the fill and ink of an `inverse` Box.\n */\n.box {\n  --_p: var(--box-p-base, 0px);\n  --_px: var(--box-px-base, var(--_p));\n  --_py: var(--box-py-base, var(--_p));\n\n  display: block;\n  min-inline-size: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--_px);\n}\n\n@media (min-width: 40em) {\n  .box {\n    --_p: var(--box-p-sm, 0px);\n    --_px: var(--box-px-sm, var(--_p));\n    --_py: var(--box-py-sm, var(--_p));\n  }\n}\n@media (min-width: 48em) {\n  .box {\n    --_p: var(--box-p-md, 0px);\n    --_px: var(--box-px-md, var(--_p));\n    --_py: var(--box-py-md, var(--_p));\n  }\n}\n@media (min-width: 64em) {\n  .box {\n    --_p: var(--box-p-lg, 0px);\n    --_px: var(--box-px-lg, var(--_p));\n    --_py: var(--box-py-lg, var(--_p));\n  }\n}\n@media (min-width: 80em) {\n  .box {\n    --_p: var(--box-p-xl, 0px);\n    --_px: var(--box-px-xl, var(--_p));\n    --_py: var(--box-py-xl, var(--_p));\n  }\n}\n\n/* Surfaces */\n.box[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.box[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.box[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.box[data-surface='raised'] {\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n}\n/* Inverse and categorical fills re-point the colour roles for descendants — same approach as Section. */\n.box[data-surface='inverse'] {\n  --box-fill: var(--color-surface-inverse);\n  --box-on: var(--color-ink-inverse);\n}\n.box[data-surface='cat-1'] {\n  --box-fill: var(--color-cat-1);\n}\n.box[data-surface='cat-2'] {\n  --box-fill: var(--color-cat-2);\n}\n.box[data-surface='cat-3'] {\n  --box-fill: var(--color-cat-3);\n}\n.box[data-surface='cat-4'] {\n  --box-fill: var(--color-cat-4);\n}\n.box[data-surface='cat-5'] {\n  --box-fill: var(--color-cat-5);\n}\n.box[data-surface='cat-6'] {\n  --box-fill: var(--color-cat-6);\n}\n.box[data-surface='cat-7'] {\n  --box-fill: var(--color-cat-7);\n}\n.box[data-surface='cat-8'] {\n  --box-fill: var(--color-cat-8);\n}\n.box[data-surface^='cat-'] {\n  --box-on: var(--color-cat-ink);\n}\n.box:is([data-surface='inverse'], [data-surface^='cat-']) {\n  --color-ink: var(--box-on);\n  --color-ink-muted: color-mix(in oklab, var(--box-on) 76%, var(--box-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--box-on) 60%, var(--box-fill));\n  --color-line: color-mix(in oklab, var(--box-on) 22%, var(--box-fill));\n  --color-line-strong: color-mix(in oklab, var(--box-on) 45%, var(--box-fill));\n  --color-canvas: var(--box-fill);\n  --color-surface: color-mix(in oklab, var(--box-on) 7%, var(--box-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n  --color-surface-raised: color-mix(in oklab, var(--box-on) 4%, var(--box-fill));\n  --color-focus: var(--box-on);\n  --color-accent-text: var(--box-on);\n  --canvas-image: none;\n\n  background-color: var(--box-fill);\n  color: var(--box-on);\n}\n/* A categorical fill only clears AA against its own ink: no headroom for muted steps. */\n.box[data-surface^='cat-'] {\n  --color-ink-muted: var(--box-on);\n  --color-ink-subtle: var(--box-on);\n  --color-surface: var(--box-fill);\n  --color-surface-sunken: var(--box-fill);\n  --color-surface-raised: var(--box-fill);\n}\n.box:is([data-surface='inverse'], [data-surface^='cat-']) > * {\n  --color-surface-inverse: var(--box-on);\n  --color-ink-inverse: var(--box-fill);\n}\n\n.box[data-border] {\n  border: var(--border-width) solid var(--color-line);\n}\n\n.box[data-radius='field'] {\n  border-radius: var(--radius-field);\n}\n.box[data-radius='surface'] {\n  border-radius: var(--radius-surface);\n}\n.box[data-radius='media'] {\n  border-radius: var(--radius-media);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.box[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Box.module.js","names":["box","Box_module_default"],"sources":["../../../../src/components/layout/Box/Box.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css. Axis padding (--box-px/-py)\n * falls back to the all-sides value (--box-p) per breakpoint.\n *\n * --box-fill / --box-on (read-only): the fill and ink of an `inverse`, `accent` or categorical Box.\n */\n.box {\n  --_p: var(--box-p-base, 0px);\n  --_px: var(--box-px-base, var(--_p));\n  --_py: var(--box-py-base, var(--_p));\n\n  display: block;\n  min-inline-size: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--_px);\n}\n\n@media (min-width: 40em) {\n  .box {\n    --_p: var(--box-p-sm, 0px);\n    --_px: var(--box-px-sm, var(--_p));\n    --_py: var(--box-py-sm, var(--_p));\n  }\n}\n@media (min-width: 48em) {\n  .box {\n    --_p: var(--box-p-md, 0px);\n    --_px: var(--box-px-md, var(--_p));\n    --_py: var(--box-py-md, var(--_p));\n  }\n}\n@media (min-width: 64em) {\n  .box {\n    --_p: var(--box-p-lg, 0px);\n    --_px: var(--box-px-lg, var(--_p));\n    --_py: var(--box-py-lg, var(--_p));\n  }\n}\n@media (min-width: 80em) {\n  .box {\n    --_p: var(--box-p-xl, 0px);\n    --_px: var(--box-px-xl, var(--_p));\n    --_py: var(--box-py-xl, var(--_p));\n  }\n}\n\n/* Surfaces */\n.box[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.box[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.box[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n.box[data-surface='raised'] {\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n}\n/* Inverse, accent and categorical fills re-point the colour roles for descendants — same approach as Section. */\n.box[data-surface='inverse'] {\n  --box-fill: var(--color-surface-inverse);\n  --box-on: var(--color-ink-inverse);\n}\n.box[data-surface='accent'] {\n  --box-fill: var(--color-accent);\n  --box-on: var(--color-accent-ink);\n}\n.box[data-surface='cat-1'] {\n  --box-fill: var(--color-cat-1);\n}\n.box[data-surface='cat-2'] {\n  --box-fill: var(--color-cat-2);\n}\n.box[data-surface='cat-3'] {\n  --box-fill: var(--color-cat-3);\n}\n.box[data-surface='cat-4'] {\n  --box-fill: var(--color-cat-4);\n}\n.box[data-surface='cat-5'] {\n  --box-fill: var(--color-cat-5);\n}\n.box[data-surface='cat-6'] {\n  --box-fill: var(--color-cat-6);\n}\n.box[data-surface='cat-7'] {\n  --box-fill: var(--color-cat-7);\n}\n.box[data-surface='cat-8'] {\n  --box-fill: var(--color-cat-8);\n}\n.box[data-surface^='cat-'] {\n  --box-on: var(--color-cat-ink);\n}\n.box:is([data-surface='inverse'], [data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink: var(--box-on);\n  --color-ink-muted: color-mix(in oklab, var(--box-on) 76%, var(--box-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--box-on) 60%, var(--box-fill));\n  --color-line: color-mix(in oklab, var(--box-on) 22%, var(--box-fill));\n  --color-line-strong: color-mix(in oklab, var(--box-on) 45%, var(--box-fill));\n  --color-canvas: var(--box-fill);\n  --color-surface: color-mix(in oklab, var(--box-on) 7%, var(--box-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n  --color-surface-raised: color-mix(in oklab, var(--box-on) 4%, var(--box-fill));\n  --color-focus: var(--box-on);\n  --color-accent-text: var(--box-on);\n  --canvas-image: none;\n\n  background-color: var(--box-fill);\n  color: var(--box-on);\n}\n/* An accent or categorical fill only clears AA against its own ink: no headroom for muted steps. */\n.box:is([data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink-muted: var(--box-on);\n  --color-ink-subtle: var(--box-on);\n  --color-surface: var(--box-fill);\n  --color-surface-sunken: var(--box-fill);\n  --color-surface-raised: var(--box-fill);\n}\n.box:is([data-surface='inverse'], [data-surface^='cat-']) > * {\n  --color-surface-inverse: var(--box-on);\n  --color-ink-inverse: var(--box-fill);\n}\n/* On an accent fill the accent itself becomes the fill's ink, so a primary action still stands out. */\n.box[data-surface='accent'] > * {\n  --color-accent: var(--box-on);\n  --color-accent-hover: color-mix(in oklab, var(--box-on) 82%, var(--box-fill));\n  --color-accent-ink: var(--box-fill);\n  --color-accent-soft: color-mix(in oklab, var(--box-on) 12%, var(--box-fill));\n}\n\n/*\n * Opt-in (`adaptTones`, so existing bands keep the page's tones): status tones follow the band,\n * like the accent text does. An accent or categorical fill only clears AA against its own ink,\n * so tone text there is that ink (the sign, glyph or label carries the status) and soft tone\n * fills are the fill itself, like the nested surfaces. An inverse band has headroom, so each\n * tone keeps its hue, mixed toward the band's ink until it reads on the fill.\n * Solid tone fills keep their own ink and need no change.\n */\n.box[data-adapt-tones]:is([data-surface='accent'], [data-surface^='cat-']) {\n  --tone-positive-text: var(--box-on);\n  --tone-caution-text: var(--box-on);\n  --tone-critical-text: var(--box-on);\n  --tone-info-text: var(--box-on);\n  --tone-positive-soft: var(--box-fill);\n  --tone-caution-soft: var(--box-fill);\n  --tone-critical-soft: var(--box-fill);\n  --tone-info-soft: var(--box-fill);\n}\n.box[data-adapt-tones][data-surface='inverse'] {\n  --tone-positive-text: color-mix(in oklab, var(--tone-positive) 40%, var(--box-on));\n  --tone-caution-text: color-mix(in oklab, var(--tone-caution) 40%, var(--box-on));\n  --tone-critical-text: color-mix(in oklab, var(--tone-critical) 40%, var(--box-on));\n  --tone-info-text: color-mix(in oklab, var(--tone-info) 40%, var(--box-on));\n  --tone-positive-soft: color-mix(in oklab, var(--tone-positive) 18%, var(--box-fill));\n  --tone-caution-soft: color-mix(in oklab, var(--tone-caution) 18%, var(--box-fill));\n  --tone-critical-soft: color-mix(in oklab, var(--tone-critical) 18%, var(--box-fill));\n  --tone-info-soft: color-mix(in oklab, var(--tone-info) 18%, var(--box-fill));\n}\n\n.box[data-border] {\n  border: var(--border-width) solid var(--color-line);\n}\n\n.box[data-radius='field'] {\n  border-radius: var(--radius-field);\n}\n.box[data-radius='surface'] {\n  border-radius: var(--radius-surface);\n}\n.box[data-radius='media'] {\n  border-radius: var(--radius-media);\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.box[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from 'react';
+import { type VisibilityProps } from '../../../utils/visibility.js';
+export type ScrollAreaAxis = 'x' | 'y' | 'both';
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement>, VisibilityProps {
+    /**
+     * Names the area. With a name (this, or `aria-labelledby`) it becomes a labelled region that
+     * keyboard users can focus and scroll with the arrow keys.
+     */
+    label?: string;
+    /**
+     * Which way it scrolls. On `x` and `both` the content keeps its natural width, so a row of cards
+     * scrolls instead of squeezing. `y` and `both` scroll once a parent gives the area a height (a
+     * grid row, a pane). Default `x`.
+     */
+    axis?: ScrollAreaAxis;
+}
+/**
+ * A scroll container for content wider or taller than the page, such as a bracket, a timeline or
+ * a wide board, that keyboard users can reach and scroll.
+ *
+ * @remarks
+ * `ScrollArea` lets one wide thing scroll on its own instead of pushing the page sideways. Give it
+ * a `label` and it's a named region in the tab order, so someone without a mouse or touch screen
+ * can focus it and scroll with the arrow keys. The scrollbar takes the theme's line colour.
+ *
+ * A data table doesn't need one: `Table` scrolls sideways itself, and takes the same `label`.
+ *
+ * @privateRemarks
+ * The labelled, focusable scroll wrapper Table already has, for anything that isn't a table
+ * (axe's scrollable-region-focusable). Focusable only when named, so an unnamed one never adds
+ * an anonymous tab stop. `role` is an expression, which jsx-a11y's no-noninteractive-tabindex
+ * exempts (allowExpressionValues), so the tabIndex stays lint-clean.
+ *
+ * <ScrollArea label="Knockout bracket"><Bracket /></ScrollArea>
+ */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/ScrollArea/ScrollArea.js

@@ -0,0 +1,25 @@
+import { cx as e } from "../../../utils/cx.js";
+import { visibilityClass as t } from "../../../utils/visibility.js";
+import n from "./ScrollArea.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/layout/ScrollArea/ScrollArea.tsx
+var a = r(function({ label: r, axis: a = "x", hideBelow: o, hideAbove: s, className: c, ...l }, u) {
+	let d = r !== void 0 || l["aria-labelledby"] !== void 0;
+	return /* @__PURE__ */ i("div", {
+		ref: u,
+		className: e(n.scrollArea, t({
+			hideBelow: o,
+			hideAbove: s
+		}), c),
+		"data-axis": a,
+		role: d ? "region" : void 0,
+		"aria-label": r,
+		tabIndex: d ? 0 : void 0,
+		...l
+	});
+});
+//#endregion
+export { a as ScrollArea };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/layout/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":["styles","ScrollArea_module_default","ScrollArea","forwardRef","rest","named","label","cx","visibilityClass","className","axis"],"sources":["../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\nimport styles from './ScrollArea.module.css'\n\nexport type ScrollAreaAxis = 'x' | 'y' | 'both'\n\nexport interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement>, VisibilityProps {\n  /**\n   * Names the area. With a name (this, or `aria-labelledby`) it becomes a labelled region that\n   * keyboard users can focus and scroll with the arrow keys.\n   */\n  label?: string\n  /**\n   * Which way it scrolls. On `x` and `both` the content keeps its natural width, so a row of cards\n   * scrolls instead of squeezing. `y` and `both` scroll once a parent gives the area a height (a\n   * grid row, a pane). Default `x`.\n   */\n  axis?: ScrollAreaAxis\n}\n\n/**\n * A scroll container for content wider or taller than the page, such as a bracket, a timeline or\n * a wide board, that keyboard users can reach and scroll.\n *\n * @remarks\n * `ScrollArea` lets one wide thing scroll on its own instead of pushing the page sideways. Give it\n * a `label` and it's a named region in the tab order, so someone without a mouse or touch screen\n * can focus it and scroll with the arrow keys. The scrollbar takes the theme's line colour.\n *\n * A data table doesn't need one: `Table` scrolls sideways itself, and takes the same `label`.\n *\n * @privateRemarks\n * The labelled, focusable scroll wrapper Table already has, for anything that isn't a table\n * (axe's scrollable-region-focusable). Focusable only when named, so an unnamed one never adds\n * an anonymous tab stop. `role` is an expression, which jsx-a11y's no-noninteractive-tabindex\n * exempts (allowExpressionValues), so the tabIndex stays lint-clean.\n *\n * <ScrollArea label=\"Knockout bracket\"><Bracket /></ScrollArea>\n */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  { label, axis = 'x', hideBelow, hideAbove, className, ...rest },\n  ref,\n) {\n  const named = label !== undefined || rest['aria-labelledby'] !== undefined\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.scrollArea, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-axis={axis}\n      role={named ? 'region' : undefined}\n      aria-label={label}\n      tabIndex={named ? 0 : undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AAwCA,IAAaE,IAAaC,EAA4C,SACpE,EAAE,UAAO,UAAO,KAAK,cAAW,cAAW,cAAW,GAAGC,KACzD,GACA;CACA,IAAMC,IAAQC,MAAU,KAAA,KAAaF,EAAK,uBAAuB,KAAA;CACjE,OACE,kBAAC,OAAD;EACO;EACL,WAAWG,EAAGP,EAAO,YAAYQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EACrF,aAAWC;EACX,MAAML,IAAQ,WAAW,KAAA;EACzB,cAAYC;EACZ,UAAUD,IAAQ,IAAI,KAAA;EACtB,GAAID;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/ScrollArea/ScrollArea.module.js

@@ -0,0 +1,6 @@
+//#region src/components/layout/ScrollArea/ScrollArea.module.css
+var e = "kiln-ScrollArea__scrollArea", t = { scrollArea: e };
+//#endregion
+export { t as default, e as scrollArea };
+
+//# sourceMappingURL=ScrollArea.module.js.map

package/dist/components/layout/ScrollArea/ScrollArea.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.module.js","names":["scrollArea","ScrollArea_module_default"],"sources":["../../../../src/components/layout/ScrollArea/ScrollArea.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --scroll-area-thumb  default var(--color-line-strong) — the scrollbar's thumb\n *\n * Scrolling stays inside the area on its own axis (overscroll-behavior), so reaching the end\n * of a wide bracket doesn't swipe the browser back a page.\n */\n.scrollArea {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-x: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--scroll-area-thumb, var(--color-line-strong)) transparent;\n}\n.scrollArea[data-axis='y'] {\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior-x: auto;\n  overscroll-behavior-y: contain;\n}\n.scrollArea[data-axis='both'] {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n/*\n * Sideways, the content keeps at least its natural width instead of squeezing to fit, so a row\n * of cards scrolls rather than shrinking; content narrower than the area still fills it.\n */\n.scrollArea:not([data-axis='y']) > * {\n  min-inline-size: max-content;\n}\n.scrollArea:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.scrollArea[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/layout/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './ScrollArea.js';
+export type { ScrollAreaProps, ScrollAreaAxis } from './ScrollArea.js';

package/dist/components/layout/Section/Section.d.ts

@@ -17,6 +17,14 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityPro
      * stay legible.
      */
     surface?: SectionSurface;
+    /**
+     * On an `inverse`, `accent` or categorical band, re-point the status tones too, so tone text
+     * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on
+     * the band. On `accent` and categorical bands tone text becomes the band's ink, so the sign,
+     * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so
+     * tones keep the page's colours. No effect on other surfaces.
+     */
+    adaptTones?: boolean;
     /** A hairline across the full bleed at the top, bottom or both edges. */
     divider?: SectionDivider;
     as?: SectionElement;
@@ -34,8 +42,9 @@ export interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityPro
  *
  * `surface` is `canvas`, `surface`, `sunken`, `inverse`, `accent`, or a categorical `cat-1` to
  * `cat-8` (a band in one person's or team's colour, matching their `Tag`). On `inverse`, `accent`
- * and the categorical bands, the colour roles flip for everything inside, so text, links, focus rings and buttons stay
- * legible with no extra props. `divider` adds a rule at the `top`, `bottom` or `both`.
+ * and the categorical bands, the colour roles flip for everything inside, so text, links, focus
+ * rings and buttons stay legible with no extra props. Add `adaptTones` to flip the status tones
+ * too. `divider` adds a rule at the `top`, `bottom` or `both`.
  *
  * @privateRemarks
  * A full-bleed band of vertical rhythm. Put a `Container` inside for width.

package/dist/components/layout/Section/Section.js

@@ -6,17 +6,18 @@ import a from "./Section.module.js";
 import { forwardRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/components/layout/Section/Section.tsx
-var c = o(function({ space: o, surface: c, divider: l, as: u = "section", hideBelow: d, hideAbove: f, className: p, style: m, ...h }, g) {
-	return /* @__PURE__ */ s(u, {
-		ref: g,
+var c = o(function({ space: o, surface: c, adaptTones: l = !1, divider: u, as: d = "section", hideBelow: f, hideAbove: p, className: m, style: h, ...g }, _) {
+	return /* @__PURE__ */ s(d, {
+		ref: _,
 		className: e(a.section, i({
-			hideBelow: d,
-			hideAbove: f
-		}), p),
+			hideBelow: f,
+			hideAbove: p
+		}), m),
 		"data-surface": c,
-		"data-divider": l,
-		style: t(n("section-space", o, r), m),
-		...h
+		"data-adapt-tones": l || void 0,
+		"data-divider": u,
+		style: t(n("section-space", o, r), h),
+		...g
 	});
 });
 //#endregion

package/dist/components/layout/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["styles","Section_module_default","Section","forwardRef","spaceProp","Comp","rest","cx","visibilityClass","className","surface","divider","mergeStyles","responsiveVars","space","style"],"sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space, type CategoryColor } from '#utils/tokens'\nimport styles from './Section.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\nexport type SectionSurface =\n  'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent' | `cat-${CategoryColor}`\nexport type SectionDivider = 'top' | 'bottom' | 'both'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Block padding (top and bottom), as a step on the space scale. Responsive.\n   * Vary it: adjacent sections should not share the same step. Default `8`.\n   */\n  space?: Responsive<Space>\n  /**\n   * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse`, `accent` and\n   * the categorical `cat-1` to `cat-8` re-point the ink, line and focus colours so children\n   * stay legible.\n   */\n  surface?: SectionSurface\n  /** A hairline across the full bleed at the top, bottom or both edges. */\n  divider?: SectionDivider\n  as?: SectionElement\n}\n\n/**\n * A full-bleed band of vertical space, with an optional surface and rules. Put a Container inside\n * it for width.\n *\n * @remarks\n * `Section` is how a page gets its rhythm: each band pads itself top and bottom with a step from\n * the space scale, and can paint a surface across the full width. Width is the `Container`'s job,\n * so a section is almost always `Section` then `Container`.\n *\n * ## Surfaces and bands\n *\n * `surface` is `canvas`, `surface`, `sunken`, `inverse`, `accent`, or a categorical `cat-1` to\n * `cat-8` (a band in one person's or team's colour, matching their `Tag`). On `inverse`, `accent`\n * and the categorical bands, the colour roles flip for everything inside, so text, links, focus rings and buttons stay\n * legible with no extra props. `divider` adds a rule at the `top`, `bottom` or `both`.\n *\n * @privateRemarks\n * A full-bleed band of vertical rhythm. Put a `Container` inside for width.\n *\n * <Section space={{ base: 7, md: 9 }} surface=\"sunken\" divider=\"both\">\n *   <Container>…</Container>\n * </Section>\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    space: spaceProp,\n    surface,\n    divider,\n    as: Comp = 'section',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.section, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface}\n      data-divider={divider}\n      style={mergeStyles(responsiveVars('section-space', spaceProp, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AAoDA,IAAaE,IAAUC,EAAsC,SAC3D,EACE,OAAOC,GACP,YACA,YACA,IAAIC,IAAO,WACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGP,EAAO,SAASQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,gBAAcC;EACd,gBAAcC;EACd,OAAOC,EAAYC,EAAe,iBAAiBT,GAAWU,CAAK,GAAGC,CAAK;EAC3E,GAAIT;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"Section.js","names":["styles","Section_module_default","Section","forwardRef","spaceProp","Comp","rest","cx","visibilityClass","className","surface","adaptTones","divider","mergeStyles","responsiveVars","space","style"],"sources":["../../../../src/components/layout/Section/Section.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space, type CategoryColor } from '#utils/tokens'\nimport styles from './Section.module.css'\nimport { visibilityClass, type VisibilityProps } from '#utils/visibility'\n\nexport type SectionElement = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\nexport type SectionSurface =\n  'canvas' | 'surface' | 'sunken' | 'inverse' | 'accent' | `cat-${CategoryColor}`\nexport type SectionDivider = 'top' | 'bottom' | 'both'\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement>, VisibilityProps {\n  /**\n   * Block padding (top and bottom), as a step on the space scale. Responsive.\n   * Vary it: adjacent sections should not share the same step. Default `8`.\n   */\n  space?: Responsive<Space>\n  /**\n   * Full-bleed band colour. Omit to stay transparent on the canvas. `inverse`, `accent` and\n   * the categorical `cat-1` to `cat-8` re-point the ink, line and focus colours so children\n   * stay legible.\n   */\n  surface?: SectionSurface\n  /**\n   * On an `inverse`, `accent` or categorical band, re-point the status tones too, so tone text\n   * and soft tone fills (a `Stat` delta, a toned `Numeral` or `Text`, a soft `Badge`) stay AA on\n   * the band. On `accent` and categorical bands tone text becomes the band's ink, so the sign,\n   * glyph or label carries the status; on `inverse` each tone keeps its hue. Off by default, so\n   * tones keep the page's colours. No effect on other surfaces.\n   */\n  adaptTones?: boolean\n  /** A hairline across the full bleed at the top, bottom or both edges. */\n  divider?: SectionDivider\n  as?: SectionElement\n}\n\n/**\n * A full-bleed band of vertical space, with an optional surface and rules. Put a Container inside\n * it for width.\n *\n * @remarks\n * `Section` is how a page gets its rhythm: each band pads itself top and bottom with a step from\n * the space scale, and can paint a surface across the full width. Width is the `Container`'s job,\n * so a section is almost always `Section` then `Container`.\n *\n * ## Surfaces and bands\n *\n * `surface` is `canvas`, `surface`, `sunken`, `inverse`, `accent`, or a categorical `cat-1` to\n * `cat-8` (a band in one person's or team's colour, matching their `Tag`). On `inverse`, `accent`\n * and the categorical bands, the colour roles flip for everything inside, so text, links, focus\n * rings and buttons stay legible with no extra props. Add `adaptTones` to flip the status tones\n * too. `divider` adds a rule at the `top`, `bottom` or `both`.\n *\n * @privateRemarks\n * A full-bleed band of vertical rhythm. Put a `Container` inside for width.\n *\n * <Section space={{ base: 7, md: 9 }} surface=\"sunken\" divider=\"both\">\n *   <Container>…</Container>\n * </Section>\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(function Section(\n  {\n    space: spaceProp,\n    surface,\n    adaptTones = false,\n    divider,\n    as: Comp = 'section',\n    hideBelow,\n    hideAbove,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.section, visibilityClass({ hideBelow, hideAbove }), className)}\n      data-surface={surface}\n      data-adapt-tones={adaptTones || undefined}\n      data-divider={divider}\n      style={mergeStyles(responsiveVars('section-space', spaceProp, space), style)}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA6DA,IAAaE,IAAUC,EAAsC,SAC3D,EACE,OAAOC,GACP,YACA,gBAAa,IACb,YACA,IAAIC,IAAO,WACX,cACA,cACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,WAAWE,EAAGP,EAAO,SAASQ,EAAgB;GAAE;GAAW;EAAU,CAAC,GAAGC,CAAS;EAClF,gBAAcC;EACd,oBAAkBC,KAAc,KAAA;EAChC,gBAAcC;EACd,OAAOC,EAAYC,EAAe,iBAAiBV,GAAWW,CAAK,GAAGC,CAAK;EAC3E,GAAIV;CACL,CAAA;AAEL,CAAC"}

package/dist/components/layout/Section/Section.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.module.js","names":["section","Section_module_default"],"sources":["../../../../src/components/layout/Section/Section.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens:\n *   --section-fill / --section-on   (read-only) the band's fill and ink on inverse/accent\n *   --section-space-default   block padding when `space` is unset (default var(--space-8))\n *   --section-divider-color   hairline colour for `divider` (default var(--color-line))\n */\n.section {\n  --_space: var(--section-space-base, var(--section-space-default, var(--space-8)));\n  --_rule: var(--border-width) solid var(--section-divider-color, var(--color-line));\n\n  display: block;\n  position: relative;\n  min-inline-size: 0;\n  padding-block: var(--_space);\n}\n\n@media (min-width: 40em) {\n  .section {\n    --_space: var(--section-space-sm, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 48em) {\n  .section {\n    --_space: var(--section-space-md, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 64em) {\n  .section {\n    --_space: var(--section-space-lg, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 80em) {\n  .section {\n    --_space: var(--section-space-xl, var(--section-space-default, var(--space-8)));\n  }\n}\n\n.section[data-divider='top'],\n.section[data-divider='both'] {\n  border-block-start: var(--_rule);\n}\n.section[data-divider='bottom'],\n.section[data-divider='both'] {\n  border-block-end: var(--_rule);\n}\n\n/* Surfaces */\n.section[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.section[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.section[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n\n/*\n * Inverse and accent bands re-point the colour roles for every descendant, so text,\n * hairlines, focus rings and nested controls (an outline or solid Button) stay legible\n * without per-child props. Mixes are taken against the band's own fill.\n *\n * Swapping a pair (e.g. ink <-> ink-inverse) can't happen on one element — it would be\n * a var() cycle — so the band publishes its fill/ink as --section-fill/--section-on and\n * the swapped roles are set on its children.\n */\n.section[data-surface='inverse'] {\n  --section-fill: var(--color-surface-inverse);\n  --section-on: var(--color-ink-inverse);\n}\n.section[data-surface='accent'] {\n  --section-fill: var(--color-accent);\n  --section-on: var(--color-accent-ink);\n}\n.section[data-surface='cat-1'] {\n  --section-fill: var(--color-cat-1);\n}\n.section[data-surface='cat-2'] {\n  --section-fill: var(--color-cat-2);\n}\n.section[data-surface='cat-3'] {\n  --section-fill: var(--color-cat-3);\n}\n.section[data-surface='cat-4'] {\n  --section-fill: var(--color-cat-4);\n}\n.section[data-surface='cat-5'] {\n  --section-fill: var(--color-cat-5);\n}\n.section[data-surface='cat-6'] {\n  --section-fill: var(--color-cat-6);\n}\n.section[data-surface='cat-7'] {\n  --section-fill: var(--color-cat-7);\n}\n.section[data-surface='cat-8'] {\n  --section-fill: var(--color-cat-8);\n}\n.section[data-surface^='cat-'] {\n  --section-on: var(--color-cat-ink);\n}\n.section:is([data-surface='inverse'], [data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink: var(--section-on);\n  --color-ink-muted: color-mix(in oklab, var(--section-on) 76%, var(--section-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--section-on) 60%, var(--section-fill));\n  --color-line: color-mix(in oklab, var(--section-on) 22%, var(--section-fill));\n  --color-line-strong: color-mix(in oklab, var(--section-on) 45%, var(--section-fill));\n  --color-canvas: var(--section-fill);\n  --color-surface: color-mix(in oklab, var(--section-on) 7%, var(--section-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n  --color-surface-raised: color-mix(in oklab, var(--section-on) 4%, var(--section-fill));\n  --color-focus: var(--section-on);\n  --color-accent-text: var(--section-on);\n  --canvas-image: none;\n\n  background-color: var(--section-fill);\n  color: var(--section-on);\n}\n/* An accent or categorical fill only clears AA against its own ink, so there is no headroom\n   for muted/subtle steps there: secondary text uses the full band ink, and nested\n   surfaces stay the band fill (edges come from the line tokens) so text on them keeps AA. */\n.section:is([data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink-muted: var(--section-on);\n  --color-ink-subtle: var(--section-on);\n  --color-surface: var(--section-fill);\n  --color-surface-sunken: var(--section-fill);\n  --color-surface-raised: var(--section-fill);\n}\n.section[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--section-on);\n  --color-ink-inverse: var(--section-fill);\n}\n/* On an accent band the accent itself becomes the band's ink, so a primary action still stands out. */\n.section[data-surface='accent'] > * {\n  --color-accent: var(--section-on);\n  --color-accent-hover: color-mix(in oklab, var(--section-on) 82%, var(--section-fill));\n  --color-accent-ink: var(--section-fill);\n  --color-accent-soft: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.section[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Section.module.js","names":["section","Section_module_default"],"sources":["../../../../src/components/layout/Section/Section.module.css"],"sourcesContent":["/*\n * Responsive pattern: see layout/Stack/Stack.module.css.\n *\n * Component tokens:\n *   --section-fill / --section-on   (read-only) the band's fill and ink on inverse/accent\n *   --section-space-default   block padding when `space` is unset (default var(--space-8))\n *   --section-divider-color   hairline colour for `divider` (default var(--color-line))\n */\n.section {\n  --_space: var(--section-space-base, var(--section-space-default, var(--space-8)));\n  --_rule: var(--border-width) solid var(--section-divider-color, var(--color-line));\n\n  display: block;\n  position: relative;\n  min-inline-size: 0;\n  padding-block: var(--_space);\n}\n\n@media (min-width: 40em) {\n  .section {\n    --_space: var(--section-space-sm, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 48em) {\n  .section {\n    --_space: var(--section-space-md, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 64em) {\n  .section {\n    --_space: var(--section-space-lg, var(--section-space-default, var(--space-8)));\n  }\n}\n@media (min-width: 80em) {\n  .section {\n    --_space: var(--section-space-xl, var(--section-space-default, var(--space-8)));\n  }\n}\n\n.section[data-divider='top'],\n.section[data-divider='both'] {\n  border-block-start: var(--_rule);\n}\n.section[data-divider='bottom'],\n.section[data-divider='both'] {\n  border-block-end: var(--_rule);\n}\n\n/* Surfaces */\n.section[data-surface='canvas'] {\n  background-color: var(--color-canvas);\n  background-image: var(--canvas-image);\n  background-size: var(--canvas-image-size);\n  color: var(--color-ink);\n}\n.section[data-surface='surface'] {\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n}\n.section[data-surface='sunken'] {\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink);\n}\n\n/*\n * Inverse and accent bands re-point the colour roles for every descendant, so text,\n * hairlines, focus rings and nested controls (an outline or solid Button) stay legible\n * without per-child props. Mixes are taken against the band's own fill.\n *\n * Swapping a pair (e.g. ink <-> ink-inverse) can't happen on one element — it would be\n * a var() cycle — so the band publishes its fill/ink as --section-fill/--section-on and\n * the swapped roles are set on its children.\n */\n.section[data-surface='inverse'] {\n  --section-fill: var(--color-surface-inverse);\n  --section-on: var(--color-ink-inverse);\n}\n.section[data-surface='accent'] {\n  --section-fill: var(--color-accent);\n  --section-on: var(--color-accent-ink);\n}\n.section[data-surface='cat-1'] {\n  --section-fill: var(--color-cat-1);\n}\n.section[data-surface='cat-2'] {\n  --section-fill: var(--color-cat-2);\n}\n.section[data-surface='cat-3'] {\n  --section-fill: var(--color-cat-3);\n}\n.section[data-surface='cat-4'] {\n  --section-fill: var(--color-cat-4);\n}\n.section[data-surface='cat-5'] {\n  --section-fill: var(--color-cat-5);\n}\n.section[data-surface='cat-6'] {\n  --section-fill: var(--color-cat-6);\n}\n.section[data-surface='cat-7'] {\n  --section-fill: var(--color-cat-7);\n}\n.section[data-surface='cat-8'] {\n  --section-fill: var(--color-cat-8);\n}\n.section[data-surface^='cat-'] {\n  --section-on: var(--color-cat-ink);\n}\n.section:is([data-surface='inverse'], [data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink: var(--section-on);\n  --color-ink-muted: color-mix(in oklab, var(--section-on) 76%, var(--section-fill));\n  --color-ink-subtle: color-mix(in oklab, var(--section-on) 60%, var(--section-fill));\n  --color-line: color-mix(in oklab, var(--section-on) 22%, var(--section-fill));\n  --color-line-strong: color-mix(in oklab, var(--section-on) 45%, var(--section-fill));\n  --color-canvas: var(--section-fill);\n  --color-surface: color-mix(in oklab, var(--section-on) 7%, var(--section-fill));\n  --color-surface-sunken: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n  --color-surface-raised: color-mix(in oklab, var(--section-on) 4%, var(--section-fill));\n  --color-focus: var(--section-on);\n  --color-accent-text: var(--section-on);\n  --canvas-image: none;\n\n  background-color: var(--section-fill);\n  color: var(--section-on);\n}\n/* An accent or categorical fill only clears AA against its own ink, so there is no headroom\n   for muted/subtle steps there: secondary text uses the full band ink, and nested\n   surfaces stay the band fill (edges come from the line tokens) so text on them keeps AA. */\n.section:is([data-surface='accent'], [data-surface^='cat-']) {\n  --color-ink-muted: var(--section-on);\n  --color-ink-subtle: var(--section-on);\n  --color-surface: var(--section-fill);\n  --color-surface-sunken: var(--section-fill);\n  --color-surface-raised: var(--section-fill);\n}\n.section[data-surface='inverse'] > * {\n  --color-surface-inverse: var(--section-on);\n  --color-ink-inverse: var(--section-fill);\n}\n/* On an accent band the accent itself becomes the band's ink, so a primary action still stands out. */\n.section[data-surface='accent'] > * {\n  --color-accent: var(--section-on);\n  --color-accent-hover: color-mix(in oklab, var(--section-on) 82%, var(--section-fill));\n  --color-accent-ink: var(--section-fill);\n  --color-accent-soft: color-mix(in oklab, var(--section-on) 12%, var(--section-fill));\n}\n\n/*\n * Opt-in (`adaptTones`, so existing bands keep the page's tones): status tones follow the band,\n * like the accent text does. An accent or categorical fill only clears AA against its own ink,\n * so tone text there is that ink (the sign, glyph or label carries the status) and soft tone\n * fills are the fill itself, like the nested surfaces. An inverse band has headroom, so each\n * tone keeps its hue, mixed toward the band's ink until it reads on the fill.\n * Solid tone fills keep their own ink and need no change.\n */\n.section[data-adapt-tones]:is([data-surface='accent'], [data-surface^='cat-']) {\n  --tone-positive-text: var(--section-on);\n  --tone-caution-text: var(--section-on);\n  --tone-critical-text: var(--section-on);\n  --tone-info-text: var(--section-on);\n  --tone-positive-soft: var(--section-fill);\n  --tone-caution-soft: var(--section-fill);\n  --tone-critical-soft: var(--section-fill);\n  --tone-info-soft: var(--section-fill);\n}\n.section[data-adapt-tones][data-surface='inverse'] {\n  --tone-positive-text: color-mix(in oklab, var(--tone-positive) 40%, var(--section-on));\n  --tone-caution-text: color-mix(in oklab, var(--tone-caution) 40%, var(--section-on));\n  --tone-critical-text: color-mix(in oklab, var(--tone-critical) 40%, var(--section-on));\n  --tone-info-text: color-mix(in oklab, var(--tone-info) 40%, var(--section-on));\n  --tone-positive-soft: color-mix(in oklab, var(--tone-positive) 18%, var(--section-fill));\n  --tone-caution-soft: color-mix(in oklab, var(--tone-caution) 18%, var(--section-fill));\n  --tone-critical-soft: color-mix(in oklab, var(--tone-critical) 18%, var(--section-fill));\n  --tone-info-soft: color-mix(in oklab, var(--tone-info) 18%, var(--section-fill));\n}\n\n/* `hidden` wins over the display above (author CSS otherwise beats the UA [hidden] rule). */\n.section[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/dist/index.d.ts

@@ -28,6 +28,8 @@ export { AppShell } from './components/layout/AppShell/index.js';
 export type { AppShellProps, AppShellHeaderProps, AppShellMainProps, AppShellSidebarProps, AppShellFooterProps, AppShellBottomBarProps, AppShellNavBreakpoint, } from './components/layout/AppShell/index.js';
 export { VisuallyHidden } from './components/layout/VisuallyHidden/index.js';
 export type { VisuallyHiddenProps } from './components/layout/VisuallyHidden/index.js';
+export { ScrollArea } from './components/layout/ScrollArea/index.js';
+export type { ScrollAreaProps, ScrollAreaAxis } from './components/layout/ScrollArea/index.js';
 export { ActionBar } from './components/layout/ActionBar/index.js';
 export type { ActionBarProps, ActionBarAlign, ActionBarElement, } from './components/layout/ActionBar/index.js';
 export { Heading, DEFAULT_HEADING_SIZE } from './components/typography/Heading/index.js';
@@ -165,9 +167,9 @@ export type { DeltaProps, DeltaDirection, DeltaTone } from './components/display
 export { DataList } from './components/display/DataList/index.js';
 export type { DataListProps, DataListItemProps, DataListOrientation, } from './components/display/DataList/index.js';
 export { List } from './components/display/List/index.js';
-export type { ListProps, ListItemProps, ListDensity, ListElement } from './components/display/List/index.js';
+export type { ListProps, ListItemProps, ListDensity, ListElement, ListSurface, } from './components/display/List/index.js';
 export { Table } from './components/display/Table/index.js';
-export type { TableProps, TableDensity, TableVariant, TableAlign, TableSort, TableRowProps, TableHeaderCellProps, TableCellProps, TableColumnWidth, } from './components/display/Table/index.js';
+export type { TableProps, TableDensity, TableVariant, TableSurface, TableAlign, TableVerticalAlign, TableSort, TableRowProps, TableHeaderCellProps, TableCellProps, TableColumnWidth, } from './components/display/Table/index.js';
 export { Media } from './components/display/Media/index.js';
 export type { MediaProps, MediaRatio, MediaFit, MediaRadius, MediaSize, } from './components/display/Media/index.js';
 export { Marquee } from './components/display/Marquee/index.js';

package/dist/index.js

@@ -16,104 +16,105 @@ import { Divider as te } from "./components/layout/Divider/Divider.js";
 import { AspectRatio as ne } from "./components/layout/AspectRatio/AspectRatio.js";
 import { VisuallyHidden as re } from "./components/layout/VisuallyHidden/VisuallyHidden.js";
 import { AppShell as ie } from "./components/layout/AppShell/AppShell.js";
-import { ActionBar as ae } from "./components/layout/ActionBar/ActionBar.js";
-import { DEFAULT_HEADING_SIZE as oe } from "./components/typography/Heading/sizes.js";
-import { Heading as se } from "./components/typography/Heading/Heading.js";
-import { Text as ce } from "./components/typography/Text/Text.js";
-import { Link as le } from "./components/typography/Link/Link.js";
-import { Code as ue } from "./components/typography/Code/Code.js";
-import { Kbd as de } from "./components/typography/Kbd/Kbd.js";
-import { Prose as fe } from "./components/typography/Prose/Prose.js";
-import { Quote as pe } from "./components/typography/Quote/Quote.js";
-import { formatNumeral as me, formatNumeralParts as he, signOf as ge } from "./components/typography/Numeral/format.js";
-import { Numeral as _e } from "./components/typography/Numeral/Numeral.js";
-import { Amount as ve } from "./components/typography/Amount/Amount.js";
-import { SectionHeader as ye } from "./components/typography/SectionHeader/SectionHeader.js";
-import { Spinner as be } from "./components/feedback/Spinner/Spinner.js";
-import { Button as xe } from "./components/actions/Button/Button.js";
-import { IconButton as Se } from "./components/actions/IconButton/IconButton.js";
-import { ToggleChip as Ce } from "./components/actions/ToggleChip/ToggleChip.js";
-import { useFieldControl as we } from "./components/inputs/internal/FieldContext.js";
-import { ChipGroup as Te } from "./components/actions/ChipGroup/ChipGroup.js";
-import { SegmentedControl as Ee } from "./components/actions/SegmentedControl/SegmentedControl.js";
-import { ModeToggle as De } from "./components/actions/ModeToggle/ModeToggle.js";
-import { Field as Oe } from "./components/inputs/Field/Field.js";
-import { Input as ke } from "./components/inputs/Input/Input.js";
-import { Textarea as Ae } from "./components/inputs/Textarea/Textarea.js";
-import { Select as je } from "./components/inputs/Select/Select.js";
-import { Checkbox as Me } from "./components/inputs/Checkbox/Checkbox.js";
-import { RadioGroup as Ne } from "./components/inputs/RadioGroup/RadioGroup.js";
-import { Switch as Pe } from "./components/inputs/Switch/Switch.js";
-import { Fieldset as Fe } from "./components/inputs/Fieldset/Fieldset.js";
-import { TextField as Ie } from "./components/inputs/TextField/TextField.js";
-import { TextareaField as Le } from "./components/inputs/TextareaField/TextareaField.js";
-import { SelectField as Re } from "./components/inputs/SelectField/SelectField.js";
-import { CheckboxField as ze } from "./components/inputs/CheckboxField/CheckboxField.js";
-import { PasswordInput as Be } from "./components/inputs/PasswordInput/PasswordInput.js";
-import { PasswordField as Ve } from "./components/inputs/PasswordField/PasswordField.js";
-import { NumberInput as He } from "./components/inputs/NumberInput/NumberInput.js";
-import { NumberField as Ue } from "./components/inputs/NumberField/NumberField.js";
-import { AmountInput as We } from "./components/inputs/AmountInput/AmountInput.js";
-import { AmountField as Ge } from "./components/inputs/AmountField/AmountField.js";
-import { OneTimeCodeInput as Ke } from "./components/inputs/OneTimeCodeInput/OneTimeCodeInput.js";
-import { OneTimeCodeField as qe } from "./components/inputs/OneTimeCodeField/OneTimeCodeField.js";
-import { ColorInput as Je } from "./components/inputs/ColorInput/ColorInput.js";
-import { ColorField as Ye } from "./components/inputs/ColorField/ColorField.js";
-import { SwitchField as Xe } from "./components/inputs/SwitchField/SwitchField.js";
-import { DateRangeField as Ze } from "./components/inputs/DateRangeField/DateRangeField.js";
-import { CheckboxGroup as Qe } from "./components/inputs/CheckboxGroup/CheckboxGroup.js";
-import { CheckboxGroupField as $e } from "./components/inputs/CheckboxGroupField/CheckboxGroupField.js";
-import { RadioGroupField as et } from "./components/inputs/RadioGroupField/RadioGroupField.js";
-import { SegmentedField as tt } from "./components/inputs/SegmentedField/SegmentedField.js";
-import { ChipGroupField as nt } from "./components/inputs/ChipGroupField/ChipGroupField.js";
-import { ChoiceCards as rt } from "./components/inputs/ChoiceCards/ChoiceCards.js";
-import { ChoiceCardsField as it } from "./components/inputs/ChoiceCardsField/ChoiceCardsField.js";
-import { Slider as at } from "./components/inputs/Slider/Slider.js";
-import { SliderField as ot } from "./components/inputs/SliderField/SliderField.js";
-import { RangeSlider as st } from "./components/inputs/RangeSlider/RangeSlider.js";
-import { RangeSliderField as ct } from "./components/inputs/RangeSliderField/RangeSliderField.js";
-import { Rating as lt } from "./components/inputs/Rating/Rating.js";
-import { RatingField as ut } from "./components/inputs/RatingField/RatingField.js";
-import { Tag as dt, TagList as ft } from "./components/display/Tag/Tag.js";
-import { Combobox as pt } from "./components/inputs/Combobox/Combobox.js";
-import { ComboboxField as mt } from "./components/inputs/ComboboxField/ComboboxField.js";
-import { TagsInput as ht } from "./components/inputs/TagsInput/TagsInput.js";
-import { TagsField as gt } from "./components/inputs/TagsField/TagsField.js";
-import { FileDrop as _t } from "./components/inputs/FileDrop/FileDrop.js";
-import { FileField as vt } from "./components/inputs/FileField/FileField.js";
-import { Card as yt } from "./components/display/Card/Card.js";
-import { Badge as bt } from "./components/display/Badge/Badge.js";
-import { avatarColor as xt, getInitials as St } from "./components/display/Avatar/avatarUtils.js";
-import { Avatar as Ct } from "./components/display/Avatar/Avatar.js";
-import { AvatarGroup as wt } from "./components/display/AvatarGroup/AvatarGroup.js";
-import { Delta as Tt } from "./components/display/Delta/Delta.js";
-import { Stat as Et } from "./components/display/Stat/Stat.js";
-import { DataList as Dt } from "./components/display/DataList/DataList.js";
-import { List as Ot } from "./components/display/List/List.js";
-import { Table as kt } from "./components/display/Table/Table.js";
-import { Media as At } from "./components/display/Media/Media.js";
-import { Marquee as jt } from "./components/display/Marquee/Marquee.js";
-import { CodeBlock as Mt } from "./components/display/CodeBlock/CodeBlock.js";
-import { Stamp as Nt } from "./components/display/Stamp/Stamp.js";
-import { Progress as Pt } from "./components/display/Progress/Progress.js";
-import { meterTone as Ft } from "./components/display/Meter/meterTone.js";
-import { Meter as It } from "./components/display/Meter/Meter.js";
-import { Skeleton as Lt } from "./components/display/Skeleton/Skeleton.js";
-import { EmptyState as Rt } from "./components/display/EmptyState/EmptyState.js";
-import { Tabs as zt } from "./components/navigation/Tabs/Tabs.js";
-import { NavLinks as Bt } from "./components/navigation/NavLinks/NavLinks.js";
-import { BottomNav as Vt } from "./components/navigation/BottomNav/BottomNav.js";
-import { Accordion as Ht } from "./components/navigation/Accordion/Accordion.js";
-import { Stepper as Ut } from "./components/navigation/Stepper/Stepper.js";
-import { Alert as Wt } from "./components/feedback/Alert/Alert.js";
-import { LiveIndicator as Gt } from "./components/feedback/LiveIndicator/LiveIndicator.js";
-import { Flash as Kt } from "./components/feedback/Flash/Flash.js";
-import { StatusDot as qt } from "./components/feedback/StatusDot/StatusDot.js";
-import { formatAbsoluteTime as Jt, formatRelativeTime as Yt } from "./components/feedback/RelativeTime/format.js";
-import { RelativeTime as Xt } from "./components/feedback/RelativeTime/RelativeTime.js";
-import { Dialog as Zt } from "./components/overlays/Dialog/Dialog.js";
-import { Sheet as Qt } from "./components/overlays/Sheet/Sheet.js";
-import { Popover as $t } from "./components/overlays/Popover/Popover.js";
-import { DropdownMenu as en } from "./components/overlays/DropdownMenu/DropdownMenu.js";
-import { Tooltip as tn, TooltipProvider as nn } from "./components/overlays/Tooltip/Tooltip.js";
-export { Ht as Accordion, ae as ActionBar, Wt as Alert, ve as Amount, Ge as AmountField, We as AmountInput, ie as AppShell, u as ArrowLeftIcon, d as ArrowRightIcon, f as ArrowUpRightIcon, ne as AspectRatio, Ct as Avatar, wt as AvatarGroup, bt as Badge, Vt as BottomNav, X as Box, xe as Button, p as CalendarIcon, yt as Card, m as CheckIcon, Me as Checkbox, ze as CheckboxField, Qe as CheckboxGroup, $e as CheckboxGroupField, h as ChevronDownIcon, g as ChevronLeftIcon, _ as ChevronRightIcon, v as ChevronUpIcon, Te as ChipGroup, nt as ChipGroupField, rt as ChoiceCards, it as ChoiceCardsField, y as CircleCheckIcon, b as ClockIcon, x as CloseIcon, ue as Code, Mt as CodeBlock, Ye as ColorField, Je as ColorInput, pt as Combobox, mt as ComboboxField, $ as Container, S as CopyIcon, oe as DEFAULT_HEADING_SIZE, e as DEFAULT_THEME, Dt as DataList, Ze as DateRangeField, Tt as Delta, Zt as Dialog, te as Divider, en as DropdownMenu, Rt as EmptyState, C as ErrorIcon, w as EyeIcon, T as EyeOffIcon, Oe as Field, Fe as Fieldset, _t as FileDrop, vt as FileField, Kt as Flash, Z as Grid, se as Heading, E as HelpIcon, Se as IconButton, D as InfoIcon, Y as Inline, ke as Input, de as Kbd, le as Link, Ot as List, Gt as LiveIndicator, t as MODES, jt as Marquee, At as Media, O as MenuIcon, k as MessageIcon, It as Meter, A as MinusIcon, De as ModeToggle, j as MoonIcon, M as MoreIcon, Bt as NavLinks, Ue as NumberField, He as NumberInput, _e as Numeral, qe as OneTimeCodeField, Ke as OneTimeCodeInput, Ve as PasswordField, Be as PasswordInput, N as PlusIcon, $t as Popover, Pt as Progress, fe as Prose, pe as Quote, Ne as RadioGroup, et as RadioGroupField, P as RadioIcon, st as RangeSlider, ct as RangeSliderField, lt as Rating, ut as RatingField, Xt as RelativeTime, F as SearchIcon, ee as Section, ye as SectionHeader, Ee as SegmentedControl, tt as SegmentedField, je as Select, Re as SelectField, Qt as Sheet, I as ShieldIcon, Lt as Skeleton, at as Slider, ot as SliderField, be as Spinner, Q as Split, J as Stack, Nt as Stamp, L as StarIcon, Et as Stat, qt as StatusDot, Ut as Stepper, R as SunIcon, Pe as Switch, Xe as SwitchField, z as SwordsIcon, B as SystemIcon, n as THEMES, r as THEME_META, kt as Table, zt as Tabs, dt as Tag, ft as TagList, gt as TagsField, ht as TagsInput, V as TargetIcon, ce as Text, Ie as TextField, Ae as Textarea, Le as TextareaField, o as ThemeProvider, s as ThemeScope, Ce as ToggleChip, tn as Tooltip, nn as TooltipProvider, H as TrendingUpIcon, U as TrophyIcon, W as UploadIcon, G as UsersIcon, re as VisuallyHidden, K as WarningIcon, q as ZapIcon, xt as avatarColor, l as createIcon, c as cx, Jt as formatAbsoluteTime, me as formatNumeral, he as formatNumeralParts, Yt as formatRelativeTime, St as getInitials, Ft as meterTone, ge as signOf, a as themeScript, we as useFieldControl, i as useTheme };
+import { ScrollArea as ae } from "./components/layout/ScrollArea/ScrollArea.js";
+import { ActionBar as oe } from "./components/layout/ActionBar/ActionBar.js";
+import { DEFAULT_HEADING_SIZE as se } from "./components/typography/Heading/sizes.js";
+import { Heading as ce } from "./components/typography/Heading/Heading.js";
+import { Text as le } from "./components/typography/Text/Text.js";
+import { Link as ue } from "./components/typography/Link/Link.js";
+import { Code as de } from "./components/typography/Code/Code.js";
+import { Kbd as fe } from "./components/typography/Kbd/Kbd.js";
+import { Prose as pe } from "./components/typography/Prose/Prose.js";
+import { Quote as me } from "./components/typography/Quote/Quote.js";
+import { formatNumeral as he, formatNumeralParts as ge, signOf as _e } from "./components/typography/Numeral/format.js";
+import { Numeral as ve } from "./components/typography/Numeral/Numeral.js";
+import { Amount as ye } from "./components/typography/Amount/Amount.js";
+import { SectionHeader as be } from "./components/typography/SectionHeader/SectionHeader.js";
+import { Spinner as xe } from "./components/feedback/Spinner/Spinner.js";
+import { Button as Se } from "./components/actions/Button/Button.js";
+import { IconButton as Ce } from "./components/actions/IconButton/IconButton.js";
+import { ToggleChip as we } from "./components/actions/ToggleChip/ToggleChip.js";
+import { useFieldControl as Te } from "./components/inputs/internal/FieldContext.js";
+import { ChipGroup as Ee } from "./components/actions/ChipGroup/ChipGroup.js";
+import { SegmentedControl as De } from "./components/actions/SegmentedControl/SegmentedControl.js";
+import { ModeToggle as Oe } from "./components/actions/ModeToggle/ModeToggle.js";
+import { Field as ke } from "./components/inputs/Field/Field.js";
+import { Input as Ae } from "./components/inputs/Input/Input.js";
+import { Textarea as je } from "./components/inputs/Textarea/Textarea.js";
+import { Select as Me } from "./components/inputs/Select/Select.js";
+import { Checkbox as Ne } from "./components/inputs/Checkbox/Checkbox.js";
+import { RadioGroup as Pe } from "./components/inputs/RadioGroup/RadioGroup.js";
+import { Switch as Fe } from "./components/inputs/Switch/Switch.js";
+import { Fieldset as Ie } from "./components/inputs/Fieldset/Fieldset.js";
+import { TextField as Le } from "./components/inputs/TextField/TextField.js";
+import { TextareaField as Re } from "./components/inputs/TextareaField/TextareaField.js";
+import { SelectField as ze } from "./components/inputs/SelectField/SelectField.js";
+import { CheckboxField as Be } from "./components/inputs/CheckboxField/CheckboxField.js";
+import { PasswordInput as Ve } from "./components/inputs/PasswordInput/PasswordInput.js";
+import { PasswordField as He } from "./components/inputs/PasswordField/PasswordField.js";
+import { NumberInput as Ue } from "./components/inputs/NumberInput/NumberInput.js";
+import { NumberField as We } from "./components/inputs/NumberField/NumberField.js";
+import { AmountInput as Ge } from "./components/inputs/AmountInput/AmountInput.js";
+import { AmountField as Ke } from "./components/inputs/AmountField/AmountField.js";
+import { OneTimeCodeInput as qe } from "./components/inputs/OneTimeCodeInput/OneTimeCodeInput.js";
+import { OneTimeCodeField as Je } from "./components/inputs/OneTimeCodeField/OneTimeCodeField.js";
+import { ColorInput as Ye } from "./components/inputs/ColorInput/ColorInput.js";
+import { ColorField as Xe } from "./components/inputs/ColorField/ColorField.js";
+import { SwitchField as Ze } from "./components/inputs/SwitchField/SwitchField.js";
+import { DateRangeField as Qe } from "./components/inputs/DateRangeField/DateRangeField.js";
+import { CheckboxGroup as $e } from "./components/inputs/CheckboxGroup/CheckboxGroup.js";
+import { CheckboxGroupField as et } from "./components/inputs/CheckboxGroupField/CheckboxGroupField.js";
+import { RadioGroupField as tt } from "./components/inputs/RadioGroupField/RadioGroupField.js";
+import { SegmentedField as nt } from "./components/inputs/SegmentedField/SegmentedField.js";
+import { ChipGroupField as rt } from "./components/inputs/ChipGroupField/ChipGroupField.js";
+import { ChoiceCards as it } from "./components/inputs/ChoiceCards/ChoiceCards.js";
+import { ChoiceCardsField as at } from "./components/inputs/ChoiceCardsField/ChoiceCardsField.js";
+import { Slider as ot } from "./components/inputs/Slider/Slider.js";
+import { SliderField as st } from "./components/inputs/SliderField/SliderField.js";
+import { RangeSlider as ct } from "./components/inputs/RangeSlider/RangeSlider.js";
+import { RangeSliderField as lt } from "./components/inputs/RangeSliderField/RangeSliderField.js";
+import { Rating as ut } from "./components/inputs/Rating/Rating.js";
+import { RatingField as dt } from "./components/inputs/RatingField/RatingField.js";
+import { Tag as ft, TagList as pt } from "./components/display/Tag/Tag.js";
+import { Combobox as mt } from "./components/inputs/Combobox/Combobox.js";
+import { ComboboxField as ht } from "./components/inputs/ComboboxField/ComboboxField.js";
+import { TagsInput as gt } from "./components/inputs/TagsInput/TagsInput.js";
+import { TagsField as _t } from "./components/inputs/TagsField/TagsField.js";
+import { FileDrop as vt } from "./components/inputs/FileDrop/FileDrop.js";
+import { FileField as yt } from "./components/inputs/FileField/FileField.js";
+import { Card as bt } from "./components/display/Card/Card.js";
+import { Badge as xt } from "./components/display/Badge/Badge.js";
+import { avatarColor as St, getInitials as Ct } from "./components/display/Avatar/avatarUtils.js";
+import { Avatar as wt } from "./components/display/Avatar/Avatar.js";
+import { AvatarGroup as Tt } from "./components/display/AvatarGroup/AvatarGroup.js";
+import { Delta as Et } from "./components/display/Delta/Delta.js";
+import { Stat as Dt } from "./components/display/Stat/Stat.js";
+import { DataList as Ot } from "./components/display/DataList/DataList.js";
+import { List as kt } from "./components/display/List/List.js";
+import { Table as At } from "./components/display/Table/Table.js";
+import { Media as jt } from "./components/display/Media/Media.js";
+import { Marquee as Mt } from "./components/display/Marquee/Marquee.js";
+import { CodeBlock as Nt } from "./components/display/CodeBlock/CodeBlock.js";
+import { Stamp as Pt } from "./components/display/Stamp/Stamp.js";
+import { Progress as Ft } from "./components/display/Progress/Progress.js";
+import { meterTone as It } from "./components/display/Meter/meterTone.js";
+import { Meter as Lt } from "./components/display/Meter/Meter.js";
+import { Skeleton as Rt } from "./components/display/Skeleton/Skeleton.js";
+import { EmptyState as zt } from "./components/display/EmptyState/EmptyState.js";
+import { Tabs as Bt } from "./components/navigation/Tabs/Tabs.js";
+import { NavLinks as Vt } from "./components/navigation/NavLinks/NavLinks.js";
+import { BottomNav as Ht } from "./components/navigation/BottomNav/BottomNav.js";
+import { Accordion as Ut } from "./components/navigation/Accordion/Accordion.js";
+import { Stepper as Wt } from "./components/navigation/Stepper/Stepper.js";
+import { Alert as Gt } from "./components/feedback/Alert/Alert.js";
+import { LiveIndicator as Kt } from "./components/feedback/LiveIndicator/LiveIndicator.js";
+import { Flash as qt } from "./components/feedback/Flash/Flash.js";
+import { StatusDot as Jt } from "./components/feedback/StatusDot/StatusDot.js";
+import { formatAbsoluteTime as Yt, formatRelativeTime as Xt } from "./components/feedback/RelativeTime/format.js";
+import { RelativeTime as Zt } from "./components/feedback/RelativeTime/RelativeTime.js";
+import { Dialog as Qt } from "./components/overlays/Dialog/Dialog.js";
+import { Sheet as $t } from "./components/overlays/Sheet/Sheet.js";
+import { Popover as en } from "./components/overlays/Popover/Popover.js";
+import { DropdownMenu as tn } from "./components/overlays/DropdownMenu/DropdownMenu.js";
+import { Tooltip as nn, TooltipProvider as rn } from "./components/overlays/Tooltip/Tooltip.js";
+export { Ut as Accordion, oe as ActionBar, Gt as Alert, ye as Amount, Ke as AmountField, Ge as AmountInput, ie as AppShell, u as ArrowLeftIcon, d as ArrowRightIcon, f as ArrowUpRightIcon, ne as AspectRatio, wt as Avatar, Tt as AvatarGroup, xt as Badge, Ht as BottomNav, X as Box, Se as Button, p as CalendarIcon, bt as Card, m as CheckIcon, Ne as Checkbox, Be as CheckboxField, $e as CheckboxGroup, et as CheckboxGroupField, h as ChevronDownIcon, g as ChevronLeftIcon, _ as ChevronRightIcon, v as ChevronUpIcon, Ee as ChipGroup, rt as ChipGroupField, it as ChoiceCards, at as ChoiceCardsField, y as CircleCheckIcon, b as ClockIcon, x as CloseIcon, de as Code, Nt as CodeBlock, Xe as ColorField, Ye as ColorInput, mt as Combobox, ht as ComboboxField, $ as Container, S as CopyIcon, se as DEFAULT_HEADING_SIZE, e as DEFAULT_THEME, Ot as DataList, Qe as DateRangeField, Et as Delta, Qt as Dialog, te as Divider, tn as DropdownMenu, zt as EmptyState, C as ErrorIcon, w as EyeIcon, T as EyeOffIcon, ke as Field, Ie as Fieldset, vt as FileDrop, yt as FileField, qt as Flash, Z as Grid, ce as Heading, E as HelpIcon, Ce as IconButton, D as InfoIcon, Y as Inline, Ae as Input, fe as Kbd, ue as Link, kt as List, Kt as LiveIndicator, t as MODES, Mt as Marquee, jt as Media, O as MenuIcon, k as MessageIcon, Lt as Meter, A as MinusIcon, Oe as ModeToggle, j as MoonIcon, M as MoreIcon, Vt as NavLinks, We as NumberField, Ue as NumberInput, ve as Numeral, Je as OneTimeCodeField, qe as OneTimeCodeInput, He as PasswordField, Ve as PasswordInput, N as PlusIcon, en as Popover, Ft as Progress, pe as Prose, me as Quote, Pe as RadioGroup, tt as RadioGroupField, P as RadioIcon, ct as RangeSlider, lt as RangeSliderField, ut as Rating, dt as RatingField, Zt as RelativeTime, ae as ScrollArea, F as SearchIcon, ee as Section, be as SectionHeader, De as SegmentedControl, nt as SegmentedField, Me as Select, ze as SelectField, $t as Sheet, I as ShieldIcon, Rt as Skeleton, ot as Slider, st as SliderField, xe as Spinner, Q as Split, J as Stack, Pt as Stamp, L as StarIcon, Dt as Stat, Jt as StatusDot, Wt as Stepper, R as SunIcon, Fe as Switch, Ze as SwitchField, z as SwordsIcon, B as SystemIcon, n as THEMES, r as THEME_META, At as Table, Bt as Tabs, ft as Tag, pt as TagList, _t as TagsField, gt as TagsInput, V as TargetIcon, le as Text, Le as TextField, je as Textarea, Re as TextareaField, o as ThemeProvider, s as ThemeScope, we as ToggleChip, nn as Tooltip, rn as TooltipProvider, H as TrendingUpIcon, U as TrophyIcon, W as UploadIcon, G as UsersIcon, re as VisuallyHidden, K as WarningIcon, q as ZapIcon, St as avatarColor, l as createIcon, c as cx, Yt as formatAbsoluteTime, he as formatNumeral, ge as formatNumeralParts, Xt as formatRelativeTime, Ct as getInitials, It as meterTone, _e as signOf, a as themeScript, Te as useFieldControl, i as useTheme };