@mx-cartographer/experiences 9.4.59 → 9.4.60

package/dist/insights-v2/components/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  // The overflow menu appears only when the host wired a menu handler and this\n  // isn't the compact/mini layout. Handlers are delivered via context.\n  const { onMenuAction } = useBeatActions()\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n        <H3>{title}</H3>\n        {!isMini && onMenuAction && <InsightOptionsMenu />}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MAAzF,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  // The overflow menu appears only when the host wired a menu handler and this\n  // isn't the compact/mini layout. Handlers are delivered via context.\n  const { onMenuAction } = useBeatActions()\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack\n        sx={{ alignItems: 'flex-start', flexDirection: 'row', justifyContent: 'space-between' }}\n      >\n        <H3>{title}</H3>\n        {!isMini && onMenuAction && <InsightOptionsMenu />}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,YAAY;AAAA,QAAc,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MADxF,UAAA,CAGE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}

package/dist/insights-v2/components/InsightErrorCard.d.ts

@@ -0,0 +1,19 @@
+import { Beat } from '../../core';
+export interface InsightErrorCardProps {
+    /** The flagged beat whose envelope is missing. Only `guid` and `template` are read. */
+    beat: Pick<Beat, 'guid' | 'template'>;
+    /**
+     * `card` (default) draws the feed card frame. `plain` renders only the message, for a surface
+     * that already supplies its own frame (the details-drawer slot above the account block).
+     */
+    variant?: 'card' | 'plain';
+}
+/**
+ * The `error` branch of `resolveInsightRender` (`insights_v2.2.md` §7.1): a flagged insight whose
+ * envelope did not arrive. Shows the copy store's generic error, never a CTA, and reports the
+ * failure once per beat (guid + template) through the host's error handler so on-call sees it —
+ * the legacy copy fields on such a beat are filled from the same V2 copy block, so without this the
+ * beat would render as a plausible-looking legacy card and the failure would never surface.
+ */
+declare const InsightErrorCard: ({ beat, variant }: InsightErrorCardProps) => import("react/jsx-runtime").JSX.Element;
+export default InsightErrorCard;

package/dist/insights-v2/components/InsightErrorCard.es.js

@@ -0,0 +1,45 @@
+import { useError as d, useGlobalCopyStore as m } from "../../common/context/hooks.es.js";
+import { useEffect as p, useRef as a } from "react";
+import { Text as u } from "@mxenabled/mxui";
+import { jsx as e } from "react/jsx-runtime";
+import c from "@mui/material/Box";
+import l from "@mui/material/Card";
+var E = ({ beat: r, variant: s = "card" }) => {
+  const { onError: o } = d(), n = m(), t = a(null);
+  p(() => {
+    t.current !== r.guid && (t.current = r.guid, o(/* @__PURE__ */ new Error(`Insights 2.0 beat ${r.guid} (${r.template}) is flagged but has no envelope`), {
+      beat_guid: r.guid,
+      template: r.template
+    }, "insights_v2_missing_envelope"));
+  }, [
+    r.guid,
+    r.template,
+    o
+  ]);
+  const i = /* @__PURE__ */ e(u, {
+    color: "text.secondary",
+    variant: "body2",
+    children: n.common?.error_message ?? ""
+  });
+  return s === "plain" ? /* @__PURE__ */ e(c, {
+    "data-testid": "insight-error-card",
+    sx: {
+      px: 16,
+      py: 12
+    },
+    children: i
+  }) : /* @__PURE__ */ e(l, {
+    "data-testid": "insight-error-card",
+    sx: {
+      mb: 16,
+      px: 16,
+      py: 16
+    },
+    children: i
+  });
+};
+export {
+  E as default
+};
+
+//# sourceMappingURL=InsightErrorCard.es.js.map

package/dist/insights-v2/components/InsightErrorCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightErrorCard.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightErrorCard.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useError, useGlobalCopyStore } from '../../common'\nimport type { Beat } from '../../core'\n\nexport interface InsightErrorCardProps {\n  /** The flagged beat whose envelope is missing. Only `guid` and `template` are read. */\n  beat: Pick<Beat, 'guid' | 'template'>\n  /**\n   * `card` (default) draws the feed card frame. `plain` renders only the message, for a surface\n   * that already supplies its own frame (the details-drawer slot above the account block).\n   */\n  variant?: 'card' | 'plain'\n}\n\n/**\n * The `error` branch of `resolveInsightRender` (`insights_v2.2.md` §7.1): a flagged insight whose\n * envelope did not arrive. Shows the copy store's generic error, never a CTA, and reports the\n * failure once per beat (guid + template) through the host's error handler so on-call sees it —\n * the legacy copy fields on such a beat are filled from the same V2 copy block, so without this the\n * beat would render as a plausible-looking legacy card and the failure would never surface.\n */\nconst InsightErrorCard = ({ beat, variant = 'card' }: InsightErrorCardProps) => {\n  const { onError } = useError()\n  const copy = useGlobalCopyStore()\n  const reportedGuid = useRef<string | null>(null)\n\n  useEffect(() => {\n    if (reportedGuid.current === beat.guid) return\n    reportedGuid.current = beat.guid\n\n    onError(\n      new Error(`Insights 2.0 beat ${beat.guid} (${beat.template}) is flagged but has no envelope`),\n      { beat_guid: beat.guid, template: beat.template },\n      'insights_v2_missing_envelope',\n    )\n  }, [beat.guid, beat.template, onError])\n\n  const message = (\n    <Text color=\"text.secondary\" variant=\"body2\">\n      {copy.common?.error_message ?? ''}\n    </Text>\n  )\n\n  if (variant === 'plain') {\n    return (\n      <Box data-testid=\"insight-error-card\" sx={{ px: 16, py: 12 }}>\n        {message}\n      </Box>\n    )\n  }\n\n  return (\n    <Card data-testid=\"insight-error-card\" sx={{ mb: 16, px: 16, py: 16 }}>\n      {message}\n    </Card>\n  )\n}\n\nexport default InsightErrorCard\n"],"mappings":";;;;;;AA2BA,IAAM,IAAA,CAAoB,EAAE,MAAA,GAAM,SAAA,IAAU,OAAA,MAAoC;AAC9E,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAO,EAAmB,GAC1B,IAAe,EAAsB,IAAI;AAE/C,EAAA,EAAA,MAAgB;AACd,IAAI,EAAa,YAAY,EAAK,SAClC,EAAa,UAAU,EAAK,MAE5B,EACE,oBAAI,MAAM,qBAAqB,EAAK,IAAA,KAAS,EAAK,QAAA,kCAA0C,GAC5F;AAAA,MAAE,WAAW,EAAK;AAAA,MAAM,UAAU,EAAK;AAAA,IAAS,GAChD,8BACF;AAAA,EACF,GAAG;AAAA,IAAC,EAAK;AAAA,IAAM,EAAK;AAAA,IAAU;AAAA,EAAO,CAAC;AAEtC,QAAM,IACJ,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAiB,SAAQ;AAAA,IAClC,UAAA,EAAK,QAAQ,iBAAiB;AAAA,EAC3B,CAAA;AAGR,SAAI,MAAY,UAEZ,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAY;AAAA,IAAqB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACxD,UAAA;AAAA,EACE,CAAA,IAKP,gBAAA,EAAC,GAAD;AAAA,IAAM,eAAY;AAAA,IAAqB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjE,UAAA;AAAA,EACG,CAAA;AAEV"}

package/dist/insights-v2/components/InsightTransactionRow.es.js

@@ -1,8 +1,8 @@
 import t from "@mui/material/Stack";
