@12-apps/ui 6.18.0 → 6.19.0

package/dist/{chunk-WO52KYSU.js → chunk-MHFJBNDP.js}

@@ -1,24 +1,24 @@
+import {
+  CategoryMultiFoot,
+  CategorySingleFoot
+} from "./chunk-PU3AAKRR.js";
 import {
   CategoryQuickActions
 } from "./chunk-ZUIJ3N7N.js";
 import {
   CategoryPanelList
-} from "./chunk-NHSMLVNC.js";
+} from "./chunk-KSF7TLXH.js";
 import {
   CategoryPanelHead,
   CategoryPinnedTray
 } from "./chunk-GGE7Y53F.js";
 import {
-  CategoryMultiFoot,
-  CategorySingleFoot
-} from "./chunk-PU3AAKRR.js";
+  removeChip
+} from "./chunk-LR6MSKTT.js";
 import {
   panelSx,
   sheetSx
 } from "./chunk-FCOEJCUP.js";
-import {
-  removeChip
-} from "./chunk-LR6MSKTT.js";
 
 // src/components/form/CategorySelect/CategoryPanel.tsx
 import Box from "@mui/material/Box/index.js";
@@ -155,4 +155,4 @@ function PanelFooter({
 export {
   CategoryPanel
 };
-//# sourceMappingURL=chunk-WO52KYSU.js.map
+//# sourceMappingURL=chunk-MHFJBNDP.js.map

package/dist/chunk-MWFSIB6K.js

@@ -0,0 +1,47 @@
+// src/components/data-display/EmptyState/EmptyState.helpers.ts
+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: "Add"
+    });
+  }
+  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: "Refresh"
+    });
+  }
+  return specs;
+};
+
+export {
+  makeTestId,
+  actionsOf
+};
+//# sourceMappingURL=chunk-MWFSIB6K.js.map

package/dist/chunk-MWFSIB6K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.helpers.ts"],"sourcesContent":["import type { EmptyStateBaseProps } from './EmptyState.base';\n\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;\n\n/** The glyph an action carries, by the shared icon set's name; each renderer draws it its own way. */\nexport type ActionIconName = 'Add' | 'Refresh';\n\nexport interface ActionSpec {\n  key: 'primary-action' | 'create-button' | 'secondary-action' | 'refresh-button';\n  variant: 'contained' | 'outlined';\n  onClick: () => void;\n  label: string;\n  icon?: ActionIconName;\n}\n\n// The four buttons are one button with different props. Listing them keeps their\n// order — primary, create, secondary, refresh — visible in one place, and both\n// renderers read this one list.\nexport const actionsOf = (\n  props: EmptyStateBaseProps,\n  refreshLabel: string,\n  createLabel: string,\n): ActionSpec[] => {\n  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;\n  const specs: ActionSpec[] = [];\n\n  if (primaryAction) {\n    specs.push({\n      key: 'primary-action',\n      variant: 'contained',\n      onClick: primaryAction.onClick,\n      label: primaryAction.label,\n    });\n  }\n  if (onCreate) {\n    specs.push({\n      key: 'create-button',\n      variant: 'contained',\n      onClick: onCreate,\n      label: createLabel,\n      icon: 'Add',\n    });\n  }\n  if (secondaryAction) {\n    specs.push({\n      key: 'secondary-action',\n      variant: 'outlined',\n      onClick: secondaryAction.onClick,\n      label: secondaryAction.label,\n    });\n  }\n  if (onRefresh) {\n    specs.push({\n      key: 'refresh-button',\n      variant: 'outlined',\n      onClick: onRefresh,\n      label: refreshLabel,\n      icon: 'Refresh',\n    });\n  }\n\n  return specs;\n};\n"],"mappings":";AAEO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,eAAe,MAAM;AAgB3D,IAAM,YAAY,CACvB,OACA,cACA,gBACiB;AACjB,QAAM,EAAE,eAAe,iBAAiB,UAAU,UAAU,IAAI;AAChE,QAAM,QAAsB,CAAC;AAE7B,MAAI,eAAe;AACjB,UAAM,KAAK;AAAA,MACT,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS,cAAc;AAAA,MACvB,OAAO,cAAc;AAAA,IACvB,CAAC;AAAA,EACH;AACA,MAAI,UAAU;AACZ,UAAM,KAAK;AAAA,MACT,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AACA,MAAI,iBAAiB;AACnB,UAAM,KAAK;AAAA,MACT,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS,gBAAgB;AAAA,MACzB,OAAO,gBAAgB;AAAA,IACzB,CAAC;AAAA,EACH;AACA,MAAI,WAAW;AACb,UAAM,KAAK;AAAA,MACT,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,SAAO;AACT;","names":[]}

