@12-apps/ui 6.17.1 → 6.19.0

package/dist/chunk-NQN5Z36J.js

@@ -0,0 +1,182 @@
+import {
+  cssLengthToPx,
+  cssTrackingToEm
+} from "./chunk-AG66JBNH.js";
+import {
+  darken,
+  getContrastRatio,
+  lighten
+} from "./chunk-6JAIFIPW.js";
+import {
+  HEADING_SCALE
+} from "./chunk-FZXKH2ZT.js";
+
+// src/tokens/theme.ts
+var ROOT_FONT_PX = 16;
+var px = (value) => `${value / ROOT_FONT_PX}rem`;
+var TONAL_OFFSET = 0.2;
+var CONTRAST_THRESHOLD = 3;
+var DARK_TEXT_PRIMARY = "rgba(0, 0, 0, 0.87)";
+var LIGHT_TEXT_PRIMARY = "#fff";
+var GREY = {
+  50: "#fafafa",
+  100: "#f5f5f5",
+  200: "#eeeeee",
+  300: "#e0e0e0",
+  400: "#bdbdbd",
+  500: "#9e9e9e",
+  600: "#757575",
+  700: "#616161",
+  800: "#424242",
+  900: "#212121"
+};
+var DEFAULT_BRAND = {
+  light: { primary: "#6366F1", secondary: "#8B5CF6" },
+  dark: { primary: "#818CF8", secondary: "#A78BFA" }
+};
+var SEMANTIC_DEFAULTS = {
+  light: {
+    success: { main: "#2e7d32", light: "#4caf50", dark: "#1b5e20", contrastText: "#fff" },
+    warning: { main: "#ed6c02", light: "#ff9800", dark: "#e65100", contrastText: "#fff" },
+    info: { main: "#0288d1", light: "#03a9f4", dark: "#01579b", contrastText: "#fff" },
+    danger: { main: "#d32f2f", light: "#ef5350", dark: "#c62828", contrastText: "#fff" }
+  },
+  dark: {
+    success: { main: "#66bb6a", light: "#81c784", dark: "#388e3c", contrastText: DARK_TEXT_PRIMARY },
+    warning: { main: "#ffa726", light: "#ffb74d", dark: "#f57c00", contrastText: DARK_TEXT_PRIMARY },
+    info: { main: "#29b6f6", light: "#4fc3f7", dark: "#0288d1", contrastText: DARK_TEXT_PRIMARY },
+    danger: { main: "#f44336", light: "#e57373", dark: "#d32f2f", contrastText: "#fff" }
+  }
+};
+var MODE_DEFAULTS = {
+  light: {
+    text: { primary: DARK_TEXT_PRIMARY, secondary: "rgba(0, 0, 0, 0.6)", disabled: "rgba(0, 0, 0, 0.38)" },
+    background: { default: "#fff", paper: "#fff" },
+    divider: "rgba(0, 0, 0, 0.12)",
+    action: {
+      active: "rgba(0, 0, 0, 0.54)",
+      hover: "rgba(0, 0, 0, 0.04)",
+      selected: "rgba(0, 0, 0, 0.08)",
+      disabled: "rgba(0, 0, 0, 0.26)",
+      disabledBackground: "rgba(0, 0, 0, 0.12)",
+      focus: "rgba(0, 0, 0, 0.12)"
+    }
+  },
+  dark: {
+    text: { primary: "#fff", secondary: "rgba(255, 255, 255, 0.7)", disabled: "rgba(255, 255, 255, 0.5)" },
+    background: { default: "#121212", paper: "#121212" },
+    divider: "rgba(255, 255, 255, 0.12)",
+    action: {
+      active: "#fff",
+      hover: "rgba(255, 255, 255, 0.08)",
+      selected: "rgba(255, 255, 255, 0.16)",
+      disabled: "rgba(255, 255, 255, 0.3)",
+      disabledBackground: "rgba(255, 255, 255, 0.12)",
+      focus: "rgba(255, 255, 255, 0.12)"
+    }
+  }
+};
+function contrastText(background) {
+  return getContrastRatio(background, LIGHT_TEXT_PRIMARY) >= CONTRAST_THRESHOLD ? LIGHT_TEXT_PRIMARY : DARK_TEXT_PRIMARY;
+}
+function augmentColor(seed) {
+  const partial = typeof seed === "string" ? { main: seed } : seed;
+  const main = partial.main ?? partial.light ?? partial.dark;
+  if (!main) {
+    throw new Error("@12-apps/ui: a palette seed needs at least a `main` colour.");
+  }
+  return {
+    main,
+    light: partial.light ?? lighten(main, TONAL_OFFSET),
+    dark: partial.dark ?? darken(main, TONAL_OFFSET * 1.5),
+    contrastText: partial.contrastText ?? contrastText(main)
+  };
+}
+var semantic = (mode, key, seed) => seed === void 0 ? SEMANTIC_DEFAULTS[mode][key] : augmentColor(seed);
+var NEUTRAL = {
+  main: GREY[600],
+  light: GREY[400],
+  dark: GREY[800],
+  contrastText: "#fff"
+};
+var TYPE_SIZES = {
+  xs: { fontSize: 12, lineHeight: 1.2 },
+  sm: { fontSize: 14, lineHeight: 1.3 },
+  md: { fontSize: 16, lineHeight: 1.5 },
+  lg: { fontSize: 18, lineHeight: 1.4 },
+  xl: { fontSize: 20, lineHeight: 1.3 }
+};
+var FONT_WEIGHTS = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var HEADING_STEPS = Object.fromEntries(
+  Object.entries(HEADING_SCALE).map(([level, metrics]) => [
+    level,
+    {
+      fontSize: cssLengthToPx(metrics.fontSize, ROOT_FONT_PX),
+      lineHeight: metrics.lineHeight,
+      letterSpacing: cssTrackingToEm(metrics.letterSpacing),
+      normalWeight: metrics.normalWeight
+    }
+  ])
+);
+var WEB_FONT_FAMILY = '"Roboto", "Helvetica", "Arial", sans-serif';
+var WEB_MONOSPACE_FONT_FAMILY = 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace';
+function createUiTheme(options = {}) {
+  const mode = options.mode ?? "light";
+  const seeds = options.palette ?? {};
+  const brand = DEFAULT_BRAND[mode];
+  const defaults = MODE_DEFAULTS[mode];
+  const spacingUnit = options.spacingUnit ?? 8;
+  const palette = {
+    mode,
+    primary: augmentColor(seeds.primary ?? brand.primary),
+    secondary: augmentColor(seeds.secondary ?? brand.secondary),
+    success: semantic(mode, "success", seeds.success),
+    warning: semantic(mode, "warning", seeds.warning),
+    info: semantic(mode, "info", seeds.info),
+    danger: semantic(mode, "danger", seeds.danger),
+    neutral: NEUTRAL,
+    text: defaults.text,
+    background: { ...defaults.background, ...seeds.background },
+    divider: defaults.divider,
+    action: defaults.action,
+    grey: GREY
+  };
+  return {
+    mode,
+    palette,
+    spacing: (units) => units * spacingUnit,
+    spacingUnit,
+    radius: { sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
+    typography: {
+      fontFamily: options.typography?.fontFamily,
+      monospaceFontFamily: options.typography?.monospaceFontFamily,
+      sizes: TYPE_SIZES,
+      weights: FONT_WEIGHTS,
+      heading: HEADING_STEPS
+    },
+    zIndex: { appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 }
+  };
+}
+var DEFAULT_UI_THEME = createUiTheme();
+
+export {
+  px,
+  GREY,
+  DEFAULT_BRAND,
+  contrastText,
+  augmentColor,
+  NEUTRAL,
+  TYPE_SIZES,
+  FONT_WEIGHTS,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY,
+  createUiTheme,
+  DEFAULT_UI_THEME
+};
+//# sourceMappingURL=chunk-NQN5Z36J.js.map

package/dist/chunk-NQN5Z36J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/theme.ts"],"sourcesContent":["import { darken, getContrastRatio, lighten } from './color';\nimport { cssLengthToPx, cssTrackingToEm } from './css-units';\nimport { HEADING_SCALE, type HeadingLevel } from './heading-scale';\n\nimport type { SizeValue } from './vocabulary';\n\n/**\n * THE THEME BOTH RENDERERS READ.\n *\n * On the web every component styles itself from MUI's `Theme`, which is built\n * by the host (`@12-apps/app-shell`'s `createAppTheme` in the origin apps) and\n * reaches a component through emotion's context. React Native has no emotion,\n * no CSS and no MUI, so a native `Button` needs the same decisions — the\n * palette, the spacing unit, the radius, the type scale — from somewhere that\n * does not import a renderer.\n *\n * This is that somewhere. `UiTheme` is a plain object of numbers and colour\n * strings. `createUiTheme` derives it the way MUI's `createPalette` derives its\n * own: a `light` shade is `lighten(main, 0.2)`, a `dark` shade `darken(main,\n * 0.3)`, `contrastText` flips at a 3:1 ratio against `rgba(0, 0, 0, 0.87)`.\n * Same seeds in, same shades out, on both sides — that is the whole basis for\n * a native button being the web button's colour and not a near miss.\n *\n * Numbers are in px on the web and dp on native; both are the CSS-pixel unit\n * a design is drawn in, so a `fontSize: 16` here IS `1rem` in a web style\n * and `16` in a `StyleSheet`. The web components keep their `rem` strings and\n * derive them from these numbers where the two meet (see `px()` below and the\n * `*.metrics.ts` file beside each ported component).\n *\n * `danger` and `neutral` are this package's names (see `./scales`); `danger`\n * is MUI's `error` and `neutral` is drawn from the grey ramp the way\n * `Button.styles.ts` has always drawn it.\n */\n\nexport type UiThemeMode = 'light' | 'dark';\n\nexport interface UiPaletteColor {\n  main: string;\n  light: string;\n  dark: string;\n  contrastText: string;\n}\n\nexport type UiGreyStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n\nexport interface UiPalette {\n  mode: UiThemeMode;\n  primary: UiPaletteColor;\n  secondary: UiPaletteColor;\n  success: UiPaletteColor;\n  warning: UiPaletteColor;\n  info: UiPaletteColor;\n  danger: UiPaletteColor;\n  neutral: UiPaletteColor;\n  text: { primary: string; secondary: string; disabled: string };\n  background: { default: string; paper: string };\n  divider: string;\n  action: {\n    active: string;\n    hover: string;\n    selected: string;\n    disabled: string;\n    disabledBackground: string;\n    focus: string;\n  };\n  grey: Record<UiGreyStep, string>;\n}\n\n/** One step of the body scale: `fontSize` in px, `lineHeight` as a ratio. */\nexport interface UiTypeStep {\n  fontSize: number;\n  lineHeight: number;\n}\n\nexport type UiFontWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n\nexport interface UiHeadingStep extends UiTypeStep {\n  /** In em, so it scales with the step. `undefined` is \"normal\". */\n  letterSpacing?: number;\n  normalWeight: number;\n}\n\nexport interface UiTypography {\n  /**\n   * Native has no fallback stacks: a font is either installed and named, or\n   * `undefined` and the platform's own. The web default is MUI's Roboto stack.\n   */\n  fontFamily: string | undefined;\n  monospaceFontFamily: string | undefined;\n  sizes: Record<SizeValue, UiTypeStep>;\n  weights: Record<UiFontWeight, number>;\n  heading: Record<HeadingLevel, UiHeadingStep>;\n}\n\nexport interface UiTheme {\n  mode: UiThemeMode;\n  palette: UiPalette;\n  /** MUI's `theme.spacing(n)`: `n` units of {@link UiTheme.spacingUnit}, in px. */\n  spacing: (units: number) => number;\n  spacingUnit: number;\n  /** `md` is MUI's `shape.borderRadius`; the others are its halves and doubles. */\n  radius: { sm: number; md: number; lg: number; xl: number; full: number };\n  typography: UiTypography;\n  zIndex: { appBar: number; drawer: number; modal: number; snackbar: number; tooltip: number };\n}\n\n/** A seed for one palette slot: a hex `main`, or any subset of the four shades. */\nexport type UiPaletteSeed = string | Partial<UiPaletteColor>;\n\nexport interface UiThemeOptions {\n  mode?: UiThemeMode;\n  palette?: Partial<{\n    primary: UiPaletteSeed;\n    secondary: UiPaletteSeed;\n    success: UiPaletteSeed;\n    warning: UiPaletteSeed;\n    info: UiPaletteSeed;\n    danger: UiPaletteSeed;\n    background: Partial<UiPalette['background']>;\n  }>;\n  typography?: Partial<Pick<UiTypography, 'fontFamily' | 'monospaceFontFamily'>>;\n  spacingUnit?: number;\n}\n\nconst ROOT_FONT_PX = 16;\n\n/** The px value as the rem string the web components write. */\nexport const px = (value: number): string => `${value / ROOT_FONT_PX}rem`;\n\n/** MUI's `createPalette` defaults, exactly. */\nconst TONAL_OFFSET = 0.2;\nconst CONTRAST_THRESHOLD = 3;\nconst DARK_TEXT_PRIMARY = 'rgba(0, 0, 0, 0.87)';\nconst LIGHT_TEXT_PRIMARY = '#fff';\n\nexport const GREY: Record<UiGreyStep, string> = {\n  50: '#fafafa',\n  100: '#f5f5f5',\n  200: '#eeeeee',\n  300: '#e0e0e0',\n  400: '#bdbdbd',\n  500: '#9e9e9e',\n  600: '#757575',\n  700: '#616161',\n  800: '#424242',\n  900: '#212121',\n};\n\n/**\n * The platform's own seeds. The pair `@12-apps/ui`'s Storybook preview and\n * `@12-apps/app-shell`'s `DEFAULT_THEME_TOKENS` both carry — keep the three in\n * step if the design tokens change.\n */\nexport const DEFAULT_BRAND: Record<UiThemeMode, { primary: string; secondary: string }> = {\n  light: { primary: '#6366F1', secondary: '#8B5CF6' },\n  dark: { primary: '#818CF8', secondary: '#A78BFA' },\n};\n\n/** MUI's semantic defaults per mode. These are declared shades, not derived. */\nconst SEMANTIC_DEFAULTS: Record<\n  UiThemeMode,\n  Record<'success' | 'warning' | 'info' | 'danger', UiPaletteColor>\n> = {\n  light: {\n    success: { main: '#2e7d32', light: '#4caf50', dark: '#1b5e20', contrastText: '#fff' },\n    warning: { main: '#ed6c02', light: '#ff9800', dark: '#e65100', contrastText: '#fff' },\n    info: { main: '#0288d1', light: '#03a9f4', dark: '#01579b', contrastText: '#fff' },\n    danger: { main: '#d32f2f', light: '#ef5350', dark: '#c62828', contrastText: '#fff' },\n  },\n  dark: {\n    success: { main: '#66bb6a', light: '#81c784', dark: '#388e3c', contrastText: DARK_TEXT_PRIMARY },\n    warning: { main: '#ffa726', light: '#ffb74d', dark: '#f57c00', contrastText: DARK_TEXT_PRIMARY },\n    info: { main: '#29b6f6', light: '#4fc3f7', dark: '#0288d1', contrastText: DARK_TEXT_PRIMARY },\n    danger: { main: '#f44336', light: '#e57373', dark: '#d32f2f', contrastText: '#fff' },\n  },\n};\n\nconst MODE_DEFAULTS: Record<\n  UiThemeMode,\n  Pick<UiPalette, 'text' | 'background' | 'divider' | 'action'>\n> = {\n  light: {\n    text: { primary: DARK_TEXT_PRIMARY, secondary: 'rgba(0, 0, 0, 0.6)', disabled: 'rgba(0, 0, 0, 0.38)' },\n    background: { default: '#fff', paper: '#fff' },\n    divider: 'rgba(0, 0, 0, 0.12)',\n    action: {\n      active: 'rgba(0, 0, 0, 0.54)',\n      hover: 'rgba(0, 0, 0, 0.04)',\n      selected: 'rgba(0, 0, 0, 0.08)',\n      disabled: 'rgba(0, 0, 0, 0.26)',\n      disabledBackground: 'rgba(0, 0, 0, 0.12)',\n      focus: 'rgba(0, 0, 0, 0.12)',\n    },\n  },\n  dark: {\n    text: { primary: '#fff', secondary: 'rgba(255, 255, 255, 0.7)', disabled: 'rgba(255, 255, 255, 0.5)' },\n    background: { default: '#121212', paper: '#121212' },\n    divider: 'rgba(255, 255, 255, 0.12)',\n    action: {\n      active: '#fff',\n      hover: 'rgba(255, 255, 255, 0.08)',\n      selected: 'rgba(255, 255, 255, 0.16)',\n      disabled: 'rgba(255, 255, 255, 0.3)',\n      disabledBackground: 'rgba(255, 255, 255, 0.12)',\n      focus: 'rgba(255, 255, 255, 0.12)',\n    },\n  },\n};\n\n/**\n * MUI's `getContrastText`: white where white reads at 3:1 on the colour, the\n * light mode's dark ink otherwise. (MUI's source spells the white as the DARK\n * palette's `text.primary`, which is what made it easy to read backwards.)\n */\nexport function contrastText(background: string): string {\n  return getContrastRatio(background, LIGHT_TEXT_PRIMARY) >= CONTRAST_THRESHOLD\n    ? LIGHT_TEXT_PRIMARY\n    : DARK_TEXT_PRIMARY;\n}\n\n/**\n * MUI's `augmentColor` for a custom colour: derive whatever shade the seed\n * left out. `light` is one tonal offset up, `dark` one and a half down.\n */\nexport function augmentColor(seed: UiPaletteSeed): UiPaletteColor {\n  const partial = typeof seed === 'string' ? { main: seed } : seed;\n  const main = partial.main ?? partial.light ?? partial.dark;\n  if (!main) {\n    throw new Error('@12-apps/ui: a palette seed needs at least a `main` colour.');\n  }\n  return {\n    main,\n    light: partial.light ?? lighten(main, TONAL_OFFSET),\n    dark: partial.dark ?? darken(main, TONAL_OFFSET * 1.5),\n    contrastText: partial.contrastText ?? contrastText(main),\n  };\n}\n\nconst semantic = (\n  mode: UiThemeMode,\n  key: 'success' | 'warning' | 'info' | 'danger',\n  seed: UiPaletteSeed | undefined,\n): UiPaletteColor => (seed === undefined ? SEMANTIC_DEFAULTS[mode][key] : augmentColor(seed));\n\n/** `neutral` as `accentFor` in `./scales` has always drawn it: three greys and white. */\nexport const NEUTRAL: UiPaletteColor = {\n  main: GREY[600],\n  light: GREY[400],\n  dark: GREY[800],\n  contrastText: '#fff',\n};\n\n/** The body scale `Text` renders, in px. `Text.tsx`'s rem map is this, divided by 16. */\nexport const TYPE_SIZES: Record<SizeValue, UiTypeStep> = {\n  xs: { fontSize: 12, lineHeight: 1.2 },\n  sm: { fontSize: 14, lineHeight: 1.3 },\n  md: { fontSize: 16, lineHeight: 1.5 },\n  lg: { fontSize: 18, lineHeight: 1.4 },\n  xl: { fontSize: 20, lineHeight: 1.3 },\n};\n\nexport const FONT_WEIGHTS: Record<UiFontWeight, number> = {\n  light: 300,\n  normal: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\n// `HEADING_SCALE` speaks CSS, this theme speaks numbers; `./css-units` is the\n// one place that conversion is written.\nconst HEADING_STEPS = Object.fromEntries(\n  Object.entries(HEADING_SCALE).map(([level, metrics]) => [\n    level,\n    {\n      fontSize: cssLengthToPx(metrics.fontSize, ROOT_FONT_PX),\n      lineHeight: metrics.lineHeight,\n      letterSpacing: cssTrackingToEm(metrics.letterSpacing),\n      normalWeight: metrics.normalWeight,\n    },\n  ]),\n) as Record<HeadingLevel, UiHeadingStep>;\n\nexport const WEB_FONT_FAMILY = '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif';\nexport const WEB_MONOSPACE_FONT_FAMILY = 'Monaco, Menlo, \"Ubuntu Mono\", \"Courier New\", monospace';\n\n/**\n * Build the theme. Every field is derived here so a host that changes one\n * seed gets every dependent shade recomputed, on both renderers, identically.\n */\nexport function createUiTheme(options: UiThemeOptions = {}): UiTheme {\n  const mode = options.mode ?? 'light';\n  const seeds = options.palette ?? {};\n  const brand = DEFAULT_BRAND[mode];\n  const defaults = MODE_DEFAULTS[mode];\n  const spacingUnit = options.spacingUnit ?? 8;\n\n  const palette: UiPalette = {\n    mode,\n    primary: augmentColor(seeds.primary ?? brand.primary),\n    secondary: augmentColor(seeds.secondary ?? brand.secondary),\n    success: semantic(mode, 'success', seeds.success),\n    warning: semantic(mode, 'warning', seeds.warning),\n    info: semantic(mode, 'info', seeds.info),\n    danger: semantic(mode, 'danger', seeds.danger),\n    neutral: NEUTRAL,\n    text: defaults.text,\n    background: { ...defaults.background, ...seeds.background },\n    divider: defaults.divider,\n    action: defaults.action,\n    grey: GREY,\n  };\n\n  return {\n    mode,\n    palette,\n    spacing: (units: number) => units * spacingUnit,\n    spacingUnit,\n    radius: { sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },\n    typography: {\n      fontFamily: options.typography?.fontFamily,\n      monospaceFontFamily: options.typography?.monospaceFontFamily,\n      sizes: TYPE_SIZES,\n      weights: FONT_WEIGHTS,\n      heading: HEADING_STEPS,\n    },\n    zIndex: { appBar: 1100, drawer: 1200, modal: 1300, snackbar: 1400, tooltip: 1500 },\n  };\n}\n\n/** The palette slot a house colour name resolves to. */\nexport type UiPaletteKey = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger' | 'neutral';\n\nexport const DEFAULT_UI_THEME: UiTheme = createUiTheme();\n"],"mappings":"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","names":[]}

package/dist/chunk-OCUVKI63.js

@@ -0,0 +1,35 @@
+// src/components/layout/Box/Box.base.ts
+var BOX_BASE_KEYS = [
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "gap",
+  "direction",
+  "align",
+  "justify",
+  "wrap",
+  "flex",
+  "bg",
+  "radius",
+  "bordered",
+  "width",
+  "height",
+  "testID",
+  "dataTestId"
+];
+
+export {
+  BOX_BASE_KEYS
+};
+//# sourceMappingURL=chunk-OCUVKI63.js.map

package/dist/chunk-OCUVKI63.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Box/Box.base.ts"],"sourcesContent":["import type * as React from 'react';\n\nimport type { UiPaletteKey, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE LAYOUT PRIMITIVE BOTH RENDERERS SHARE.\n *\n * Half of every screen in the origin apps is `@12-apps/ui/mui/Box` with an `sx`\n * — raw MUI, which no native renderer can ever answer to. This `Box` is the\n * one a screen meant for both platforms writes instead: a fixed set of layout\n * props on the spacing scale, resolved by `box-layout.ts` into the same\n * numbers on each side. `p={2}` is 16px on the web and 16dp on native, because\n * both are `theme.spacing(2)`.\n *\n * Spacing props are in SPACING UNITS, exactly as MUI's own `Box` reads them.\n */\nexport type BoxDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\nexport type BoxBackground = 'default' | 'paper' | 'transparent' | UiPaletteKey;\nexport type BoxRadius = keyof UiTheme['radius'];\n/** What both renderers accept as a size: px, a percentage, or `auto`. */\nexport type BoxDimension = number | 'auto' | `${number}%`;\n\nexport interface BoxSpacingProps {\n  p?: number;\n  px?: number;\n  py?: number;\n  pt?: number;\n  pr?: number;\n  pb?: number;\n  pl?: number;\n  m?: number;\n  mx?: number;\n  my?: number;\n  mt?: number;\n  mr?: number;\n  mb?: number;\n  ml?: number;\n  /** Between children. Setting it makes the box a flex container. */\n  gap?: number;\n}\n\nexport interface BoxBaseProps extends BoxSpacingProps {\n  children?: React.ReactNode;\n  /** Setting any of these four makes the box a flex container. */\n  direction?: BoxDirection;\n  align?: BoxAlign;\n  justify?: BoxJustify;\n  wrap?: boolean;\n  flex?: number;\n  /** A surface, `transparent`, or a palette slot's main colour. */\n  bg?: BoxBackground;\n  radius?: BoxRadius;\n  /** A 1px border in the theme's divider colour. */\n  bordered?: boolean;\n  width?: BoxDimension;\n  height?: BoxDimension;\n  testID?: string;\n  dataTestId?: string;\n}\n\n/** Every prop {@link BoxBaseProps} owns, so a renderer can split them from its own. */\nexport const BOX_BASE_KEYS = [\n  'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl',\n  'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml',\n  'gap', 'direction', 'align', 'justify', 'wrap', 'flex',\n  'bg', 'radius', 'bordered', 'width', 'height', 'testID', 'dataTestId',\n] as const satisfies readonly (keyof Omit<BoxBaseProps, 'children'>)[];\n"],"mappings":";AA+DO,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EACnC;AAAA,EAAK;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EAAM;AAAA,EACnC;AAAA,EAAO;AAAA,EAAa;AAAA,EAAS;AAAA,EAAW;AAAA,EAAQ;AAAA,EAChD;AAAA,EAAM;AAAA,EAAU;AAAA,EAAY;AAAA,EAAS;AAAA,EAAU;AAAA,EAAU;AAC3D;","names":[]}

package/dist/{chunk-REMK55JI.js → chunk-OLZTGVBT.js}

@@ -1,9 +1,9 @@
-import {
-  SPRING_CONFIG
-} from "./chunk-F52N6ACD.js";
 import {
   useDragGestures
 } from "./chunk-CRN4KKNI.js";
+import {
+  SPRING_CONFIG
+} from "./chunk-F52N6ACD.js";
 
 // src/components/data-display/Sheet/Sheet.hooks.ts
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -213,4 +213,4 @@ export {
   useSheetDrag,
   useSheetOpen
 };
-//# sourceMappingURL=chunk-REMK55JI.js.map
+//# sourceMappingURL=chunk-OLZTGVBT.js.map

package/dist/{chunk-WME2F2YY.js → chunk-OR7UH2ZQ.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-MD6T7MDT.js";
+} from "./chunk-NECUCG2S.js";
 import {
   useDataViewsState
-} from "./chunk-5VVM2PPV.js";
+} from "./chunk-SG6VULKS.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-WME2F2YY.js.map
+//# sourceMappingURL=chunk-OR7UH2ZQ.js.map

package/dist/{chunk-PKJKA4CU.js → chunk-OZWQNFG6.js}

@@ -1,12 +1,12 @@
-import {
-  ErrorState
-} from "./chunk-E67PUPFJ.js";
 import {
   LoadingState
-} from "./chunk-O6J4CKS5.js";
+} from "./chunk-IIOEQRXX.js";
+import {
+  ErrorState
+} from "./chunk-NQC6H7GY.js";
 import {
   EmptyState
-} from "./chunk-7M5BACFQ.js";
+} from "./chunk-UXQW6ZIN.js";
 
 // src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
 import Box from "@mui/material/Box/index.js";
