@12-apps/ui 6.18.0 → 6.19.0

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

@@ -1,9 +1,14 @@
+import {
+  HEADING_DEFAULT_COLOR,
+  HEADING_DEFAULT_WEIGHT,
+  NEUTRAL_GRADIENT_STEPS,
+  headingGradient,
+  headingWeight,
+  stepOf
+} from "./chunk-3N6EK6K5.js";
 import {
   headingMetrics
 } from "./chunk-PT6TCWIW.js";
-import {
-  HEADING_SCALE
-} from "./chunk-FZXKH2ZT.js";
 
 // src/components/typography/Heading/Heading.styles.ts
 var getColorFromTheme = (theme, color) => {
@@ -20,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
@@ -40,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) };
@@ -74,4 +74,4 @@ var headingSx = (theme, flags) => {
 export {
   headingSx
 };
-//# sourceMappingURL=chunk-CGQI4XE5.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-KQ74QU55.js → chunk-QJJUTBKZ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-24BUCMQA.js";
+} from "./chunk-SL4NFGOL.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -294,4 +294,4 @@ export {
   ViewHeader,
   ViewFooter
 };
-//# sourceMappingURL=chunk-KQ74QU55.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-VEFDL77X.js → chunk-QZPNQWS2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HJOABXKN.js";
 import {
   Button
-} from "./chunk-24BUCMQA.js";
+} from "./chunk-SL4NFGOL.js";
 
 // src/components/feedback/ConfirmAction/ConfirmButton.tsx
 function createConfirmButton(copy, errorText) {
@@ -18,4 +18,4 @@ function createConfirmButton(copy, errorText) {
 export {
   createConfirmButton
 };
-//# sourceMappingURL=chunk-VEFDL77X.js.map
+//# sourceMappingURL=chunk-QZPNQWS2.js.map

package/dist/{chunk-DWZ7FLA7.js → chunk-RBGOGTT2.js}

@@ -2,14 +2,14 @@ import {
   ItemsPerPageSelect,
   PageInfo
 } from "./chunk-BB2IVF76.js";
+import {
+  paginationStyles
+} from "./chunk-CZBONNPA.js";
 import {
   makeTestId,
   muiSizeFor,
   resolvePaginationProps
 } from "./chunk-Z6TIAVEG.js";
-import {
-  paginationStyles
-} from "./chunk-CZBONNPA.js";
 
 // src/components/navigation/Pagination/Pagination.tsx
 import FirstPage from "@mui/icons-material/FirstPage";
@@ -191,4 +191,4 @@ Pagination.displayName = "Pagination";
 export {
   Pagination
 };
-//# sourceMappingURL=chunk-DWZ7FLA7.js.map
+//# sourceMappingURL=chunk-RBGOGTT2.js.map

package/dist/chunk-RKCS6K36.js

@@ -0,0 +1,48 @@
+// src/components/data-display/EmptyState/EmptyState.metrics.ts
+var EMPTY_STATE_PADDING_UNITS = 6;
+var EMPTY_STATE_MIN_HEIGHT = 200;
+var EMPTY_STATE_GAP_UNITS = 3;
+var ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 };
+var ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 };
+var illustrationMaxWidth = (variant) => variant === "illustrated" ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;
+var illustrationOpacity = (variant) => variant === "minimal" ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;
+var CONTENT_GAP_UNITS = 2;
+var TITLE_MAX_WIDTH = 400;
+var DESCRIPTION_MAX_WIDTH = 480;
+var DESCRIPTION_LINE_HEIGHT = 1.6;
+var ACTIONS_MARGIN_TOP_UNITS = 2;
+var ACTIONS_GAP_UNITS = 2;
+var ACTIONS_ROW_FROM = 600;
+var ACTION_MIN_WIDTH = 120;
+var ACTION_BUTTON = {
+  contained: { paddingVertical: 6, paddingHorizontal: 16 },
+  outlined: { paddingVertical: 5, paddingHorizontal: 15 },
+  iconSize: 20,
+  outlinedBorderAlpha: 0.5
+};
+var MUI_CONTAINED_SHADOW = "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+var HELP_LINK_MARGIN_TOP_UNITS = 1;
+var EXTERNAL_LINK_MARK = " \u2197";
+
+export {
+  EMPTY_STATE_PADDING_UNITS,
+  EMPTY_STATE_MIN_HEIGHT,
+  EMPTY_STATE_GAP_UNITS,
+  ILLUSTRATION_MAX_WIDTH,
+  ILLUSTRATION_OPACITY,
+  illustrationMaxWidth,
+  illustrationOpacity,
+  CONTENT_GAP_UNITS,
+  TITLE_MAX_WIDTH,
+  DESCRIPTION_MAX_WIDTH,
+  DESCRIPTION_LINE_HEIGHT,
+  ACTIONS_MARGIN_TOP_UNITS,
+  ACTIONS_GAP_UNITS,
+  ACTIONS_ROW_FROM,
+  ACTION_MIN_WIDTH,
+  ACTION_BUTTON,
+  MUI_CONTAINED_SHADOW,
+  HELP_LINK_MARGIN_TOP_UNITS,
+  EXTERNAL_LINK_MARK
+};
+//# sourceMappingURL=chunk-RKCS6K36.js.map

