@mx-cartographer/experiences 9.7.97 → 9.7.99

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [9.7.99] - 11-04-2026
+
+- **CHANGED** - The `transaction_list_block` drilldown title is driven by the CTA variant (via a variant-to-title map): the `generic_list` variant drawer is titled "Transactions" (`copy.transactions.transactions_title`), while `summary_header`, `standard` and variant-less drawers keep the beat's own title. Weekly New Merchants V3's drawer (CTA variant `generic_list`) now reads "Transactions" instead of the card's "Purchases for Review" (WEC-2189)
+
+## [9.7.98] - 11-04-2026
+
+- **FIXED** - Celebrate Credit Card Payoff card spacing matches Figma (WEC-2170)
+- **FIXED** - Insight card titles stay on one line and end with an ellipsis when too long (WEC-2170)
+
 ## [9.7.97] - 11-03-2026
 
 - **ADDED** - HSA Deposit beat on Insights 2.0: the `with_header_footer` transaction card whose CTA opens Transaction Details for one deposit and the Transaction List for several (WEC-2214)

package/dist/insights-v2/actionBlocks/TransactionListBlock/layout.d.ts

@@ -1,13 +1,15 @@
 import { Beat, GlobalCopy, InDescriptionCTA, PrimaryCTA, SecondaryCTA } from '../../../core';
 type DrilldownCta = PrimaryCTA | SecondaryCTA | InDescriptionCTA;
-/** The CTA variant that opens the summary-header drilldown. */
-export declare const SUMMARY_HEADER_VARIANT = "summary_header";
+/** The transaction_list_block CTA variants. */
+export declare const TRANSACTION_LIST_VARIANTS: {
+    readonly SUMMARY_HEADER: "summary_header";
+    readonly GENERIC_LIST: "generic_list";
+};
 /**
- * Drawer title: the beat's own localized title, whatever the variant. The drawer is shared across
- * beats (Replenish Savings' "Savings Withdrawal" summary-header drawer, Weekly New Merchants' plain
- * "Purchases for review" list), so the title comes from the beat, not the variant.
+ * Drawer title: the variant's title when it has one (`generic_list` -> "Transactions"), otherwise the
+ * beat's own localized title (`summary_header`, `standard`, or no variant).
  */