@@ -65,4 +65,4 @@ export {
   AsyncStateContainer,
   AsyncStateContainer_default
 };
-//# sourceMappingURL=chunk-PKJKA4CU.js.map
+//# sourceMappingURL=chunk-OZWQNFG6.js.map

package/dist/{chunk-23FCBIUN.js → chunk-P7FQUGED.js}

@@ -1,10 +1,3 @@
-import {
-  tableStyles
-} from "./chunk-P2PDDFMM.js";
-import {
-  TABLE_DEFAULTS,
-  definedProps
-} from "./chunk-MTFCPPZ5.js";
 import {
   EmptyRow,
   NoDataPlaceholder
@@ -13,9 +6,16 @@ import {
   EnhancedTableBody,
   EnhancedTableHeader
 } from "./chunk-ULTOQ6ZV.js";
+import {
+  tableStyles
+} from "./chunk-P2PDDFMM.js";
 import {
   useTableSelection
 } from "./chunk-DF4K5XVW.js";
+import {
+  TABLE_DEFAULTS,
+  definedProps
+} from "./chunk-MTFCPPZ5.js";
 
 // src/components/data-display/Table/Table.tsx
 import MoreVertIcon from "@mui/icons-material/MoreVert";
@@ -285,4 +285,4 @@ Table.displayName = "Table";
 export {
   Table
 };
-//# sourceMappingURL=chunk-23FCBIUN.js.map
+//# sourceMappingURL=chunk-P7FQUGED.js.map

package/dist/{chunk-6TYSEAAT.js → chunk-PC3ZFERM.js}

@@ -1,7 +1,7 @@
 import {
   MoreGroup,
   fieldClearing
-} from "./chunk-24LW52EU.js";
+} from "./chunk-DX527XPL.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -10,10 +10,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-IAQFQNBL.js";
+} from "./chunk-SL4NFGOL.js";
 import {
   Text
-} from "./chunk-VRHBJXZ7.js";
+} from "./chunk-2PCOC3PT.js";
 
 // src/components/data-display/DataViews/data-views-more-filters.tsx
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
@@ -180,4 +180,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-6TYSEAAT.js.map
+//# sourceMappingURL=chunk-PC3ZFERM.js.map