package/dist/chunk-N3QUEBNS.js

@@ -0,0 +1,32 @@
+// src/components/data-display/Alert/Alert.helpers.ts
+var ALERT_DEFAULTS = {
+  variant: "info",
+  glow: false,
+  pulse: false,
+  showIcon: true,
+  closable: false,
+  animate: true,
+  role: "alert",
+  "aria-atomic": "true"
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveAlertProps = (props) => ({ ...ALERT_DEFAULTS, ...definedProps(props) });
+var defaultAriaLive = (variant) => variant === "danger" ? "assertive" : "polite";
+var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `alert-${suffix}`;
+var VARIANT_ICON = {
+  info: "Info",
+  success: "CheckCircle",
+  warning: "Warning",
+  danger: "Error"
+};
+
+export {
+  ALERT_DEFAULTS,
+  resolveAlertProps,
+  defaultAriaLive,
+  testIdFor,
+  VARIANT_ICON
+};
+//# sourceMappingURL=chunk-N3QUEBNS.js.map

package/dist/chunk-N3QUEBNS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.helpers.ts"],"sourcesContent":["import type { AlertBaseFields, AlertVariant } from './Alert.base';\nimport type { IconName } from '../../../icons/Icon.types';\n\ntype AlertDefaultedKeys = 'variant' | 'glow' | 'pulse' | 'showIcon' | 'animate' | 'role' | 'aria-atomic';\n\nexport const ALERT_DEFAULTS: Required<Pick<AlertBaseFields, AlertDefaultedKeys>> & { closable: false } = {\n  variant: 'info',\n  glow: false,\n  pulse: false,\n  showIcon: true,\n  closable: false,\n  animate: true,\n  role: 'alert',\n  'aria-atomic': 'true',\n};\n\n/**\n * Generic over the renderer's own props: the web and the native `Alert` pass\n * different extras through, and both come back out untouched.\n */\nexport type ResolvedAlertProps<P extends AlertBaseFields> = P &\n  Required<Pick<AlertBaseFields, AlertDefaultedKeys>>;\n\n// Strips explicitly-undefined props before the merge so `prop={undefined}` still\n// falls back to the default, the way a destructuring default would.\nconst definedProps = <P extends AlertBaseFields>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\n// Through `unknown`: `closable: false` in the defaults belongs to the dismiss\n// union rather than to `AlertBaseFields`, so TypeScript cannot see the merge as\n// comparable to `P` although every field of `P` survives it untouched.\nexport const resolveAlertProps = <P extends AlertBaseFields>(props: P): ResolvedAlertProps<P> =>\n  ({ ...ALERT_DEFAULTS, ...definedProps(props) }) as unknown as ResolvedAlertProps<P>;\n\n/** `danger` announces itself; everything else waits its turn. */\nexport const defaultAriaLive = (variant: AlertVariant): 'polite' | 'assertive' =>\n  variant === 'danger' ? 'assertive' : 'polite';\n\nexport const testIdFor = (base: string | undefined, suffix: string): string =>\n  base ? `${base}-${suffix}` : `alert-${suffix}`;\n\n/**\n * The glyph each semantic variant carries, by the shared icon set's name.\n * `glass` and `gradient` carry none of their own: the web renders an empty\n * icon slot for them unless the caller passes an `icon`, and so does native.\n */\nexport const VARIANT_ICON: Partial<Record<AlertVariant, IconName>> = {\n  info: 'Info',\n  success: 'CheckCircle',\n  warning: 'Warning',\n  danger: 'Error',\n};\n"],"mappings":";AAKO,IAAM,iBAA4F;AAAA,EACvG,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,eAAe;AACjB;AAWA,IAAM,eAAe,CAA4B,UAC/C,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAKK,IAAM,oBAAoB,CAA4B,WAC1D,EAAE,GAAG,gBAAgB,GAAG,aAAa,KAAK,EAAE;AAGxC,IAAM,kBAAkB,CAAC,YAC9B,YAAY,WAAW,cAAc;AAEhC,IAAM,YAAY,CAAC,MAA0B,WAClD,OAAO,GAAG,IAAI,IAAI,MAAM,KAAK,SAAS,MAAM;AAOvC,IAAM,eAAwD;AAAA,EACnE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;","names":[]}

package/dist/{chunk-WBVHRLIS.js → chunk-N4WANJI3.js}

@@ -1,3 +1,6 @@
+import {
+  highlightSegments
+} from "./chunk-LR6MSKTT.js";
 import {
   CheckGlyph,
   DisclosureGlyph
@@ -14,9 +17,6 @@ import {
   rowSx,
   sectionHeadSx
 } from "./chunk-FCOEJCUP.js";
-import {
-  highlightSegments
-} from "./chunk-LR6MSKTT.js";
 
 // src/components/form/CategorySelect/CategoryRows.tsx
 import Box from "@mui/material/Box/index.js";
@@ -170,4 +170,4 @@ export {
   SubcategoryRow,
   CategorySectionHeading
 };
-//# sourceMappingURL=chunk-WBVHRLIS.js.map
+//# sourceMappingURL=chunk-N4WANJI3.js.map

package/dist/chunk-N7MJ6CNC.js

@@ -0,0 +1,30 @@
+// src/components/layout/Spacer/Spacer.metrics.ts
+var SPACER_SIZE_UNITS = {
+  xs: 0.5,
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4
+};
+var SPACER_DEFAULT_SIZE = "md";
+var SPACER_DEFAULT_DIRECTION = "both";
+var SPACER_FLEX_GROW = 1;
+var SPACER_FLEX_SHRINK = 0;
+function spacerDimensions(geometry, spacing) {
+  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;
+  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);
+  return {
+    width: direction === "vertical" ? width : width ?? step,
+    height: direction === "horizontal" ? height : height ?? step
+  };
+}
+
+export {
+  SPACER_SIZE_UNITS,
+  SPACER_DEFAULT_SIZE,
+  SPACER_DEFAULT_DIRECTION,
+  SPACER_FLEX_GROW,
+  SPACER_FLEX_SHRINK,
+  spacerDimensions
+};
+//# sourceMappingURL=chunk-N7MJ6CNC.js.map

package/dist/chunk-N7MJ6CNC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Spacer/Spacer.metrics.ts"],"sourcesContent":["import type { SpacerDirection, SpacerSize } from './Spacer.base';\n\n/**\n * THE NUMBERS BOTH `Spacer` RENDERERS DRAW WITH.\n *\n * `Spacer.tsx` used to hold the size steps as a `switch` over\n * `theme.spacing(…)` calls, and `Spacer.native.tsx` would have held them again\n * as a second table. Now there is one, in SPACING UNITS, and each renderer\n * multiplies it out through its own `theme.spacing` — `'16px'` on the web,\n * `16` on native — so an `md` spacer is 16 wide on both sides by construction.\n */\nexport const SPACER_SIZE_UNITS: Record<SpacerSize, number> = {\n  xs: 0.5,\n  sm: 1,\n  md: 2,\n  lg: 3,\n  xl: 4,\n};\n\nexport const SPACER_DEFAULT_SIZE: SpacerSize = 'md';\nexport const SPACER_DEFAULT_DIRECTION: SpacerDirection = 'both';\n\n/** `flex` grows the spacer by one share of the free space; every spacer refuses to shrink. */\nexport const SPACER_FLEX_GROW = 1;\nexport const SPACER_FLEX_SHRINK = 0;\n\n/** The geometry props, with the dimension type left to the renderer. */\nexport interface SpacerGeometry<Dimension> {\n  size?: SpacerSize;\n  direction?: SpacerDirection;\n  width?: Dimension;\n  height?: Dimension;\n}\n\n/**\n * The width and height a spacer occupies, on either renderer.\n *\n * An explicit `width`/`height` wins on its axis whatever `direction` says; the\n * step fills only the axes `direction` names. `spacing` is the renderer's own\n * `theme.spacing`, so the same units come out as `'16px'` on the web and `16`\n * on native — the one resolver is what keeps the two from disagreeing.\n */\nexport function spacerDimensions<Dimension, Spacing>(\n  geometry: SpacerGeometry<Dimension>,\n  spacing: (units: number) => Spacing,\n): { width: Dimension | Spacing | undefined; height: Dimension | Spacing | undefined } {\n  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;\n  // A size outside the vocabulary (a story control, an untyped caller) draws `md`,\n  // exactly as the old `switch` did in its `default` arm.\n  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);\n  return {\n    width: direction === 'vertical' ? width : (width ?? step),\n    height: direction === 'horizontal' ? height : (height ?? step),\n  };\n}\n"],"mappings":";AAWO,IAAM,oBAAgD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,sBAAkC;AACxC,IAAM,2BAA4C;AAGlD,IAAM,mBAAmB;AACzB,IAAM,qBAAqB;AAkB3B,SAAS,iBACd,UACA,SACqF;AACrF,QAAM,EAAE,OAAO,qBAAqB,YAAY,0BAA0B,OAAO,OAAO,IAAI;AAG5F,QAAM,OAAO,QAAQ,kBAAkB,IAAI,KAAK,kBAAkB,mBAAmB,CAAC;AACtF,SAAO;AAAA,IACL,OAAO,cAAc,aAAa,QAAS,SAAS;AAAA,IACpD,QAAQ,cAAc,eAAe,SAAU,UAAU;AAAA,EAC3D;AACF;","names":[]}

package/dist/{chunk-XKMFIH27.js → chunk-NECUCG2S.js}

@@ -1,38 +1,38 @@
+import {
+  FilterDialog,
+  GridFilterPanel
+} from "./chunk-CLNTJM3F.js";
 import {
   DataViewsEmpty
-} from "./chunk-C52BELLW.js";
+} from "./chunk-ISSJNFJV.js";
 import {
   InlineFilterControls
-} from "./chunk-U7RULTSH.js";
+} from "./chunk-C6XESZ3R.js";
 import {
   GridHeaderRow
 } from "./chunk-ENNW5SKT.js";
 import {
   GridMain
-} from "./chunk-J54WH74M.js";
-import {
-  FilterDialog,
-  GridFilterPanel
-} from "./chunk-WUPVHIMD.js";
+} from "./chunk-AP4FLCLA.js";
 import {
   DataViewsPagination
-} from "./chunk-IPS55KWK.js";
+} from "./chunk-HP2ODXNA.js";
 import {
   toOverflowFields,
   useFilterOverflow
 } from "./chunk-TQ6FPOPD.js";