-import { Text as e } from "@mxenabled/mxui";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import d from "@mui/material/Box";
-var p = ({ amount: n, amountColor: a = "text.primary", leading: o, subtitle: l, title: x, sx: c }) => /* @__PURE__ */ i(t, {
+import { Text as i } from "@mxenabled/mxui";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+var f = ({ amount: o, amountColor: a = "text.primary", leading: n, subtitle: l, title: x, sx: c }) => /* @__PURE__ */ e(t, {
   sx: {
     alignItems: "flex-start",
     flexDirection: "row",
@@ -12,7 +12,7 @@ var p = ({ amount: n, amountColor: a = "text.primary", leading: o, subtitle: l,
     width: "100%",
     ...c
   },
-  children: [/* @__PURE__ */ i(t, {
+  children: [/* @__PURE__ */ e(t, {
     sx: {
       alignItems: "center",
       flexDirection: "row",
@@ -20,33 +20,37 @@ var p = ({ amount: n, amountColor: a = "text.primary", leading: o, subtitle: l,
       gap: 12,
       minWidth: 0
     },
-    children: [o && /* @__PURE__ */ r(d, {
+    children: [n && /* @__PURE__ */ r(m, {
       sx: { flexShrink: 0 },
-      children: o
-    }), /* @__PURE__ */ i(t, {
+      children: n
+    }), /* @__PURE__ */ e(t, {
       sx: { minWidth: 0 },
-      children: [/* @__PURE__ */ r(e, {
+      children: [/* @__PURE__ */ r(i, {
         bold: !0,
         truncate: !0,
         variant: "body1",
         children: x
-      }), /* @__PURE__ */ r(e, {
-        color: "text.secondary",
+      }), /* @__PURE__ */ r(i, {
+        color: "text.primary",
         truncate: !0,
         variant: "caption",
         children: l
       })]
     })]
-  }), /* @__PURE__ */ r(e, {
+  }), /* @__PURE__ */ r(i, {
     bold: !0,
     color: a,
-    sx: { flexShrink: 0 },
+    sx: {
+      flexShrink: 0,
+      fontVariantNumeric: "lining-nums tabular-nums",
+      letterSpacing: "-0.15px"
+    },
     variant: "body1",
-    children: n
+    children: o
   })]
 });
 export {
-  p as default
+  f as default
 };
 
 //# sourceMappingURL=InsightTransactionRow.es.js.map

package/dist/insights-v2/components/InsightTransactionRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightTransactionRow.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightTransactionRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nexport interface InsightTransactionRowProps {\n  /** Leading visual: merchant/institution logo, category icon, or date badge. */\n  leading?: ReactNode\n  /** Primary line (e.g. merchant, payee, transaction name). */\n  title: ReactNode\n  /** Secondary line beneath the title (e.g. category). */\n  subtitle: ReactNode\n  /** Trailing amount, pre-formatted by the caller. */\n  amount: ReactNode\n  /** Theme token for the amount text (e.g. 'success.main' for credits). */\n  amountColor?: string\n  sx?: SxProps\n}\n\n/**\n * A single transaction/list row for the insights-v2 transaction-list family:\n * leading visual + title/subtitle on the left, amount on the right. Named\n * `InsightTransactionRow` to avoid colliding with the transactions widget's\n * public `TransactionRow` export.\n */\nconst InsightTransactionRow = ({\n  amount,\n  amountColor = 'text.primary',\n  leading,\n  subtitle,\n  title,\n  sx,\n}: InsightTransactionRowProps) => (\n  <Stack\n    sx={{\n      // The amount shares the title's top line while the subtitle sits below, so\n      // the row is top-aligned and the inner left group is centered.\n      alignItems: 'flex-start',\n      flexDirection: 'row',\n      gap: 16,\n      px: 16,\n      py: 14,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', flexGrow: 1, gap: 12, minWidth: 0 }}>\n      {leading && <Box sx={{ flexShrink: 0 }}>{leading}</Box>}\n      <Stack sx={{ minWidth: 0 }}>\n        <Text bold={true} truncate={true} variant=\"body1\">\n          {title}\n        </Text>\n        <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n          {subtitle}\n        </Text>\n      </Stack>\n    </Stack>\n    <Text bold={true} color={amountColor} sx={{ flexShrink: 0 }} variant=\"body1\">\n      {amount}\n    </Text>\n  </Stack>\n)\n\nexport default InsightTransactionRow\n"],"mappings":";;;;AA4BA,IAAM,IAAA,CAAyB,EAC7B,QAAA,GACA,aAAA,IAAc,gBACd,SAAA,GACA,UAAA,GACA,OAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IAGF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAXF,UAAA,CAaE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,MAAG,KAAK;AAAA,MAAI,UAAU;AAAA,IAAE;AAAA,IAA3F,UAAA,CACG,KAAW,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI,EAAE,YAAY,EAAE;AAAA,MAAI,UAAA;AAAA,IAAa,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,UAAU,EAAE;AAAA,MAAzB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,UAAU;AAAA,QAAM,SAAQ;AAAA,QACvC,UAAA;AAAA,MACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,UAAU;AAAA,QAAM,SAAQ;AAAA,QAClD,UAAA;AAAA,MACG,CAAA,CACD;AAAA,IACF,CAAA,CAAA;AAAA,EACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,OAAO;AAAA,IAAa,IAAI,EAAE,YAAY,EAAE;AAAA,IAAG,SAAQ;AAAA,IAClE,UAAA;AAAA,EACG,CAAA,CACD"}
+{"version":3,"file":"InsightTransactionRow.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightTransactionRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nexport interface InsightTransactionRowProps {\n  /** Leading visual: merchant/institution logo, category icon, or date badge. */\n  leading?: ReactNode\n  /** Primary line (e.g. merchant, payee, transaction name). */\n  title: ReactNode\n  /** Secondary line beneath the title (e.g. category). */\n  subtitle: ReactNode\n  /** Trailing amount, pre-formatted by the caller. */\n  amount: ReactNode\n  /** Theme token for the amount text (e.g. 'success.main' for credits). */\n  amountColor?: string\n  sx?: SxProps\n}\n\n/**\n * A single transaction/list row for the insights-v2 transaction-list family:\n * leading visual + title/subtitle on the left, amount on the right. Named\n * `InsightTransactionRow` to avoid colliding with the transactions widget's\n * public `TransactionRow` export.\n */\nconst InsightTransactionRow = ({\n  amount,\n  amountColor = 'text.primary',\n  leading,\n  subtitle,\n  title,\n  sx,\n}: InsightTransactionRowProps) => (\n  <Stack\n    sx={{\n      // The amount shares the title's top line while the subtitle sits below, so\n      // the row is top-aligned and the inner left group is centered.\n      alignItems: 'flex-start',\n      flexDirection: 'row',\n      gap: 16,\n      px: 16,\n      py: 14,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', flexGrow: 1, gap: 12, minWidth: 0 }}>\n      {leading && <Box sx={{ flexShrink: 0 }}>{leading}</Box>}\n      <Stack sx={{ minWidth: 0 }}>\n        <Text bold={true} truncate={true} variant=\"body1\">\n          {title}\n        </Text>\n        <Text color=\"text.primary\" truncate={true} variant=\"caption\">\n          {subtitle}\n        </Text>\n      </Stack>\n    </Stack>\n    {/* Figma `typography/body1 (bold tabular)`: tabular figures so amounts align column-wise. */}\n    <Text\n      bold={true}\n      color={amountColor}\n      sx={{\n        flexShrink: 0,\n        fontVariantNumeric: 'lining-nums tabular-nums',\n        letterSpacing: '-0.15px',\n      }}\n      variant=\"body1\"\n    >\n      {amount}\n    </Text>\n  </Stack>\n)\n\nexport default InsightTransactionRow\n"],"mappings":";;;;AA4BA,IAAM,IAAA,CAAyB,EAC7B,QAAA,GACA,aAAA,IAAc,gBACd,SAAA,GACA,UAAA,GACA,OAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IAGF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAXF,UAAA,CAaE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,MAAG,KAAK;AAAA,MAAI,UAAU;AAAA,IAAE;AAAA,IAA3F,UAAA,CACG,KAAW,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI,EAAE,YAAY,EAAE;AAAA,MAAI,UAAA;AAAA,IAAa,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,UAAU,EAAE;AAAA,MAAzB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,UAAU;AAAA,QAAM,SAAQ;AAAA,QACvC,UAAA;AAAA,MACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAe,UAAU;AAAA,QAAM,SAAQ;AAAA,QAChD,UAAA;AAAA,MACG,CAAA,CACD;AAAA,IACF,CAAA,CAAA;AAAA,EAEP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,oBAAoB;AAAA,MACpB,eAAe;AAAA,IACjB;AAAA,IACA,SAAQ;AAAA,IAEP,UAAA;AAAA,EACG,CAAA,CACD"}

package/dist/insights-v2/components/LogoFromGuid.d.ts

@@ -0,0 +1,26 @@
+import { LogoRef } from '../../core';
+export declare const isLogoGuid: (guid?: string | null) => guid is string;
+export interface LogoFromGuidProps {
+    /** The envelope's logo object: `{ guid, fallback_guid?, alt? }`. */
+    logo?: Pick<LogoRef, 'alt' | 'fallback_guid' | 'guid'> | null;
+    /** Rendered square size in px (32 on rows, 40 on the compact card, 33 on the notification row). */
+    size: number;
+    className?: string;
+}
+/**
+ * One component for every V2 logo. The envelope sends a single `{ guid, fallback_guid?, alt? }`
+ * object whose prefix says what it is; this maps it onto the mxui component's props and renders
+ * nothing — never a guess — for anything else (`PARENT-ENTITY`, an `ACT-`/`BGT-` guid, an empty guid).
+ *
+ * The fallback chain is mxui's, not ours: asset for `guid` → category tile for `fallback_guid`
+ * (`MerchantLogo`'s `categoryGuid`, applied only when it is a `CAT-` guid because a category tile is
+ * the only fallback `MerchantLogo` has) → `alt`. Nothing here probes whether an asset exists.
+ *
+ * Categories are walked up to their top-level parent before reaching mxui: `CategoryIcon` only knows
+ * the top-level guids and silently shows the Uncategorized glyph for a sub-category (identity until
+ * categories load). That applies to a `CAT-` logo and to a merchant's `fallback_guid` alike.
+ */
+declare const LogoFromGuid: (({ className, logo, size }: LogoFromGuidProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export default LogoFromGuid;

package/dist/insights-v2/components/LogoFromGuid.es.js

@@ -0,0 +1,48 @@
+import { useCategoryStore as a } from "../../common/context/hooks.es.js";
+import { logoFromRef as d } from "./shared/EntityLogo.es.js";
+import { observer as g } from "mobx-react-lite";
+import { CategoryIcon as l, InstitutionLogo as m, MerchantLogo as c } from "@mxenabled/mxui";
+import { jsx as n } from "react/jsx-runtime";
+import f from "@mui/material/Box";
+var s = /^(MCH|CAT|INS)-/, _ = (o) => !!o && s.test(o), C = g(({ className: o, logo: i, size: r }) => {
+  const { getTopLevelCategoryGuid: u } = a();
+  if (!i || !_(i.guid)) return null;
+  const t = d({
+    alt: i.alt,
+    fallback_guid: i.fallback_guid,
+    guid: i.guid
+  });
+  if (!t) return null;
+  let e = null;
+  return t.merchant_guid ? e = /* @__PURE__ */ n(c, {
+    alt: t.merchant_name ?? "",
+    categoryGuid: t.category_guid ? u(t.category_guid) : "",
+    merchantGuid: t.merchant_guid,
+    size: r
+  }) : t.institution_guid ? e = /* @__PURE__ */ n(m, {
+    alt: t.institution_name ?? "",
+    institutionGuid: t.institution_guid,
+    size: r
+  }) : t.category_guid && (e = /* @__PURE__ */ n(l, {
+    categoryGuid: u(t.category_guid),
+    size: r
+  })), e ? /* @__PURE__ */ n(f, {
+    className: o,
+    "data-testid": "logo-from-guid",
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexShrink: 0,
+      height: r,
+      justifyContent: "center",
+      width: r
+    },
+    children: e
+  }) : null;
+});
+export {
+  C as default,
+  _ as isLogoGuid
+};
+
+//# sourceMappingURL=LogoFromGuid.es.js.map

package/dist/insights-v2/components/LogoFromGuid.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoFromGuid.es.js","names":[],"sources":["../../../src/insights-v2/components/LogoFromGuid.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\n\nimport { useCategoryStore } from '../../common'\nimport type { LogoRef } from '../../core'\nimport { logoFromRef } from './shared/EntityLogo'\n\n/**\n * The guid prefixes that name a logo entity. A prefix heuristic by design: the V2 envelope carries\n * the entity only in the guid, and the notification row relies on non-insight rows carrying account\n * or budget guids and legacy insight rows carrying the `\"PARENT-ENTITY\"` sentinel. Exported beside\n * the component so a caller's branch (`NotificationCard`) and the dispatch here cannot drift apart.\n */\nconst LOGO_GUID_PREFIX = /^(MCH|CAT|INS)-/\n\nexport const isLogoGuid = (guid?: string | null): guid is string =>\n  !!guid && LOGO_GUID_PREFIX.test(guid)\n\nexport interface LogoFromGuidProps {\n  /** The envelope's logo object: `{ guid, fallback_guid?, alt? }`. */\n  logo?: Pick<LogoRef, 'alt' | 'fallback_guid' | 'guid'> | null\n  /** Rendered square size in px (32 on rows, 40 on the compact card, 33 on the notification row). */\n  size: number\n  className?: string\n}\n\n/**\n * One component for every V2 logo. The envelope sends a single `{ guid, fallback_guid?, alt? }`\n * object whose prefix says what it is; this maps it onto the mxui component's props and renders\n * nothing — never a guess — for anything else (`PARENT-ENTITY`, an `ACT-`/`BGT-` guid, an empty guid).\n *\n * The fallback chain is mxui's, not ours: asset for `guid` → category tile for `fallback_guid`\n * (`MerchantLogo`'s `categoryGuid`, applied only when it is a `CAT-` guid because a category tile is\n * the only fallback `MerchantLogo` has) → `alt`. Nothing here probes whether an asset exists.\n *\n * Categories are walked up to their top-level parent before reaching mxui: `CategoryIcon` only knows\n * the top-level guids and silently shows the Uncategorized glyph for a sub-category (identity until\n * categories load). That applies to a `CAT-` logo and to a merchant's `fallback_guid` alike.\n */\nconst LogoFromGuid = observer(({ className, logo, size }: LogoFromGuidProps) => {\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n\n  if (!logo || !isLogoGuid(logo.guid)) return null\n\n  // Guid-only on purpose: `logoFromRef` lets a status `icon` win over `guid`, which is right for a\n  // row but would silently turn this component into an icon renderer.\n  const resolved = logoFromRef({\n    alt: logo.alt,\n    fallback_guid: logo.fallback_guid,\n    guid: logo.guid,\n  })\n\n  if (!resolved) return null\n\n  let content: React.ReactNode = null\n\n  if (resolved.merchant_guid) {\n    content = (\n      <MerchantLogo\n        alt={resolved.merchant_name ?? ''}\n        categoryGuid={resolved.category_guid ? getTopLevelCategoryGuid(resolved.category_guid) : ''}\n        merchantGuid={resolved.merchant_guid}\n        size={size}\n      />\n    )\n  } else if (resolved.institution_guid) {\n    content = (\n      <InstitutionLogo\n        alt={resolved.institution_name ?? ''}\n        institutionGuid={resolved.institution_guid}\n        size={size}\n      />\n    )\n  } else if (resolved.category_guid) {\n    content = (\n      <CategoryIcon categoryGuid={getTopLevelCategoryGuid(resolved.category_guid)} size={size} />\n    )\n  }\n\n  if (!content) return null\n\n  return (\n    <Box\n      className={className}\n      data-testid=\"logo-from-guid\"\n      sx={{\n        alignItems: 'center',\n        display: 'flex',\n        flexShrink: 0,\n        height: size,\n        justifyContent: 'center',\n        width: size,\n      }}\n    >\n      {content}\n    </Box>\n  )\n})\n\nexport default LogoFromGuid\n"],"mappings":";;;;;;AAgBA,IAAM,IAAmB,mBAEZ,IAAA,CAAc,MACzB,CAAC,CAAC,KAAQ,EAAiB,KAAK,CAAI,GAuBhC,IAAe,EAAA,CAAU,EAAE,WAAA,GAAW,MAAA,GAAM,MAAA,EAAA,MAA8B;AAC9E,QAAM,EAAE,yBAAA,EAAA,IAA4B,EAAiB;AAErD,MAAI,CAAC,KAAQ,CAAC,EAAW,EAAK,IAAI,EAAG,QAAO;AAI5C,QAAM,IAAW,EAAY;AAAA,IAC3B,KAAK,EAAK;AAAA,IACV,eAAe,EAAK;AAAA,IACpB,MAAM,EAAK;AAAA,EACb,CAAC;AAED,MAAI,CAAC,EAAU,QAAO;AAEtB,MAAI,IAA2B;AAyB/B,SAvBI,EAAS,gBACX,IACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK,EAAS,iBAAiB;AAAA,IAC/B,cAAc,EAAS,gBAAgB,EAAwB,EAAS,aAAa,IAAI;AAAA,IACzF,cAAc,EAAS;AAAA,IACjB,MAAA;AAAA,EACP,CAAA,IAEM,EAAS,mBAClB,IACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK,EAAS,oBAAoB;AAAA,IAClC,iBAAiB,EAAS;AAAA,IACpB,MAAA;AAAA,EACP,CAAA,IAEM,EAAS,kBAClB,IACE,gBAAA,EAAC,GAAD;AAAA,IAAc,cAAc,EAAwB,EAAS,aAAa;AAAA,IAAS,MAAA;AAAA,EAAO,CAAA,IAIzF,IAGH,gBAAA,EAAC,GAAD;AAAA,IACa,WAAA;AAAA,IACX,eAAY;AAAA,IACZ,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IAEC,UAAA;AAAA,EACE,CAAA,IAhBc;AAkBvB,CAAC"}

package/dist/insights-v2/components/StatusBadge.d.ts

@@ -0,0 +1,16 @@
+export type StatusTone = 'warning' | 'error';
+interface StatusBadgeProps {
+    /** Which palette the glyph takes: `warning` (Large Transaction) or `error` (Duplicate Payment). */
+    tone: StatusTone;
+    /**
+     * Accessible name. Omit — the default — to mark the badge decorative: today the envelope carries
+     * no words for it, and the card's description already says what it means.
+     */
+    label?: string;
+}
+/**
+ * The small status glyph badging a `<BadgedTile>`'s corner: a filled `error` symbol on a white
+ * disc, tinted by `tone`. Figma 1941:111897 (Embedded | Large Transaction).
+ */
+declare const StatusBadge: ({ label, tone }: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusBadge;

package/dist/insights-v2/components/StatusBadge.es.js

@@ -0,0 +1,29 @@
+import { Icon as a } from "@mxenabled/mx-icons";
+import { jsx as t } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+var e = 20, m = ({ label: r, tone: o }) => /* @__PURE__ */ t(i, {
+  "aria-hidden": r ? void 0 : !0,
+  "aria-label": r,
+  "data-testid": "status-badge",
+  role: r ? "img" : void 0,
+  sx: {
+    alignItems: "center",
+    bgcolor: "background.paper",
+    borderRadius: "100px",
+    display: "flex",
+    height: e,
+    justifyContent: "center",
+    width: e
+  },
+  children: /* @__PURE__ */ t(a, {
+    color: o,
+    fill: !0,
+    name: "error",
+    size: e
+  })
+});
+export {
+  m as default
+};
+
+//# sourceMappingURL=StatusBadge.es.js.map

package/dist/insights-v2/components/StatusBadge.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.es.js","names":[],"sources":["../../../src/insights-v2/components/StatusBadge.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\n/** Figma 1941:111897: the badge is 20px, drawn on the card's surface so it reads over the tile. */\nconst BADGE_SIZE = 20\n\nexport type StatusTone = 'warning' | 'error'\n\ninterface StatusBadgeProps {\n  /** Which palette the glyph takes: `warning` (Large Transaction) or `error` (Duplicate Payment). */\n  tone: StatusTone\n  /**\n   * Accessible name. Omit — the default — to mark the badge decorative: today the envelope carries\n   * no words for it, and the card's description already says what it means.\n   */\n  label?: string\n}\n\n/**\n * The small status glyph badging a `<BadgedTile>`'s corner: a filled `error` symbol on a white\n * disc, tinted by `tone`. Figma 1941:111897 (Embedded | Large Transaction).\n */\nconst StatusBadge = ({ label, tone }: StatusBadgeProps) => (\n  <Box\n    aria-hidden={label ? undefined : true}\n    aria-label={label}\n    data-testid=\"status-badge\"\n    role={label ? 'img' : undefined}\n    sx={{\n      alignItems: 'center',\n      // The disc behind the glyph: the symbol's own ring is transparent over the tile without it.\n      bgcolor: 'background.paper',\n      borderRadius: '100px',\n      display: 'flex',\n      height: BADGE_SIZE,\n      justifyContent: 'center',\n      width: BADGE_SIZE,\n    }}\n  >\n    <Icon color={tone} fill={true} name=\"error\" size={BADGE_SIZE} />\n  </Box>\n)\n\nexport default StatusBadge\n"],"mappings":";;;AAKA,IAAM,IAAa,IAkBb,IAAA,CAAe,EAAE,OAAA,GAAO,MAAA,EAAA,MAC5B,gBAAA,EAAC,GAAD;AAAA,EACE,eAAa,IAAQ,SAAY;AAAA,EACjC,cAAY;AAAA,EACZ,eAAY;AAAA,EACZ,MAAM,IAAQ,QAAQ;AAAA,EACtB,IAAI;AAAA,IACF,YAAY;AAAA,IAEZ,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAO;AAAA,IAAM,MAAM;AAAA,IAAM,MAAK;AAAA,IAAQ,MAAM;AAAA,EAAa,CAAA;AAC5D,CAAA"}

package/dist/insights-v2/components/StatusPill.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, SyntheticEvent } from 'react';
 import { SxProps } from '@mui/material/styles';
 interface StatusPillProps {
     /** Pill label. */
@@ -11,6 +11,15 @@ interface StatusPillProps {
     borderColor?: string;
     /** Label color token. */
     labelColor?: string;
+    /** Label typography. Default `subtitle2`; the transaction-row pill uses `caption`. */
+    labelVariant?: 'subtitle2' | 'caption';
+    /**
+     * Makes the pill tappable (the transaction-row pill posts the beat to the host). The pill then
+     * exposes `role="button"`, is focusable, and also fires on Enter and Space, so the handler gets a
+     * mouse or a keyboard event.
+     */
+    onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;
+    'data-testid'?: string;
     sx?: SxProps;
 }
 /**
@@ -22,5 +31,5 @@ interface StatusPillProps {
  * `typography/subtitle2` label — regular weight, NOT bold). Reusable for any
  * inline status.
  */
-declare const StatusPill: ({ bgcolor, borderColor, icon, label, labelColor, sx, }: StatusPillProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusPill: ({ bgcolor, borderColor, icon, label, labelColor, labelVariant, onClick, sx, "data-testid": testId, }: StatusPillProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusPill;

package/dist/insights-v2/components/StatusPill.es.js

@@ -1,30 +1,42 @@
-import { STATUS_SUCCESS_TOKENS as r } from "./statusTokens.es.js";
-import s from "@mui/material/Stack";
-import { Text as m } from "@mxenabled/mxui";
-import { jsx as x, jsxs as p } from "react/jsx-runtime";
-var c = ({ bgcolor: o = r.bgcolor, borderColor: t = r.borderColor, icon: e, label: i, labelColor: l = r.textColor, sx: a }) => /* @__PURE__ */ p(s, {
+import { STATUS_SUCCESS_TOKENS as o } from "./statusTokens.es.js";
+import u from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as x, jsxs as m } from "react/jsx-runtime";
+var h = ({ bgcolor: e = o.bgcolor, borderColor: i = o.borderColor, icon: a, label: l, labelColor: d = o.textColor, labelVariant: s = "subtitle2", onClick: t, sx: n, "data-testid": f }) => /* @__PURE__ */ m(u, {
+  "data-testid": f,
+  onClick: t,
+  onKeyDown: t ? (r) => {
+    r.target === r.currentTarget && (r.key !== "Enter" && r.key !== " " || (r.preventDefault(), r.stopPropagation(), t?.(r)));
+  } : void 0,
+  role: t ? "button" : void 0,
   sx: {
     alignItems: "center",
     alignSelf: "flex-start",
-    bgcolor: o,
+    bgcolor: e,
     border: "1px solid",
-    borderColor: t,
+    borderColor: i,
     borderRadius: 999,
     flexDirection: "row",
     gap: 6,
     minHeight: 24,
     px: 16,
     py: 2,
-    ...a
+    ...t && { "&:focus-visible": {
+      outline: "2px solid",
+      outlineColor: "info.main",
+      outlineOffset: 2
+    } },
+    ...n
   },
-  children: [e, /* @__PURE__ */ x(m, {
-    color: l,
-    variant: "subtitle2",
-    children: i
+  tabIndex: t ? 0 : void 0,
+  children: [a, /* @__PURE__ */ x(p, {
+    color: d,
+    variant: s,
+    children: l
   })]
 });
 export {
-  c as default
+  h as default
 };
 
 //# sourceMappingURL=StatusPill.es.js.map

package/dist/insights-v2/components/StatusPill.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusPill.es.js","names":[],"sources":["../../../src/insights-v2/components/StatusPill.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { STATUS_SUCCESS_TOKENS } from './statusTokens'\n\ninterface StatusPillProps {\n  /** Pill label. */\n  label: ReactNode\n  /** Optional leading icon (e.g. a check-circle). */\n  icon?: ReactNode\n  /** Pill background color token. */\n  bgcolor?: string\n  /** Pill border color token. */\n  borderColor?: string\n  /** Label color token. */\n  labelColor?: string\n  sx?: SxProps\n}\n\n/**\n * A small rounded status pill: optional icon + label on a tinted, bordered\n * surface.\n *\n * Figma: the \"Categorized\" pill in Peer-to-Peer Categorization (`success.100`\n * bg, `success.main` border, radius 999, 24px tall, check icon + `success.darker`\n * `typography/subtitle2` label — regular weight, NOT bold). Reusable for any\n * inline status.\n */\nconst StatusPill = ({\n  bgcolor = STATUS_SUCCESS_TOKENS.bgcolor,\n  borderColor = STATUS_SUCCESS_TOKENS.borderColor,\n  icon,\n  label,\n  labelColor = STATUS_SUCCESS_TOKENS.textColor,\n  sx,\n}: StatusPillProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      bgcolor,\n      border: '1px solid',\n      borderColor,\n      borderRadius: 999,\n      flexDirection: 'row',\n      gap: 6,\n      minHeight: 24,\n      px: 16,\n      py: 2,\n      ...sx,\n    }}\n  >\n    {icon}\n    <Text color={labelColor} variant=\"subtitle2\">\n      {label}\n    </Text>\n  </Stack>\n)\n\nexport default StatusPill\n"],"mappings":";;;;AAgCA,IAAM,IAAA,CAAc,EAClB,SAAA,IAAU,EAAsB,SAChC,aAAA,IAAc,EAAsB,aACpC,MAAA,GACA,OAAA,GACA,YAAA,IAAa,EAAsB,WACnC,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAA;AAAA,IACA,QAAQ;AAAA,IACR,aAAA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf,KAAK;AAAA,IACL,WAAW;AAAA,IACX,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,GAAG;AAAA,EACL;AAAA,EAdF,UAAA,CAgBG,GACD,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAO;AAAA,IAAY,SAAQ;AAAA,IAC9B,UAAA;AAAA,EACG,CAAA,CACD"}
+{"version":3,"file":"StatusPill.es.js","names":[],"sources":["../../../src/insights-v2/components/StatusPill.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode, SyntheticEvent } from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { STATUS_SUCCESS_TOKENS } from './statusTokens'\n\ninterface StatusPillProps {\n  /** Pill label. */\n  label: ReactNode\n  /** Optional leading icon (e.g. a check-circle). */\n  icon?: ReactNode\n  /** Pill background color token. */\n  bgcolor?: string\n  /** Pill border color token. */\n  borderColor?: string\n  /** Label color token. */\n  labelColor?: string\n  /** Label typography. Default `subtitle2`; the transaction-row pill uses `caption`. */\n  labelVariant?: 'subtitle2' | 'caption'\n  /**\n   * Makes the pill tappable (the transaction-row pill posts the beat to the host). The pill then\n   * exposes `role=\"button\"`, is focusable, and also fires on Enter and Space, so the handler gets a\n   * mouse or a keyboard event.\n   */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void\n  'data-testid'?: string\n  sx?: SxProps\n}\n\n/**\n * A small rounded status pill: optional icon + label on a tinted, bordered\n * surface.\n *\n * Figma: the \"Categorized\" pill in Peer-to-Peer Categorization (`success.100`\n * bg, `success.main` border, radius 999, 24px tall, check icon + `success.darker`\n * `typography/subtitle2` label — regular weight, NOT bold). Reusable for any\n * inline status.\n */\nconst StatusPill = ({\n  bgcolor = STATUS_SUCCESS_TOKENS.bgcolor,\n  borderColor = STATUS_SUCCESS_TOKENS.borderColor,\n  icon,\n  label,\n  labelColor = STATUS_SUCCESS_TOKENS.textColor,\n  labelVariant = 'subtitle2',\n  onClick,\n  sx,\n  'data-testid': testId,\n}: StatusPillProps) => {\n  // Only when the pill itself has focus: a key pressed inside it would be a child's own. Stopping\n  // the event keeps a clickable row around the pill from also acting on the same keystroke.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return\n    if (event.key !== 'Enter' && event.key !== ' ') return\n\n    event.preventDefault()\n    event.stopPropagation()\n    onClick?.(event)\n  }\n\n  return (\n    <Stack\n      data-testid={testId}\n      onClick={onClick}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n      role={onClick ? 'button' : undefined}\n      sx={{\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n        bgcolor,\n        border: '1px solid',\n        borderColor,\n        borderRadius: 999,\n        flexDirection: 'row',\n        gap: 6,\n        minHeight: 24,\n        px: 16,\n        py: 2,\n        // The same focus ring the theme's MuiButton draws.\n        ...(onClick && {\n          '&:focus-visible': { outline: '2px solid', outlineColor: 'info.main', outlineOffset: 2 },\n        }),\n        ...sx,\n      }}\n      tabIndex={onClick ? 0 : undefined}\n    >\n      {icon}\n      <Text color={labelColor} variant={labelVariant}>\n        {label}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default StatusPill\n"],"mappings":";;;;AAyCA,IAAM,IAAA,CAAc,EAClB,SAAA,IAAU,EAAsB,SAChC,aAAA,IAAc,EAAsB,aACpC,MAAA,GACA,OAAA,GACA,YAAA,IAAa,EAAsB,WACnC,cAAA,IAAe,aACf,SAAA,GACA,IAAA,GACA,eAAe,EAAA,MAcb,gBAAA,EAAC,GAAD;AAAA,EACE,eAAa;AAAA,EACJ,SAAA;AAAA,EACT,WAAW,IAbT,CAAiB,MAAyC;AAC9D,IAAI,EAAM,WAAW,EAAM,kBACvB,EAAM,QAAQ,WAAW,EAAM,QAAQ,QAE3C,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,IAAU,CAAK;AAAA,EACjB,IAMyC;AAAA,EACrC,MAAM,IAAU,WAAW;AAAA,EAC3B,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAA;AAAA,IACA,QAAQ;AAAA,IACR,aAAA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf,KAAK;AAAA,IACL,WAAW;AAAA,IACX,IAAI;AAAA,IACJ,IAAI;AAAA,IAEJ,GAAI,KAAW,EACb,mBAAmB;AAAA,MAAE,SAAS;AAAA,MAAa,cAAc;AAAA,MAAa,eAAe;AAAA,IAAE,EACzF;AAAA,IACA,GAAG;AAAA,EACL;AAAA,EACA,UAAU,IAAU,IAAI;AAAA,EAvB1B,UAAA,CAyBG,GACD,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAO;AAAA,IAAY,SAAS;AAAA,IAC/B,UAAA;AAAA,EACG,CAAA,CACD"}

package/dist/insights-v2/components/SubHeader.es.js

@@ -1,12 +1,12 @@
 import n from "@mui/material/Stack";
-import { CategoryIcon as a, InstitutionLogo as u, MerchantLogo as o, Text as c } from "@mxenabled/mxui";
+import { CategoryIcon as a, InstitutionLogo as u, MerchantLogo as c, Text as o } from "@mxenabled/mxui";
 import { Icon as s } from "@mxenabled/mx-icons";
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 var m = (t) => t ? t.logo_name ? /* @__PURE__ */ r(s, {
   name: t.logo_name,
   size: 16,
   sx: { color: t.logo_color }
-}) : t.merchant_guid ? /* @__PURE__ */ r(o, {
+}) : t.merchant_guid ? /* @__PURE__ */ r(c, {
   alt: t.merchant_name,
   categoryGuid: t.category_guid,
   merchantGuid: t.merchant_guid,
@@ -18,7 +18,7 @@ var m = (t) => t ? t.logo_name ? /* @__PURE__ */ r(s, {
 }) : t.category_guid ? /* @__PURE__ */ r(a, {
   categoryGuid: t.category_guid,
   size: 16
-}) : null : null, y = ({ subtitle: t }) => {
+}) : null : null, p = ({ subtitle: t }) => {
   const { logo: e, text: i } = t;
   return /* @__PURE__ */ d(n, {
     sx: {
@@ -26,15 +26,17 @@ var m = (t) => t ? t.logo_name ? /* @__PURE__ */ r(s, {
       flexDirection: "row",
       gap: 8
     },
-    children: [m(e), /* @__PURE__ */ r(c, {
+    children: [m(e), /* @__PURE__ */ r(o, {
       color: "text.secondary",
+      sx: { letterSpacing: "0.52px" },
+      uppercase: !0,
       variant: "body2",
       children: i
     })]
   });
 };
 export {
-  y as default
+  p as default
 };
 
 //# sourceMappingURL=SubHeader.es.js.map

package/dist/insights-v2/components/SubHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeader.es.js","names":[],"sources":["../../../src/insights-v2/components/SubHeader.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { Logo, Subtitle } from '../../core'\n\ninterface SubHeaderProps {\n  subtitle: Subtitle\n}\n\n// TODO: Ask backend to send the correct guid (institution_guid, merchant_guid, or category_guid)\n// per beat's logo, matching what that beat's subtitle is actually about.\nconst renderLogo = (logo: Logo | undefined) => {\n  if (!logo) return null\n\n  if (logo.logo_name) {\n    return <Icon name={logo.logo_name} size={16} sx={{ color: logo.logo_color }} />\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name as string}\n        categoryGuid={logo.category_guid as string}\n        merchantGuid={logo.merchant_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name as string}\n        institutionGuid={logo.institution_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    return <CategoryIcon categoryGuid={logo.category_guid} size={16} />\n  }\n\n  return null\n}\n\nconst SubHeader = ({ subtitle }: SubHeaderProps) => {\n  const { logo, text } = subtitle\n\n  return (\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n      {renderLogo(logo)}\n      <Text color=\"text.secondary\" variant=\"body2\">\n        {text}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default SubHeader\n"],"mappings":";;;;AAYA,IAAM,IAAA,CAAc,MACb,IAED,EAAK,YACA,gBAAA,EAAC,GAAD;AAAA,EAAM,MAAM,EAAK;AAAA,EAAW,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,EAAK,WAAW;AAAI,CAAA,IAG5E,EAAK,gBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,cAAc,EAAK;AAAA,EACnB,cAAc,EAAK;AAAA,EACnB,MAAM;AACP,CAAA,IAID,EAAK,mBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,iBAAiB,EAAK;AAAA,EACtB,MAAM;AACP,CAAA,IAID,EAAK,gBACA,gBAAA,EAAC,GAAD;AAAA,EAAc,cAAc,EAAK;AAAA,EAAe,MAAM;AAAK,CAAA,IAG7D,OA/BW,MAkCd,IAAA,CAAa,EAAE,UAAA,EAAA,MAA+B;AAClD,QAAM,EAAE,MAAA,GAAM,MAAA,EAAA,IAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,KAAK;AAAA,IAAE;AAAA,IAAhE,UAAA,CACG,EAAW,CAAI,GAChB,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAClC,UAAA;AAAA,IACG,CAAA,CACD;AAAA;AAEX"}
+{"version":3,"file":"SubHeader.es.js","names":[],"sources":["../../../src/insights-v2/components/SubHeader.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { Logo, Subtitle } from '../../core'\n\ninterface SubHeaderProps {\n  subtitle: Subtitle\n}\n\n// TODO: Ask backend to send the correct guid (institution_guid, merchant_guid, or category_guid)\n// per beat's logo, matching what that beat's subtitle is actually about.\nconst renderLogo = (logo: Logo | undefined) => {\n  if (!logo) return null\n\n  if (logo.logo_name) {\n    return <Icon name={logo.logo_name} size={16} sx={{ color: logo.logo_color }} />\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name as string}\n        categoryGuid={logo.category_guid as string}\n        merchantGuid={logo.merchant_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name as string}\n        institutionGuid={logo.institution_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    return <CategoryIcon categoryGuid={logo.category_guid} size={16} />\n  }\n\n  return null\n}\n\nconst SubHeader = ({ subtitle }: SubHeaderProps) => {\n  const { logo, text } = subtitle\n\n  return (\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n      {renderLogo(logo)}\n      {/* Figma `typography/body2 (upper)`: uppercased with 0.52px tracking. */}\n      <Text\n        color=\"text.secondary\"\n        sx={{ letterSpacing: '0.52px' }}\n        uppercase={true}\n        variant=\"body2\"\n      >\n        {text}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default SubHeader\n"],"mappings":";;;;AAYA,IAAM,IAAA,CAAc,MACb,IAED,EAAK,YACA,gBAAA,EAAC,GAAD;AAAA,EAAM,MAAM,EAAK;AAAA,EAAW,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,EAAK,WAAW;AAAI,CAAA,IAG5E,EAAK,gBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,cAAc,EAAK;AAAA,EACnB,cAAc,EAAK;AAAA,EACnB,MAAM;AACP,CAAA,IAID,EAAK,mBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,iBAAiB,EAAK;AAAA,EACtB,MAAM;AACP,CAAA,IAID,EAAK,gBACA,gBAAA,EAAC,GAAD;AAAA,EAAc,cAAc,EAAK;AAAA,EAAe,MAAM;AAAK,CAAA,IAG7D,OA/BW,MAkCd,IAAA,CAAa,EAAE,UAAA,EAAA,MAA+B;AAClD,QAAM,EAAE,MAAA,GAAM,MAAA,EAAA,IAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,KAAK;AAAA,IAAE;AAAA,IAAhE,UAAA,CACG,EAAW,CAAI,GAEhB,gBAAA,EAAC,GAAD;AAAA,MACE,OAAM;AAAA,MACN,IAAI,EAAE,eAAe,SAAS;AAAA,MAC9B,WAAW;AAAA,MACX,SAAQ;AAAA,MAEP,UAAA;AAAA,IACG,CAAA,CACD;AAAA;AAEX"}

package/dist/insights-v2/components/TransactionListCard.es.js

@@ -18,20 +18,20 @@ var w = (n) => n === "primary" ? {
     py: 4
   }
 } : {
-  radius: "4px",
+  radius: "8px",
   borderColor: "divider",
   headerBg: "background.default",
-  headerColor: "text.secondary",
+  headerColor: "text.primary",
   headerBold: !0,
   headerInsideBorder: !0,
   headerSx: {
-    minHeight: 40,
+    minHeight: 36,
     px: 16,
     py: 2
   }
-}, H = ({ background: n, footer: l, header: a, rows: m, variant: g = "default", sx: b }) => {
+}, H = ({ background: n, footer: l, header: i, rows: m, variant: g = "default", sx: b }) => {
   if (m.length === 0) return null;
-  const e = w(g), i = !!n, o = i ? "8px" : e.radius, s = !!a && !i && e.headerInsideBorder, c = a ? /* @__PURE__ */ r(t, {
+  const e = w(g), a = !!n, o = a ? "8px" : e.radius, s = !!i && !a && e.headerInsideBorder, c = i ? /* @__PURE__ */ r(t, {
     sx: {
       bgcolor: e.headerBg,
       justifyContent: "center",
@@ -41,12 +41,12 @@ var w = (n) => n === "primary" ? {
       bold: e.headerBold,
       color: e.headerColor,
       variant: "caption",
-      children: a
+      children: i
     })
   }) : null, f = l ? /* @__PURE__ */ d(x, { children: [/* @__PURE__ */ r(p, {}), /* @__PURE__ */ d(t, {
     sx: {
       alignItems: "center",
-      bgcolor: i ? "background.paper" : "background.default",
+      bgcolor: a ? "background.paper" : "background.default",
       flexDirection: "row",
       justifyContent: "space-between",
       minHeight: 40,
@@ -73,7 +73,7 @@ var w = (n) => n === "primary" ? {
   });
   return /* @__PURE__ */ d(t, {
     sx: {
-      ...i ? {
+      ...a ? {
         background: n,
         p: 16
       } : {
@@ -92,14 +92,14 @@ var w = (n) => n === "primary" ? {
       children: c
     }), /* @__PURE__ */ d(t, {
       sx: {
-        ...i ? { bgcolor: "background.paper" } : {
+        ...a ? { bgcolor: "background.paper" } : {
           border: "1px solid",
           borderColor: e.borderColor
         },
         borderBottomLeftRadius: o,
         borderBottomRightRadius: o,
-        borderTopLeftRadius: s || !a ? o : 0,
-        borderTopRightRadius: s || !a ? o : 0,
+        borderTopLeftRadius: s || !i ? o : 0,
+        borderTopRightRadius: s || !i ? o : 0,
         overflow: "hidden",
         width: "100%"
       },

package/dist/insights-v2/components/TransactionListCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionListCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransactionListCard.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport InsightTransactionRow, { type InsightTransactionRowProps } from './InsightTransactionRow'\n\nexport interface FooterRow {\n  label: ReactNode\n  amount: ReactNode\n  amountColor?: string\n}\n\ntype TransactionListCardVariant = 'default' | 'primary'\n\ninterface TransactionListCardProps {\n  /** Optional header label above the rows (e.g. \"{Date}\", \"3 transactions\"). */\n  header?: ReactNode\n  /** One or more transaction rows. */\n  rows: InsightTransactionRowProps[]\n  /** Optional summary/total row rendered beneath a divider. */\n  footer?: FooterRow\n  /**\n   * Card style:\n   * - `default` — grey utility header, hairline border, radius 4.\n   * - `primary` — filled `primary.main` header with white text and a matching\n   *   border, radius 8 (Figma \"Multi\" variant).\n   *\n   * In both cases the header is borderless; the border wraps the content block\n   * below it.\n   */\n  variant?: TransactionListCardVariant\n  /**\n   * Optional background applied to the Slot behind the card. Must be a valid CSS\n   * background string (gradient or color in CSS format); MUI theme tokens are\n   * not resolved here (this is the CSS `background` shorthand, not `bgcolor`), so\n   * use a CSS color literal instead. When set, the inner card renders borderless\n   * on a white surface inside the padded Slot (Figma HSA Deposit).\n   */\n  background?: string\n  sx?: SxProps\n}\n\nconst getVariantStyles = (variant: TransactionListCardVariant) => {\n  switch (variant) {\n    case 'primary':\n      // Borderless filled header on top of the bordered rows block.\n      return {\n        radius: '8px',\n        borderColor: 'primary.main',\n        headerBg: 'primary.main',\n        headerColor: 'primary.contrastText',\n        headerBold: false,\n        headerInsideBorder: false,\n        headerSx: { minHeight: 24, px: 12, py: 4 } as const,\n      }\n    default:\n      // A single border wraps the card; the grey header sits inside it.\n      return {\n        radius: '4px',\n        borderColor: 'divider',\n        headerBg: 'background.default',\n        headerColor: 'text.secondary',\n        headerBold: true,\n        headerInsideBorder: true,\n        headerSx: { minHeight: 40, px: 16, py: 2 } as const,\n      }\n  }\n}\n\n/**\n * List card composing an optional header label, one or more\n * `InsightTransactionRow`s (divided), and an optional footer/total row.\n * `variant` supplies the Figma design defaults for the two card styles.\n *\n * Scope is the Content section only; Header/Description are out of scope.\n */\nconst TransactionListCard = ({\n  background,\n  footer,\n  header,\n  rows,\n  variant = 'default',\n  sx,\n}: TransactionListCardProps) => {\n  // rows usually comes from mapped API data, so an empty array is reachable and\n  // would render a broken border shell; render nothing instead.\n  if (rows.length === 0) return null\n\n  const styles = getVariantStyles(variant)\n  const hasBackground = Boolean(background)\n  const radius = hasBackground ? '8px' : styles.radius\n  // The header sits inside the border only for the bordered `default` variant;\n  // for `primary`/backgrounded cards it sits above a separately-bordered body.\n  const headerInsideBorder = Boolean(header) && !hasBackground && styles.headerInsideBorder\n\n  const headerBlock = header ? (\n    <Stack sx={{ bgcolor: styles.headerBg, justifyContent: 'center', ...styles.headerSx }}>\n      <Text bold={styles.headerBold} color={styles.headerColor} variant=\"caption\">\n        {header}\n      </Text>\n    </Stack>\n  ) : null\n\n  const footerBlock = footer ? (\n    <>\n      <Divider />\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: hasBackground ? 'background.paper' : 'background.default',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          minHeight: 40,\n          px: 16,\n          py: 2,\n        }}\n      >\n        <Text color=\"text.secondary\" variant=\"caption\">\n          {footer.label}\n        </Text>\n        <Text bold={true} color={footer.amountColor ?? 'text.primary'} variant=\"body2\">\n          {footer.amount}\n        </Text>\n      </Stack>\n    </>\n  ) : null\n\n  const rowsBlock = (\n    <Stack role=\"list\" sx={{ width: '100%' }}>\n      {rows.map((row, index) => (\n        // Static, caller-ordered list that may contain identical rows, so the\n        // array index is the correct key (a content-based key would collide).\n        // eslint-disable-next-line react/no-array-index-key\n        <Fragment key={index}>\n          {index > 0 && <Divider role=\"presentation\" />}\n          <Box role=\"listitem\">\n            <InsightTransactionRow {...row} />\n          </Box>\n        </Fragment>\n      ))}\n    </Stack>\n  )\n\n  return (\n    <Stack\n      sx={{\n        ...(hasBackground ? { background, p: 16 } : { pt: 8, px: 16 }),\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {/* Header above the border for `primary`/backgrounded cards; top-rounded. */}\n      {!headerInsideBorder && headerBlock && (\n        <Stack\n          sx={{\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n            overflow: 'hidden',\n          }}\n        >\n          {headerBlock}\n        </Stack>\n      )}\n\n      <Stack\n        sx={{\n          ...(hasBackground\n            ? { bgcolor: 'background.paper' }\n            : { border: '1px solid', borderColor: styles.borderColor }),\n          borderBottomLeftRadius: radius,\n          borderBottomRightRadius: radius,\n          borderTopLeftRadius: headerInsideBorder || !header ? radius : 0,\n          borderTopRightRadius: headerInsideBorder || !header ? radius : 0,\n          overflow: 'hidden',\n          width: '100%',\n        }}\n      >\n        {/* Header inside the border for the `default` table variant. */}\n        {headerInsideBorder && (\n          <>\n            {headerBlock}\n            <Divider />\n          </>\n        )}\n        {rowsBlock}\n        {footerBlock}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionListCard\n"],"mappings":"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"}
+{"version":3,"file":"TransactionListCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransactionListCard.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport InsightTransactionRow, { type InsightTransactionRowProps } from './InsightTransactionRow'\n\nexport interface FooterRow {\n  label: ReactNode\n  amount: ReactNode\n  amountColor?: string\n}\n\ntype TransactionListCardVariant = 'default' | 'primary'\n\ninterface TransactionListCardProps {\n  /** Optional header label above the rows (e.g. \"{Date}\", \"3 transactions\"). */\n  header?: ReactNode\n  /** One or more transaction rows. */\n  rows: InsightTransactionRowProps[]\n  /** Optional summary/total row rendered beneath a divider. */\n  footer?: FooterRow\n  /**\n   * Card style:\n   * - `default` — grey utility header, hairline border, radius 4.\n   * - `primary` — filled `primary.main` header with white text and a matching\n   *   border, radius 8 (Figma \"Multi\" variant).\n   *\n   * In both cases the header is borderless; the border wraps the content block\n   * below it.\n   */\n  variant?: TransactionListCardVariant\n  /**\n   * Optional background applied to the Slot behind the card. Must be a valid CSS\n   * background string (gradient or color in CSS format); MUI theme tokens are\n   * not resolved here (this is the CSS `background` shorthand, not `bgcolor`), so\n   * use a CSS color literal instead. When set, the inner card renders borderless\n   * on a white surface inside the padded Slot (Figma HSA Deposit).\n   */\n  background?: string\n  sx?: SxProps\n}\n\nconst getVariantStyles = (variant: TransactionListCardVariant) => {\n  switch (variant) {\n    case 'primary':\n      // Borderless filled header on top of the bordered rows block.\n      return {\n        radius: '8px',\n        borderColor: 'primary.main',\n        headerBg: 'primary.main',\n        headerColor: 'primary.contrastText',\n        headerBold: false,\n        headerInsideBorder: false,\n        headerSx: { minHeight: 24, px: 12, py: 4 } as const,\n      }\n    default:\n      // A single border wraps the card; the grey header sits inside it.\n      return {\n        radius: '8px',\n        borderColor: 'divider',\n        headerBg: 'background.default',\n        headerColor: 'text.primary',\n        headerBold: true,\n        headerInsideBorder: true,\n        headerSx: { minHeight: 36, px: 16, py: 2 } as const,\n      }\n  }\n}\n\n/**\n * List card composing an optional header label, one or more\n * `InsightTransactionRow`s (divided), and an optional footer/total row.\n * `variant` supplies the Figma design defaults for the two card styles.\n *\n * Scope is the Content section only; Header/Description are out of scope.\n */\nconst TransactionListCard = ({\n  background,\n  footer,\n  header,\n  rows,\n  variant = 'default',\n  sx,\n}: TransactionListCardProps) => {\n  // rows usually comes from mapped API data, so an empty array is reachable and\n  // would render a broken border shell; render nothing instead.\n  if (rows.length === 0) return null\n\n  const styles = getVariantStyles(variant)\n  const hasBackground = Boolean(background)\n  const radius = hasBackground ? '8px' : styles.radius\n  // The header sits inside the border only for the bordered `default` variant;\n  // for `primary`/backgrounded cards it sits above a separately-bordered body.\n  const headerInsideBorder = Boolean(header) && !hasBackground && styles.headerInsideBorder\n\n  const headerBlock = header ? (\n    <Stack sx={{ bgcolor: styles.headerBg, justifyContent: 'center', ...styles.headerSx }}>\n      <Text bold={styles.headerBold} color={styles.headerColor} variant=\"caption\">\n        {header}\n      </Text>\n    </Stack>\n  ) : null\n\n  const footerBlock = footer ? (\n    <>\n      <Divider />\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: hasBackground ? 'background.paper' : 'background.default',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          minHeight: 40,\n          px: 16,\n          py: 2,\n        }}\n      >\n        <Text color=\"text.secondary\" variant=\"caption\">\n          {footer.label}\n        </Text>\n        <Text bold={true} color={footer.amountColor ?? 'text.primary'} variant=\"body2\">\n          {footer.amount}\n        </Text>\n      </Stack>\n    </>\n  ) : null\n\n  const rowsBlock = (\n    <Stack role=\"list\" sx={{ width: '100%' }}>\n      {rows.map((row, index) => (\n        // Static, caller-ordered list that may contain identical rows, so the\n        // array index is the correct key (a content-based key would collide).\n        // eslint-disable-next-line react/no-array-index-key\n        <Fragment key={index}>\n          {index > 0 && <Divider role=\"presentation\" />}\n          <Box role=\"listitem\">\n            <InsightTransactionRow {...row} />\n          </Box>\n        </Fragment>\n      ))}\n    </Stack>\n  )\n\n  return (\n    <Stack\n      sx={{\n        ...(hasBackground ? { background, p: 16 } : { pt: 8, px: 16 }),\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {/* Header above the border for `primary`/backgrounded cards; top-rounded. */}\n      {!headerInsideBorder && headerBlock && (\n        <Stack\n          sx={{\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n            overflow: 'hidden',\n          }}\n        >\n          {headerBlock}\n        </Stack>\n      )}\n\n      <Stack\n        sx={{\n          ...(hasBackground\n            ? { bgcolor: 'background.paper' }\n            : { border: '1px solid', borderColor: styles.borderColor }),\n          borderBottomLeftRadius: radius,\n          borderBottomRightRadius: radius,\n          borderTopLeftRadius: headerInsideBorder || !header ? radius : 0,\n          borderTopRightRadius: headerInsideBorder || !header ? radius : 0,\n          overflow: 'hidden',\n          width: '100%',\n        }}\n      >\n        {/* Header inside the border for the `default` table variant. */}\n        {headerInsideBorder && (\n          <>\n            {headerBlock}\n            <Divider />\n          </>\n        )}\n        {rowsBlock}\n        {footerBlock}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionListCard\n"],"mappings":"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"}