package/dist/{chunk-T53L42XW.js → chunk-PMS3H3OO.js}

@@ -1,27 +1,27 @@
 import {
   resolveLightboxProps
 } from "./chunk-UOS7DEQZ.js";
+import {
+  useLightbox
+} from "./chunk-3EYRRVNT.js";
+import {
+  LightboxThumbnails
+} from "./chunk-Q725MACF.js";
 import {
   LightboxStage
 } from "./chunk-EUHVBR3J.js";
 import {
   LightboxOverlay
 } from "./chunk-X4GALW6I.js";
-import {
-  LightboxCurrentMedia
-} from "./chunk-2DWBJJK6.js";
-import {
-  useLightbox
-} from "./chunk-3EYRRVNT.js";
 import {
   LightboxCopyProvider
 } from "./chunk-TEQYTEM2.js";
-import {
-  LightboxThumbnails
-} from "./chunk-Q725MACF.js";
 import {
   makeTestId
 } from "./chunk-56SJYTIT.js";
+import {
+  LightboxCurrentMedia
+} from "./chunk-2DWBJJK6.js";
 
 // src/components/data-display/Lightbox/Lightbox.tsx
 import Dialog from "@mui/material/Dialog/index.js";
@@ -128,4 +128,4 @@ export {
   Lightbox,
   Lightbox_default
 };