+import {
+  resolveSelectionExtra
+} from "./chunk-KX75HM5U.js";
 import {
   ScopeTabsSlot
 } from "./chunk-Y5UCOBQN.js";
 import {
   ShellToolbar
-} from "./chunk-NETZMGQP.js";
-import {
-  resolveSelectionExtra
-} from "./chunk-KX75HM5U.js";
+} from "./chunk-LIOVN5IM.js";
 import {
   togglePillValues
-} from "./chunk-KZSKI2R3.js";
+} from "./chunk-YLDS5FOQ.js";
 import {
   DataViewsLayoutProvider,
   useDataViewsLayout
@@ -237,4 +237,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-XKMFIH27.js.map
+//# sourceMappingURL=chunk-NECUCG2S.js.map

package/dist/{chunk-IH4CX43Q.js → chunk-NFHS77NE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Button
-} from "./chunk-24BUCMQA.js";
+} from "./chunk-SL4NFGOL.js";
 
 // src/components/form/total-form/SubmitButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -29,4 +29,4 @@ function SubmitButton({
 export {
   SubmitButton
 };
-//# sourceMappingURL=chunk-IH4CX43Q.js.map
+//# sourceMappingURL=chunk-NFHS77NE.js.map

package/dist/{chunk-E67PUPFJ.js → chunk-NQC6H7GY.js}