-export declare const getTransactionListDrawerTitle: (_variant: string | null | undefined, _copy: GlobalCopy, beat?: Beat) => string;
+export declare const getTransactionListDrawerTitle: (variant: string | null | undefined, copy: GlobalCopy, beat?: Beat) => string;
 export interface TransactionListSummary {
     /** Headline figure (e.g. total withdrawn). */
     amount: number;

package/dist/insights-v2/actionBlocks/TransactionListBlock/layout.es.js

@@ -1,38 +1,44 @@
-import { parseISO as s } from "date-fns/parseISO";
-var c = "summary_header", p = (t, r, e) => e?.insights_payload?.title || "", m = (t) => typeof t == "number" && Number.isFinite(t) ? t : void 0, f = (t) => typeof t == "number" && Number.isInteger(t) && t > 0 ? t : void 0, _ = Date.UTC(2e3, 0, 1), u = Date.UTC(2100, 0, 1), i = /* @__PURE__ */ new WeakSet(), d = (t, r) => {
+import { parseISO as m } from "date-fns/parseISO";
+var s = {
+  SUMMARY_HEADER: "summary_header",
+  GENERIC_LIST: "generic_list"
+}, _ = (t) => ({ [s.GENERIC_LIST]: t.transactions?.transactions_title ?? "" }), y = (t, r, n) => {
+  const e = _(r);
+  return t && Object.hasOwn(e, t) ? e[t] ?? "" : n?.insights_payload?.title ?? "";
+}, f = (t) => typeof t == "number" && Number.isFinite(t) ? t : void 0, c = (t) => typeof t == "number" && Number.isInteger(t) && t > 0 ? t : void 0, u = Date.UTC(2e3, 0, 1), T = Date.UTC(2100, 0, 1), i = /* @__PURE__ */ new WeakSet(), d = (t, r) => {
   i.has(t) || (i.add(t), console.warn(r));
-}, o = (t, r, e) => {
+}, o = (t, r, n) => {
   if (t == null || t === "") return;
-  let a;
-  if (typeof t == "number" && Number.isFinite(t)) a = t < 1e12 ? t * 1e3 : t;
+  let e;
+  if (typeof t == "number" && Number.isFinite(t)) e = t < 1e12 ? t * 1e3 : t;
   else if (typeof t == "string") {
-    const n = s(t).getTime();
-    a = Number.isNaN(n) ? void 0 : n;
+    const a = m(t).getTime();
+    e = Number.isNaN(a) ? void 0 : a;
   }
-  if (a === void 0 || a < _ || a > u) {
-    d(e, `[TransactionListBlock] drilldown_data.${r} is unparseable or out of range (${typeof t})`);
+  if (e === void 0 || e < u || e > T) {
+    d(n, `[TransactionListBlock] drilldown_data.${r} is unparseable or out of range (${typeof t})`);
     return;
   }
-  return new Date(a);
+  return new Date(e);
 }, b = (t) => {
-  if (t?.variant !== "summary_header") return;
+  if (t?.variant !== s.SUMMARY_HEADER) return;
   const r = t?.drilldown_data;
   if (!r) return;
-  const e = m(r.amount);
-  if (e === void 0) {
+  const n = f(r.amount);
+  if (n === void 0) {
     Object.keys(r).length > 0 && d(r, "[TransactionListBlock] drilldown_data has no finite `amount` — no summary header.");
     return;
   }
   return {
-    amount: e,
+    amount: n,
     startDate: o(r.start_date, "start_date", r),
     endDate: o(r.end_date, "end_date", r),
-    count: f(r.count)
+    count: c(r.count)
   };
 };
 export {
-  c as SUMMARY_HEADER_VARIANT,
-  p as getTransactionListDrawerTitle,
+  s as TRANSACTION_LIST_VARIANTS,
+  y as getTransactionListDrawerTitle,
   b as readSummary
 };
 

package/dist/insights-v2/actionBlocks/TransactionListBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionListBlock/layout.ts"],"sourcesContent":["import { parseISO } from 'date-fns/parseISO'\n\nimport type { Beat, GlobalCopy, InDescriptionCTA, PrimaryCTA, SecondaryCTA } from '../../../core'\n\ntype DrilldownCta = PrimaryCTA | SecondaryCTA | InDescriptionCTA\n\n/** The CTA variant that opens the summary-header drilldown. */\nexport const SUMMARY_HEADER_VARIANT = 'summary_header'\n\n/**\n * Drawer title: the beat's own localized title, whatever the variant. The drawer is shared across\n * beats (Replenish Savings' \"Savings Withdrawal\" summary-header drawer, Weekly New Merchants' plain\n * \"Purchases for review\" list), so the title comes from the beat, not the variant.\n */\nexport const getTransactionListDrawerTitle = (\n  _variant: string | null | undefined,\n  _copy: GlobalCopy,\n  beat?: Beat,\n): string => beat?.insights_payload?.title || ''\n\nexport interface TransactionListSummary {\n  /** Headline figure (e.g. total withdrawn). */\n  amount: number\n  /** Validated range endpoints; rendered as `{start} – {end}`. Omitted when the payload value is\n   * missing or unparseable (so the drawer never crashes on an Invalid Date). */\n  startDate?: Date\n  endDate?: Date\n  /** Number of transactions for the pill, from the CTA's `drilldown_data.count`. */\n  count?: number\n}\n\nconst toFiniteNumber = (value: unknown): number | undefined =>\n  typeof value === 'number' && Number.isFinite(value) ? value : undefined\n\n// `> 0`: the card only shows with >= 1 guid, so a `count` of 0 is dropped and falls back to the\n// guid count rather than rendering \"0 transactions\".\nconst toCount = (value: unknown): number | undefined =>\n  typeof value === 'number' && Number.isInteger(value) && value > 0 ? value : undefined\n\n// Sane epoch window so a bad/typo payload can't render a far-past/future date.\nconst EPOCH_MIN = Date.UTC(2000, 0, 1)\nconst EPOCH_MAX = Date.UTC(2100, 0, 1)\n\n// `readSummary` runs on every observer re-render (no `useMemo` by design), so warn at most once per\n// distinct payload object instead of on every render. Keyed on the `drilldown_data` object, which is\n// a stable reference across re-renders of the same beat.\nconst warnedPayloads = new WeakSet<object>()\nconst warnOncePerPayload = (source: object, message: string): void => {\n  if (warnedPayloads.has(source)) return\n  warnedPayloads.add(source)\n  console.warn(message)\n}\n\n/**\n * Parse a payload date value to a validated `Date`, or `undefined`. Accepts unix seconds or\n * milliseconds (auto-detected) and ISO strings. Fails closed (no throw): an unparseable or\n * out-of-range value returns undefined and warns, so `formatDate`/`intlFormat` never sees an Invalid\n * Date (which throws `RangeError` and takes down the whole drawer render).\n */\nconst toDate = (value: unknown, field: string, source: object): Date | undefined => {\n  // Missing/empty is a normal \"no range\" case — return quietly, don't warn.\n  if (value === undefined || value === null || value === '') return undefined\n\n  let ms: number | undefined\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    // < 1e12 is treated as seconds (1e12 ms is year 33658). Trade-off: genuine ms timestamps from\n    // ~2000-2001 would be misread as seconds and fall outside the window below (dropped, not shown).\n    ms = value < 1e12 ? value * 1000 : value\n  } else if (typeof value === 'string') {\n    const parsed = parseISO(value).getTime()\n    ms = Number.isNaN(parsed) ? undefined : parsed\n  }\n\n  if (ms === undefined || ms < EPOCH_MIN || ms > EPOCH_MAX) {\n    warnOncePerPayload(\n      source,\n      `[TransactionListBlock] drilldown_data.${field} is unparseable or out of range (${typeof value})`,\n    )\n    return undefined\n  }\n  return new Date(ms)\n}\n\n/**\n * Summary-header figures for the drawer, read from the clicked CTA's `drilldown_data` (the backend\n * hangs a drilldown's own data off the CTA that opens it). Fails closed throughout: only the\n * `summary_header` variant renders a header (so figures from a different CTA that `getDynamicCta…`\n * fell back to can't be misattributed), then without a finite `amount` there is still no header, and\n * each date is validated to a real `Date` or dropped — an unparseable value never reaches\n * `formatDate` (which throws on an Invalid Date).\n *\n * `drilldown_data` fields: `amount` (number), `start_date`/`end_date` (unix seconds|ms or ISO),\n * `count` (number of transactions).\n */\nexport const readSummary = (cta: DrilldownCta | undefined): TransactionListSummary | undefined => {\n  // Defense-in-depth on financial figures: only the summary-header variant shows the card.\n  if (cta?.variant !== SUMMARY_HEADER_VARIANT) return undefined\n\n  const source = cta?.drilldown_data\n  if (!source) return undefined\n\n  const amount = toFiniteNumber(source.amount)\n  if (amount === undefined) {\n    // `drilldown_data` present but no usable amount -> surface the likely contract drift (field\n    // rename) instead of a silently missing header.\n    if (Object.keys(source).length > 0) {\n      warnOncePerPayload(\n        source,\n        '[TransactionListBlock] drilldown_data has no finite `amount` — no summary header.',\n      )\n    }\n    return undefined\n  }\n\n  return {\n    amount,\n    startDate: toDate(source.start_date, 'start_date', source),\n    endDate: toDate(source.end_date, 'end_date', source),\n    count: toCount(source.count),\n  }\n}\n"],"mappings":";AAOA,IAAa,IAAyB,kBAOzB,IAAA,CACX,GACA,GACA,MACW,GAAM,kBAAkB,SAAS,IAaxC,IAAA,CAAkB,MACtB,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,IAAI,IAAQ,QAI1D,IAAA,CAAW,MACf,OAAO,KAAU,YAAY,OAAO,UAAU,CAAK,KAAK,IAAQ,IAAI,IAAQ,QAGxE,IAAY,KAAK,IAAI,KAAM,GAAG,CAAC,GAC/B,IAAY,KAAK,IAAI,MAAM,GAAG,CAAC,GAK/B,IAAiB,oBAAI,QAAgB,GACrC,IAAA,CAAsB,GAAgB,MAA0B;AACpE,EAAI,EAAe,IAAI,CAAM,MAC7B,EAAe,IAAI,CAAM,GACzB,QAAQ,KAAK,CAAO;AACtB,GAQM,IAAA,CAAU,GAAgB,GAAe,MAAqC;AAElF,MAA2B,KAAU,QAAQ,MAAU,GAAI;AAE3D,MAAI;AACJ,MAAI,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,EAGpD,CAAA,IAAK,IAAQ,OAAO,IAAQ,MAAO;AAAA,WAC1B,OAAO,KAAU,UAAU;AACpC,UAAM,IAAS,EAAS,CAAK,EAAE,QAAQ;AACvC,IAAA,IAAK,OAAO,MAAM,CAAM,IAAI,SAAY;AAAA,EAC1C;AAEA,MAAI,MAAO,UAAa,IAAK,KAAa,IAAK,GAAW;AACxD,IAAA,EACE,GACA,yCAAyC,CAAA,oCAAyC,OAAO,CAAA,GAC3F;AACA;AAAA,EACF;AACA,SAAO,IAAI,KAAK,CAAE;AACpB,GAaa,IAAA,CAAe,MAAsE;AAEhG,MAAI,GAAK,YAAA,iBAAoC;AAE7C,QAAM,IAAS,GAAK;AACpB,MAAI,CAAC,EAAQ;AAEb,QAAM,IAAS,EAAe,EAAO,MAAM;AAC3C,MAAI,MAAW,QAAW;AAGxB,IAAI,OAAO,KAAK,CAAM,EAAE,SAAS,KAC/B,EACE,GACA,mFACF;AAEF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,QAAA;AAAA,IACA,WAAW,EAAO,EAAO,YAAY,cAAc,CAAM;AAAA,IACzD,SAAS,EAAO,EAAO,UAAU,YAAY,CAAM;AAAA,IACnD,OAAO,EAAQ,EAAO,KAAK;AAAA,EAC7B;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionListBlock/layout.ts"],"sourcesContent":["import { parseISO } from 'date-fns/parseISO'\n\nimport type { Beat, GlobalCopy, InDescriptionCTA, PrimaryCTA, SecondaryCTA } from '../../../core'\n\ntype DrilldownCta = PrimaryCTA | SecondaryCTA | InDescriptionCTA\n\n/** The transaction_list_block CTA variants. */\nexport const TRANSACTION_LIST_VARIANTS = {\n  SUMMARY_HEADER: 'summary_header',\n  GENERIC_LIST: 'generic_list',\n} as const\n\n/** Drawer titles for variants that don't use the beat's own title. Add new variants here. */\nconst variantTitles = (copy: GlobalCopy): Record<string, string> => ({\n  [TRANSACTION_LIST_VARIANTS.GENERIC_LIST]: copy.transactions?.transactions_title ?? '',\n})\n\n/**\n * Drawer title: the variant's title when it has one (`generic_list` -> \"Transactions\"), otherwise the\n * beat's own localized title (`summary_header`, `standard`, or no variant).\n */\nexport const getTransactionListDrawerTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n  beat?: Beat,\n): string => {\n  const titles = variantTitles(copy)\n  if (variant && Object.hasOwn(titles, variant)) return titles[variant] ?? ''\n\n  return beat?.insights_payload?.title ?? ''\n}\n\nexport interface TransactionListSummary {\n  /** Headline figure (e.g. total withdrawn). */\n  amount: number\n  /** Validated range endpoints; rendered as `{start} – {end}`. Omitted when the payload value is\n   * missing or unparseable (so the drawer never crashes on an Invalid Date). */\n  startDate?: Date\n  endDate?: Date\n  /** Number of transactions for the pill, from the CTA's `drilldown_data.count`. */\n  count?: number\n}\n\nconst toFiniteNumber = (value: unknown): number | undefined =>\n  typeof value === 'number' && Number.isFinite(value) ? value : undefined\n\n// `> 0`: the card only shows with >= 1 guid, so a `count` of 0 is dropped and falls back to the\n// guid count rather than rendering \"0 transactions\".\nconst toCount = (value: unknown): number | undefined =>\n  typeof value === 'number' && Number.isInteger(value) && value > 0 ? value : undefined\n\n// Sane epoch window so a bad/typo payload can't render a far-past/future date.\nconst EPOCH_MIN = Date.UTC(2000, 0, 1)\nconst EPOCH_MAX = Date.UTC(2100, 0, 1)\n\n// `readSummary` runs on every observer re-render (no `useMemo` by design), so warn at most once per\n// distinct payload object instead of on every render. Keyed on the `drilldown_data` object, which is\n// a stable reference across re-renders of the same beat.\nconst warnedPayloads = new WeakSet<object>()\nconst warnOncePerPayload = (source: object, message: string): void => {\n  if (warnedPayloads.has(source)) return\n  warnedPayloads.add(source)\n  console.warn(message)\n}\n\n/**\n * Parse a payload date value to a validated `Date`, or `undefined`. Accepts unix seconds or\n * milliseconds (auto-detected) and ISO strings. Fails closed (no throw): an unparseable or\n * out-of-range value returns undefined and warns, so `formatDate`/`intlFormat` never sees an Invalid\n * Date (which throws `RangeError` and takes down the whole drawer render).\n */\nconst toDate = (value: unknown, field: string, source: object): Date | undefined => {\n  // Missing/empty is a normal \"no range\" case — return quietly, don't warn.\n  if (value === undefined || value === null || value === '') return undefined\n\n  let ms: number | undefined\n  if (typeof value === 'number' && Number.isFinite(value)) {\n    // < 1e12 is treated as seconds (1e12 ms is year 33658). Trade-off: genuine ms timestamps from\n    // ~2000-2001 would be misread as seconds and fall outside the window below (dropped, not shown).\n    ms = value < 1e12 ? value * 1000 : value\n  } else if (typeof value === 'string') {\n    const parsed = parseISO(value).getTime()\n    ms = Number.isNaN(parsed) ? undefined : parsed\n  }\n\n  if (ms === undefined || ms < EPOCH_MIN || ms > EPOCH_MAX) {\n    warnOncePerPayload(\n      source,\n      `[TransactionListBlock] drilldown_data.${field} is unparseable or out of range (${typeof value})`,\n    )\n    return undefined\n  }\n  return new Date(ms)\n}\n\n/**\n * Summary-header figures for the drawer, read from the clicked CTA's `drilldown_data` (the backend\n * hangs a drilldown's own data off the CTA that opens it). Fails closed throughout: only the\n * `summary_header` variant renders a header (so figures from a different CTA that `getDynamicCta…`\n * fell back to can't be misattributed), then without a finite `amount` there is still no header, and\n * each date is validated to a real `Date` or dropped — an unparseable value never reaches\n * `formatDate` (which throws on an Invalid Date).\n *\n * `drilldown_data` fields: `amount` (number), `start_date`/`end_date` (unix seconds|ms or ISO),\n * `count` (number of transactions).\n */\nexport const readSummary = (cta: DrilldownCta | undefined): TransactionListSummary | undefined => {\n  // Defense-in-depth on financial figures: only the summary-header variant shows the card.\n  if (cta?.variant !== TRANSACTION_LIST_VARIANTS.SUMMARY_HEADER) return undefined\n\n  const source = cta?.drilldown_data\n  if (!source) return undefined\n\n  const amount = toFiniteNumber(source.amount)\n  if (amount === undefined) {\n    // `drilldown_data` present but no usable amount -> surface the likely contract drift (field\n    // rename) instead of a silently missing header.\n    if (Object.keys(source).length > 0) {\n      warnOncePerPayload(\n        source,\n        '[TransactionListBlock] drilldown_data has no finite `amount` — no summary header.',\n      )\n    }\n    return undefined\n  }\n\n  return {\n    amount,\n    startDate: toDate(source.start_date, 'start_date', source),\n    endDate: toDate(source.end_date, 'end_date', source),\n    count: toCount(source.count),\n  }\n}\n"],"mappings":";AAOA,IAAa,IAA4B;AAAA,EACvC,gBAAgB;AAAA,EAChB,cAAc;AAChB,GAGM,IAAA,CAAiB,OAA8C,EAAA,CAClE,EAA0B,YAAA,GAAe,EAAK,cAAc,sBAAsB,GACrF,IAMa,IAAA,CACX,GACA,GACA,MACW;AACX,QAAM,IAAS,EAAc,CAAI;AACjC,SAAI,KAAW,OAAO,OAAO,GAAQ,CAAO,IAAU,EAAO,CAAA,KAAY,KAElE,GAAM,kBAAkB,SAAS;AAC1C,GAaM,IAAA,CAAkB,MACtB,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,IAAI,IAAQ,QAI1D,IAAA,CAAW,MACf,OAAO,KAAU,YAAY,OAAO,UAAU,CAAK,KAAK,IAAQ,IAAI,IAAQ,QAGxE,IAAY,KAAK,IAAI,KAAM,GAAG,CAAC,GAC/B,IAAY,KAAK,IAAI,MAAM,GAAG,CAAC,GAK/B,IAAiB,oBAAI,QAAgB,GACrC,IAAA,CAAsB,GAAgB,MAA0B;AACpE,EAAI,EAAe,IAAI,CAAM,MAC7B,EAAe,IAAI,CAAM,GACzB,QAAQ,KAAK,CAAO;AACtB,GAQM,IAAA,CAAU,GAAgB,GAAe,MAAqC;AAElF,MAA2B,KAAU,QAAQ,MAAU,GAAI;AAE3D,MAAI;AACJ,MAAI,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,EAGpD,CAAA,IAAK,IAAQ,OAAO,IAAQ,MAAO;AAAA,WAC1B,OAAO,KAAU,UAAU;AACpC,UAAM,IAAS,EAAS,CAAK,EAAE,QAAQ;AACvC,IAAA,IAAK,OAAO,MAAM,CAAM,IAAI,SAAY;AAAA,EAC1C;AAEA,MAAI,MAAO,UAAa,IAAK,KAAa,IAAK,GAAW;AACxD,IAAA,EACE,GACA,yCAAyC,CAAA,oCAAyC,OAAO,CAAA,GAC3F;AACA;AAAA,EACF;AACA,SAAO,IAAI,KAAK,CAAE;AACpB,GAaa,IAAA,CAAe,MAAsE;AAEhG,MAAI,GAAK,YAAY,EAA0B,eAAgB;AAE/D,QAAM,IAAS,GAAK;AACpB,MAAI,CAAC,EAAQ;AAEb,QAAM,IAAS,EAAe,EAAO,MAAM;AAC3C,MAAI,MAAW,QAAW;AAGxB,IAAI,OAAO,KAAK,CAAM,EAAE,SAAS,KAC/B,EACE,GACA,mFACF;AAEF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,QAAA;AAAA,IACA,WAAW,EAAO,EAAO,YAAY,cAAc,CAAM;AAAA,IACzD,SAAS,EAAO,EAAO,UAAU,YAAY,CAAM;AAAA,IACnD,OAAO,EAAQ,EAAO,KAAK;AAAA,EAC7B;AACF"}

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

@@ -30,7 +30,7 @@ var vo = ({ payload: g }) => {
           flexShrink: 0,
           height: 32,
           position: "relative",
-          width: 44
+          width: 48
         },
         children: /* @__PURE__ */ o(E, {
           "aria-hidden": !0,

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

@@ -1 +1 @@
-{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n  const theme = useTheme()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const { instance_slot } = payload\n  const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n  if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n  // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n  // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n  // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n  // flat fields.\n  const { data } = instance_slot\n  const v2 = data !== undefined\n  const dataAmount = slot<unknown>(data, 'amount')\n  const amount = v2\n    ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n      ? dataAmount\n      : undefined\n    : instance_slot.amount\n  // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n  // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n  const dataSubText = slot<unknown>(data, 'sub_text')\n  const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n  const sub_text = v2 ? v2SubText : instance_slot.sub_text\n  const label = v2 ? v2SubText : instance_slot.label\n  const dataHeaderText = slot<unknown>(data, 'header_text')\n  const header_text = v2\n    ? typeof dataHeaderText === 'string'\n      ? dataHeaderText\n      : undefined\n    : instance_slot.header_text\n  const logo = slot<LogoRef>(data, 'logo')\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n  // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n  if (layoutConfig?.isConfetti) {\n    const confettiIcon = statusIconName(logo?.guid)\n    const graphics: Record<string, React.ReactNode> = {\n      paidOffCard: (\n        // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n        // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n        <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n          <PaidOffCardGraphic\n            aria-hidden={true}\n            role=\"presentation\"\n            style={{ left: 0, position: 'absolute', top: -14 }}\n          />\n        </Box>\n      ),\n      savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n      logo: (\n        <Box\n          sx={{\n            borderRadius: '4px',\n            flexShrink: 0,\n            height: 48,\n            overflow: 'hidden',\n            width: 48,\n          }}\n        >\n          {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n              the success.main square. It is drawn with Icon, as IconComponent does, because\n              LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n          {confettiIcon ? (\n            <Stack\n              data-icon={confettiIcon}\n              sx={{\n                alignItems: 'center',\n                bgcolor: 'success.main',\n                height: '100%',\n                justifyContent: 'center',\n                width: '100%',\n              }}\n            >\n              <Icon\n                aria-hidden={true}\n                name={confettiIcon}\n                size={layoutConfig.logo_icon_size ?? 24}\n                sx={{ color: 'success.contrastText' }}\n              />\n            </Stack>\n          ) : logo?.guid ? (\n            <LogoFromGuid logo={logo} size={48} />\n          ) : null}\n        </Box>\n      ),\n    }\n    const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n    // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n    // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n    const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n    const payer =\n      (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n      (merchant_name ?? institution_name)\n    const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n    const amountText =\n      amount != null ? (\n        <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n          {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n        </Text>\n      ) : null\n\n    return (\n      <Box\n        ref={containerRef}\n        sx={{\n          backgroundImage: layoutConfig.gradient,\n          bgcolor: 'background.paper',\n          overflow: 'hidden',\n          position: 'relative',\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Box\n          sx={{\n            inset: 0,\n            pointerEvents: 'none',\n            position: 'absolute',\n            zIndex: 1,\n          }}\n        >\n          <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n        </Box>\n\n        <Stack\n          sx={{\n            borderRadius: '8px',\n            ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n            overflow: 'hidden',\n            position: 'relative',\n            width: '100%',\n            zIndex: 2,\n          }}\n        >\n          {layoutConfig.categoryStrip && header_text && (\n            <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n              <Text color=\"success.contrastText\" variant=\"caption\">\n                {header_text}\n              </Text>\n            </Box>\n          )}\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'success.lighter',\n              border: '1px solid',\n              borderColor: 'success.main',\n              borderRadius: '8px',\n              // With a strip above, the body's top corners tuck under it (no double border line).\n              ...(layoutConfig.categoryStrip && {\n                borderTopLeftRadius: 0,\n                borderTopRightRadius: 0,\n                borderTop: 0,\n              }),\n              flexDirection: 'row',\n              ...layoutConfig.rowSx,\n            }}\n          >\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n            <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n              {layoutConfig.secondaryPosition === 'above' && secondary}\n              {amountText}\n              {layoutConfig.secondaryPosition === 'below' && secondary}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Box>\n    )\n  }\n\n  return (\n    <Stack\n      sx={{\n        background: layoutConfig.background,\n        p: 16,\n      }}\n    >\n      <Stack\n        sx={{\n          borderRadius: '8px',\n          boxShadow: theme.shadows[1],\n          width: '100%',\n        }}\n      >\n        {header_text && <HeaderComponent headerText={header_text} />}\n        <Stack\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'background.paper',\n            borderRadius: '8px',\n            gap: 16,\n            // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n            p: 16,\n            width: '100%',\n            ...(header_text && {\n              borderTopLeftRadius: '0',\n              borderTopRightRadius: '0',\n            }),\n            ...((institution_guid || icon_name || logo?.guid) && {\n              flexDirection: 'row',\n            }),\n          }}\n        >\n          <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n          <Stack>\n            {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n            <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n              {layoutConfig.sub_logo && (\n                <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n              )}\n              {sub_text && (\n                <Text color=\"text.secondary\" variant=\"caption\">\n                  {sub_text}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}
+{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n  const theme = useTheme()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const { instance_slot } = payload\n  const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n  if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n  // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n  // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n  // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n  // flat fields.\n  const { data } = instance_slot\n  const v2 = data !== undefined\n  const dataAmount = slot<unknown>(data, 'amount')\n  const amount = v2\n    ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n      ? dataAmount\n      : undefined\n    : instance_slot.amount\n  // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n  // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n  const dataSubText = slot<unknown>(data, 'sub_text')\n  const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n  const sub_text = v2 ? v2SubText : instance_slot.sub_text\n  const label = v2 ? v2SubText : instance_slot.label\n  const dataHeaderText = slot<unknown>(data, 'header_text')\n  const header_text = v2\n    ? typeof dataHeaderText === 'string'\n      ? dataHeaderText\n      : undefined\n    : instance_slot.header_text\n  const logo = slot<LogoRef>(data, 'logo')\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n  // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n  if (layoutConfig?.isConfetti) {\n    const confettiIcon = statusIconName(logo?.guid)\n    const graphics: Record<string, React.ReactNode> = {\n      paidOffCard: (\n        // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n        // Box it to Figma's 48px graphic frame (the card is 44x32) and shift the SVG up so it aligns\n        // with the text.\n        <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 48 }}>\n          <PaidOffCardGraphic\n            aria-hidden={true}\n            role=\"presentation\"\n            style={{ left: 0, position: 'absolute', top: -14 }}\n          />\n        </Box>\n      ),\n      savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n      logo: (\n        <Box\n          sx={{\n            borderRadius: '4px',\n            flexShrink: 0,\n            height: 48,\n            overflow: 'hidden',\n            width: 48,\n          }}\n        >\n          {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n              the success.main square. It is drawn with Icon, as IconComponent does, because\n              LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n          {confettiIcon ? (\n            <Stack\n              data-icon={confettiIcon}\n              sx={{\n                alignItems: 'center',\n                bgcolor: 'success.main',\n                height: '100%',\n                justifyContent: 'center',\n                width: '100%',\n              }}\n            >\n              <Icon\n                aria-hidden={true}\n                name={confettiIcon}\n                size={layoutConfig.logo_icon_size ?? 24}\n                sx={{ color: 'success.contrastText' }}\n              />\n            </Stack>\n          ) : logo?.guid ? (\n            <LogoFromGuid logo={logo} size={48} />\n          ) : null}\n        </Box>\n      ),\n    }\n    const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n    // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n    // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n    const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n    const payer =\n      (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n      (merchant_name ?? institution_name)\n    const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n    const amountText =\n      amount != null ? (\n        <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n          {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n        </Text>\n      ) : null\n\n    return (\n      <Box\n        ref={containerRef}\n        sx={{\n          backgroundImage: layoutConfig.gradient,\n          bgcolor: 'background.paper',\n          overflow: 'hidden',\n          position: 'relative',\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Box\n          sx={{\n            inset: 0,\n            pointerEvents: 'none',\n            position: 'absolute',\n            zIndex: 1,\n          }}\n        >\n          <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n        </Box>\n\n        <Stack\n          sx={{\n            borderRadius: '8px',\n            ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n            overflow: 'hidden',\n            position: 'relative',\n            width: '100%',\n            zIndex: 2,\n          }}\n        >\n          {layoutConfig.categoryStrip && header_text && (\n            <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n              <Text color=\"success.contrastText\" variant=\"caption\">\n                {header_text}\n              </Text>\n            </Box>\n          )}\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'success.lighter',\n              border: '1px solid',\n              borderColor: 'success.main',\n              borderRadius: '8px',\n              // With a strip above, the body's top corners tuck under it (no double border line).\n              ...(layoutConfig.categoryStrip && {\n                borderTopLeftRadius: 0,\n                borderTopRightRadius: 0,\n                borderTop: 0,\n              }),\n              flexDirection: 'row',\n              ...layoutConfig.rowSx,\n            }}\n          >\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n            <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n              {layoutConfig.secondaryPosition === 'above' && secondary}\n              {amountText}\n              {layoutConfig.secondaryPosition === 'below' && secondary}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Box>\n    )\n  }\n\n  return (\n    <Stack\n      sx={{\n        background: layoutConfig.background,\n        p: 16,\n      }}\n    >\n      <Stack\n        sx={{\n          borderRadius: '8px',\n          boxShadow: theme.shadows[1],\n          width: '100%',\n        }}\n      >\n        {header_text && <HeaderComponent headerText={header_text} />}\n        <Stack\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'background.paper',\n            borderRadius: '8px',\n            gap: 16,\n            // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n            p: 16,\n            width: '100%',\n            ...(header_text && {\n              borderTopLeftRadius: '0',\n              borderTopRightRadius: '0',\n            }),\n            ...((institution_guid || icon_name || logo?.guid) && {\n              flexDirection: 'row',\n            }),\n          }}\n        >\n          <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n          <Stack>\n            {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n            <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n              {layoutConfig.sub_logo && (\n                <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n              )}\n              {sub_text && (\n                <Text color=\"text.secondary\" variant=\"caption\">\n                  {sub_text}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}

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

@@ -60,7 +60,7 @@ var e = { background: t }, s = (o) => ({
     graphic: "paidOffCard",
     amountVariant: "h2",
     rowSx: {
-      gap: 24,
+      gap: 16,
       px: 24,
       py: 16
     },

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

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n  CELEBRATION_GRADIENT,\n  ERROR_WASH_GRADIENT,\n  WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n  background?: string\n  logo_color?: string\n  logo_bGcolor?: string\n  logo_border_color?: string\n  /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n  logo_border_radius?: string\n  /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n   * icon tile (default `TILE_ICON_SIZE`). */\n  logo_icon_size?: number\n  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: string\n  /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n  badge?: string\n  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n  isConfetti?: boolean\n  /** Gradient wash layered over `background.paper` for the confetti card. */\n  gradient?: string\n  /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n  graphic?: 'paidOffCard' | 'savings' | 'logo'\n  /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n  amountVariant?: 'h2' | 'h3'\n  /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n  amountPrefix?: string\n  /** Render the colored category strip (`header_text`) at the top of the card. */\n  categoryStrip?: boolean\n  /** Raise the strip and body together with elevation/1. */\n  cardShadow?: boolean\n  /** Layout overrides for the graphic+text row (padding, gap). */\n  rowSx?: SxProps\n  /** Which payload field feeds the secondary line beside the amount. */\n  secondarySource?: 'merchant' | 'label'\n  /** Whether the secondary line sits above or below the amount. */\n  secondaryPosition?: 'above' | 'below'\n  /** Typography variant for the secondary line. */\n  secondaryVariant?: 'body2' | 'caption'\n  /** Theme color path for the secondary line. */\n  secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n  background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    overdraft_warning: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    low_balance_alert: LOW_BALANCE_TILE,\n    // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n    low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n    // Shared on/off-track status pair — used by Monthly Obligations Status and\n    // Payday Cash Left Over Status (identical designs, different copy).\n    status_off_track: {\n      logo_color: 'background.paper',\n      logo_bGcolor: 'error.main',\n      // Figma 9936:39145: the money icon's tile has 4px corners.\n      logo_border_radius: '4px',\n      // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n      logo_icon_size: 24,\n      background: ERROR_WASH_GRADIENT,\n    },\n    interest_charges_summary: {\n      logo_color: 'text.primary',\n      logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n      logo_border_color: 'categories.feesCharges',\n      background:\n        'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n    },\n    // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n    // deposit beats (identical design, different copy), so one design-named variant serves both.\n    deposit_received: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      cardShadow: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    status_on_track: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    payoff_celebration: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'paidOffCard',\n      amountVariant: 'h2',\n      rowSx: { gap: 24, px: 24, py: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    savings_deposit: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'savings',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'above',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n    // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n    default: {},\n  }\n}\n"],"mappings":";;AAqDA,IAAM,IAAsC,EAC1C,YAAY,EACd,GAEa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EAEnB,aAAa;AAAA,IAAE,GAAG;AAAA,IAAkB,OAAO;AAAA,EAAQ;AAAA,EAGnD,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IAEd,oBAAoB;AAAA,IAEpB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n  CELEBRATION_GRADIENT,\n  ERROR_WASH_GRADIENT,\n  WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n  background?: string\n  logo_color?: string\n  logo_bGcolor?: string\n  logo_border_color?: string\n  /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n  logo_border_radius?: string\n  /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n   * icon tile (default `TILE_ICON_SIZE`). */\n  logo_icon_size?: number\n  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: string\n  /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n  badge?: string\n  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n  isConfetti?: boolean\n  /** Gradient wash layered over `background.paper` for the confetti card. */\n  gradient?: string\n  /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n  graphic?: 'paidOffCard' | 'savings' | 'logo'\n  /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n  amountVariant?: 'h2' | 'h3'\n  /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n  amountPrefix?: string\n  /** Render the colored category strip (`header_text`) at the top of the card. */\n  categoryStrip?: boolean\n  /** Raise the strip and body together with elevation/1. */\n  cardShadow?: boolean\n  /** Layout overrides for the graphic+text row (padding, gap). */\n  rowSx?: SxProps\n  /** Which payload field feeds the secondary line beside the amount. */\n  secondarySource?: 'merchant' | 'label'\n  /** Whether the secondary line sits above or below the amount. */\n  secondaryPosition?: 'above' | 'below'\n  /** Typography variant for the secondary line. */\n  secondaryVariant?: 'body2' | 'caption'\n  /** Theme color path for the secondary line. */\n  secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n  background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    overdraft_warning: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    low_balance_alert: LOW_BALANCE_TILE,\n    // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n    low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n    // Shared on/off-track status pair — used by Monthly Obligations Status and\n    // Payday Cash Left Over Status (identical designs, different copy).\n    status_off_track: {\n      logo_color: 'background.paper',\n      logo_bGcolor: 'error.main',\n      // Figma 9936:39145: the money icon's tile has 4px corners.\n      logo_border_radius: '4px',\n      // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n      logo_icon_size: 24,\n      background: ERROR_WASH_GRADIENT,\n    },\n    interest_charges_summary: {\n      logo_color: 'text.primary',\n      logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n      logo_border_color: 'categories.feesCharges',\n      background:\n        'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n    },\n    // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n    // deposit beats (identical design, different copy), so one design-named variant serves both.\n    deposit_received: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      cardShadow: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    status_on_track: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    payoff_celebration: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'paidOffCard',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, px: 24, py: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    savings_deposit: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'savings',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'above',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n    // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n    default: {},\n  }\n}\n"],"mappings":";;AAqDA,IAAM,IAAsC,EAC1C,YAAY,EACd,GAEa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EAEnB,aAAa;AAAA,IAAE,GAAG;AAAA,IAAkB,OAAO;AAAA,EAAQ;AAAA,EAGnD,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IAEd,oBAAoB;AAAA,IAEpB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}

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

@@ -2,7 +2,7 @@ import { useBeatActions as s } from "../beatActions.es.js";
 import { InsightOptionsMenu as m } from "./InsightOptionsMenu.es.js";
 import a from "./SubHeader.es.js";
 import e from "@mui/material/Stack";
-import { H3 as f } from "@mxenabled/mxui";
+import { H3 as c } from "@mxenabled/mxui";
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
 var g = ({ isMini: n, subtitle: t, title: i }) => {
   const { onMenuAction: p } = s();
@@ -20,7 +20,10 @@ var g = ({ isMini: n, subtitle: t, title: i }) => {
         flexDirection: "row",
         justifyContent: "space-between"
       },
-      children: [/* @__PURE__ */ r(f, { children: i }), !n && p && /* @__PURE__ */ r(m, {})]
+      children: [/* @__PURE__ */ r(c, {
+        truncate: !0,
+        children: i
+      }), !n && p && /* @__PURE__ */ r(m, {})]
     }), t && /* @__PURE__ */ r(a, { subtitle: t })]
   });
 };

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

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

package/package.json

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