package/dist/chunk-RKCS6K36.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.metrics.ts"],"sourcesContent":["import type { EmptyStateVariant } from './EmptyState.base';\n\n/**\n * THE NUMBERS BOTH `EmptyState` RENDERERS DRAW WITH.\n *\n * `EmptyState.tsx` (MUI) and `EmptyState.native.tsx` (React Native) read\n * this one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 24px apart. */\nexport const EMPTY_STATE_PADDING_UNITS = 6;\nexport const EMPTY_STATE_MIN_HEIGHT = 200;\nexport const EMPTY_STATE_GAP_UNITS = 3;\n\n/** The illustration: wider when it is the point, faded a little always, hidden in `minimal`. */\nexport const ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 } as const;\nexport const ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 } as const;\n\nexport const illustrationMaxWidth = (variant: EmptyStateVariant): number =>\n  variant === 'illustrated' ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;\nexport const illustrationOpacity = (variant: EmptyStateVariant): number =>\n  variant === 'minimal' ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;\n\n/** Title, description, actions and link are 16px apart; the title wraps at 400px, the description at 480px on a 1.6 line height. */\nexport const CONTENT_GAP_UNITS = 2;\nexport const TITLE_MAX_WIDTH = 400;\nexport const DESCRIPTION_MAX_WIDTH = 480;\nexport const DESCRIPTION_LINE_HEIGHT = 1.6;\n\n/** The action row: 16px below the text, buttons 16px apart, stacked below MUI's `sm` breakpoint. */\nexport const ACTIONS_MARGIN_TOP_UNITS = 2;\nexport const ACTIONS_GAP_UNITS = 2;\nexport const ACTIONS_ROW_FROM = 600;\nexport const ACTION_MIN_WIDTH = 120;\n/**\n * The web actions ARE MUI's medium `contained` and `outlined` buttons: 6px\n * 16px, or 5px 15px inside a 1px border at half alpha, 14px type, the\n * theme's radius, a 20px start icon. The native side sizes the house\n * `Button` to these.\n */\nexport const ACTION_BUTTON = {\n  contained: { paddingVertical: 6, paddingHorizontal: 16 },\n  outlined: { paddingVertical: 5, paddingHorizontal: 15 },\n  iconSize: 20,\n  outlinedBorderAlpha: 0.5,\n} as const;\n/** MUI's `theme.shadows[2]`, the elevation a contained button rests at. */\nexport const MUI_CONTAINED_SHADOW =\n  '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)';\n\n/** The help link: 8px below whatever precedes it, marked when it leaves the app. */\nexport const HELP_LINK_MARGIN_TOP_UNITS = 1;\nexport const EXTERNAL_LINK_MARK = ' ↗';\n"],"mappings":";AAWO,IAAM,4BAA4B;AAClC,IAAM,yBAAyB;AAC/B,IAAM,wBAAwB;AAG9B,IAAM,yBAAyB,EAAE,aAAa,KAAK,OAAO,IAAI;AAC9D,IAAM,uBAAuB,EAAE,SAAS,KAAK,OAAO,IAAI;AAExD,IAAM,uBAAuB,CAAC,YACnC,YAAY,gBAAgB,uBAAuB,cAAc,uBAAuB;AACnF,IAAM,sBAAsB,CAAC,YAClC,YAAY,YAAY,qBAAqB,UAAU,qBAAqB;AAGvE,IAAM,oBAAoB;AAC1B,IAAM,kBAAkB;AACxB,IAAM,wBAAwB;AAC9B,IAAM,0BAA0B;AAGhC,IAAM,2BAA2B;AACjC,IAAM,oBAAoB;AAC1B,IAAM,mBAAmB;AACzB,IAAM,mBAAmB;AAOzB,IAAM,gBAAgB;AAAA,EAC3B,WAAW,EAAE,iBAAiB,GAAG,mBAAmB,GAAG;AAAA,EACvD,UAAU,EAAE,iBAAiB,GAAG,mBAAmB,GAAG;AAAA,EACtD,UAAU;AAAA,EACV,qBAAqB;AACvB;AAEO,IAAM,uBACX;AAGK,IAAM,6BAA6B;AACnC,IAAM,qBAAqB;","names":[]}