@@ -1,3 +1,20 @@
+import {
+  ERROR_ICON_BOX,
+  ERROR_ICON_BOX_OPACITY,
+  ERROR_ICON_SIZE,
+  ERROR_MESSAGE_LINE_HEIGHT,
+  ERROR_MESSAGE_MAX_WIDTH,
+  ERROR_STATE_GAP_UNITS,
+  ERROR_STATE_MIN_HEIGHT,
+  ERROR_STATE_PADDING_UNITS,
+  ERROR_TEXT_GAP_UNITS,
+  RETRY_MARGIN_TOP_UNITS,
+  RETRY_MIN_WIDTH
+} from "./chunk-TLGGVE56.js";
+import {
+  resolveTestId
+} from "./chunk-QLWBQQW7.js";
+
 // src/components/data-display/ErrorState/ErrorState.tsx
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -23,19 +40,19 @@ var ErrorIcon = ({ severity, icon, testId }) => {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        width: 80,
-        height: 80,
+        width: ERROR_ICON_BOX,
+        height: ERROR_ICON_BOX,
         borderRadius: "50%",
         backgroundColor: color.light,
-        opacity: 0.9
+        opacity: ERROR_ICON_BOX_OPACITY
       },
-      children: icon || /* @__PURE__ */ jsx(Fallback, { sx: { fontSize: 48, color: color.main } })
+      children: icon || /* @__PURE__ */ jsx(Fallback, { sx: { fontSize: ERROR_ICON_SIZE, color: color.main } })
     }
   );
 };
 var ErrorText = ({ title, message, titleId, testId }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: ERROR_TEXT_GAP_UNITS, alignItems: "center", children: [
     title && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -58,69 +75,68 @@ var ErrorText = ({ title, message, titleId, testId }) => {
         color: "text.secondary",
         "data-testid": testId("message"),
         sx: {
-          maxWidth: 400,
-          lineHeight: 1.6
+          maxWidth: ERROR_MESSAGE_MAX_WIDTH,
+          lineHeight: ERROR_MESSAGE_LINE_HEIGHT
         },
         children: message
       }
     )
   ] });
 };
