@12-apps/ui 6.18.0 → 6.19.1

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":[]}

package/dist/{chunk-A2GGT4OC.js → chunk-V3SBJ3PB.js}

@@ -1,3 +1,22 @@
+import {
+  LEAD_FONT_SIZE,
+  LEAD_LETTER_SPACING_EM,
+  LEAD_LINE_HEIGHT,
+  MUTED_OPACITY,
+  PARAGRAPH_FONT_WEIGHT,
+  PARAGRAPH_MARGIN_BOTTOM_EM,
+  PARAGRAPH_SIZES,
+  SMALL_FONT_SIZE,
+  SMALL_LINE_HEIGHT
+} from "./chunk-QKLGH3RZ.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-QLWBQQW7.js";
+import {
+  px
+} from "./chunk-NQN5Z36J.js";
+
 // src/components/typography/Paragraph/Paragraph.tsx
 import Typography from "@mui/material/Typography/index.js";
 import { styled } from "@mui/material/styles/index.js";
@@ -17,20 +36,20 @@ var getColorFromTheme = (theme, color) => {
   };
   return colorMap[color] || theme.palette.text.primary;
 };
+var sizeMap = Object.fromEntries(
+  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [
+    size,
+    { fontSize: px(step.fontSize), lineHeight: step.lineHeight }
+  ])
+);
+var sizeOverride = (customSize, atDefault) => customSize === "md" ? px(atDefault) : sizeMap[customSize]?.fontSize;
 var StyledParagraph = styled(Typography, {
   shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize"].includes(prop)
 })(({ theme, customVariant = "default", customColor = "neutral", customSize = "md" }) => {
   const textColor = getColorFromTheme(theme, customColor);
-  const sizeMap = {
-    xs: { fontSize: "0.75rem", lineHeight: 1.4 },
-    sm: { fontSize: "0.875rem", lineHeight: 1.5 },
-    md: { fontSize: "1rem", lineHeight: 1.6 },
-    lg: { fontSize: "1.125rem", lineHeight: 1.6 },
-    xl: { fontSize: "1.25rem", lineHeight: 1.7 }
-  };
   const baseStyles = {
     fontFamily: theme.typography.body1.fontFamily,
-    margin: "0 0 1em 0",
+    margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
     transition: "all 0.2s ease",
     ...sizeMap[customSize]
   };
@@ -38,48 +57,53 @@ var StyledParagraph = styled(Typography, {
     default: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400
+      fontWeight: PARAGRAPH_FONT_WEIGHT
     },
     lead: {
       ...baseStyles,
       color: textColor,
-      fontWeight: 400,
-      fontSize: customSize === "md" ? "1.125rem" : sizeMap[customSize]?.fontSize,
-      lineHeight: 1.7,
-      letterSpacing: "0.01em"
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),
+      lineHeight: LEAD_LINE_HEIGHT,
+      letterSpacing: `${LEAD_LETTER_SPACING_EM}em`
     },
     muted: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontWeight: 400,
-      opacity: 0.8
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      opacity: MUTED_OPACITY
     },
     small: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontSize: customSize === "md" ? "0.875rem" : sizeMap[customSize]?.fontSize,
-      fontWeight: 400,
-      lineHeight: 1.5
+      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),
+      fontWeight: PARAGRAPH_FONT_WEIGHT,
+      lineHeight: SMALL_LINE_HEIGHT
     }
   };
   return variantStyles[customVariant] || variantStyles.default;
 });
 var Paragraph = React.forwardRef(
-  ({ variant = "default", color = "neutral", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx(
-    StyledParagraph,
-    {
-      ref,
-      customVariant: variant,
-      customColor: color,
-      customSize: size,
-      ...props,
-      children
-    }
-  )
+  ({ variant = "default", color = "neutral", size = "md", children, ...others }, ref) => {
+    const testId = resolveTestId(others);
+    const props = withoutTestIdProps(others);
+    return /* @__PURE__ */ jsx(
+      StyledParagraph,
+      {
+        ref,
+        "data-testid": testId,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        ...props,
+        children
+      }
+    );
+  }
 );
 Paragraph.displayName = "Paragraph";
 
 export {
   Paragraph
 };
-//# sourceMappingURL=chunk-A2GGT4OC.js.map
+//# sourceMappingURL=chunk-V3SBJ3PB.js.map