@mx-cartographer/experiences 9.7.92 → 9.7.94

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.7.94] - 11-03-2026
+
+- **ADDED** - Weekend Spending Summary beat on Insights 2.0 (MEW2-3422): the `transaction_block` `spending_summary` variant (header, rows and footer with the header text in `primary.main`, via a `headerColor` on the layout config and `TransactionListCard`) whose "View Transactions" CTA opens the Transaction List drawer as a plain list. Fixture, story, contract test and block doc
+
+## [9.7.93] - 11-03-2026
+
+- **ADDED** - Charge Dispute Refund beat on Insights 2.0 (MEW2-3423): the `with_header` transaction card whose "View Transaction" CTA opens the Transaction Details drawer for the refund. Fixture, story, contract test and the Transaction Details block doc
+
 ## [9.7.92] - 11-03-2026
 
 - **ADDED** - Duplicate Payment beat on Insights 2.0 (MEW2-3421): the `with_header_footer` transaction card whose "View Transactions" CTA opens the Transaction List drawer as a plain list. Fixture, story, contract test and block doc

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js

@@ -1,25 +1,25 @@
-import { useCategoryStore as j, useGlobalCopyStore as q, useGlobalStore as D } from "../../../../common/context/hooks.es.js";
+import { useCategoryStore as q, useGlobalCopyStore as D, useGlobalStore as H } from "../../../../common/context/hooks.es.js";
 import { slot as s } from "../../../../core/types/Insights.es.js";
 import { formatCurrency as v } from "../../../../core/utils/NumberFormatting.es.js";
 import { getCategoryColor as C } from "../../../../core/utils/CategoryUtil.es.js";
-import { useBeatActions as H } from "../../../beatActions.es.js";
-import { USER_RESPONSE as P, repeatingTransactionOf as V } from "../../../ctaActions/subscriptionAnswer.es.js";
-import { logoFromRef as U } from "../../../components/shared/EntityLogo.es.js";
-import W from "../../../components/LogoFromGuid.es.js";
-import { statusIconName as Y, statusIconPalette as I } from "../../../components/statusIcon.es.js";
-import { resolveVariantConfig as J } from "../../resolveVariantConfig.es.js";
-import K from "../../../components/TransactionListCard.es.js";
-import Q from "../../../components/StatusMessageCard.es.js";
-import { subscriptionFrequency as X } from "../../../components/SubscriptionStatus/subscriptionFrequency.es.js";
-import { getLayoutConfig as oo, transactionBlockVariant as to } from "./layout.es.js";
-import { observer as ro } from "mobx-react-lite";
-import { CategoryIcon as eo, InstitutionLogo as io, MerchantLogo as no } from "@mxenabled/mxui";
+import { useBeatActions as P } from "../../../beatActions.es.js";
+import { USER_RESPONSE as V, repeatingTransactionOf as U } from "../../../ctaActions/subscriptionAnswer.es.js";
+import { logoFromRef as W } from "../../../components/shared/EntityLogo.es.js";
+import Y from "../../../components/LogoFromGuid.es.js";
+import { statusIconName as J, statusIconPalette as I } from "../../../components/statusIcon.es.js";
+import { resolveVariantConfig as K } from "../../resolveVariantConfig.es.js";
+import Q from "../../../components/TransactionListCard.es.js";
+import X from "../../../components/StatusMessageCard.es.js";
+import { subscriptionFrequency as oo } from "../../../components/SubscriptionStatus/subscriptionFrequency.es.js";
+import { getLayoutConfig as to, transactionBlockVariant as ro } from "./layout.es.js";
+import { observer as eo } from "mobx-react-lite";
+import { CategoryIcon as io, InstitutionLogo as no, MerchantLogo as ao } from "@mxenabled/mxui";
 import { Icon as T } from "@mxenabled/mx-icons";
 import { jsx as t } from "react/jsx-runtime";
-import { alpha as S, useTheme as ao } from "@mui/material/styles";
+import { alpha as S, useTheme as so } from "@mui/material/styles";
 import d from "@mui/material/Box";
-var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon: a }) => {
-  const i = Y(a?.guid);
+var u = 32, co = Math.round(u * 0.625), uo = 24, G = 32, lo = 20, mo = ({ icon: a }) => {
+  const i = J(a?.guid);
   return i ? /* @__PURE__ */ t(d, {
     "aria-hidden": !0,
     "data-icon": i,
@@ -36,12 +36,12 @@ var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon:
     children: /* @__PURE__ */ t(T, {
       fill: !0,
       name: i,
-      size: uo,
+      size: lo,
       sx: { color: `${I(a?.color)}.contrastText` }
     })
   }) : null;
-}, mo = (a, i, c, l) => {
-  const o = U(a.logo, a.primary_text);
+}, go = (a, i, c, l) => {
+  const o = W(a.logo, a.primary_text);
   if (o) {
     if (o.logo_name) {
       const e = !!o.logo_fill, r = o.logo_color ?? c.palette.chart.chart2 ?? c.palette.primary.main;
@@ -59,18 +59,18 @@ var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon:
         },
         children: /* @__PURE__ */ t(T, {
           name: o.logo_name,
-          size: so,
+          size: co,
           sx: { color: e ? r : o.logo_color }
         })
       });
     }