-//# sourceMappingURL=chunk-T53L42XW.js.map
+//# sourceMappingURL=chunk-PMS3H3OO.js.map

package/dist/{chunk-TCAB2ERD.js → chunk-PNYXXLPU.js}

@@ -1,6 +1,6 @@
 import {
   Text
-} from "./chunk-VRHBJXZ7.js";
+} from "./chunk-2PCOC3PT.js";
 
 // src/components/data-display/DescriptionItem/DescriptionItem.tsx
 import Box from "@mui/material/Box/index.js";
@@ -61,4 +61,4 @@ DescriptionItem.displayName = "DescriptionItem";
 export {
   DescriptionItem
 };
-//# sourceMappingURL=chunk-TCAB2ERD.js.map
+//# sourceMappingURL=chunk-PNYXXLPU.js.map

package/dist/chunk-PT6TCWIW.js

@@ -0,0 +1,13 @@
+import {
+  HEADING_SCALE
+} from "./chunk-FZXKH2ZT.js";
+
+// src/tokens/typography.ts
+function headingMetrics(theme, level) {
+  return { ...HEADING_SCALE[level], ...theme.typography.headingScale?.[level] };
+}
+
+export {
+  headingMetrics
+};
+//# sourceMappingURL=chunk-PT6TCWIW.js.map

