@mx-cartographer/experiences 9.6.14 → 9.6.15

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [9.6.15] - 10-15-2026
+
+- **ADDED** - `debts_block` `debt_summary` variant for the Debt Payoff Strategies beat when it spans several accounts (the architecture doc's Debts "Debt Summary" branch): a `TransactionListCard` on a primary-tinted slot with one row per debt account from `instance_slot.data.series` (pre-localized `logo`, `primary_text` name, `secondary_text` rate, `amount` balance, in the order sent; a row without a name is dropped), an optional `header_text`, and the total owed (`amount`) as the footer under a new optional `insights_feed.debts_block.total_balance_label` caption. With no rows the block renders nothing. Stories, fixtures and tests (WEC-1311)
+- **CHANGED** - `DebtsBlock` now resolves its card per `instance_slot.variant` through a `layout.ts` table and `resolveVariantConfig` (the `AccountBlock` pattern; an unknown variant warns and renders the payoff card). Each variant needs only its own copy keys, so a host that has shipped the payoff labels but not `total_balance_label` keeps the payoff card intact. `projected_payoff` still reads its facts flat on `instance_slot` and renders exactly as before (WEC-1311)
+
 ## [9.6.14] - 10-15-2026
 
 - **ADDED** - `onAnalyticsEvent` callback on `BeatActions` (WEC-1849)

package/dist/core/types/localization/InsightsFeedCopy.d.ts

@@ -251,6 +251,8 @@ export interface DebtsBlockCopy {
     payoff_date_label: string;
     monthly_payment_label: string;
     interest_rate_label: string;
+    /** Footer caption for the `debt_summary` total, e.g. "Total balance". Optional until the service ships it. */
+    total_balance_label?: string;
 }
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;

package/dist/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.d.ts

@@ -1,24 +1,28 @@
 import { InsightsPayload } from '../../../../core';
-import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+export { PAYOFF_STYLE } from './layout';
 interface DebtsBlockProps {
     payload: InsightsPayload;
     beatGuid?: string;
 }
-/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */
-export declare const PAYOFF_STYLE: DebtPayoffCardStyleProps;
 /**
  * Debts component block — the content card for the Debt Payoff Strategies beat.
+ * `instance_slot.variant` picks the card from `./layout.ts` through `resolveVariantConfig`, as
+ * `AccountBlock` does:
  *
- * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):
- * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared
- * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which
- * ships separately: until it has, the card shows the account row only (never an unlabelled number)
- * and warns once per mount so the rollout gap is traceable.
+ * - `projected_payoff` — one account on the `DebtPayoffCard`. Its facts arrive flat on
+ *   `instance_slot` (the shape it shipped with): the balance (`amount`), `payoff_date`,
+ *   `monthly_payment`, `interest_rate`, plus the shared account/institution fields.
+ * - `debt_summary` — the beat's several debt accounts on a `TransactionListCard`, read from
+ *   `instance_slot.data`: one row per account from `series` (pre-localized `logo`, `primary_text`
+ *   name, `secondary_text` rate, `amount` balance, in the order sent), an optional `header_text`,
+ *   and the total owed (`amount`) as the footer. With no rows there is nothing to summarize and the
+ *   block renders nothing.
  *
- * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt
- * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant
- * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second
- * variant, not before.
+ * Captions and payoff row labels come from `insights_feed.debts_block` copy, which ships
+ * separately. Each variant needs only its own keys: until they have shipped, the card shows what
+ * needs no copy (the account row, the summary rows) but never an unlabelled figure, and warns once
+ * per mount so the rollout gap is traceable. A row with no value (or an unparseable date) is
+ * dropped rather than rendered blank.
  */
 declare const DebtsBlock: ({ payload }: DebtsBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default DebtsBlock;

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

@@ -1,56 +1,77 @@
-import { DATE_FORMATS_INTL as y, formatDate as h } from "../../../../core/constants/DateFormats.es.js";
-import { useGlobalCopyStore as v } from "../../../../common/context/hooks.es.js";
-import { formatCurrency as _, formatPercentage as g } from "../../../../core/utils/NumberFormatting.es.js";
-import { DepositLogo as D } from "../../../components/ComponentBlocks/DepositLogo.es.js";
-import T from "../../../components/DebtPayoffCard.es.js";
-import { parseDueDate as C } from "../UpcomingBillBlock/UpcomingBillBlock.es.js";
-import L from "react";
-import { jsx as b } from "react/jsx-runtime";
-var A = {
-  bgcolor: "primary.lighter",
-  pill: {
-    bgcolor: "primary.lighter",
-    labelColor: "text.primary"
-  }
-}, E = /* @__PURE__ */ new Set([
+import { DATE_FORMATS_INTL as R, formatDate as k } from "../../../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as F } from "../../../../common/context/hooks.es.js";
+import { slot as f } from "../../../../core/types/Insights.es.js";
+import { formatCurrency as i, formatPercentage as N } from "../../../../core/utils/NumberFormatting.es.js";
+import P from "../../../components/LogoFromGuid.es.js";
+import { DepositLogo as B } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import { resolveVariantConfig as Y } from "../../resolveVariantConfig.es.js";
+import G from "../../../components/DebtPayoffCard.es.js";
+import j from "../../../components/TransactionListCard.es.js";
+import { parseDueDate as I } from "../UpcomingBillBlock/UpcomingBillBlock.es.js";
+import { DEBTS_LAYOUT as H, debtsBlockVariant as M } from "./layout.es.js";
+import V from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useTheme as z } from "@mui/material/styles";
+var U = 32, W = /* @__PURE__ */ new Set([
   "credit card",
   "credit_card",
   "creditcard"
-]), R = (e) => E.has((e ?? "").trim().toLowerCase()) ? "credit_card" : "account_balance", S = (e) => !!e?.balance_label && !!e.payoff_date_label && !!e.monthly_payment_label && !!e.interest_rate_label, B = ({ payload: e }) => {
-  const a = v().insights_feed?.debts_block, t = S(a) ? a : void 0, { account_name: u, account_type: l, amount: r, institution_guid: f, institution_name: p, interest_rate: n, monthly_payment: i, payoff_date: s, status_text: d } = e.instance_slot;
-  L.useEffect(() => {
-    t || console.warn(`debts_block: ${a ? "copy incomplete" : "copy namespace missing"}; rendering the account row only`);
-  }, [a, t]);
-  const c = s ? C(s) : null, o = [];
-  t && c && o.push({
-    label: t.payoff_date_label,
-    value: h(c, y.MONTH_SHORT_YEAR)
-  }), t && i != null && o.push({
-    label: t.monthly_payment_label,
-    value: _(i, "0,0.00")
-  }), t && n != null && o.push({
-    label: t.interest_rate_label,
-    value: g(n / 100)
-  });
-  const m = t !== void 0 && r != null;
-  return /* @__PURE__ */ b(T, {
-    ...A,
-    balance: m ? _(r, "0,0.00") : void 0,
-    balanceLabel: m ? t.balance_label : void 0,
-    logo: /* @__PURE__ */ b(D, {
-      iconName: R(l),
-      institutionGuid: f ?? "",
-      institutionName: p ?? ""
+]), Z = (t) => W.has((t ?? "").trim().toLowerCase()) ? "credit_card" : "account_balance", $ = (t) => typeof t == "object" && t !== null && typeof t.primary_text == "string", q = (t) => !!t?.balance_label && !!t.payoff_date_label && !!t.monthly_payment_label && !!t.interest_rate_label, ct = ({ payload: t }) => {
+  const T = z(), o = F().insights_feed?.debts_block, { instance_slot: u } = t, { data: s, variant: A } = u, _ = Y(H, A, M.ProjectedPayoff, "DebtsBlock"), p = _.card === "summary", e = q(o) ? o : void 0, m = o?.total_balance_label, b = p ? !!m : !!e;
+  if (V.useEffect(() => {
+    b || console.warn(`debts_block: ${o ? "copy incomplete" : "copy namespace missing"}; rendering without its labelled figures`);
+  }, [o, b]), p) {
+    const r = f(s, "series"), O = (Array.isArray(r) ? r : []).filter($).map((a) => ({
+      amount: typeof a.amount == "number" ? i(a.amount, "0,0.00") : "",
+      leading: /* @__PURE__ */ l(P, {
+        logo: a.logo,
+        size: U
+      }),
+      subtitle: typeof a.secondary_text == "string" ? a.secondary_text : "",
+      title: a.primary_text
+    })), L = f(s, "header_text"), c = f(s, "amount");
+    return /* @__PURE__ */ l(j, {
+      background: T.palette.primary.lighter,
+      footer: m && typeof c == "number" && Number.isFinite(c) ? {
+        amount: i(c, "0,0.00"),
+        label: m
+      } : void 0,
+      header: typeof L == "string" ? L : void 0,
+      rows: O
+    });
+  }
+  const { account_name: C, account_type: d, amount: y, institution_guid: S, institution_name: x, interest_rate: g, monthly_payment: h, payoff_date: v, status_text: E } = u, n = [];
+  if (e) {
+    const r = v ? I(v) : null;
+    r && n.push({
+      label: e.payoff_date_label,
+      value: k(r, R.MONTH_SHORT_YEAR)
+    }), h != null && n.push({
+      label: e.monthly_payment_label,
+      value: i(h, "0,0.00")
+    }), g != null && n.push({
+      label: e.interest_rate_label,
+      value: N(g / 100)
+    });
+  }
+  const D = e !== void 0 && y != null;
+  return /* @__PURE__ */ l(G, {
+    ..._.style,
+    balance: D ? i(y, "0,0.00") : void 0,
+    balanceLabel: D ? e.balance_label : void 0,
+    logo: /* @__PURE__ */ l(B, {
+      iconName: Z(d),
+      institutionGuid: S ?? "",
+      institutionName: x ?? ""
     }),
-    name: u,
-    stats: o,
-    statusLabel: d,
-    subtitle: l
+    name: C,
+    stats: n,
+    statusLabel: E,
+    subtitle: d
   });
 };
 export {
-  A as PAYOFF_STYLE,
-  B as default
+  ct as default
 };
 
 //# sourceMappingURL=DebtsBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DebtsBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport type { InsightsPayload } from '../../../../core'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DebtsBlockCopy } from '../../../../core/types/localization/InsightsFeedCopy'\nimport { formatCurrency, formatPercentage } from '../../../../core/utils/NumberFormatting'\n\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\nimport DebtPayoffCard, {\n  type DebtPayoffCardStyleProps,\n  type DebtPayoffStat,\n} from '../../../components/DebtPayoffCard'\nimport { parseDueDate } from '../UpcomingBillBlock/UpcomingBillBlock'\n\ninterface DebtsBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */\nexport const PAYOFF_STYLE: DebtPayoffCardStyleProps = {\n  bgcolor: 'primary.lighter',\n  pill: { bgcolor: 'primary.lighter', labelColor: 'text.primary' },\n}\n\n/** Account types drawn with the card glyph when there is no institution logo; the rest get the bank. */\nconst CREDIT_CARD_TYPES = new Set(['credit card', 'credit_card', 'creditcard'])\n\nconst iconFor = (accountType?: string) =>\n  CREDIT_CARD_TYPES.has((accountType ?? '').trim().toLowerCase())\n    ? 'credit_card'\n    : 'account_balance'\n\n/** Every label the card renders; a partial namespace counts as missing. */\nconst hasAllLabels = (copy?: DebtsBlockCopy): copy is DebtsBlockCopy =>\n  !!copy?.balance_label &&\n  !!copy.payoff_date_label &&\n  !!copy.monthly_payment_label &&\n  !!copy.interest_rate_label\n\n/**\n * Debts component block — the content card for the Debt Payoff Strategies beat.\n *\n * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):\n * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared\n * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which\n * ships separately: until it has, the card shows the account row only (never an unlabelled number)\n * and warns once per mount so the rollout gap is traceable.\n *\n * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt\n * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant\n * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second\n * variant, not before.\n */\nconst DebtsBlock = ({ payload }: DebtsBlockProps) => {\n  const copy = useGlobalCopyStore().insights_feed?.debts_block\n  const labels = hasAllLabels(copy) ? copy : undefined\n  const {\n    account_name,\n    account_type,\n    amount,\n    institution_guid,\n    institution_name,\n    interest_rate,\n    monthly_payment,\n    payoff_date,\n    status_text,\n  } = payload.instance_slot\n\n  React.useEffect(() => {\n    if (labels) return\n    console.warn(\n      `debts_block: ${copy ? 'copy incomplete' : 'copy namespace missing'}; rendering the account row only`,\n    )\n  }, [copy, labels])\n\n  // A row with no value (or an unparseable date) is dropped rather than rendered blank.\n  const payoffDate = payoff_date ? parseDueDate(payoff_date) : null\n  const stats: DebtPayoffStat[] = []\n  if (labels && payoffDate) {\n    stats.push({\n      label: labels.payoff_date_label,\n      value: formatDate(payoffDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n    })\n  }\n  if (labels && monthly_payment != null) {\n    stats.push({\n      label: labels.monthly_payment_label,\n      value: formatCurrency(monthly_payment, '0,0.00'),\n    })\n  }\n  if (labels && interest_rate != null) {\n    // `interest_rate` arrives as a percentage (19.99); Intl's percent style expects a fraction.\n    stats.push({ label: labels.interest_rate_label, value: formatPercentage(interest_rate / 100) })\n  }\n\n  const hasBalance = labels !== undefined && amount != null\n\n  return (\n    <DebtPayoffCard\n      {...PAYOFF_STYLE}\n      balance={hasBalance ? formatCurrency(amount, '0,0.00') : undefined}\n      balanceLabel={hasBalance ? labels.balance_label : undefined}\n      logo={\n        <DepositLogo\n          iconName={iconFor(account_type)}\n          institutionGuid={institution_guid ?? ''}\n          institutionName={institution_name ?? ''}\n        />\n      }\n      name={account_name}\n      stats={stats}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DebtsBlock\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,IAAE,SAAS;AAAA,IAAmB,YAAY;AAAA,EAAe;AACjE,GAGM,IAAoB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAe;AAAA,EAAe;AAAY,CAAC,GAExE,IAAA,CAAW,MACf,EAAkB,KAAK,KAAe,IAAI,KAAK,EAAE,YAAY,CAAC,IAC1D,gBACA,mBAGA,IAAA,CAAgB,MACpB,CAAC,CAAC,GAAM,iBACR,CAAC,CAAC,EAAK,qBACP,CAAC,CAAC,EAAK,yBACP,CAAC,CAAC,EAAK,qBAgBH,IAAA,CAAc,EAAE,SAAA,EAAA,MAA+B;AACnD,QAAM,IAAO,EAAmB,EAAE,eAAe,aAC3C,IAAS,EAAa,CAAI,IAAI,IAAO,QACrC,EACJ,cAAA,GACA,cAAA,GACA,QAAA,GACA,kBAAA,GACA,kBAAA,GACA,eAAA,GACA,iBAAA,GACA,aAAA,GACA,aAAA,EAAA,IACE,EAAQ;AAEZ,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,KACJ,QAAQ,KACN,gBAAgB,IAAO,oBAAoB,wBAAA,kCAC7C;AAAA,EACF,GAAG,CAAC,GAAM,CAAM,CAAC;AAGjB,QAAM,IAAa,IAAc,EAAa,CAAW,IAAI,MACvD,IAA0B,CAAC;AACjC,EAAI,KAAU,KACZ,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAW,GAAY,EAAkB,gBAAgB;AAAA,EAClE,CAAC,GAEC,KAAU,KAAmB,QAC/B,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAe,GAAiB,QAAQ;AAAA,EACjD,CAAC,GAEC,KAAU,KAAiB,QAE7B,EAAM,KAAK;AAAA,IAAE,OAAO,EAAO;AAAA,IAAqB,OAAO,EAAiB,IAAgB,GAAG;AAAA,EAAE,CAAC;AAGhG,QAAM,IAAa,MAAW,UAAa,KAAU;AAErD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,SAAS,IAAa,EAAe,GAAQ,QAAQ,IAAI;AAAA,IACzD,cAAc,IAAa,EAAO,gBAAgB;AAAA,IAClD,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU,EAAQ,CAAY;AAAA,MAC9B,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACC,OAAA;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}
+{"version":3,"file":"DebtsBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { slot, type InsightsPayload, type InstanceSlotRow } from '../../../../core'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DebtsBlockCopy } from '../../../../core/types/localization/InsightsFeedCopy'\nimport { formatCurrency, formatPercentage } from '../../../../core/utils/NumberFormatting'\n\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\nimport DebtPayoffCard, { type DebtPayoffStat } from '../../../components/DebtPayoffCard'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { parseDueDate } from '../UpcomingBillBlock/UpcomingBillBlock'\n\nimport { DEBTS_LAYOUT, debtsBlockVariant } from './layout'\n\n// The card story reads the block's look from here.\nexport { PAYOFF_STYLE } from './layout'\n\ninterface DebtsBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n\n/** Account types drawn with the card glyph when there is no institution logo; the rest get the bank. */\nconst CREDIT_CARD_TYPES = new Set(['credit card', 'credit_card', 'creditcard'])\n\nconst iconFor = (accountType?: string) =>\n  CREDIT_CARD_TYPES.has((accountType ?? '').trim().toLowerCase())\n    ? 'credit_card'\n    : 'account_balance'\n\n/** A summary row ditto can draw: an object with a name. Anything else in `series` is skipped. */\nconst isNamedRow = (row: unknown): row is InstanceSlotRow & { primary_text: string } =>\n  typeof row === 'object' &&\n  row !== null &&\n  typeof (row as InstanceSlotRow).primary_text === 'string'\n\n/** Every label the payoff card renders; a partial namespace counts as missing. */\nconst hasAllLabels = (copy?: DebtsBlockCopy): copy is DebtsBlockCopy =>\n  !!copy?.balance_label &&\n  !!copy.payoff_date_label &&\n  !!copy.monthly_payment_label &&\n  !!copy.interest_rate_label\n\n/**\n * Debts component block — the content card for the Debt Payoff Strategies beat.\n * `instance_slot.variant` picks the card from `./layout.ts` through `resolveVariantConfig`, as\n * `AccountBlock` does:\n *\n * - `projected_payoff` — one account on the `DebtPayoffCard`. Its facts arrive flat on\n *   `instance_slot` (the shape it shipped with): the balance (`amount`), `payoff_date`,\n *   `monthly_payment`, `interest_rate`, plus the shared account/institution fields.\n * - `debt_summary` — the beat's several debt accounts on a `TransactionListCard`, read from\n *   `instance_slot.data`: one row per account from `series` (pre-localized `logo`, `primary_text`\n *   name, `secondary_text` rate, `amount` balance, in the order sent), an optional `header_text`,\n *   and the total owed (`amount`) as the footer. With no rows there is nothing to summarize and the\n *   block renders nothing.\n *\n * Captions and payoff row labels come from `insights_feed.debts_block` copy, which ships\n * separately. Each variant needs only its own keys: until they have shipped, the card shows what\n * needs no copy (the account row, the summary rows) but never an unlabelled figure, and warns once\n * per mount so the rollout gap is traceable. A row with no value (or an unparseable date) is\n * dropped rather than rendered blank.\n */\nconst DebtsBlock = ({ payload }: DebtsBlockProps) => {\n  const theme = useTheme()\n  const copy = useGlobalCopyStore().insights_feed?.debts_block\n  const { instance_slot } = payload\n  const { data, variant } = instance_slot\n\n  const layout = resolveVariantConfig(\n    DEBTS_LAYOUT,\n    variant,\n    debtsBlockVariant.ProjectedPayoff,\n    'DebtsBlock',\n  )\n  const isSummary = layout.card === 'summary'\n\n  const labels = hasAllLabels(copy) ? copy : undefined\n  const totalLabel = copy?.total_balance_label\n  const hasCopy = isSummary ? !!totalLabel : !!labels\n\n  React.useEffect(() => {\n    if (hasCopy) return\n    console.warn(\n      `debts_block: ${copy ? 'copy incomplete' : 'copy namespace missing'}; rendering without its labelled figures`,\n    )\n  }, [copy, hasCopy])\n\n  if (isSummary) {\n    // `slot()` is an unchecked cast over backend data, so every value is narrowed before use.\n    const series = slot<unknown[]>(data, 'series')\n    const rows = (Array.isArray(series) ? series : []).filter(isNamedRow).map((row) => ({\n      amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n      leading: <LogoFromGuid logo={row.logo} size={ROW_LOGO_SIZE} />,\n      subtitle: typeof row.secondary_text === 'string' ? row.secondary_text : '',\n      title: row.primary_text,\n    }))\n    const header = slot<unknown>(data, 'header_text')\n    const total = slot<unknown>(data, 'amount')\n\n    return (\n      <TransactionListCard\n        background={theme.palette.primary.lighter}\n        footer={\n          totalLabel && typeof total === 'number' && Number.isFinite(total)\n            ? { amount: formatCurrency(total, '0,0.00'), label: totalLabel }\n            : undefined\n        }\n        header={typeof header === 'string' ? header : undefined}\n        rows={rows}\n      />\n    )\n  }\n\n  const {\n    account_name,\n    account_type,\n    amount,\n    institution_guid,\n    institution_name,\n    interest_rate,\n    monthly_payment,\n    payoff_date,\n    status_text,\n  } = instance_slot\n\n  const stats: DebtPayoffStat[] = []\n  if (labels) {\n    const payoffDate = payoff_date ? parseDueDate(payoff_date) : null\n    if (payoffDate) {\n      stats.push({\n        label: labels.payoff_date_label,\n        value: formatDate(payoffDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n      })\n    }\n    if (monthly_payment != null) {\n      stats.push({\n        label: labels.monthly_payment_label,\n        value: formatCurrency(monthly_payment, '0,0.00'),\n      })\n    }\n    if (interest_rate != null) {\n      // `interest_rate` arrives as a percentage (19.99); Intl's percent style expects a fraction.\n      stats.push({\n        label: labels.interest_rate_label,\n        value: formatPercentage(interest_rate / 100),\n      })\n    }\n  }\n\n  const hasBalance = labels !== undefined && amount != null\n\n  return (\n    <DebtPayoffCard\n      {...layout.style}\n      balance={hasBalance ? formatCurrency(amount, '0,0.00') : undefined}\n      balanceLabel={hasBalance ? labels.balance_label : undefined}\n      logo={\n        <DepositLogo\n          iconName={iconFor(account_type)}\n          institutionGuid={institution_guid ?? ''}\n          institutionName={institution_name ?? ''}\n        />\n      }\n      name={account_name}\n      stats={stats}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DebtsBlock\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,IAAgB,IAGhB,IAAoB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAe;AAAA,EAAe;AAAY,CAAC,GAExE,IAAA,CAAW,MACf,EAAkB,KAAK,KAAe,IAAI,KAAK,EAAE,YAAY,CAAC,IAC1D,gBACA,mBAGA,IAAA,CAAc,MAClB,OAAO,KAAQ,YACf,MAAQ,QACR,OAAQ,EAAwB,gBAAiB,UAG7C,IAAA,CAAgB,MACpB,CAAC,CAAC,GAAM,iBACR,CAAC,CAAC,EAAK,qBACP,CAAC,CAAC,EAAK,yBACP,CAAC,CAAC,EAAK,qBAsBH,KAAA,CAAc,EAAE,SAAA,EAAA,MAA+B;AACnD,QAAM,IAAQ,EAAS,GACjB,IAAO,EAAmB,EAAE,eAAe,aAC3C,EAAE,eAAA,EAAA,IAAkB,GACpB,EAAE,MAAA,GAAM,SAAA,EAAA,IAAY,GAEpB,IAAS,EACb,GACA,GACA,EAAkB,iBAClB,YACF,GACM,IAAY,EAAO,SAAS,WAE5B,IAAS,EAAa,CAAI,IAAI,IAAO,QACrC,IAAa,GAAM,qBACnB,IAAU,IAAY,CAAC,CAAC,IAAa,CAAC,CAAC;AAS7C,MAPA,EAAM,UAAA,MAAgB;AACpB,IAAI,KACJ,QAAQ,KACN,gBAAgB,IAAO,oBAAoB,wBAAA,0CAC7C;AAAA,EACF,GAAG,CAAC,GAAM,CAAO,CAAC,GAEd,GAAW;AAEb,UAAM,IAAS,EAAgB,GAAM,QAAQ,GACvC,KAAQ,MAAM,QAAQ,CAAM,IAAI,IAAS,CAAC,GAAG,OAAO,CAAU,EAAE,IAAA,CAAK,OAAS;AAAA,MAClF,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,gBAAA,EAAC,GAAD;AAAA,QAAc,MAAM,EAAI;AAAA,QAAM,MAAM;AAAA,MAAgB,CAAA;AAAA,MAC7D,UAAU,OAAO,EAAI,kBAAmB,WAAW,EAAI,iBAAiB;AAAA,MACxE,OAAO,EAAI;AAAA,IACb,EAAE,GACI,IAAS,EAAc,GAAM,aAAa,GAC1C,IAAQ,EAAc,GAAM,QAAQ;AAE1C,WACE,gBAAA,EAAC,GAAD;AAAA,MACE,YAAY,EAAM,QAAQ,QAAQ;AAAA,MAClC,QACE,KAAc,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,IAC5D;AAAA,QAAE,QAAQ,EAAe,GAAO,QAAQ;AAAA,QAAG,OAAO;AAAA,MAAW,IAC7D;AAAA,MAEN,QAAQ,OAAO,KAAW,WAAW,IAAS;AAAA,MACxC,MAAA;AAAA,IACP,CAAA;AAAA,EAEL;AAEA,QAAM,EACJ,cAAA,GACA,cAAA,GACA,QAAA,GACA,kBAAA,GACA,kBAAA,GACA,eAAA,GACA,iBAAA,GACA,aAAA,GACA,aAAA,EAAA,IACE,GAEE,IAA0B,CAAC;AACjC,MAAI,GAAQ;AACV,UAAM,IAAa,IAAc,EAAa,CAAW,IAAI;AAC7D,IAAI,KACF,EAAM,KAAK;AAAA,MACT,OAAO,EAAO;AAAA,MACd,OAAO,EAAW,GAAY,EAAkB,gBAAgB;AAAA,IAClE,CAAC,GAEC,KAAmB,QACrB,EAAM,KAAK;AAAA,MACT,OAAO,EAAO;AAAA,MACd,OAAO,EAAe,GAAiB,QAAQ;AAAA,IACjD,CAAC,GAEC,KAAiB,QAEnB,EAAM,KAAK;AAAA,MACT,OAAO,EAAO;AAAA,MACd,OAAO,EAAiB,IAAgB,GAAG;AAAA,IAC7C,CAAC;AAAA,EAEL;AAEA,QAAM,IAAa,MAAW,UAAa,KAAU;AAErD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI,EAAO;AAAA,IACX,SAAS,IAAa,EAAe,GAAQ,QAAQ,IAAI;AAAA,IACzD,cAAc,IAAa,EAAO,gBAAgB;AAAA,IAClD,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU,EAAQ,CAAY;AAAA,MAC9B,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACC,OAAA;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}

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

@@ -0,0 +1,17 @@
+import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+export declare const debtsBlockVariant: {
+    /** Debt Payoff Strategies, one account: balance plus projected payoff / monthly payment / rate rows. */
+    readonly ProjectedPayoff: "projected_payoff";
+    /** Debt Payoff Strategies, several accounts: one row per debt (balance, rate) and the total owed. */
+    readonly DebtSummary: "debt_summary";
+};
+export type DebtsBlockVariant = (typeof debtsBlockVariant)[keyof typeof debtsBlockVariant];
+export interface DebtsBlockLayoutConfig {
+    /** Which card the variant draws: the single-account payoff card or the multi-account summary list. */
+    card: 'payoff' | 'summary';
+    /** Payoff card slot + pill tokens. */
+    style?: DebtPayoffCardStyleProps;
+}
+/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */
+export declare const PAYOFF_STYLE: DebtPayoffCardStyleProps;
+export declare const DEBTS_LAYOUT: Record<string, DebtsBlockLayoutConfig>;

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

@@ -0,0 +1,24 @@
+var r = {
+  ProjectedPayoff: "projected_payoff",
+  DebtSummary: "debt_summary"
+}, e = {
+  bgcolor: "primary.lighter",
+  pill: {
+    bgcolor: "primary.lighter",
+    labelColor: "text.primary"
+  }
+}, a = {
+  card: "payoff",
+  style: e
+}, o = {
+  [r.ProjectedPayoff]: a,
+  [r.DebtSummary]: { card: "summary" },
+  default: a
+};
+export {
+  o as DEBTS_LAYOUT,
+  e as PAYOFF_STYLE,
+  r as debtsBlockVariant
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/layout.ts"],"sourcesContent":["import type { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard'\n\nexport const debtsBlockVariant = {\n  /** Debt Payoff Strategies, one account: balance plus projected payoff / monthly payment / rate rows. */\n  ProjectedPayoff: 'projected_payoff',\n  /** Debt Payoff Strategies, several accounts: one row per debt (balance, rate) and the total owed. */\n  DebtSummary: 'debt_summary',\n} as const\n\nexport type DebtsBlockVariant = (typeof debtsBlockVariant)[keyof typeof debtsBlockVariant]\n\nexport interface DebtsBlockLayoutConfig {\n  /** Which card the variant draws: the single-account payoff card or the multi-account summary list. */\n  card: 'payoff' | 'summary'\n  /** Payoff card slot + pill tokens. */\n  style?: DebtPayoffCardStyleProps\n}\n\n/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */\nexport const PAYOFF_STYLE: DebtPayoffCardStyleProps = {\n  bgcolor: 'primary.lighter',\n  pill: { bgcolor: 'primary.lighter', labelColor: 'text.primary' },\n}\n\nconst PROJECTED_PAYOFF: DebtsBlockLayoutConfig = { card: 'payoff', style: PAYOFF_STYLE }\n\nexport const DEBTS_LAYOUT: Record<string, DebtsBlockLayoutConfig> = {\n  [debtsBlockVariant.ProjectedPayoff]: PROJECTED_PAYOFF,\n  [debtsBlockVariant.DebtSummary]: { card: 'summary' },\n  // Neutral fallback for an unknown variant: the payoff card. `resolveVariantConfig` warns first.\n  default: PROJECTED_PAYOFF,\n}\n"],"mappings":"AAEA,IAAa,IAAoB;AAAA,EAE/B,iBAAiB;AAAA,EAEjB,aAAa;AACf,GAYa,IAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,IAAE,SAAS;AAAA,IAAmB,YAAY;AAAA,EAAe;AACjE,GAEM,IAA2C;AAAA,EAAE,MAAM;AAAA,EAAU,OAAO;AAAa,GAE1E,IAAuD;AAAA,EACjE,CAAA,EAAkB,eAAA,GAAkB;AAAA,EACpC,CAAA,EAAkB,WAAA,GAAc,EAAE,MAAM,UAAU;AAAA,EAEnD,SAAS;AACX"}

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

@@ -2,7 +2,7 @@ import C from "./InsightTransactionRow.es.js";
 import { Fragment as R } from "react";
 import t from "@mui/material/Stack";
 import { Text as h } from "@mxenabled/mxui";
-import { Fragment as x, jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Fragment as x, jsx as r, jsxs as a } from "react/jsx-runtime";
 import v from "@mui/material/Box";
 import p from "@mui/material/Divider";
 var w = (n) => n === "primary" ? {
@@ -29,9 +29,9 @@ var w = (n) => n === "primary" ? {
     px: 16,
     py: 2
   }
-}, H = ({ background: n, footer: l, header: i, rows: m, variant: g = "default", sx: b }) => {
+}, H = ({ background: n, footer: l, header: d, rows: m, variant: g = "default", sx: b }) => {
   if (m.length === 0) return null;
-  const e = w(g), a = !!n, o = a ? "8px" : e.radius, s = !!i && !a && e.headerInsideBorder, c = i ? /* @__PURE__ */ r(t, {
+  const e = w(g), i = !!n, o = i ? "8px" : e.radius, s = !!d && !i && e.headerInsideBorder, c = d ? /* @__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: i
+      children: d
     })
-  }) : null, f = l ? /* @__PURE__ */ d(x, { children: [/* @__PURE__ */ r(p, {}), /* @__PURE__ */ d(t, {
+  }) : null, f = l ? /* @__PURE__ */ a(x, { children: [/* @__PURE__ */ r(p, {}), /* @__PURE__ */ a(t, {
     sx: {
       alignItems: "center",
-      bgcolor: a ? "background.paper" : "background.default",
+      bgcolor: i ? "background.paper" : "background.default",
       flexDirection: "row",
       justifyContent: "space-between",
       minHeight: 40,
@@ -66,14 +66,15 @@ var w = (n) => n === "primary" ? {
   })] }) : null, B = /* @__PURE__ */ r(t, {
     role: "list",
     sx: { width: "100%" },
-    children: m.map((y, u) => /* @__PURE__ */ d(R, { children: [u > 0 && /* @__PURE__ */ r(p, { role: "presentation" }), /* @__PURE__ */ r(v, {
+    children: m.map((y, u) => /* @__PURE__ */ a(R, { children: [u > 0 && /* @__PURE__ */ r(p, { role: "presentation" }), /* @__PURE__ */ r(v, {
       role: "listitem",
       children: /* @__PURE__ */ r(C, { ...y })
     })] }, u))
   });
-  return /* @__PURE__ */ d(t, {
+  return /* @__PURE__ */ a(t, {
+    "data-testid": "transaction-list-card",
     sx: {
-      ...a ? {
+      ...i ? {
         background: n,
         p: 16
       } : {
@@ -90,21 +91,21 @@ var w = (n) => n === "primary" ? {
         overflow: "hidden"
       },
       children: c
-    }), /* @__PURE__ */ d(t, {
+    }), /* @__PURE__ */ a(t, {
       sx: {
-        ...a ? { bgcolor: "background.paper" } : {
+        ...i ? { bgcolor: "background.paper" } : {
           border: "1px solid",
           borderColor: e.borderColor
         },
         borderBottomLeftRadius: o,
         borderBottomRightRadius: o,
-        borderTopLeftRadius: s || !i ? o : 0,
-        borderTopRightRadius: s || !i ? o : 0,
+        borderTopLeftRadius: s || !d ? o : 0,
+        borderTopRightRadius: s || !d ? o : 0,
         overflow: "hidden",
         width: "100%"
       },
       children: [
-        s && /* @__PURE__ */ d(x, { children: [c, /* @__PURE__ */ r(p, {})] }),
+        s && /* @__PURE__ */ a(x, { children: [c, /* @__PURE__ */ r(p, {})] }),
         B,
         f
       ]

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: '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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"}
+{"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      data-testid=\"transaction-list-card\"\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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"}

package/dist/insights-v2/index.es.js

@@ -24,15 +24,15 @@ import X from "./components/DirectDepositCard.es.js";
 import Z from "./blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js";
 import { BudgetBlock as oo } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
 import to from "./components/DebtPayoffCard.es.js";
-import io from "./components/UpcomingBillCard.es.js";
-import po from "./blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
-import eo from "./blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js";
-import co from "./components/SaveAnExtraCard.es.js";
-import so from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import Co from "./components/SavingsOpportunityCard.es.js";
-import uo from "./blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
-import So from "./components/InsightTransactionRow.es.js";
-import Do from "./components/TransactionListCard.es.js";
+import io from "./components/InsightTransactionRow.es.js";
+import po from "./components/TransactionListCard.es.js";
+import eo from "./components/UpcomingBillCard.es.js";
+import co from "./blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
+import so from "./blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js";
+import Co from "./components/SaveAnExtraCard.es.js";
+import uo from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import So from "./components/SavingsOpportunityCard.es.js";
+import Do from "./blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
 import { transactionBlockVariant as Ao } from "./blocks/ComponentBlocks/TransactionBlock/layout.es.js";
 import { TransactionBlock as Io } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
 import vo from "./components/AmountPill.es.js";
@@ -72,7 +72,7 @@ export {
   k as CompactInsightCard,
   Go as ConnectionDetailDrillDown,
   to as DebtPayoffCard,
-  eo as DebtsBlock,
+  so as DebtsBlock,
   _o as DesignateEmergencySavingsCard,
   Z as DirectDepositBlock,
   X as DirectDepositCard,
@@ -88,7 +88,7 @@ export {
   mr as HiddenConfirmationCard,
   h as InsightErrorCard,
   l as InsightOptionsMenu,
-  So as InsightTransactionRow,
+  io as InsightTransactionRow,
   ar as LoadingCard,
   Cr as LogoClusterCard,
   d as LogoFromGuid,
@@ -98,10 +98,10 @@ export {
   n as OverflowMenu,
   Sr as P2PLogoStack,
   Vo as SVGImageBlock,
-  co as SaveAnExtraCard,
-  so as SaveExtraBlock,
-  uo as SavingsOpportunityBlock,
-  Co as SavingsOpportunityCard,
+  Co as SaveAnExtraCard,
+  uo as SaveExtraBlock,
+  Do as SavingsOpportunityBlock,
+  So as SavingsOpportunityCard,
   g as StatusBadge,
   lr as StatusMessageCard,
   r as StatusPill,
@@ -110,10 +110,10 @@ export {
   Oo as SubscriptionHeroCard,
   Qo as SurveyModal,
   Io as TransactionBlock,
-  Do as TransactionListCard,
+  po as TransactionListCard,
   j as TransferLogoCard,
-  po as UpcomingBillBlock,
-  io as UpcomingBillCard,
+  co as UpcomingBillBlock,
+  eo as UpcomingBillCard,
   yo as UpcomingSubscriptionBlock,
   Ro as WithdrawalBlock,
   Po as WithdrawalCard,

package/package.json

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