-var ErrorState = React.memo(
-  ({
+var ErrorState = React.memo((props) => {
+  const {
     message,
     title,
     onRetry,
     retryLabel = "Retry",
     severity = "error",
     icon,
-    className,
-    dataTestId
-  }) => {
-    const theme = useTheme();
-    const titleId = React.useId();
-    const testId = makeTestId(dataTestId);
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        role: "alert",
-        "aria-labelledby": title ? titleId : void 0,
-        "aria-describedby": `${titleId}-message`,
-        className,
-        "data-testid": dataTestId || "error-state",
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          padding: theme.spacing(6),
-          minHeight: 200,
-          gap: theme.spacing(2)
-        },
-        children: [
-          /* @__PURE__ */ jsx(ErrorIcon, { severity, icon, testId: testId("icon") }),
-          /* @__PURE__ */ jsx(ErrorText, { title, message, titleId, testId }),
-          onRetry && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              color: severity,
-              onClick: onRetry,
-              startIcon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-              "data-testid": testId("retry-button"),
-              sx: {
-                mt: theme.spacing(1),
-                minWidth: 120
-              },
-              children: retryLabel
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+    className
+  } = props;
+  const theme = useTheme();
+  const titleId = React.useId();
+  const dataTestId = resolveTestId(props);
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "alert",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": `${titleId}-message`,
+      className,
+      "data-testid": dataTestId || "error-state",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: theme.spacing(ERROR_STATE_PADDING_UNITS),
+        minHeight: ERROR_STATE_MIN_HEIGHT,
+        gap: theme.spacing(ERROR_STATE_GAP_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(ErrorIcon, { severity, icon, testId: testId("icon") }),
+        /* @__PURE__ */ jsx(ErrorText, { title, message, titleId, testId }),
+        onRetry && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            color: severity,
+            onClick: onRetry,
+            startIcon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+            "data-testid": testId("retry-button"),
+            sx: {
+              mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),
+              minWidth: RETRY_MIN_WIDTH
+            },
+            children: retryLabel
+          }
+        )
+      ]
+    }
+  );
+});
 ErrorState.displayName = "ErrorState";
 var ErrorState_default = ErrorState;
 