package/dist/chunk-PT6TCWIW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/typography.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { HEADING_SCALE, type HeadingLevel, type HeadingMetrics, type HeadingScaleOverrides } from './heading-scale';\n\n/**\n * The MUI half of the type scale: the theme augmentation and the reader that\n * merges a host's overrides. The scale itself is in `./heading-scale`, which\n * imports nothing, so `src/tokens/theme.ts` and the native renderer read it\n * without dragging MUI's `Theme` into `dist/types-native`.\n */\nexport * from './heading-scale';\n\n/**\n * The theme channel, under our OWN key rather than MUI's `typography.h1…h6`.\n *\n * Those are spoken for: MUI ships its own values there (`h1` is 6rem) and\n * `<Typography variant=\"h1\">` renders them. Reading them here would hand an\n * un-themed host a 96px `h1` — worse than the number this change exists to fix —\n * and would make `Heading` and `Typography` impossible to size apart. A separate\n * key means a host that sets nothing gets {@link HEADING_SCALE}, and a host that\n * sets something gets exactly what it asked for.\n */\ndeclare module '@mui/material/styles' {\n  interface TypographyVariants {\n    headingScale?: HeadingScaleOverrides;\n  }\n  interface TypographyVariantsOptions {\n    headingScale?: HeadingScaleOverrides;\n  }\n}\n\n/**\n * One step of the scale, with the host's theme layered over the default.\n *\n * Merged PER METRIC, so a host that only wants a different `fontSize` keeps the\n * line height and letter spacing the step was designed with instead of having to\n * restate them — restating is how a partial override silently loses the tracking\n * that made the size readable.\n */\nexport function headingMetrics(theme: Theme, level: HeadingLevel): HeadingMetrics {\n  return { ...HEADING_SCALE[level], ...theme.typography.headingScale?.[level] };\n}\n"],"mappings":";;;;;AAuCO,SAAS,eAAe,OAAc,OAAqC;AAChF,SAAO,EAAE,GAAG,cAAc,KAAK,GAAG,GAAG,MAAM,WAAW,eAAe,KAAK,EAAE;AAC9E;","names":[]}