-    if (o.merchant_guid) return /* @__PURE__ */ t(no, {
+    if (o.merchant_guid) return /* @__PURE__ */ t(ao, {
       alt: o.merchant_name ?? "",
       categoryGuid: o.category_guid ? i(o.category_guid) : "",
       merchantGuid: o.merchant_guid,
       size: u
     });
-    if (o.institution_guid) return /* @__PURE__ */ t(io, {
+    if (o.institution_guid) return /* @__PURE__ */ t(no, {
       alt: o.institution_name ?? "",
       institutionGuid: o.institution_guid,
       size: u
@@ -84,7 +84,7 @@ var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon:
       return /* @__PURE__ */ t(d, {
         "data-testid": `category-icon-${e}`,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(eo, {
+        children: /* @__PURE__ */ t(io, {
           categoryGuid: e,
           size: u,
           sx: r
@@ -92,20 +92,20 @@ var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon:
       });
     }
   }
-}, Ao = ro(({ payload: a }) => {
-  const i = ao(), { getTopLevelCategoryGuid: c } = j(), l = D(), { recurring: o } = q(), { beat: e } = H(), { data: r, variant: E } = a.instance_slot, { answeredBackground: p, background: m, cardVariant: B, elevated: L, followsSubscription: g, raised: k, showFooter: O, showFrequency: y, showHeader: R, statusMessage: A, sx: w, tintedCategoryLogo: z } = J(oo(i), E, to.NoHeader, "TransactionBlock"), _ = (y || g) && e ? V({
+}, wo = eo(({ payload: a }) => {
+  const i = so(), { getTopLevelCategoryGuid: c } = q(), l = H(), { recurring: o } = D(), { beat: e } = P(), { data: r, variant: E } = a.instance_slot, { answeredBackground: p, background: m, cardVariant: B, elevated: L, followsSubscription: g, headerColor: k, raised: O, showFooter: R, showFrequency: y, showHeader: A, statusMessage: w, sx: z, tintedCategoryLogo: F } = K(to(i), E, ro.NoHeader, "TransactionBlock"), _ = (y || g) && e ? U({
     beat: e,
     stores: l
-  }) : void 0, h = !!g && _?.user_response === P.CONFIRMED;
-  if (A) {
+  }) : void 0, h = !!g && _?.user_response === V.CONFIRMED;
+  if (w) {
     const n = s(r, "message");
-    return typeof n != "string" || !n.trim() ? (console.warn("[TransactionBlock] status_message has no message — rendering nothing."), null) : /* @__PURE__ */ t(Q, {
+    return typeof n != "string" || !n.trim() ? (console.warn("[TransactionBlock] status_message has no message — rendering nothing."), null) : /* @__PURE__ */ t(X, {
       icon: /* @__PURE__ */ t(d, {
         "aria-hidden": "true",
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(W, {
+        children: /* @__PURE__ */ t(Y, {
           logo: s(r, "icon"),
-          size: co
+          size: uo
         })
       }),
       message: n,
@@ -117,30 +117,31 @@ var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon:
   }
   const f = s(r, "series"), x = s(r, "header_text");
   if (!Array.isArray(f) || !f.length) return null;
-  const F = R && typeof x == "string" ? x : void 0, b = s(r, "footer_text"), N = s(r, "footer_amount"), M = O && typeof b == "string" ? {
+  const N = A && typeof x == "string" ? x : void 0, b = s(r, "footer_text"), M = s(r, "footer_amount"), Z = R && typeof b == "string" ? {
     label: b,
-    amount: v(N, "0,0.00")
-  } : void 0, Z = y ? X(o, _) : void 0, $ = g ? /* @__PURE__ */ t(lo, { icon: s(r, h ? "reviewed_icon" : "icon") }) : void 0;
-  return /* @__PURE__ */ t(K, {
+    amount: v(M, "0,0.00")
+  } : void 0, $ = y ? oo(o, _) : void 0, j = g ? /* @__PURE__ */ t(mo, { icon: s(r, h ? "reviewed_icon" : "icon") }) : void 0;
+  return /* @__PURE__ */ t(Q, {
     background: h && p ? p : m,
-    badge: $,
+    badge: j,
     elevated: L,
-    footer: M,
-    header: F,
-    raised: k,
-    sx: w,
+    footer: Z,
+    header: N,
+    headerColor: k,
+    raised: O,
+    sx: z,
     variant: B,
     rows: f.map((n) => ({
       amount: typeof n.amount == "number" ? v(n.amount, "0,0.00") : "",
-      amountCaption: Z,
-      leading: mo(n, c, i, z ?? !1),
+      amountCaption: $,
+      leading: go(n, c, i, F ?? !1),
       subtitle: n.secondary_text ?? "",
       title: n.primary_text ?? ""
     }))
   });
 });
 export {
-  Ao as TransactionBlock
+  wo as TransactionBlock
 };
 
 //# sourceMappingURL=TransactionBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore, useGlobalCopyStore, useGlobalStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow, LogoRef } from '../../../../core'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport { useBeatActions } from '../../../beatActions'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport StatusMessageCard from '../../../components/StatusMessageCard'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\nimport { statusIconName, statusIconPalette } from '../../../components/statusIcon'\nimport { subscriptionFrequency } from '../../../components/SubscriptionStatus/subscriptionFrequency'\nimport { repeatingTransactionOf, USER_RESPONSE } from '../../../ctaActions/subscriptionAnswer'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\nconst STATUS_ICON_SIZE = 24\n// Status badge: palette disc, contrastText glyph.\nconst BADGE_SIZE = 32\nconst BADGE_GLYPH_SIZE = 20\n\n/** Status disc from `data.icon` / `data.reviewed_icon`. */\nconst SubscriptionBadge = ({ icon }: { icon?: LogoRef }) => {\n  const name = statusIconName(icon?.guid)\n\n  if (!name) return null\n\n  return (\n    <Box\n      aria-hidden={true}\n      data-icon={name}\n      data-testid=\"subscription-badge\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: `${statusIconPalette(icon?.color)}.main`,\n        borderRadius: '50%',\n        display: 'flex',\n        height: BADGE_SIZE,\n        justifyContent: 'center',\n        width: BADGE_SIZE,\n      }}\n    >\n      <Icon\n        fill={true}\n        name={name}\n        size={BADGE_GLYPH_SIZE}\n        sx={{ color: `${statusIconPalette(icon?.color)}.contrastText` }}\n      />\n    </Box>\n  )\n}\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That resolution applies both to a\n * `CAT-` row logo and to a merchant's `fallback_guid`. The tinted/bordered tile is opt-in per variant\n * (`tintedCategoryLogo`) and only styles the `CAT-` row branch; a merchant's `fallback_guid` is drawn\n * by `MerchantLogo`'s own untinted `CategoryIcon` fallback when the merchant image fails to load.\n */\nconst renderRowLogo = (\n  row: InstanceSlotRow,\n  resolveTopLevelCategory: (guid: string) => string,\n  theme: Theme,\n  tintedCategoryLogo: boolean,\n) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A `{ icon, color }` status logo (e.g. an overdraft warning) renders as a bare coloured glyph.\n    // An ICO- fill logo (the Weekly New Merchants \"Others\" row - `logo_fill` is set for ICO- refs\n    // only, in EntityLogo) renders as an accent tile: per the MX accent-icon pattern the background is\n    // the tile colour at 15% opacity and the glyph is the full tile colour (Figma). The tile colour is\n    // the logo's own colour when it carries one, else chart-2 - so tile and glyph always match.\n    const accentTile = !!logo.logo_fill\n    const tileColor = logo.logo_color ?? theme.palette.chart.chart2 ?? theme.palette.primary.main\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n          ...(accentTile && {\n            bgcolor: alpha(tileColor, 0.15),\n            borderRadius: '8px',\n          }),\n        }}\n      >\n        <Icon\n          name={logo.logo_name}\n          size={ROW_ICON_SIZE}\n          sx={{ color: accentTile ? tileColor : logo.logo_color }}\n        />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    // When the variant opts in (`tintedCategoryLogo`), the tile is the Budget-style accent: the\n    // category colour at 15% opacity, a 1px category-colour border, and a `text.primary` glyph\n    // (Figma - Replenish Savings' multi-account Transfer row). Otherwise mxui's default tile, so other\n    // beats' category logos are unchanged.\n    const tintSx = tintedCategoryLogo\n      ? {\n          bgcolor: alpha(getCategoryColor(topLevelGuid, theme), 0.15),\n          border: `1px solid ${getCategoryColor(topLevelGuid, theme)}`,\n          color: 'text.primary',\n        }\n      : undefined\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} sx={tintSx} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * `status_message` draws no rows: `data.message` beside the `data.icon` logo, as a\n * `StatusMessageCard` banner (Uncategorized Transactions V2 `complete`).\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n *\n * A footer/summary row (Replenish Savings' \"Remaining Balance\", Weekly New Merchants' \"Total\")\n * renders when the variant's `showFooter` config is set (`with_header_footer`, `with_footer`), from\n * `data.footer_text` with `data.footer_amount` beside it, formatted like the row amounts (the\n * contract sends it as a number).\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const stores = useGlobalStore()\n  const { recurring: recurringCopy } = useGlobalCopyStore()\n  const { beat } = useBeatActions()\n  const { data, variant } = payload.instance_slot\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const {\n    answeredBackground,\n    background,\n    cardVariant,\n    elevated,\n    followsSubscription,\n    raised,\n    showFooter,\n    showFrequency,\n    showHeader,\n    statusMessage,\n    sx,\n    tintedCategoryLogo,\n  } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n\n  // The live repeating transaction (read-only), for the frequency and the badge / answered wash.\n  const repeating =\n    (showFrequency || followsSubscription) && beat\n      ? repeatingTransactionOf({ beat, stores })\n      : undefined\n  const subscribed = !!followsSubscription && repeating?.user_response === USER_RESPONSE.CONFIRMED\n\n  if (statusMessage) {\n    const message = slot<string>(data, 'message')\n    if (typeof message !== 'string' || !message.trim()) {\n      console.warn('[TransactionBlock] status_message has no message — rendering nothing.')\n      return null\n    }\n\n    // The icon only decorates the message, so it is hidden from the status announcement.\n    return (\n      <StatusMessageCard\n        icon={\n          <Box aria-hidden=\"true\" sx={{ display: 'flex' }}>\n            <LogoFromGuid logo={slot<LogoRef>(data, 'icon')} size={STATUS_ICON_SIZE} />\n          </Box>\n        }\n        message={message}\n        // The 20% wash layers over paper, as Figma's slot does.\n        sx={background ? { backgroundImage: background, bgcolor: 'background.paper' } : undefined}\n      />\n    )\n  }\n\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  const footerText = slot<string>(data, 'footer_text')\n  const footerAmount = slot<number>(data, 'footer_amount')\n  const footer =\n    showFooter && typeof footerText === 'string'\n      ? {\n          label: footerText,\n          amount: formatCurrency(footerAmount, '0,0.00'),\n        }\n      : undefined\n\n  // Live, as pulse: the repeating transaction the CTA's `prepare` loads.\n  const frequency = showFrequency ? subscriptionFrequency(recurringCopy, repeating) : undefined\n  const badge = followsSubscription ? (\n    <SubscriptionBadge icon={slot<LogoRef>(data, subscribed ? 'reviewed_icon' : 'icon')} />\n  ) : undefined\n\n  return (\n    <TransactionListCard\n      background={subscribed && answeredBackground ? answeredBackground : background}\n      badge={badge}\n      elevated={elevated}\n      footer={footer}\n      header={header}\n      raised={raised}\n      sx={sx}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        amountCaption: frequency,\n        leading: renderRowLogo(row, getTopLevelCategoryGuid, theme, tintedCategoryLogo ?? false),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore, useGlobalCopyStore, useGlobalStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow, LogoRef } from '../../../../core'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport { useBeatActions } from '../../../beatActions'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport StatusMessageCard from '../../../components/StatusMessageCard'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\nimport { statusIconName, statusIconPalette } from '../../../components/statusIcon'\nimport { subscriptionFrequency } from '../../../components/SubscriptionStatus/subscriptionFrequency'\nimport { repeatingTransactionOf, USER_RESPONSE } from '../../../ctaActions/subscriptionAnswer'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\nconst STATUS_ICON_SIZE = 24\n// Status badge: palette disc, contrastText glyph.\nconst BADGE_SIZE = 32\nconst BADGE_GLYPH_SIZE = 20\n\n/** Status disc from `data.icon` / `data.reviewed_icon`. */\nconst SubscriptionBadge = ({ icon }: { icon?: LogoRef }) => {\n  const name = statusIconName(icon?.guid)\n\n  if (!name) return null\n\n  return (\n    <Box\n      aria-hidden={true}\n      data-icon={name}\n      data-testid=\"subscription-badge\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: `${statusIconPalette(icon?.color)}.main`,\n        borderRadius: '50%',\n        display: 'flex',\n        height: BADGE_SIZE,\n        justifyContent: 'center',\n        width: BADGE_SIZE,\n      }}\n    >\n      <Icon\n        fill={true}\n        name={name}\n        size={BADGE_GLYPH_SIZE}\n        sx={{ color: `${statusIconPalette(icon?.color)}.contrastText` }}\n      />\n    </Box>\n  )\n}\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That resolution applies both to a\n * `CAT-` row logo and to a merchant's `fallback_guid`. The tinted/bordered tile is opt-in per variant\n * (`tintedCategoryLogo`) and only styles the `CAT-` row branch; a merchant's `fallback_guid` is drawn\n * by `MerchantLogo`'s own untinted `CategoryIcon` fallback when the merchant image fails to load.\n */\nconst renderRowLogo = (\n  row: InstanceSlotRow,\n  resolveTopLevelCategory: (guid: string) => string,\n  theme: Theme,\n  tintedCategoryLogo: boolean,\n) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A `{ icon, color }` status logo (e.g. an overdraft warning) renders as a bare coloured glyph.\n    // An ICO- fill logo (the Weekly New Merchants \"Others\" row - `logo_fill` is set for ICO- refs\n    // only, in EntityLogo) renders as an accent tile: per the MX accent-icon pattern the background is\n    // the tile colour at 15% opacity and the glyph is the full tile colour (Figma). The tile colour is\n    // the logo's own colour when it carries one, else chart-2 - so tile and glyph always match.\n    const accentTile = !!logo.logo_fill\n    const tileColor = logo.logo_color ?? theme.palette.chart.chart2 ?? theme.palette.primary.main\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n          ...(accentTile && {\n            bgcolor: alpha(tileColor, 0.15),\n            borderRadius: '8px',\n          }),\n        }}\n      >\n        <Icon\n          name={logo.logo_name}\n          size={ROW_ICON_SIZE}\n          sx={{ color: accentTile ? tileColor : logo.logo_color }}\n        />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    // When the variant opts in (`tintedCategoryLogo`), the tile is the Budget-style accent: the\n    // category colour at 15% opacity, a 1px category-colour border, and a `text.primary` glyph\n    // (Figma - Replenish Savings' multi-account Transfer row). Otherwise mxui's default tile, so other\n    // beats' category logos are unchanged.\n    const tintSx = tintedCategoryLogo\n      ? {\n          bgcolor: alpha(getCategoryColor(topLevelGuid, theme), 0.15),\n          border: `1px solid ${getCategoryColor(topLevelGuid, theme)}`,\n          color: 'text.primary',\n        }\n      : undefined\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} sx={tintSx} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * `status_message` draws no rows: `data.message` beside the `data.icon` logo, as a\n * `StatusMessageCard` banner (Uncategorized Transactions V2 `complete`).\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n *\n * A footer/summary row (Replenish Savings' \"Remaining Balance\", Weekly New Merchants' \"Total\")\n * renders when the variant's `showFooter` config is set (`with_header_footer`, `with_footer`), from\n * `data.footer_text` with `data.footer_amount` beside it, formatted like the row amounts (the\n * contract sends it as a number).\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const stores = useGlobalStore()\n  const { recurring: recurringCopy } = useGlobalCopyStore()\n  const { beat } = useBeatActions()\n  const { data, variant } = payload.instance_slot\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const {\n    answeredBackground,\n    background,\n    cardVariant,\n    elevated,\n    followsSubscription,\n    headerColor,\n    raised,\n    showFooter,\n    showFrequency,\n    showHeader,\n    statusMessage,\n    sx,\n    tintedCategoryLogo,\n  } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n\n  // The live repeating transaction (read-only), for the frequency and the badge / answered wash.\n  const repeating =\n    (showFrequency || followsSubscription) && beat\n      ? repeatingTransactionOf({ beat, stores })\n      : undefined\n  const subscribed = !!followsSubscription && repeating?.user_response === USER_RESPONSE.CONFIRMED\n\n  if (statusMessage) {\n    const message = slot<string>(data, 'message')\n    if (typeof message !== 'string' || !message.trim()) {\n      console.warn('[TransactionBlock] status_message has no message — rendering nothing.')\n      return null\n    }\n\n    // The icon only decorates the message, so it is hidden from the status announcement.\n    return (\n      <StatusMessageCard\n        icon={\n          <Box aria-hidden=\"true\" sx={{ display: 'flex' }}>\n            <LogoFromGuid logo={slot<LogoRef>(data, 'icon')} size={STATUS_ICON_SIZE} />\n          </Box>\n        }\n        message={message}\n        // The 20% wash layers over paper, as Figma's slot does.\n        sx={background ? { backgroundImage: background, bgcolor: 'background.paper' } : undefined}\n      />\n    )\n  }\n\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  const footerText = slot<string>(data, 'footer_text')\n  const footerAmount = slot<number>(data, 'footer_amount')\n  const footer =\n    showFooter && typeof footerText === 'string'\n      ? {\n          label: footerText,\n          amount: formatCurrency(footerAmount, '0,0.00'),\n        }\n      : undefined\n\n  // Live, as pulse: the repeating transaction the CTA's `prepare` loads.\n  const frequency = showFrequency ? subscriptionFrequency(recurringCopy, repeating) : undefined\n  const badge = followsSubscription ? (\n    <SubscriptionBadge icon={slot<LogoRef>(data, subscribed ? 'reviewed_icon' : 'icon')} />\n  ) : undefined\n\n  return (\n    <TransactionListCard\n      background={subscribed && answeredBackground ? answeredBackground : background}\n      badge={badge}\n      elevated={elevated}\n      footer={footer}\n      header={header}\n      headerColor={headerColor}\n      raised={raised}\n      sx={sx}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        amountCaption: frequency,\n        leading: renderRowLogo(row, getTopLevelCategoryGuid, theme, tintedCategoryLogo ?? false),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.d.ts

@@ -14,6 +14,8 @@ import { SxProps, Theme } from '@mui/material/styles';
  *   Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.
  * - `StatusMessage`           — no rows: an icon + message banner from `data.icon` / `data.message`
  *   (Uncategorized Transactions V2 `complete`, "All Categorized!").
+ * - `SpendingSummary`         — header, rows and footer, with the header text in `primary.main`
+ *   (Weekend Spending Summary: the weekend above one row per category and "Total spent").
  */
 export declare const transactionBlockVariant: {
     readonly WithHeader: "with_header";
@@ -24,6 +26,7 @@ export declare const transactionBlockVariant: {
     readonly InfoWash: "info_wash";
     readonly WarningWash: "warning_wash";
     readonly StatusMessage: "status_message";
+    readonly SpendingSummary: "spending_summary";
 };
 export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
 export interface TransactionLayoutConfig {
@@ -33,6 +36,8 @@ export interface TransactionLayoutConfig {
     showFooter?: boolean;
     /** `TransactionListCard` style: grey utility header, or filled primary header. */
     cardVariant?: 'default' | 'primary';
+    /** Theme colour for the header text, over the card style's own. */
+    headerColor?: string;
     /** CSS background for the slot behind the card; the card renders borderless unless `raised`. */
     background?: string;
     /** Render `data.message` as a `StatusMessageCard` banner instead of the rows. */

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js

@@ -1,4 +1,4 @@
-import { WARM_LIME_ACCENT_GRADIENT as a, WARNING_WASH_GRADIENT as t, getPrimaryWashGradient as o } from "../../../components/celebrationGradients.es.js";
+import { WARM_LIME_ACCENT_GRADIENT as r, WARNING_WASH_GRADIENT as o, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
 var e = {
   WithHeader: "with_header",
   WithHeaderFooter: "with_header_footer",
@@ -7,8 +7,9 @@ var e = {
   UncategorizedTransaction: "uncategorized_transaction",
   InfoWash: "info_wash",
   WarningWash: "warning_wash",
-  StatusMessage: "status_message"
-}, n = (r) => ({
+  StatusMessage: "status_message",
+  SpendingSummary: "spending_summary"
+}, n = (a) => ({
   [e.WithHeader]: {
     showHeader: !0,
     tintedCategoryLogo: !0
@@ -28,23 +29,28 @@ var e = {
   },
   [e.InfoWash]: {
     showHeader: !1,
-    background: o(r),
+    background: t(a),
     raised: !0,
     showFrequency: !0
   },
   [e.WarningWash]: {
     showHeader: !1,
-    background: t,
+    background: o,
     showFrequency: !0,
     followsSubscription: !0,
-    answeredBackground: a,
+    answeredBackground: r,
     elevated: !0,
     sx: { p: "28px 24px 24px 32px" }
   },
   [e.StatusMessage]: {
     showHeader: !1,
     statusMessage: !0,
-    background: a
+    background: r
+  },
+  [e.SpendingSummary]: {
+    showHeader: !0,
+    showFooter: !0,
+    headerColor: "primary.main"
   }
 });
 export {

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles'\n\nimport {\n  WARM_LIME_ACCENT_GRADIENT,\n  WARNING_WASH_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader`              — row under a date header (Fee Detected, Large Transaction).\n * - `WithHeaderFooter`              — date header above the rows plus the footer/summary row from\n *   `data.footer_text` / `data.footer_amount` (Replenish Savings' \"Remaining Balance\").\n * - `NoHeader`                — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash`                — raised row (border + shadow) on the blue slot wash, with the\n *   subscription's live frequency under the amount (e.g. Subscription Detected).\n * - `WarningWash`             — borderless row on the warning slot wash (e.g. Unexpected\n *   Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.\n * - `StatusMessage`           — no rows: an icon + message banner from `data.icon` / `data.message`\n *   (Uncategorized Transactions V2 `complete`, \"All Categorized!\").\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  WithHeaderFooter: 'with_header_footer',\n  NoHeader: 'no_header',\n  // A multi-row list with no in-card header plus a \"Total\" summary row (Weekly New Merchants; the\n  // date range is the card subtitle). The plain no-footer list reuses `NoHeader`.\n  WithFooter: 'with_footer',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  InfoWash: 'info_wash',\n  WarningWash: 'warning_wash',\n  StatusMessage: 'status_message',\n} as const\n\nexport type TransactionBlockVariant =\n  (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n  /** Show `instance_slot.data.header_text` above the rows. */\n  showHeader: boolean\n  /** Show the `data.footer_text` / `data.footer_amount` summary row beneath the rows. */\n  showFooter?: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** CSS background for the slot behind the card; the card renders borderless unless `raised`. */\n  background?: string\n  /** Render `data.message` as a `StatusMessageCard` banner instead of the rows. */\n  statusMessage?: boolean\n  /** Caption each amount with the beat's live repeating transaction frequency. */\n  showFrequency?: boolean\n  /** Status badge and answered wash from the live repeating transaction. */\n  followsSubscription?: boolean\n  /** Wash once subscribed. */\n  answeredBackground?: string\n  /** Row card at `elevation/1` (needs `background`). */\n  elevated?: boolean\n  /** Slot padding override (CSS shorthand). */\n  sx?: SxProps\n  /** Border and shadow on the row card. */\n  raised?: boolean\n  /**\n   * Tint a `CAT-` row logo as the Budget-style accent tile (category colour at 15% opacity, a 1px\n   * category-colour border, a `text.primary` glyph) instead of mxui's default. Opt-in per variant so\n   * it stays scoped to the beats that want it (Replenish Savings' multi-account Transfer row), not\n   * every `transaction_block` consumer.\n   */\n  tintedCategoryLogo?: boolean\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DetailedAccountBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  // `with_header` is Replenish Savings' multi-account card: its one summary row is a `CAT-` Transfer\n  // logo, which we tint. (Other `with_header` beats, e.g. Large Transaction, use a merchant logo, so\n  // the `CAT-` tint path never runs for them.)\n  [transactionBlockVariant.WithHeader]: { showHeader: true, tintedCategoryLogo: true },\n  [transactionBlockVariant.WithHeaderFooter]: { showHeader: true, showFooter: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.WithFooter]: { showHeader: false, showFooter: true },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.InfoWash]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n    raised: true,\n    showFrequency: true,\n  },\n  [transactionBlockVariant.WarningWash]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n    showFrequency: true,\n    followsSubscription: true,\n    answeredBackground: WARM_LIME_ACCENT_GRADIENT,\n    elevated: true,\n    // Room for the badge.\n    sx: { p: '28px 24px 24px 32px' },\n  },\n  // Figma 1941:207336: the banner sits on the warm-to-lime slot wash.\n  [transactionBlockVariant.StatusMessage]: {\n    showHeader: false,\n    statusMessage: true,\n    background: WARM_LIME_ACCENT_GRADIENT,\n  },\n})\n"],"mappings":";AAwBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,UAAU;AAAA,EAGV,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AACjB,GAsCa,IAAA,CACX,OAC8D;AAAA,EAI7D,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAM,oBAAoB;AAAA,EAAK;AAAA,EAClF,CAAA,EAAwB,gBAAA,GAAmB;AAAA,IAAE,YAAY;AAAA,IAAM,YAAY;AAAA,EAAK;AAAA,EAChF,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAO,YAAY;AAAA,EAAK;AAAA,EAC3E,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,QAAA,GAAW;AAAA,IAClC,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,UAAU;AAAA,IAEV,IAAI,EAAE,GAAG,sBAAsB;AAAA,EACjC;AAAA,EAEC,CAAA,EAAwB,aAAA,GAAgB;AAAA,IACvC,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles'\n\nimport {\n  WARM_LIME_ACCENT_GRADIENT,\n  WARNING_WASH_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader`              — row under a date header (Fee Detected, Large Transaction).\n * - `WithHeaderFooter`              — date header above the rows plus the footer/summary row from\n *   `data.footer_text` / `data.footer_amount` (Replenish Savings' \"Remaining Balance\").\n * - `NoHeader`                — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash`                — raised row (border + shadow) on the blue slot wash, with the\n *   subscription's live frequency under the amount (e.g. Subscription Detected).\n * - `WarningWash`             — borderless row on the warning slot wash (e.g. Unexpected\n *   Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.\n * - `StatusMessage`           — no rows: an icon + message banner from `data.icon` / `data.message`\n *   (Uncategorized Transactions V2 `complete`, \"All Categorized!\").\n * - `SpendingSummary`         — header, rows and footer, with the header text in `primary.main`\n *   (Weekend Spending Summary: the weekend above one row per category and \"Total spent\").\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  WithHeaderFooter: 'with_header_footer',\n  NoHeader: 'no_header',\n  // A multi-row list with no in-card header plus a \"Total\" summary row (Weekly New Merchants; the\n  // date range is the card subtitle). The plain no-footer list reuses `NoHeader`.\n  WithFooter: 'with_footer',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  InfoWash: 'info_wash',\n  WarningWash: 'warning_wash',\n  StatusMessage: 'status_message',\n  SpendingSummary: 'spending_summary',\n} as const\n\nexport type TransactionBlockVariant =\n  (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n  /** Show `instance_slot.data.header_text` above the rows. */\n  showHeader: boolean\n  /** Show the `data.footer_text` / `data.footer_amount` summary row beneath the rows. */\n  showFooter?: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** Theme colour for the header text, over the card style's own. */\n  headerColor?: string\n  /** CSS background for the slot behind the card; the card renders borderless unless `raised`. */\n  background?: string\n  /** Render `data.message` as a `StatusMessageCard` banner instead of the rows. */\n  statusMessage?: boolean\n  /** Caption each amount with the beat's live repeating transaction frequency. */\n  showFrequency?: boolean\n  /** Status badge and answered wash from the live repeating transaction. */\n  followsSubscription?: boolean\n  /** Wash once subscribed. */\n  answeredBackground?: string\n  /** Row card at `elevation/1` (needs `background`). */\n  elevated?: boolean\n  /** Slot padding override (CSS shorthand). */\n  sx?: SxProps\n  /** Border and shadow on the row card. */\n  raised?: boolean\n  /**\n   * Tint a `CAT-` row logo as the Budget-style accent tile (category colour at 15% opacity, a 1px\n   * category-colour border, a `text.primary` glyph) instead of mxui's default. Opt-in per variant so\n   * it stays scoped to the beats that want it (Replenish Savings' multi-account Transfer row), not\n   * every `transaction_block` consumer.\n   */\n  tintedCategoryLogo?: boolean\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DetailedAccountBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  // `with_header` is Replenish Savings' multi-account card: its one summary row is a `CAT-` Transfer\n  // logo, which we tint. (Other `with_header` beats, e.g. Large Transaction, use a merchant logo, so\n  // the `CAT-` tint path never runs for them.)\n  [transactionBlockVariant.WithHeader]: { showHeader: true, tintedCategoryLogo: true },\n  [transactionBlockVariant.WithHeaderFooter]: { showHeader: true, showFooter: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.WithFooter]: { showHeader: false, showFooter: true },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.InfoWash]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n    raised: true,\n    showFrequency: true,\n  },\n  [transactionBlockVariant.WarningWash]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n    showFrequency: true,\n    followsSubscription: true,\n    answeredBackground: WARM_LIME_ACCENT_GRADIENT,\n    elevated: true,\n    // Room for the badge.\n    sx: { p: '28px 24px 24px 32px' },\n  },\n  // Figma 1941:207336: the banner sits on the warm-to-lime slot wash.\n  [transactionBlockVariant.StatusMessage]: {\n    showHeader: false,\n    statusMessage: true,\n    background: WARM_LIME_ACCENT_GRADIENT,\n  },\n  [transactionBlockVariant.SpendingSummary]: {\n    showHeader: true,\n    showFooter: true,\n    headerColor: 'primary.main',\n  },\n})\n"],"mappings":";AA0BA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,UAAU;AAAA,EAGV,YAAY;AAAA,EACZ,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe;AAAA,EACf,iBAAiB;AACnB,GAwCa,IAAA,CACX,OAC8D;AAAA,EAI7D,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAM,oBAAoB;AAAA,EAAK;AAAA,EAClF,CAAA,EAAwB,gBAAA,GAAmB;AAAA,IAAE,YAAY;AAAA,IAAM,YAAY;AAAA,EAAK;AAAA,EAChF,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,UAAA,GAAa;AAAA,IAAE,YAAY;AAAA,IAAO,YAAY;AAAA,EAAK;AAAA,EAC3E,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,QAAA,GAAW;AAAA,IAClC,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,IACxC,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,UAAU;AAAA,IAEV,IAAI,EAAE,GAAG,sBAAsB;AAAA,EACjC;AAAA,EAEC,CAAA,EAAwB,aAAA,GAAgB;AAAA,IACvC,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAwB,eAAA,GAAkB;AAAA,IACzC,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF"}

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

@@ -10,6 +10,8 @@ type TransactionListCardVariant = 'default' | 'primary';
 interface TransactionListCardProps {
     /** Optional header label above the rows (e.g. "{Date}", "3 transactions"). */
     header?: ReactNode;
+    /** Theme colour for the header label, over the variant's own. */
+    headerColor?: string;
     /** One or more transaction rows. */
     rows: InsightTransactionRowProps[];
     /** Optional summary/total row rendered beneath a divider. */
@@ -47,5 +49,5 @@ interface TransactionListCardProps {
  *
  * Scope is the Content section only; Header/Description are out of scope.
  */
-declare const TransactionListCard: ({ background, badge, elevated, footer, header, raised, rows, variant, sx, }: TransactionListCardProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TransactionListCard: ({ background, badge, elevated, footer, header, headerColor, raised, rows, variant, sx, }: TransactionListCardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TransactionListCard;

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

@@ -1,12 +1,12 @@
-import k from "./InsightTransactionRow.es.js";
-import { ELEVATION_SHADOW as I } from "./shared/elevation.es.js";
-import { Fragment as T } from "react";
-import i from "@mui/material/Stack";
+import I from "./InsightTransactionRow.es.js";
+import { ELEVATION_SHADOW as S } from "./shared/elevation.es.js";
+import { Fragment as L } from "react";
+import d from "@mui/material/Stack";
 import { Text as m } from "@mxenabled/mxui";
-import { Fragment as f, jsx as r, jsxs as a } from "react/jsx-runtime";
-import g from "@mui/material/Box";
+import { Fragment as g, jsx as r, jsxs as a } from "react/jsx-runtime";
+import B from "@mui/material/Box";
 import u from "@mui/material/Divider";
-var S = (n) => n === "primary" ? {
+var j = (n) => n === "primary" ? {
   radius: "8px",
   borderColor: "primary.main",
   headerBg: "primary.main",
@@ -30,9 +30,9 @@ var S = (n) => n === "primary" ? {
     px: 16,
     py: 2
   }
-}, V = ({ background: n, badge: c, elevated: B = !1, footer: l, header: d, raised: y = !1, rows: x, variant: v = "default", sx: C }) => {
+}, N = ({ background: n, badge: c, elevated: y = !1, footer: l, header: i, headerColor: C, raised: v = !1, rows: x, variant: b = "default", sx: w }) => {
   if (x.length === 0) return null;
-  const e = S(v), o = !!n, t = o ? "8px" : e.radius, s = !!d && !o && e.headerInsideBorder, p = d ? /* @__PURE__ */ r(i, {
+  const e = j(b), o = !!n, t = o ? "8px" : e.radius, s = !!i && !o && e.headerInsideBorder, R = b === "default" ? C ?? e.headerColor : e.headerColor, h = i ? /* @__PURE__ */ r(d, {
     sx: {
       bgcolor: e.headerBg,
       justifyContent: "center",
@@ -40,11 +40,11 @@ var S = (n) => n === "primary" ? {
     },
     children: /* @__PURE__ */ r(m, {
       bold: e.headerBold,
-      color: e.headerColor,
+      color: R,
       variant: "caption",
-      children: d
+      children: i
     })
-  }) : null, w = l ? /* @__PURE__ */ a(f, { children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ a(i, {
+  }) : null, T = l ? /* @__PURE__ */ a(g, { children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ a(d, {
     sx: {
       alignItems: "center",
       bgcolor: o ? "background.paper" : "background.default",
@@ -64,15 +64,15 @@ var S = (n) => n === "primary" ? {
       variant: "body2",
       children: l.amount
     })]
-  })] }) : null, R = /* @__PURE__ */ r(i, {
+  })] }) : null, k = /* @__PURE__ */ r(d, {
     role: "list",
     sx: { width: "100%" },
-    children: x.map((h, b) => /* @__PURE__ */ a(T, { children: [b > 0 && /* @__PURE__ */ r(u, { role: "presentation" }), /* @__PURE__ */ r(g, {
+    children: x.map((p, f) => /* @__PURE__ */ a(L, { children: [f > 0 && /* @__PURE__ */ r(u, { role: "presentation" }), /* @__PURE__ */ r(B, {
       role: "listitem",
-      children: /* @__PURE__ */ r(k, { ...h })
-    })] }, b))
+      children: /* @__PURE__ */ r(I, { ...p })
+    })] }, f))
   });
-  return /* @__PURE__ */ a(i, {
+  return /* @__PURE__ */ a(d, {
     "data-testid": "transaction-list-card",
     sx: {
       ...o ? {
@@ -84,10 +84,10 @@ var S = (n) => n === "primary" ? {
       },
       ...o && c ? { position: "relative" } : {},
       width: "100%",
-      ...C
+      ...w
     },
     children: [
-      o && c && /* @__PURE__ */ r(g, {
+      o && c && /* @__PURE__ */ r(B, {
         sx: {
           left: 16,
           position: "absolute",
@@ -96,23 +96,23 @@ var S = (n) => n === "primary" ? {
         },
         children: c
       }),
-      !s && p && /* @__PURE__ */ r(i, {
+      !s && h && /* @__PURE__ */ r(d, {
         sx: {
           borderTopLeftRadius: t,
           borderTopRightRadius: t,
           overflow: "hidden"
         },
-        children: p
+        children: h
       }),
-      /* @__PURE__ */ a(i, {
+      /* @__PURE__ */ a(d, {
         sx: {
           ...o ? {
             bgcolor: "background.paper",
-            ...B && {
-              backgroundImage: (h) => h.vars?.overlays?.[1] ?? "none",
-              boxShadow: I[1]
-            },
             ...y && {
+              backgroundImage: (p) => p.vars?.overlays?.[1] ?? "none",
+              boxShadow: S[1]
+            },
+            ...v && {
               border: "1px solid",
               borderColor: "divider",
               boxShadow: 1
@@ -123,22 +123,22 @@ var S = (n) => n === "primary" ? {
           },
           borderBottomLeftRadius: t,
           borderBottomRightRadius: t,
-          borderTopLeftRadius: s || !d ? t : 0,
-          borderTopRightRadius: s || !d ? t : 0,
+          borderTopLeftRadius: s || !i ? t : 0,
+          borderTopRightRadius: s || !i ? t : 0,
           overflow: "hidden",
           width: "100%"
         },
         children: [
-          s && /* @__PURE__ */ a(f, { children: [p, /* @__PURE__ */ r(u, {})] }),
-          R,
-          w
+          s && /* @__PURE__ */ a(g, { children: [h, /* @__PURE__ */ r(u, {})] }),
+          k,
+          T
         ]
       })
     ]
   });
 };
 export {
-  V as default
+  N as default
 };
 
 //# sourceMappingURL=TransactionListCard.es.js.map

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, Theme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport InsightTransactionRow, { type InsightTransactionRowProps } from './InsightTransactionRow'\nimport { ELEVATION_SHADOW } from './shared/elevation'\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), unless `raised`.\n   */\n  background?: string\n  /** Status disc over the card's corner (needs `background`). */\n  badge?: ReactNode\n  /** Card at elevation/1 on the wash; not with `raised` (its shadow wins). */\n  elevated?: boolean\n  /** Border and shadow on the inner card; only with `background` (Figma Transaction Row). */\n  raised?: boolean\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  badge,\n  elevated = false,\n  footer,\n  header,\n  raised = false,\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      data-testid=\"transaction-list-card\"\n      sx={{\n        ...(hasBackground ? { background, p: 16 } : { pt: 8, px: 16 }),\n        ...(hasBackground && badge ? { position: 'relative' } : {}),\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {hasBackground &&\n        badge && (\n          // Centred on the card's top-left corner.\n          <Box sx={{ left: 16, position: 'absolute', top: 12, zIndex: 1 }}>{badge}</Box>\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            ? {\n                bgcolor: 'background.paper',\n                // elevation/1 shadow plus the dark-mode tint.\n                ...(elevated && {\n                  backgroundImage: (theme: Theme) => theme.vars?.overlays?.[1] ?? 'none',\n                  boxShadow: ELEVATION_SHADOW[1],\n                }),\n                ...(raised && { border: '1px solid', borderColor: 'divider', boxShadow: 1 }),\n              }\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, Theme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport InsightTransactionRow, { type InsightTransactionRowProps } from './InsightTransactionRow'\nimport { ELEVATION_SHADOW } from './shared/elevation'\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  /** Theme colour for the header label, over the variant's own. */\n  headerColor?: string\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), unless `raised`.\n   */\n  background?: string\n  /** Status disc over the card's corner (needs `background`). */\n  badge?: ReactNode\n  /** Card at elevation/1 on the wash; not with `raised` (its shadow wins). */\n  elevated?: boolean\n  /** Border and shadow on the inner card; only with `background` (Figma Transaction Row). */\n  raised?: boolean\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  badge,\n  elevated = false,\n  footer,\n  header,\n  headerColor,\n  raised = false,\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 headerTextColor =\n    variant === 'default' ? (headerColor ?? styles.headerColor) : styles.headerColor\n\n  const headerBlock = header ? (\n    <Stack sx={{ bgcolor: styles.headerBg, justifyContent: 'center', ...styles.headerSx }}>\n      <Text bold={styles.headerBold} color={headerTextColor} 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      data-testid=\"transaction-list-card\"\n      sx={{\n        ...(hasBackground ? { background, p: 16 } : { pt: 8, px: 16 }),\n        ...(hasBackground && badge ? { position: 'relative' } : {}),\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {hasBackground &&\n        badge && (\n          // Centred on the card's top-left corner.\n          <Box sx={{ left: 16, position: 'absolute', top: 12, zIndex: 1 }}>{badge}</Box>\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            ? {\n                bgcolor: 'background.paper',\n                // elevation/1 shadow plus the dark-mode tint.\n                ...(elevated && {\n                  backgroundImage: (theme: Theme) => theme.vars?.overlays?.[1] ?? 'none',\n                  boxShadow: ELEVATION_SHADOW[1],\n                }),\n                ...(raised && { border: '1px solid', borderColor: 'divider', boxShadow: 1 }),\n              }\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.7.92",
+  "version": "9.7.94",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",