@@ -128,4 +144,4 @@ export {
   ErrorState,
   ErrorState_default
 };
-//# sourceMappingURL=chunk-E67PUPFJ.js.map
+//# sourceMappingURL=chunk-NQC6H7GY.js.map

package/dist/chunk-NQC6H7GY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ErrorState/ErrorState.tsx"],"sourcesContent":["import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport WarningAmberIcon from '@mui/icons-material/WarningAmber';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/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 type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types';\nimport { resolveTestId } from '../../../platform/test-id';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\nconst paletteFor = (theme: Theme, severity: ErrorStateSeverity) =>\n  severity === 'error' ? theme.palette.error : theme.palette.warning;\n\nconst ErrorIcon: React.FC<{\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}> = ({ severity, icon, testId }) => {\n  const theme = useTheme();\n  const color = paletteFor(theme, severity);\n  const Fallback = severity === 'error' ? ErrorOutlineIcon : WarningAmberIcon;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: ERROR_ICON_BOX,\n        height: ERROR_ICON_BOX,\n        borderRadius: '50%',\n        backgroundColor: color.light,\n        opacity: ERROR_ICON_BOX_OPACITY,\n      }}\n    >\n      {icon || <Fallback sx={{ fontSize: ERROR_ICON_SIZE, color: color.main }} />}\n    </Box>\n  );\n};\n\nconst ErrorText: React.FC<{\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}> = ({ title, message, titleId, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={ERROR_TEXT_GAP_UNITS} alignItems=\"center\">\n      {title && (\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          }}\n        >\n          {title}\n        </Typography>\n      )}\n\n      <Typography\n        id={`${titleId}-message`}\n        variant=\"body2\"\n        color=\"text.secondary\"\n        data-testid={testId('message')}\n        sx={{\n          maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n          lineHeight: ERROR_MESSAGE_LINE_HEIGHT,\n        }}\n      >\n        {message}\n      </Typography>\n    </Stack>\n  );\n};\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo((props) => {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = 'Retry',\n    severity = 'error',\n    icon,\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  return (\n    <Box\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={`${titleId}-message`}\n      className={className}\n      data-testid={dataTestId || 'error-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n        minHeight: ERROR_STATE_MIN_HEIGHT,\n        gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n      }}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry && (\n        <Button\n          variant=\"outlined\"\n          color={severity}\n          onClick={onRetry}\n          startIcon={<RefreshIcon />}\n          data-testid={testId('retry-button')}\n          sx={{\n            mt: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n            minWidth: RETRY_MIN_WIDTH,\n          }}\n        >\n          {retryLabel}\n        </Button>\n      )}\n    </Box>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nexport default ErrorState;\n"],"mappings":"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","names":[]}