package/dist/{chunk-QCIWROKG.js → chunk-PWR7K5OP.js}

@@ -1,7 +1,14 @@
 import {
-  HEADING_SCALE,
+  HEADING_DEFAULT_COLOR,
+  HEADING_DEFAULT_WEIGHT,
+  NEUTRAL_GRADIENT_STEPS,
+  headingGradient,
+  headingWeight,
+  stepOf
+} from "./chunk-3N6EK6K5.js";
+import {
   headingMetrics
-} from "./chunk-7CA6GVBO.js";
+} from "./chunk-PT6TCWIW.js";
 
 // src/components/typography/Heading/Heading.styles.ts
 var getColorFromTheme = (theme, color) => {
@@ -18,13 +25,6 @@ var getColorFromTheme = (theme, color) => {
   };
   return colorMap[color];
 };
-var WEIGHTS = {
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
 var PRIMARY_STOPS = (theme) => [
   theme.palette.primary.main,
   theme.palette.secondary.main
@@ -38,22 +38,24 @@ var GRADIENT_STOPS = {
   danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
   // The grey ramp has no light/dark pair, and every stop on it is
   // `string | undefined` under `noUncheckedIndexedAccess`.
-  neutral: (theme) => [theme.palette.grey[500] ?? "#9e9e9e", theme.palette.grey[900] ?? "#212121"]
+  neutral: (theme) => [
+    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from] ?? "#9e9e9e",
+    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to] ?? "#212121"
+  ]
 };
 var gradientFor = (theme, color) => {
   const [from, to] = GRADIENT_STOPS[color](theme);
-  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+  return headingGradient(from, to);
 };