package/dist/{chunk-MZQTHSLN.js → chunk-S7HRED4D.js}

@@ -1,6 +1,6 @@
 import {
   Chart
-} from "./chunk-OH3YGJT5.js";
+} from "./chunk-EMNGIYH6.js";
 import {
   CHART_SEMANTIC_COLORS,
   specToChartProps
@@ -46,4 +46,4 @@ var SpecChart = ({
 export {
   SpecChart
 };
-//# sourceMappingURL=chunk-MZQTHSLN.js.map
+//# sourceMappingURL=chunk-S7HRED4D.js.map

package/dist/{chunk-LUMF63BM.js → chunk-SFAP5EH5.js}

@@ -1,9 +1,9 @@
-import {
-  useTutorialOverlay
-} from "./chunk-RSQMPCCR.js";
 import {
   TutorialStepBody
 } from "./chunk-7WP2HRTW.js";
+import {
+  useTutorialOverlay
+} from "./chunk-RSQMPCCR.js";
 
 // src/components/feedback/TutorialOverlay/TutorialOverlay.tsx
 import Box from "@mui/material/Box/index.js";
@@ -271,4 +271,4 @@ export {
   TutorialOverlay,
   TutorialOverlay_default
 };
-//# sourceMappingURL=chunk-LUMF63BM.js.map
+//# sourceMappingURL=chunk-SFAP5EH5.js.map

package/dist/{chunk-ZEBJT5JZ.js → chunk-SG6VULKS.js}

@@ -1,7 +1,7 @@
 import {
   useColumnsWithActions,
   useRenderedColumns
-} from "./chunk-FP4R47TM.js";
+} from "./chunk-L65LF6LN.js";
 import {
   filterRows
 } from "./chunk-YGQX7BNI.js";
@@ -12,7 +12,7 @@ import {
 import {
   computeActiveFilterCount,
   defaultSortFields
-} from "./chunk-KZSKI2R3.js";
+} from "./chunk-YLDS5FOQ.js";
 import {
   serverDerived,
   useServerQuery
@@ -172,4 +172,4 @@ function useDataViewsState({
 export {
   useDataViewsState
 };
-//# sourceMappingURL=chunk-ZEBJT5JZ.js.map
+//# sourceMappingURL=chunk-SG6VULKS.js.map

package/dist/{chunk-GJQYM3PM.js → chunk-SHQWIDD5.js}

@@ -1,9 +1,9 @@
-import {
-  CalendarDay
-} from "./chunk-YU26GBNX.js";
 import {
   buildDayArgs
 } from "./chunk-E2Y7G4MP.js";
+import {
+  CalendarDay
+} from "./chunk-YU26GBNX.js";
 import {
   isSameDay
 } from "./chunk-TERT6TIS.js";
@@ -40,4 +40,4 @@ var CalendarDayCell = ({
 export {
   CalendarDayCell
 };
-//# sourceMappingURL=chunk-GJQYM3PM.js.map
+//# sourceMappingURL=chunk-SHQWIDD5.js.map

package/dist/{chunk-24BUCMQA.js → chunk-SL4NFGOL.js}

@@ -1,3 +1,6 @@
+import {
+  resolveButtonProps
+} from "./chunk-TAMIZE4Q.js";
 import {
   buttonEmphasisStyles,
   buttonSize,
@@ -5,9 +8,6 @@ import {
   getColorFromTheme,
   iconAlignmentStyles
 } from "./chunk-JT6TERQL.js";
-import {
-  resolveButtonProps
-} from "./chunk-TAMIZE4Q.js";
 import {
   childTestId,
   resolveTestId,
@@ -111,4 +111,4 @@ Button.displayName = "Button";
 export {
   Button
 };
-//# sourceMappingURL=chunk-24BUCMQA.js.map
+//# sourceMappingURL=chunk-SL4NFGOL.js.map

package/dist/{chunk-PHCSPHDH.js → chunk-SOHDPFOB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-24BUCMQA.js";
+} from "./chunk-SL4NFGOL.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -170,4 +170,4 @@ function DataViewsExportMenu({
 export {
   DataViewsExportMenu
 };
-//# sourceMappingURL=chunk-PHCSPHDH.js.map
+//# sourceMappingURL=chunk-SOHDPFOB.js.map

package/dist/chunk-TLGGVE56.js

@@ -0,0 +1,37 @@
+// src/components/data-display/ErrorState/ErrorState.metrics.ts
+var ERROR_STATE_PADDING_UNITS = 6;
+var ERROR_STATE_MIN_HEIGHT = 200;
+var ERROR_STATE_GAP_UNITS = 2;
+var ERROR_ICON_BOX = 80;
+var ERROR_ICON_BOX_OPACITY = 0.9;
+var ERROR_ICON_SIZE = 48;
+var ERROR_TEXT_GAP_UNITS = 1;
+var ERROR_MESSAGE_MAX_WIDTH = 400;
+var ERROR_MESSAGE_LINE_HEIGHT = 1.6;
+var RETRY_MARGIN_TOP_UNITS = 1;
+var RETRY_MIN_WIDTH = 120;
+var RETRY_BUTTON = {
+  paddingVertical: 5,
+  paddingHorizontal: 15,
+  iconSize: 20
+};
+function errorStatePalette(theme, severity) {
+  return severity === "error" ? theme.palette.danger : theme.palette.warning;
+}
+
+export {
+  ERROR_STATE_PADDING_UNITS,
+  ERROR_STATE_MIN_HEIGHT,
+  ERROR_STATE_GAP_UNITS,
+  ERROR_ICON_BOX,
+  ERROR_ICON_BOX_OPACITY,
+  ERROR_ICON_SIZE,
+  ERROR_TEXT_GAP_UNITS,
+  ERROR_MESSAGE_MAX_WIDTH,
+  ERROR_MESSAGE_LINE_HEIGHT,
+  RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_WIDTH,
+  RETRY_BUTTON,
+  errorStatePalette
+};
+//# sourceMappingURL=chunk-TLGGVE56.js.map

package/dist/chunk-TLGGVE56.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":";AAYO,IAAM,4BAA4B;AAClC,IAAM,yBAAyB;AAC/B,IAAM,wBAAwB;AAG9B,IAAM,iBAAiB;AACvB,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAGxB,IAAM,uBAAuB;AAC7B,IAAM,0BAA0B;AAChC,IAAM,4BAA4B;AAGlC,IAAM,yBAAyB;AAC/B,IAAM,kBAAkB;AAMxB,IAAM,eAAe;AAAA,EAC1B,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAGO,SAAS,kBAAkB,OAAgB,UAA8C;AAC9F,SAAO,aAAa,UAAU,MAAM,QAAQ,SAAS,MAAM,QAAQ;AACrE;","names":[]}

package/dist/{chunk-K2T2CQSZ.js → chunk-UF27D35R.js}

@@ -1,6 +1,6 @@
 import {
   useCardActions
-} from "./chunk-77GA5YHQ.js";
+} from "./chunk-43NEBUV3.js";
 import {
   ConfirmActionDialog
 } from "./chunk-QQS3GQYS.js";
@@ -50,4 +50,4 @@ function useRemoveConfirm({
 export {
   useRemoveConfirm
 };
-//# sourceMappingURL=chunk-K2T2CQSZ.js.map
+//# sourceMappingURL=chunk-UF27D35R.js.map

package/dist/{chunk-7M5BACFQ.js → chunk-UXQW6ZIN.js}

@@ -1,3 +1,27 @@
+import {
+  ACTIONS_GAP_UNITS,
+  ACTIONS_MARGIN_TOP_UNITS,
+  ACTION_MIN_WIDTH,
+  CONTENT_GAP_UNITS,
+  DESCRIPTION_LINE_HEIGHT,
+  DESCRIPTION_MAX_WIDTH,
+  EMPTY_STATE_GAP_UNITS,
+  EMPTY_STATE_MIN_HEIGHT,
+  EMPTY_STATE_PADDING_UNITS,
+  EXTERNAL_LINK_MARK,
+  HELP_LINK_MARGIN_TOP_UNITS,
+  TITLE_MAX_WIDTH,
+  illustrationMaxWidth,
+  illustrationOpacity
+} from "./chunk-RKCS6K36.js";
+import {
+  actionsOf,
+  makeTestId
+} from "./chunk-MWFSIB6K.js";
+import {
+  resolveTestId
+} from "./chunk-QLWBQQW7.js";
+
 // src/components/data-display/EmptyState/EmptyState.tsx
 import AddIcon from "@mui/icons-material/Add";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -9,55 +33,19 @@ import Typography from "@mui/material/Typography/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
-var actionsOf = (props, refreshLabel, createLabel) => {
-  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
-  const specs = [];
-  if (primaryAction) {
-    specs.push({
-      key: "primary-action",
-      variant: "contained",
-      onClick: primaryAction.onClick,
-      label: primaryAction.label
-    });
-  }
-  if (onCreate) {
-    specs.push({
-      key: "create-button",
-      variant: "contained",
-      onClick: onCreate,
-      label: createLabel,
-      icon: /* @__PURE__ */ jsx(AddIcon, {})
-    });
-  }
-  if (secondaryAction) {
-    specs.push({
-      key: "secondary-action",
-      variant: "outlined",
-      onClick: secondaryAction.onClick,
-      label: secondaryAction.label
-    });
-  }
-  if (onRefresh) {
-    specs.push({
-      key: "refresh-button",
-      variant: "outlined",
-      onClick: onRefresh,
-      label: refreshLabel,
-      icon: /* @__PURE__ */ jsx(RefreshIcon, {})
-    });
-  }
-  return specs;
+var ACTION_ICONS = {
+  Add: /* @__PURE__ */ jsx(AddIcon, {}),
+  Refresh: /* @__PURE__ */ jsx(RefreshIcon, {})
 };
 var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
   Box,
   {
     "data-testid": testId,
     sx: {
-      maxWidth: variant === "illustrated" ? 240 : 120,
+      maxWidth: illustrationMaxWidth(variant),
       width: "100%",
       height: "auto",
-      opacity: variant === "minimal" ? 0.6 : 0.8,
+      opacity: illustrationOpacity(variant),
       display: variant === "minimal" ? "none" : "block"
     },
     children: illustration
@@ -69,17 +57,17 @@ var Actions = ({ specs, testId }) => {
     Stack,
     {
       direction: { xs: "column", sm: "row" },
-      spacing: 2,
+      spacing: ACTIONS_GAP_UNITS,
       alignItems: "center",
-      sx: { mt: theme.spacing(2) },
+      sx: { mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) },
       children: specs.map((spec) => /* @__PURE__ */ jsx(
         Button,
         {
           variant: spec.variant,
           onClick: spec.onClick,
-          startIcon: spec.icon,
+          startIcon: spec.icon && ACTION_ICONS[spec.icon],
           "data-testid": testId(spec.key),
-          sx: { minWidth: 120 },
+          sx: { minWidth: ACTION_MIN_WIDTH },
           children: spec.label
         },
         spec.key
@@ -97,7 +85,7 @@ var HelpLink = ({ helpLink, testId }) => {
       rel: helpLink.external ? "noopener noreferrer" : void 0,
       "data-testid": testId,
       sx: {
-        mt: theme.spacing(1),
+        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
         color: theme.palette.primary.main,
         textDecoration: "none",
         "&:hover": {
@@ -106,14 +94,14 @@ var HelpLink = ({ helpLink, testId }) => {
       },
       children: [
         helpLink.label,
-        helpLink.external && " \u2197"
+        helpLink.external && EXTERNAL_LINK_MARK
       ]
     }
   );
 };
 var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: CONTENT_GAP_UNITS, alignItems: "center", children: [
     /* @__PURE__ */ jsx(
       Typography,
       {
@@ -124,7 +112,7 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         sx: {
           fontWeight: theme.typography.fontWeightMedium,
           color: theme.palette.text.primary,
-          maxWidth: 400
+          maxWidth: TITLE_MAX_WIDTH
         },
         children: title
       }
@@ -136,8 +124,8 @@ var Content = ({ title, description, titleId, testId, actions, showActions, help
         color: "text.secondary",
         "data-testid": testId("description"),
         sx: {
-          maxWidth: 480,
-          lineHeight: 1.6
+          maxWidth: DESCRIPTION_MAX_WIDTH,
+          lineHeight: DESCRIPTION_LINE_HEIGHT
         },
         children: description
       }
@@ -155,11 +143,11 @@ var EmptyState = React.memo((props) => {
     helpLink,
     refreshLabel = "Refresh",
     createLabel = "Create New",
-    className,
-    dataTestId
+    className
   } = props;
   const theme = useTheme();
   const titleId = React.useId();
+  const dataTestId = resolveTestId(props);
   const testId = makeTestId(dataTestId);
   const actions = actionsOf(props, refreshLabel, createLabel);
   const showActions = variant === "action" || actions.length > 0;
@@ -176,9 +164,9 @@ var EmptyState = React.memo((props) => {
         alignItems: "center",
         justifyContent: "center",
         textAlign: "center",
-        padding: theme.spacing(6),
-        minHeight: 200,
-        gap: theme.spacing(3)
+        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
+        minHeight: EMPTY_STATE_MIN_HEIGHT,
+        gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
       },
       children: [
         illustration && /* @__PURE__ */ jsx(
@@ -212,4 +200,4 @@ export {
   EmptyState,
   EmptyState_default
 };
-//# sourceMappingURL=chunk-7M5BACFQ.js.map
+//# sourceMappingURL=chunk-UXQW6ZIN.js.map

package/dist/chunk-UXQW6ZIN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { type ActionIconName, type ActionSpec, actionsOf, makeTestId } from './EmptyState.helpers';\nimport {\n  ACTION_MIN_WIDTH,\n  ACTIONS_GAP_UNITS,\n  ACTIONS_MARGIN_TOP_UNITS,\n  CONTENT_GAP_UNITS,\n  DESCRIPTION_LINE_HEIGHT,\n  DESCRIPTION_MAX_WIDTH,\n  EMPTY_STATE_GAP_UNITS,\n  EMPTY_STATE_MIN_HEIGHT,\n  EMPTY_STATE_PADDING_UNITS,\n  EXTERNAL_LINK_MARK,\n  HELP_LINK_MARGIN_TOP_UNITS,\n  illustrationMaxWidth,\n  illustrationOpacity,\n  TITLE_MAX_WIDTH,\n} from './EmptyState.metrics';\nimport type { EmptyStateProps, EmptyStateVariant } from './EmptyState.types';\nimport { resolveTestId } from '../../../platform/test-id';\n\n/** The shared action list names its glyph; the web draws it with MUI's icon. */\nconst ACTION_ICONS: Record<ActionIconName, React.ReactNode> = {\n  Add: <AddIcon />,\n  Refresh: <RefreshIcon />,\n};\n\nconst Illustration: React.FC<{\n  illustration: React.ReactNode;\n  variant: EmptyStateVariant;\n  testId: string;\n}> = ({ illustration, variant, testId }) => (\n  <Box\n    data-testid={testId}\n    sx={{\n      maxWidth: illustrationMaxWidth(variant),\n      width: '100%',\n      height: 'auto',\n      opacity: illustrationOpacity(variant),\n      display: variant === 'minimal' ? 'none' : 'block',\n    }}\n  >\n    {illustration}\n  </Box>\n);\n\nconst Actions: React.FC<{\n  specs: ActionSpec[];\n  testId: (suffix: string) => string;\n}> = ({ specs, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={ACTIONS_GAP_UNITS}\n      alignItems=\"center\"\n      sx={{ mt: theme.spacing(ACTIONS_MARGIN_TOP_UNITS) }}\n    >\n      {specs.map((spec) => (\n        <Button\n          key={spec.key}\n          variant={spec.variant}\n          onClick={spec.onClick}\n          startIcon={spec.icon && ACTION_ICONS[spec.icon]}\n          data-testid={testId(spec.key)}\n          sx={{ minWidth: ACTION_MIN_WIDTH }}\n        >\n          {spec.label}\n        </Button>\n      ))}\n    </Stack>\n  );\n};\n\nconst HelpLink: React.FC<{\n  helpLink: NonNullable<EmptyStateProps['helpLink']>;\n  testId: string;\n}> = ({ helpLink, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Link\n      href={helpLink.href}\n      target={helpLink.external ? '_blank' : undefined}\n      rel={helpLink.external ? 'noopener noreferrer' : undefined}\n      data-testid={testId}\n      sx={{\n        mt: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),\n        color: theme.palette.primary.main,\n        textDecoration: 'none',\n        '&:hover': {\n          textDecoration: 'underline',\n        },\n      }}\n    >\n      {helpLink.label}\n      {helpLink.external && EXTERNAL_LINK_MARK}\n    </Link>\n  );\n};\n\nconst Content: React.FC<{\n  title: string;\n  description?: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n  actions: ActionSpec[];\n  showActions: boolean;\n  helpLink?: EmptyStateProps['helpLink'];\n}> = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={CONTENT_GAP_UNITS} alignItems=\"center\">\n      <Typography\n        id={titleId}\n        variant=\"h6\"\n        component=\"h3\"\n        data-testid={testId('title')}\n        sx={{\n          fontWeight: theme.typography.fontWeightMedium,\n          color: theme.palette.text.primary,\n          maxWidth: TITLE_MAX_WIDTH,\n        }}\n      >\n        {title}\n      </Typography>\n\n      {description && (\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid={testId('description')}\n          sx={{\n            maxWidth: DESCRIPTION_MAX_WIDTH,\n            lineHeight: DESCRIPTION_LINE_HEIGHT,\n          }}\n        >\n          {description}\n        </Typography>\n      )}\n\n      {showActions && <Actions specs={actions} testId={testId} />}\n\n      {helpLink && <HelpLink helpLink={helpLink} testId={testId('help-link')} />}\n    </Stack>\n  );\n};\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {\n  const {\n    variant = 'default',\n    title,\n    description,\n    illustration,\n    helpLink,\n    refreshLabel = 'Refresh',\n    createLabel = 'Create New',\n    className,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  // `dataTestId` is the documented spelling; `testID`, the shared contract's\n  // other one, resolves to the same id.\n  const dataTestId = resolveTestId(props);\n  const testId = makeTestId(dataTestId);\n\n  const actions = actionsOf(props, refreshLabel, createLabel);\n  // The `action` variant reserves the action row even when nothing fills it.\n  const showActions = variant === 'action' || actions.length > 0;\n\n  return (\n    <Box\n      role=\"region\"\n      aria-labelledby={titleId}\n      className={className}\n      data-testid={dataTestId || 'empty-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),\n        minHeight: EMPTY_STATE_MIN_HEIGHT,\n        gap: theme.spacing(EMPTY_STATE_GAP_UNITS),\n      }}\n    >\n      {/* Illustration */}\n      {illustration && (\n        <Illustration\n          illustration={illustration}\n          variant={variant}\n          testId={testId('icon')}\n        />\n      )}\n\n      {/* Content */}\n      <Content\n        title={title}\n        description={description}\n        titleId={titleId}\n        testId={testId}\n        actions={actions}\n        showActions={showActions}\n        helpLink={helpLink}\n      />\n    </Box>\n  );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nexport default EmptyState;\n"],"mappings":"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","names":[]}