package/dist/{chunk-74KMXBG3.js → chunk-OAXAF4VY.js}

@@ -1,27 +1,27 @@
+import {
+  CategoryPanel
+} from "./chunk-MHFJBNDP.js";
 import {
   CategoryPanelSurface
 } from "./chunk-LMXWI3DD.js";
 import {
-  CategoryPanel
-} from "./chunk-WO52KYSU.js";
+  useCategorySelect
+} from "./chunk-2GB5CIN6.js";
 import {
   useCategoryKeyHandler
 } from "./chunk-ISH42UC7.js";
 import {
   useCategoryCommit
 } from "./chunk-ZAB65STX.js";
+import {
+  summarizeSelection
+} from "./chunk-LR6MSKTT.js";
 import {
   CategoryTrigger
 } from "./chunk-ZBNTFWTG.js";
 import {
   METRICS
 } from "./chunk-FCOEJCUP.js";
-import {
-  useCategorySelect
-} from "./chunk-2GB5CIN6.js";
-import {
-  summarizeSelection
-} from "./chunk-LR6MSKTT.js";
 import {
   FormControl,
   FormLabel,
@@ -158,4 +158,4 @@ function CategorySelect(props) {
 export {
   CategorySelect
 };
-//# sourceMappingURL=chunk-74KMXBG3.js.map
+//# sourceMappingURL=chunk-OAXAF4VY.js.map

package/dist/{chunk-4EJSUL62.js → chunk-OR7UH2ZQ.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-XKMFIH27.js";
+} from "./chunk-NECUCG2S.js";
 import {
   useDataViewsState
-} from "./chunk-ZEBJT5JZ.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-4EJSUL62.js.map
+//# sourceMappingURL=chunk-OR7UH2ZQ.js.map

package/dist/{chunk-3ZFORMNT.js → chunk-OZWQNFG6.js}

@@ -1,12 +1,12 @@
 import {
   LoadingState
-} from "./chunk-O6J4CKS5.js";
+} from "./chunk-IIOEQRXX.js";
 import {
   ErrorState
-} from "./chunk-E67PUPFJ.js";
+} 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-3ZFORMNT.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-PC5FFEIY.js → chunk-PC3ZFERM.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-24BUCMQA.js";
+} from "./chunk-SL4NFGOL.js";
 import {
   Text
 } from "./chunk-2PCOC3PT.js";
@@ -180,4 +180,4 @@ function MoreFilters({
 export {
   MoreFilters
 };
-//# sourceMappingURL=chunk-PC5FFEIY.js.map
+//# sourceMappingURL=chunk-PC3ZFERM.js.map

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

@@ -1,27 +1,27 @@
-import {
-  LightboxOverlay
-} from "./chunk-X4GALW6I.js";
-import {
-  LightboxCurrentMedia
-} from "./chunk-2DWBJJK6.js";
 import {
   resolveLightboxProps
 } from "./chunk-UOS7DEQZ.js";
 import {
   useLightbox
 } from "./chunk-3EYRRVNT.js";
-import {
-  LightboxCopyProvider
-} from "./chunk-TEQYTEM2.js";
 import {
   LightboxThumbnails
 } from "./chunk-Q725MACF.js";
 import {
   LightboxStage
 } from "./chunk-EUHVBR3J.js";
+import {
+  LightboxOverlay
+} from "./chunk-X4GALW6I.js";
+import {
+  LightboxCopyProvider
+} from "./chunk-TEQYTEM2.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-XSJWN3WH.js.map
+//# sourceMappingURL=chunk-PMS3H3OO.js.map