-var stepOf = (value) => value !== void 0 && value in HEADING_SCALE ? value : "h2";
 var headingSx = (theme, flags) => {
-  const { customSize, customColor = "neutral", customWeight = "bold", gradient } = flags;
+  const { customSize, customColor = HEADING_DEFAULT_COLOR, customWeight = HEADING_DEFAULT_WEIGHT, gradient } = flags;
   const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));
   const base = {
     fontFamily: theme.typography.h1.fontFamily,
     margin: 0,
     transition: "all 0.2s ease",
     ...metrics,
-    fontWeight: customWeight === "normal" ? normalWeight : WEIGHTS[customWeight] ?? WEIGHTS.bold
+    fontWeight: headingWeight(customWeight, normalWeight)
   };
   if (!gradient) {
     return { ...base, color: getColorFromTheme(theme, customColor) };
@@ -72,4 +74,4 @@ var headingSx = (theme, flags) => {
 export {
   headingSx
 };
-//# sourceMappingURL=chunk-QCIWROKG.js.map
+//# sourceMappingURL=chunk-PWR7K5OP.js.map

package/dist/chunk-PWR7K5OP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Heading/Heading.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  HEADING_DEFAULT_COLOR,\n  HEADING_DEFAULT_WEIGHT,\n  NEUTRAL_GRADIENT_STEPS,\n  headingGradient,\n  headingWeight,\n  stepOf,\n} from './Heading.metrics';\nimport { headingMetrics } from '../../../tokens/typography';\nimport type { ColorValue } from '../../../tokens/scales';\n\n// Exhaustive over ColorValue, and deliberately without a fallback. The map\n// happened to hold all seven already, but it was `Record<string, string>` with\n// `|| text.primary` behind it — so nothing kept it that way, and the eighth\n// colour would have rendered as ordinary body text with no complaint. That is\n// the failure this whole vocabulary exists to make impossible; `Text` was\n// tightened the same way and this one was missed.\nconst getColorFromTheme = (theme: Theme, color: ColorValue): string => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color];\n};\n\n/** The two-stop gradient each colour paints its glyphs with. */\nconst PRIMARY_STOPS = (theme: Theme): [string, string] => [\n  theme.palette.primary.main,\n  theme.palette.secondary.main,\n];\n\n// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two\n// stops were missing — `info` and `neutral` — so a gradient heading in either\n// colour painted the PRIMARY gradient and looked deliberate while ignoring the\n// prop entirely. The fallback is what hid it, so the fallback is gone.\n//\n// The MUI-typed twin of `headingGradientStops` in `Heading.metrics.ts`, which\n// the native renderer reads off a `UiTheme`; the pairs are the same.\nconst GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {\n  primary: PRIMARY_STOPS,\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n  // The grey ramp has no light/dark pair, and every stop on it is\n  // `string | undefined` under `noUncheckedIndexedAccess`.\n  neutral: (theme) => [\n    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from] ?? '#9e9e9e',\n    theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to] ?? '#212121',\n  ],\n};\n\nconst gradientFor = (theme: Theme, color: ColorValue) => {\n  const [from, to] = GRADIENT_STOPS[color](theme);\n  return headingGradient(from, to);\n};\n\nexport interface HeadingFlags {\n  /**\n   * The step of the scale to DRAW. Named `customSize` rather than `customLevel`\n   * because the rank is no longer what decides it — see `Heading.tsx`, which\n   * resolves `size ?? level` before it gets here. This file no longer knows\n   * which tag it is styling, and that is the point.\n   */\n  customSize?: string;\n  customColor?: ColorValue;\n  customWeight?: string;\n  gradient?: boolean;\n}\n\nexport const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {\n  const { customSize, customColor = HEADING_DEFAULT_COLOR, customWeight = HEADING_DEFAULT_WEIGHT, gradient } = flags;\n  // From the THEME, with the package default underneath — never from a table in\n  // this file. A host's `createTheme({ typography: { headingScale } })` is what\n  // sets the house scale now; see `tokens/typography.ts` for why it is our own\n  // key rather than MUI's `typography.h1`.\n  const { normalWeight, ...metrics } = headingMetrics(theme, stepOf(customSize));\n\n  const base: CSSObject = {\n    fontFamily: theme.typography.h1.fontFamily,\n    margin: 0,\n    transition: 'all 0.2s ease',\n    ...metrics,\n    fontWeight: headingWeight(customWeight, normalWeight),\n  };\n\n  if (!gradient) {\n    return { ...base, color: getColorFromTheme(theme, customColor) };\n  }\n\n  // The gradient paints the glyphs themselves, so the text must draw no fill of\n  // its own for it to show through.\n  return {\n    ...base,\n    background: gradientFor(theme, customColor),\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    WebkitTextFillColor: 'transparent',\n    MozBackgroundClip: 'text',\n    MozTextFillColor: 'transparent',\n  };\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,oBAAoB,CAAC,OAAc,UAA8B;AACrE,MAAI,UAAU,WAAW;AACvB,WAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AAEA,QAAM,WAA2D;AAAA,IAC/D,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,WAAW,MAAM,QAAQ,UAAU;AAAA,IACnC,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,SAAS,MAAM,QAAQ,QAAQ;AAAA,IAC/B,MAAM,MAAM,QAAQ,KAAK;AAAA,IACzB,QAAQ,MAAM,QAAQ,MAAM;AAAA,EAC9B;AAEA,SAAO,SAAS,KAAK;AACvB;AAGA,IAAM,gBAAgB,CAAC,UAAmC;AAAA,EACxD,MAAM,QAAQ,QAAQ;AAAA,EACtB,MAAM,QAAQ,UAAU;AAC1B;AASA,IAAM,iBAAyE;AAAA,EAC7E,SAAS;AAAA,EACT,WAAW,CAAC,UAAU,CAAC,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC/E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,SAAS,CAAC,UAAU,CAAC,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,QAAQ,IAAI;AAAA,EAC5E,MAAM,CAAC,UAAU,CAAC,MAAM,QAAQ,KAAK,OAAO,MAAM,QAAQ,KAAK,IAAI;AAAA,EACnE,QAAQ,CAAC,UAAU,CAAC,MAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,EAGvE,SAAS,CAAC,UAAU;AAAA,IAClB,MAAM,QAAQ,KAAK,uBAAuB,IAAI,KAAK;AAAA,IACnD,MAAM,QAAQ,KAAK,uBAAuB,EAAE,KAAK;AAAA,EACnD;AACF;AAEA,IAAM,cAAc,CAAC,OAAc,UAAsB;AACvD,QAAM,CAAC,MAAM,EAAE,IAAI,eAAe,KAAK,EAAE,KAAK;AAC9C,SAAO,gBAAgB,MAAM,EAAE;AACjC;AAeO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,YAAY,cAAc,uBAAuB,eAAe,wBAAwB,SAAS,IAAI;AAK7G,QAAM,EAAE,cAAc,GAAG,QAAQ,IAAI,eAAe,OAAO,OAAO,UAAU,CAAC;AAE7E,QAAM,OAAkB;AAAA,IACtB,YAAY,MAAM,WAAW,GAAG;AAAA,IAChC,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,IACH,YAAY,cAAc,cAAc,YAAY;AAAA,EACtD;AAEA,MAAI,CAAC,UAAU;AACb,WAAO,EAAE,GAAG,MAAM,OAAO,kBAAkB,OAAO,WAAW,EAAE;AAAA,EACjE;AAIA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY,YAAY,OAAO,WAAW;AAAA,IAC1C,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;","names":[]}

package/dist/{chunk-EY4LPLIR.js → chunk-QJJUTBKZ.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-IAQFQNBL.js";
+} from "./chunk-SL4NFGOL.js";
 import {
   Text
-} from "./chunk-VRHBJXZ7.js";
+} from "./chunk-2PCOC3PT.js";
 
 // src/components/data-display/DataViews/data-views-view-nav.tsx
 import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
@@ -294,4 +294,4 @@ export {
   ViewHeader,
   ViewFooter
 };
-//# sourceMappingURL=chunk-EY4LPLIR.js.map
+//# sourceMappingURL=chunk-QJJUTBKZ.js.map

package/dist/chunk-QKLGH3RZ.js

@@ -0,0 +1,29 @@
+// src/components/typography/Paragraph/Paragraph.metrics.ts
+var PARAGRAPH_SIZES = {
+  xs: { fontSize: 12, lineHeight: 1.4 },
+  sm: { fontSize: 14, lineHeight: 1.5 },
+  md: { fontSize: 16, lineHeight: 1.6 },
+  lg: { fontSize: 18, lineHeight: 1.6 },
+  xl: { fontSize: 20, lineHeight: 1.7 }
+};
+var PARAGRAPH_FONT_WEIGHT = 400;
+var PARAGRAPH_MARGIN_BOTTOM_EM = 1;
+var LEAD_FONT_SIZE = 18;
+var LEAD_LINE_HEIGHT = 1.7;
+var LEAD_LETTER_SPACING_EM = 0.01;
+var MUTED_OPACITY = 0.8;
+var SMALL_FONT_SIZE = 14;
+var SMALL_LINE_HEIGHT = 1.5;
+
+export {
+  PARAGRAPH_SIZES,
+  PARAGRAPH_FONT_WEIGHT,
+  PARAGRAPH_MARGIN_BOTTOM_EM,
+  LEAD_FONT_SIZE,
+  LEAD_LINE_HEIGHT,
+  LEAD_LETTER_SPACING_EM,
+  MUTED_OPACITY,
+  SMALL_FONT_SIZE,
+  SMALL_LINE_HEIGHT
+};
+//# sourceMappingURL=chunk-QKLGH3RZ.js.map

package/dist/chunk-QKLGH3RZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Paragraph/Paragraph.metrics.ts"],"sourcesContent":["import type { UiTypeStep } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Paragraph` RENDERERS DRAW WITH.\n *\n * `Paragraph.tsx` used to hold these as rem strings inside its styled\n * callback, and `Paragraph.native.tsx` would have held them again as numbers.\n * Now there is one table, in px, and the web derives its rem from it (`px()`\n * in the theme). Ratios and `em` values stay relative; the native side\n * multiplies them out because React Native's `lineHeight`, `letterSpacing` and\n * margins are absolute.\n *\n * NOT `TYPE_SIZES`: a paragraph is set looser than `Text`'s body scale (1.6\n * against 1.5 at `md`), because it is read in runs of lines rather than as a\n * label. The font sizes are the same five steps.\n */\nexport const PARAGRAPH_SIZES: Record<SizeValue, UiTypeStep> = {\n  xs: { fontSize: 12, lineHeight: 1.4 },\n  sm: { fontSize: 14, lineHeight: 1.5 },\n  md: { fontSize: 16, lineHeight: 1.6 },\n  lg: { fontSize: 18, lineHeight: 1.6 },\n  xl: { fontSize: 20, lineHeight: 1.7 },\n};\n\nexport const PARAGRAPH_FONT_WEIGHT = 400;\n\n/** `margin: 0 0 1em 0` — one line of its own type below each paragraph. */\nexport const PARAGRAPH_MARGIN_BOTTOM_EM = 1;\n\n/** The `lead` variant: a step up at the default size, looser leading and tracking. */\nexport const LEAD_FONT_SIZE = 18;\nexport const LEAD_LINE_HEIGHT = 1.7;\nexport const LEAD_LETTER_SPACING_EM = 0.01;\n\n/** The `muted` variant: the secondary ink, faded further. */\nexport const MUTED_OPACITY = 0.8;\n\n/** The `small` variant: a step down at the default size, on the secondary ink. */\nexport const SMALL_FONT_SIZE = 14;\nexport const SMALL_LINE_HEIGHT = 1.5;\n"],"mappings":";AAiBO,IAAM,kBAAiD;AAAA,EAC5D,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AACtC;AAEO,IAAM,wBAAwB;AAG9B,IAAM,6BAA6B;AAGnC,IAAM,iBAAiB;AACvB,IAAM,mBAAmB;AACzB,IAAM,yBAAyB;AAG/B,IAAM,gBAAgB;AAGtB,IAAM,kBAAkB;AACxB,IAAM,oBAAoB;","names":[]}

package/dist/chunk-QLWBQQW7.js

@@ -0,0 +1,18 @@
+// src/platform/test-id.ts
+function resolveTestId(props, fallback) {
+  return props.testID ?? props.dataTestId ?? props["data-testid"] ?? fallback;
+}
+function childTestId(props, suffix, fallback) {
+  return `${resolveTestId(props, fallback) ?? fallback}-${suffix}`;
+}
+function withoutTestIdProps(props) {
+  const { testID: _testID, dataTestId: _dataTestId, "data-testid": _dataTestid, ...rest } = props;
+  return rest;
+}
+
+export {
+  resolveTestId,
+  childTestId,
+  withoutTestIdProps
+};
+//# sourceMappingURL=chunk-QLWBQQW7.js.map

package/dist/chunk-QLWBQQW7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/platform/test-id.ts"],"sourcesContent":["/**\n * One test id, three spellings.\n *\n * The web components take `dataTestId` and forward it as `data-testid`; the\n * existing test stories pass `'data-testid'` straight through as an unknown\n * prop; React Native calls the same thing `testID`, and react-native-web turns\n * THAT back into `data-testid`. A native component that honoured only one of\n * the three would pass its own unit tests and fail the shared stories.\n */\nexport interface TestIdProps {\n  testID?: string;\n  dataTestId?: string;\n  'data-testid'?: string;\n}\n\n/** The id the caller asked for under any of the three names, else `fallback`. */\nexport function resolveTestId(props: TestIdProps, fallback?: string): string | undefined {\n  return props.testID ?? props.dataTestId ?? props['data-testid'] ?? fallback;\n}\n\n/** `${id}-${suffix}` for a sub-element, or `${fallback}-${suffix}` when unnamed. */\nexport function childTestId(\n  props: TestIdProps,\n  suffix: string,\n  fallback: string,\n): string {\n  return `${resolveTestId(props, fallback) ?? fallback}-${suffix}`;\n}\n\n/** `props` without any of the three spellings, for spreading onto a native element. */\nexport function withoutTestIdProps<P extends TestIdProps>(props: P): Omit<P, keyof TestIdProps> {\n  const { testID: _testID, dataTestId: _dataTestId, 'data-testid': _dataTestid, ...rest } = props;\n  return rest;\n}\n"],"mappings":";AAgBO,SAAS,cAAc,OAAoB,UAAuC;AACvF,SAAO,MAAM,UAAU,MAAM,cAAc,MAAM,aAAa,KAAK;AACrE;AAGO,SAAS,YACd,OACA,QACA,UACQ;AACR,SAAO,GAAG,cAAc,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM;AAChE;AAGO,SAAS,mBAA0C,OAAsC;AAC9F,QAAM,EAAE,QAAQ,SAAS,YAAY,aAAa,eAAe,aAAa,GAAG,KAAK,IAAI;AAC1F,SAAO;AACT;","names":[]}

package/dist/chunk-QWBQVQRG.js

@@ -0,0 +1,18 @@
+import {
+  COLOR_VALUES
+} from "./chunk-7ZPUN7TV.js";
+
+// src/icons/icon-color.ts
+var isColorValue = (color) => COLOR_VALUES.includes(color);
+function iconFill(theme, color, inherit) {
+  if (color === void 0 || color === "inherit") return inherit;
+  if (isColorValue(color)) {
+    return color === "neutral" ? theme.palette.text.secondary : theme.palette[color].main;
+  }
+  return color;
+}
+
+export {
+  iconFill
+};
+//# sourceMappingURL=chunk-QWBQVQRG.js.map