@mx-cartographer/experiences 9.6.8 → 9.6.9

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.6.9] - 10-13-2026
+
+- **CHANGED** - Renamed Insights V2 `instance_slot.variant` / CTA `variant` values from beat-specific names to behavior/design names so any beat can reuse them (ditto-contract changes — the backend must send the new values). AccountBlock: `transparent_overdraft`→`overdraft_warning`, `low_account_balance`→`low_balance_alert`, `monthly_credit_card_interest_summary`→`interest_charges_summary`, `celebrate_credit_card_payoff`→`payoff_celebration`, `savings_account_deposit`→`savings_deposit`, and `unified_deposit` + `unified_deposit_emergency_fund` collapsed into a single `deposit_received` (their layout configs were identical). TransactionBlock: `subscription_detected`→`info_wash`, `unexpected_subscription_payment`→`warning_wash`. TransactionHistoryBlock / BarchartBlock: `bill_amount_not_standard`→`not_standard_amount`, `savings_account_balances_summary`→`account_balance` (the `savings_account_balances_summary_drawer_title` copy key becomes `account_balance_drawer_title` — paired `mrs_content` change). MakeTransfer: payload keys `save_an_extra_100`→`save_extra`, `save_enough_to_live_on`→`save_enough` (aligning with the existing `save_extra_title`/`save_enough_title` copy). UpcomingSubscriptionBlock: `upcoming_subscription`→`hero`. Updated all layout maps, mock payloads, stories and tests; unrelated Settings notification copy keys that share these strings were left untouched
+
 ## [9.6.8] - 10-13-2026
 
 - **ADDED** - Dashboard banner can open the Connect widget in-app: a connect-type banner (`deep_link_type`) opens `ConnectDrawer` instead of an external link, with banner and connect-widget analytics (MEW-3504)

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

@@ -86,7 +86,7 @@ export interface DismissInsightCopy {
 export interface TransactionHistoryBlock {
     category_spend_drawer_title: string;
     monthly_spend_comparison_drawer_title: string;
-    savings_account_balances_summary_drawer_title: string;
+    account_balance_drawer_title: string;
     upcoming_bill_drawer_title: string;
     monthly_spend_to_income_drawer_title: string;
     monthly_debt_to_income_drawer_title: string;

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

@@ -2,15 +2,15 @@ var e = {
   SAVE_ENOUGH_TO_LIVE_ON: "SaveEnoughToLiveOn",
   SAVE_AN_EXTRA_100: "SaveAnExtra100"
 }, t = {
-  save_enough_to_live_on: e.SAVE_ENOUGH_TO_LIVE_ON,
-  save_an_extra_100: e.SAVE_AN_EXTRA_100
-}, n = (_) => t[_ ?? ""] ?? e.SAVE_AN_EXTRA_100, E = (_, a) => {
+  save_enough: e.SAVE_ENOUGH_TO_LIVE_ON,
+  save_extra: e.SAVE_AN_EXTRA_100
+}, E = (_) => t[_ ?? ""] ?? e.SAVE_AN_EXTRA_100, n = (_, a) => {
   const r = a.insights_feed?.make_transfer;
-  return r ? n(_) === e.SAVE_ENOUGH_TO_LIVE_ON ? r.save_enough_title : r.save_extra_title : "";
+  return r ? E(_) === e.SAVE_ENOUGH_TO_LIVE_ON ? r.save_enough_title : r.save_extra_title : "";
 }, A = (_) => _ == null || _ === "" ? void 0 : Number(_);
 export {
-  E as getMakeTransferDrawerTitle,
-  n as resolveMakeTransferVariant,
+  n as getMakeTransferDrawerTitle,
+  E as resolveMakeTransferVariant,
   A as toNumber,
   e as variants
 };

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

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/layout.ts"],"sourcesContent":["import type { GlobalCopy, MakeTransferCopy } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\n/**\n * MakeTransfer drilldown variants. The block uses the VALUE (e.g. \"SaveAnExtra100\"),\n * which is also the key each variant registers under (see ./index).\n */\nexport const variants = {\n  SAVE_ENOUGH_TO_LIVE_ON: 'SaveEnoughToLiveOn',\n  SAVE_AN_EXTRA_100: 'SaveAnExtra100',\n} as const\n\nexport type MakeTransferVariant = (typeof variants)[keyof typeof variants]\n\n// The beat payload sends the variant as a snake_case key; map it to the value.\nconst VARIANT_BY_KEY: Record<string, MakeTransferVariant> = {\n  save_enough_to_live_on: variants.SAVE_ENOUGH_TO_LIVE_ON,\n  save_an_extra_100: variants.SAVE_AN_EXTRA_100,\n}\n\n/** Props shared by every MakeTransfer variant. Each variant reads the fields it\n *  needs directly off `slotData` — no per-variant key indirection. */\nexport interface MakeTransferVariantProps {\n  slotData?: SaveExtraBlockData\n  copy: MakeTransferCopy\n}\n\n/** Maps the payload variant key to the block's variant VALUE (defaults to save-extra). */\nexport const resolveMakeTransferVariant = (variant?: string | null): MakeTransferVariant =>\n  VARIANT_BY_KEY[variant ?? ''] ?? variants.SAVE_AN_EXTRA_100\n\n/** Variant-specific, localized drawer title from `insights_feed.make_transfer`. */\nexport const getMakeTransferDrawerTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n): string => {\n  const makeTransfer = copy.insights_feed?.make_transfer\n  if (!makeTransfer) return ''\n  return resolveMakeTransferVariant(variant) === variants.SAVE_ENOUGH_TO_LIVE_ON\n    ? makeTransfer.save_enough_title\n    : makeTransfer.save_extra_title\n}\n\n/** Coerce a payload figure (number or numeric string) to a number, else undefined. */\nexport const toNumber = (value?: string | number): number | undefined =>\n  value === undefined || value === null || value === '' ? undefined : Number(value)\n"],"mappings":"AAOA,IAAa,IAAW;AAAA,EACtB,wBAAwB;AAAA,EACxB,mBAAmB;AACrB,GAKM,IAAsD;AAAA,EAC1D,wBAAwB,EAAS;AAAA,EACjC,mBAAmB,EAAS;AAC9B,GAUa,IAAA,CAA8B,MACzC,EAAe,KAAW,EAAA,KAAO,EAAS,mBAG/B,IAAA,CACX,GACA,MACW;AACX,QAAM,IAAe,EAAK,eAAe;AACzC,SAAK,IACE,EAA2B,CAAO,MAAM,EAAS,yBACpD,EAAa,oBACb,EAAa,mBAHS;AAI5B,GAGa,IAAA,CAAY,MACA,KAAU,QAAQ,MAAU,KAAK,SAAY,OAAO,CAAK"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/layout.ts"],"sourcesContent":["import type { GlobalCopy, MakeTransferCopy } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\n/**\n * MakeTransfer drilldown variants. The block uses the VALUE (e.g. \"SaveAnExtra100\"),\n * which is also the key each variant registers under (see ./index).\n */\nexport const variants = {\n  SAVE_ENOUGH_TO_LIVE_ON: 'SaveEnoughToLiveOn',\n  SAVE_AN_EXTRA_100: 'SaveAnExtra100',\n} as const\n\nexport type MakeTransferVariant = (typeof variants)[keyof typeof variants]\n\n// The beat payload sends the variant as a snake_case key; map it to the value. The keys are\n// behavior-named (aligning with the `save_enough_title` / `save_extra_title` copy), not beat-named.\nconst VARIANT_BY_KEY: Record<string, MakeTransferVariant> = {\n  save_enough: variants.SAVE_ENOUGH_TO_LIVE_ON,\n  save_extra: variants.SAVE_AN_EXTRA_100,\n}\n\n/** Props shared by every MakeTransfer variant. Each variant reads the fields it\n *  needs directly off `slotData` — no per-variant key indirection. */\nexport interface MakeTransferVariantProps {\n  slotData?: SaveExtraBlockData\n  copy: MakeTransferCopy\n}\n\n/** Maps the payload variant key to the block's variant VALUE (defaults to save-extra). */\nexport const resolveMakeTransferVariant = (variant?: string | null): MakeTransferVariant =>\n  VARIANT_BY_KEY[variant ?? ''] ?? variants.SAVE_AN_EXTRA_100\n\n/** Variant-specific, localized drawer title from `insights_feed.make_transfer`. */\nexport const getMakeTransferDrawerTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n): string => {\n  const makeTransfer = copy.insights_feed?.make_transfer\n  if (!makeTransfer) return ''\n  return resolveMakeTransferVariant(variant) === variants.SAVE_ENOUGH_TO_LIVE_ON\n    ? makeTransfer.save_enough_title\n    : makeTransfer.save_extra_title\n}\n\n/** Coerce a payload figure (number or numeric string) to a number, else undefined. */\nexport const toNumber = (value?: string | number): number | undefined =>\n  value === undefined || value === null || value === '' ? undefined : Number(value)\n"],"mappings":"AAOA,IAAa,IAAW;AAAA,EACtB,wBAAwB;AAAA,EACxB,mBAAmB;AACrB,GAMM,IAAsD;AAAA,EAC1D,aAAa,EAAS;AAAA,EACtB,YAAY,EAAS;AACvB,GAUa,IAAA,CAA8B,MACzC,EAAe,KAAW,EAAA,KAAO,EAAS,mBAG/B,IAAA,CACX,GACA,MACW;AACX,QAAM,IAAe,EAAK,eAAe;AACzC,SAAK,IACE,EAA2B,CAAO,MAAM,EAAS,yBACpD,EAAa,oBACb,EAAa,mBAHS;AAI5B,GAGa,IAAA,CAAY,MACA,KAAU,QAAQ,MAAU,KAAK,SAAY,OAAO,CAAK"}

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

@@ -17,10 +17,10 @@ export interface DrillDownHeaderContext {
     selectedDate?: string | Date;
 }
 export declare const DRILLDOWN_VARIANTS: {
-    readonly TRANSACTION: "bill_amount_not_standard";
+    readonly TRANSACTION: "not_standard_amount";
     readonly CATEGORY_SPEND: "category_spend";
     readonly MONTHLY_SPEND: "monthly_spend_comparison";
-    readonly ACCOUNT_BALANCE: "savings_account_balances_summary";
+    readonly ACCOUNT_BALANCE: "account_balance";
     readonly UPCOMING_BILL: "upcoming_bill";
     readonly SPEND_TO_INCOME: "monthly_spend_to_income";
     readonly SAVINGS_TO_INCOME: "monthly_savings_to_income";

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

@@ -1,15 +1,15 @@
-import { buildDynamicCopy as u } from "../../../core/utils/Localization.es.js";
-import { DATE_FORMATS_INTL as p, formatDate as y } from "../../../core/constants/DateFormats.es.js";
-import { getCategoryColor as N } from "../../../core/utils/CategoryUtil.es.js";
+import { buildDynamicCopy as p } from "../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as u, formatDate as N } from "../../../core/constants/DateFormats.es.js";
+import { getCategoryColor as y } from "../../../core/utils/CategoryUtil.es.js";
 import { MerchantLogo as S } from "@mxenabled/mxui";
 import { Icon as O } from "@mxenabled/mx-icons";
 import { jsx as c } from "react/jsx-runtime";
 import { endOfMonth as T, startOfMonth as f } from "date-fns";
 var i = {
-  TRANSACTION: "bill_amount_not_standard",
+  TRANSACTION: "not_standard_amount",
   CATEGORY_SPEND: "category_spend",
   MONTHLY_SPEND: "monthly_spend_comparison",
-  ACCOUNT_BALANCE: "savings_account_balances_summary",
+  ACCOUNT_BALANCE: "account_balance",
   UPCOMING_BILL: "upcoming_bill",
   SPEND_TO_INCOME: "monthly_spend_to_income",
   SAVINGS_TO_INCOME: "monthly_savings_to_income",
@@ -17,34 +17,34 @@ var i = {
   COST_OF_LIVING: "cost_living_to_income",
   NON_ESSENTIAL_CATEGORY: "non_essential_category_summary",
   DEPOSIT_SUMMARY: "monthly_deposit_summary"
-}, _ = (e, t) => t && N(t, e) || e.palette.primary.main, l = (e) => ({
+}, _ = (e, t) => t && y(t, e) || e.palette.primary.main, l = (e) => ({
   start: f(new Date(e ?? NaN)),
   end: T(new Date(e ?? NaN))
 }), d = (e) => e?.length ? { accounts: e } : {}, g = ({ beatTransactions: e, dataSeries: t, selectedIndex: o }) => {
-  const r = t[o], a = r?.guid, s = e.find((n) => n.guid === a)?.has_been_split;
+  const r = t[o], a = r?.guid, n = e.find((s) => s.guid === a)?.has_been_split;
   return {
-    custom: (n) => n.guid === a,
+    custom: (s) => s.guid === a,
     dateRange: l(r?.date),
-    showSplits: !s
+    showSplits: !n
   };
 }, C = ({ dataSeries: e, selectedIndex: t, instanceSlotData: o }) => {
   const r = e[t], a = o.category_guid ?? r?.guid;
   return {
-    custom: (s) => s.category_guid === a || s.top_level_category_guid === a,
+    custom: (n) => n.category_guid === a || n.top_level_category_guid === a,
     dateRange: l(r?.date)
   };
 }, I = ({ dataSeries: e, selectedIndex: t, spendCategoryGuids: o, instanceSlotData: r }) => {
   const a = e[t];
   return {
-    custom: (s) => !!s.top_level_category_guid && o.includes(s.top_level_category_guid),
+    custom: (n) => !!n.top_level_category_guid && o.includes(n.top_level_category_guid),
     dateRange: l(a?.date),
     ...d(r.account_guids)
   };
 }, h = ({ beat: e, dataSeries: t, selectedIndex: o, isLastTab: r, instanceSlotData: a }) => {
-  const s = t[o], { start: n, end: m } = l(s?.date);
+  const n = t[o], { start: s, end: m } = l(n?.date);
   return {
     dateRange: {
-      start: n,
+      start: s,
       end: r && e.created_at ? new Date(e.created_at) : m
     },
     ...d(a.account_guids)
@@ -70,7 +70,7 @@ var i = {
       };
     },
     tipSection: (e, t, o = "") => ({
-      message: u(t.general.tip_section_message, /* @__PURE__ */ c("strong", { children: t.general.tip_section_title }), /* @__PURE__ */ c("strong", { children: o })),
+      message: p(t.general.tip_section_message, /* @__PURE__ */ c("strong", { children: t.general.tip_section_title }), /* @__PURE__ */ c("strong", { children: o })),
       onDismiss: () => e(!0)
     })
   },
@@ -82,7 +82,7 @@ var i = {
     colors: (e, t) => [_(e, t)],
     header: (e) => ({
       heading: e.categoryName,
-      subHeadingText: e.selectedDate && y(e.selectedDate, p.MONTH_LONG) || "",
+      subHeadingText: e.selectedDate && N(e.selectedDate, u.MONTH_LONG) || "",
       icon: /* @__PURE__ */ c(O, {
         name: "calendar_month",
         size: 16

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

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport {\n  type Beat,\n  type InsightsFeedCopy,\n  type Subtitle,\n  type Transaction,\n  buildDynamicCopy,\n} from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\nimport type { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\n\nexport interface DrillDownHeader {\n  heading?: string\n  subHeadingText?: string\n  icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n  title?: string\n  subHeader?: Subtitle\n  categoryName: string\n  selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n  TRANSACTION: 'bill_amount_not_standard',\n  CATEGORY_SPEND: 'category_spend',\n  MONTHLY_SPEND: 'monthly_spend_comparison',\n  ACCOUNT_BALANCE: 'savings_account_balances_summary',\n  UPCOMING_BILL: 'upcoming_bill',\n  SPEND_TO_INCOME: 'monthly_spend_to_income',\n  SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n  DEBT_TO_INCOME: 'monthly_debt_to_income',\n  COST_OF_LIVING: 'cost_living_to_income',\n  NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n  DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n  beat: Beat\n  beatTransactions: Transaction[]\n  dataSeries: ChartDataSeriesItem[]\n  selectedIndex: number\n  subIndex: number\n  isLastTab: boolean\n  instanceSlotData: InsightsInstanceSlotData\n  spendCategoryGuids: string[]\n  displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n  top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n  filterStrategy: FilterStrategy\n  colors: ColorKind\n  header?: HeaderKind\n  tipSection?: (\n    setCloseTipSection: (flag: boolean) => void,\n    copy: InsightsFeedCopy,\n    merchantName?: string,\n  ) => TipSectionProps\n  scope: 'store' | 'beat'\n  filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n  (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n  start: startOfMonth(new Date(date ?? NaN)),\n  end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n  accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n  beatTransactions,\n  dataSeries,\n  selectedIndex,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const seriesGuid = seriesItem?.guid\n  const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n  return {\n    custom: (trn) => trn.guid === seriesGuid,\n    dateRange: monthRange(seriesItem?.date),\n    showSplits: !hasBeenSplit,\n  }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n  return {\n    custom: (trn) =>\n      trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n    dateRange: monthRange(seriesItem?.date),\n  }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n  dataSeries,\n  selectedIndex,\n  spendCategoryGuids,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n\n  return {\n    custom: (trn) =>\n      !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n    dateRange: monthRange(seriesItem?.date),\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n  beat,\n  dataSeries,\n  selectedIndex,\n  isLastTab,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const { start, end } = monthRange(seriesItem?.date)\n\n  return {\n    dateRange: {\n      start,\n      end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n    },\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n  [DRILLDOWN_VARIANTS.TRANSACTION]: {\n    top: 'singleBar',\n    scope: 'store',\n    filterMode: 'store',\n    filterStrategy: transactionGuidStrategy,\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      const { title, subHeader } = ctx\n      return {\n        heading: title,\n        subHeadingText: subHeader?.text || undefined,\n        icon: (\n          <MerchantLogo\n            alt={subHeader?.text}\n            categoryGuid={subHeader?.logo?.category_guid || ''}\n            merchantGuid={subHeader?.logo?.merchant_guid || ''}\n            size={16}\n          />\n        ),\n      }\n    },\n    tipSection: (setCloseTipSection, copy, merchantName = '') => {\n      return {\n        message: buildDynamicCopy(\n          copy.general.tip_section_message,\n          <strong>{copy.general.tip_section_title}</strong>,\n          <strong>{merchantName}</strong>,\n        ),\n        onDismiss: () => setCloseTipSection(true),\n      } as TipSectionProps\n    },\n  },\n  [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: categoryStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.categoryName,\n        subHeadingText: ctx.selectedDate\n          ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n          : '',\n        icon: <Icon name=\"calendar_month\" size={16} />,\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: spendCategoriesStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n  },\n  [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n    top: 'singleBar',\n    filterStrategy: accountDateStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.success.main],\n  },\n  [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n    top: 'upcomingBill',\n    filterStrategy: transactionGuidStrategy,\n    scope: 'beat',\n    filterMode: 'local',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n  },\n\n  // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n  // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]:   comparison('spendVsIncome'),\n  // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n  // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]:    comparison('debtVsIncome'),\n  // [DRILLDOWN_VARIANTS.COST_OF_LIVING]:    comparison('costOfLiving'),\n  //\n  // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n  // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n  // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]:        { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n  top: 'singleBar',\n  filterStrategy: transactionGuidStrategy,\n  scope: 'store',\n  filterMode: 'store',\n  colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport {\n  type Beat,\n  type InsightsFeedCopy,\n  type Subtitle,\n  type Transaction,\n  buildDynamicCopy,\n} from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { ChartDataSeriesItem } from '../../blocks/ChartBlocks/BarchartBlock/utils'\nimport type { TipSectionProps } from '../../../insights/components/shared/ChartDrawerTemplate/TipSection'\n\nexport interface DrillDownHeader {\n  heading?: string\n  subHeadingText?: string\n  icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n  title?: string\n  subHeader?: Subtitle\n  categoryName: string\n  selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n  TRANSACTION: 'not_standard_amount',\n  CATEGORY_SPEND: 'category_spend',\n  MONTHLY_SPEND: 'monthly_spend_comparison',\n  ACCOUNT_BALANCE: 'account_balance',\n  UPCOMING_BILL: 'upcoming_bill',\n  SPEND_TO_INCOME: 'monthly_spend_to_income',\n  SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n  DEBT_TO_INCOME: 'monthly_debt_to_income',\n  COST_OF_LIVING: 'cost_living_to_income',\n  NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n  DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n  beat: Beat\n  beatTransactions: Transaction[]\n  dataSeries: ChartDataSeriesItem[]\n  selectedIndex: number\n  subIndex: number\n  isLastTab: boolean\n  instanceSlotData: InsightsInstanceSlotData\n  spendCategoryGuids: string[]\n  displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n  top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n  filterStrategy: FilterStrategy\n  colors: ColorKind\n  header?: HeaderKind\n  tipSection?: (\n    setCloseTipSection: (flag: boolean) => void,\n    copy: InsightsFeedCopy,\n    merchantName?: string,\n  ) => TipSectionProps\n  scope: 'store' | 'beat'\n  filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n  (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n  start: startOfMonth(new Date(date ?? NaN)),\n  end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n  accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n  beatTransactions,\n  dataSeries,\n  selectedIndex,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const seriesGuid = seriesItem?.guid\n  const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n  return {\n    custom: (trn) => trn.guid === seriesGuid,\n    dateRange: monthRange(seriesItem?.date),\n    showSplits: !hasBeenSplit,\n  }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n  return {\n    custom: (trn) =>\n      trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n    dateRange: monthRange(seriesItem?.date),\n  }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n  dataSeries,\n  selectedIndex,\n  spendCategoryGuids,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n\n  return {\n    custom: (trn) =>\n      !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n    dateRange: monthRange(seriesItem?.date),\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n  beat,\n  dataSeries,\n  selectedIndex,\n  isLastTab,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const { start, end } = monthRange(seriesItem?.date)\n\n  return {\n    dateRange: {\n      start,\n      end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n    },\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n  [DRILLDOWN_VARIANTS.TRANSACTION]: {\n    top: 'singleBar',\n    scope: 'store',\n    filterMode: 'store',\n    filterStrategy: transactionGuidStrategy,\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      const { title, subHeader } = ctx\n      return {\n        heading: title,\n        subHeadingText: subHeader?.text || undefined,\n        icon: (\n          <MerchantLogo\n            alt={subHeader?.text}\n            categoryGuid={subHeader?.logo?.category_guid || ''}\n            merchantGuid={subHeader?.logo?.merchant_guid || ''}\n            size={16}\n          />\n        ),\n      }\n    },\n    tipSection: (setCloseTipSection, copy, merchantName = '') => {\n      return {\n        message: buildDynamicCopy(\n          copy.general.tip_section_message,\n          <strong>{copy.general.tip_section_title}</strong>,\n          <strong>{merchantName}</strong>,\n        ),\n        onDismiss: () => setCloseTipSection(true),\n      } as TipSectionProps\n    },\n  },\n  [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: categoryStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.categoryName,\n        subHeadingText: ctx.selectedDate\n          ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n          : '',\n        icon: <Icon name=\"calendar_month\" size={16} />,\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: spendCategoriesStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n  },\n  [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n    top: 'singleBar',\n    filterStrategy: accountDateStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.success.main],\n  },\n  [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n    top: 'upcomingBill',\n    filterStrategy: transactionGuidStrategy,\n    scope: 'beat',\n    filterMode: 'local',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n  },\n\n  // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n  // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]:   comparison('spendVsIncome'),\n  // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n  // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]:    comparison('debtVsIncome'),\n  // [DRILLDOWN_VARIANTS.COST_OF_LIVING]:    comparison('costOfLiving'),\n  //\n  // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n  // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n  // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]:        { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n  top: 'singleBar',\n  filterStrategy: transactionGuidStrategy,\n  scope: 'store',\n  filterMode: 'store',\n  colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 export declare const getLayoutConfig: (theme: Theme) => {
-    savings_account_balances_summary: {
+    account_balance: {
         color: string;
     };
     monthly_spend_comparison: {

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js

@@ -1,5 +1,5 @@
 var o = (a) => ({
-  savings_account_balances_summary: { color: a.palette.success.main },
+  account_balance: { color: a.palette.success.main },
   monthly_spend_comparison: { color: a.palette.chart.chart2 }
 });
 export {

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n  return {\n    savings_account_balances_summary: {\n      color: theme.palette.success.main,\n    },\n    monthly_spend_comparison: {\n      color: theme.palette.chart.chart2,\n    },\n  }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,kCAAkC,EAChC,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B,EACxB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n  return {\n    account_balance: {\n      color: theme.palette.success.main,\n    },\n    monthly_spend_comparison: {\n      color: theme.palette.chart.chart2,\n    },\n  }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,iBAAiB,EACf,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B,EACxB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts

@@ -4,7 +4,7 @@ import { DataSeries, InstanceSlot } from '../../../../core';
 import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
 export declare const BAR_CHART_VARIANTS: {
     CATEGORY_COLOR: string;
-    SAVINGS_ACCOUNT_BALANCES_SUMMARY: string;
+    ACCOUNT_BALANCE: string;
     MONTHLY_SPEND_COMPARISON: string;
 };
 export interface ChartDataSeriesItem {

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js

@@ -1,36 +1,36 @@
 import { buildDynamicCopy as i } from "../../../../core/utils/Localization.es.js";
-import { DATE_FORMATS_INTL as u, formatDate as _ } from "../../../../core/constants/DateFormats.es.js";
+import { DATE_FORMATS_INTL as u, formatDate as c } from "../../../../core/constants/DateFormats.es.js";
 import { formatCurrency as m } from "../../../../core/utils/NumberFormatting.es.js";
-import { getCategoryColor as c } from "../../../../core/utils/CategoryUtil.es.js";
-import { getLayoutConfig as C } from "./layout.es.js";
-import { parseISO as p } from "date-fns/parseISO";
+import { getCategoryColor as C } from "../../../../core/utils/CategoryUtil.es.js";
+import { getLayoutConfig as p } from "./layout.es.js";
+import { parseISO as _ } from "date-fns/parseISO";
 var l = {
   CATEGORY_COLOR: "category_color",
-  SAVINGS_ACCOUNT_BALANCES_SUMMARY: "savings_account_balances_summary",
+  ACCOUNT_BALANCE: "account_balance",
   MONTHLY_SPEND_COMPARISON: "monthly_spend_comparison"
-}, g = (t) => t ? t.data ? t.data.map((o) => {
+}, s = (a) => a ? a.data ? a.data.map((o) => {
   const e = {};
-  return t.names?.map((r, a) => {
-    e[r] = o[a];
+  return a.names?.map((r, t) => {
+    e[r] = o[t];
   }), e;
-}) : [] : [], y = (t, o, e = u.MONTH_SHORT) => [...t].sort((r, a) => !r.date || !a.date ? 0 : new Date(r.date).getTime() - new Date(a.date).getTime()).map((r) => {
-  const a = r.date ? _(p(r.date), e) : r.label ?? "", n = r.amount ?? 0;
+}) : [] : [], y = (a, o, e = u.MONTH_SHORT) => [...a].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
+  const t = r.date ? c(_(r.date), e) : r.label ?? "", n = r.amount ?? 0;
   return {
-    ariaLabel: i(o, a, m(n, "0.00")),
+    ariaLabel: i(o, t, m(n, "0.00")),
     date: r.date ?? null,
-    label: a,
+    label: t,
     value: n,
     formattedAmount: m(n, "0,0")
   };
-}), R = (t, o, e) => {
-  const { variant: r } = t, a = C(e);
-  return r === l.CATEGORY_COLOR && o.category_guid ? { color: c(o.category_guid, e) } : { color: a[r]?.color ?? e.palette.primary.main };
+}), R = (a, o, e) => {
+  const { variant: r } = a, t = p(e);
+  return r === l.CATEGORY_COLOR && o.category_guid ? { color: C(o.category_guid, e) } : { color: t[r]?.color ?? e.palette.primary.main };
 };
 export {
   l as BAR_CHART_VARIANTS,
   R as barChartVariant,
   y as buildChartData,
-  g as buildDataSeries
+  s as buildDataSeries
 };
 
 //# sourceMappingURL=utils.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'category_color',\n  SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'savings_account_balances_summary',\n  MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n  date?: string\n  amount?: number\n  guid?: string\n  label?: string\n  aggregated_guids?: string[]\n  localized_label?: string\n  category_guid?: string\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (\n  dataSeries: ChartDataSeriesItem[],\n  ariaLabel: string,\n  dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n  const data = [...dataSeries]\n    .sort((a, b) => {\n      if (!a.date || !b.date) return 0\n\n      return new Date(a.date).getTime() - new Date(b.date).getTime()\n    })\n    .map((total) => {\n      const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n      const amount = total.amount ?? 0\n\n      return {\n        ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n        date: total.date ?? null,\n        label,\n        value: amount,\n        formattedAmount: formatCurrency(amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAYa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'category_color',\n  ACCOUNT_BALANCE: 'account_balance',\n  MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n  date?: string\n  amount?: number\n  guid?: string\n  label?: string\n  aggregated_guids?: string[]\n  localized_label?: string\n  category_guid?: string\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (\n  dataSeries: ChartDataSeriesItem[],\n  ariaLabel: string,\n  dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n  const data = [...dataSeries]\n    .sort((a, b) => {\n      if (!a.date || !b.date) return 0\n\n      return new Date(a.date).getTime() - new Date(b.date).getTime()\n    })\n    .map((total) => {\n      const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n      const amount = total.amount ?? 0\n\n      return {\n        ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n        date: total.date ?? null,\n        label,\n        value: amount,\n        formattedAmount: formatCurrency(amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAYa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}

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

@@ -16,11 +16,10 @@ import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import { useTheme as A } from "@mui/material/styles";
 import i from "@mui/material/Box";
 var F = {
-  unified_deposit: "payments",
-  unified_deposit_emergency_fund: "payments",
+  deposit_received: "payments",
   status_on_track: "monetization_on"
 }, io = ({ payload: y }) => {
-  const v = A(), c = V(null), { height: d, width: l } = S(c), { instance_slot: m } = y, { variant: s, amount: p, sub_text: w, header_text: n, institution_guid: u, institution_name: h, icon_name: _, label: R, merchant_guid: C, merchant_name: f, category_guid: k } = m, e = B(N(v), s, "default", "AccountBlock");
+  const v = A(), c = V(null), { height: d, width: l } = S(c), { instance_slot: m } = y, { variant: s, amount: p, sub_text: w, header_text: n, institution_guid: h, institution_name: u, icon_name: R, label: _, merchant_guid: C, merchant_name: f, category_guid: k } = m, e = B(N(v), s, "default", "AccountBlock");
   if (e?.isConfetti) {
     const T = {
       paidOffCard: /* @__PURE__ */ o(i, {
@@ -57,13 +56,13 @@ var F = {
         children: /* @__PURE__ */ o(D, {
           categoryGuid: k,
           iconName: F[s] ?? "payments",
-          institutionGuid: u,
-          institutionName: h,
+          institutionGuid: h,
+          institutionName: u,
           merchantGuid: C,
           merchantName: f
         })
       })
-    }[e.graphic ?? "logo"], g = e.secondarySource === "merchant" ? f ?? h : R, x = g ? /* @__PURE__ */ o(a, {
+    }[e.graphic ?? "logo"], g = e.secondarySource === "merchant" ? f ?? u : _, x = g ? /* @__PURE__ */ o(a, {
       color: e.secondaryColor,
       variant: e.secondaryVariant,
       children: g
@@ -167,7 +166,7 @@ var F = {
         gap: 16,
         p: 16,
         width: "100%",
-        ...(u || _) && { flexDirection: "row" }
+        ...(h || R) && { flexDirection: "row" }
       },
       children: [/* @__PURE__ */ o(P, {
         slot: m,

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 type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\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 { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n  unified_deposit: 'payments',\n  unified_deposit_emergency_fund: 'payments',\n  status_on_track: 'monetization_on',\n}\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 {\n    variant,\n    amount,\n    sub_text,\n    header_text,\n    institution_guid,\n    institution_name,\n    icon_name,\n    label,\n    merchant_guid,\n    merchant_name,\n    category_guid,\n  } = instance_slot\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 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          <DepositLogo\n            categoryGuid={category_guid}\n            iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n            institutionGuid={institution_guid}\n            institutionName={institution_name}\n            merchantGuid={merchant_guid}\n            merchantName={merchant_name}\n          />\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    const secondaryText =\n      layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    const amountText = (\n      <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n        {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n      </Text>\n    )\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            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        p: 16,\n        ...layoutConfig,\n      }}\n    >\n      {header_text && <HeaderComponent headerText={header_text} />}\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          ...(header_text && {\n            borderTopLeftRadius: '0',\n            borderTopRightRadius: '0',\n          }),\n          gap: 16,\n          p: 16,\n          width: '100%',\n          ...((institution_guid || icon_name) && {\n            flexDirection: 'row',\n          }),\n        }}\n      >\n        <IconComponent slot={instance_slot} variant={variant} />\n\n        <Stack>\n          <Text variant=\"h1\">{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            <Text variant=\"body2\">{sub_text}</Text>\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 type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\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 { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n  deposit_received: 'payments',\n  status_on_track: 'monetization_on',\n}\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 {\n    variant,\n    amount,\n    sub_text,\n    header_text,\n    institution_guid,\n    institution_name,\n    icon_name,\n    label,\n    merchant_guid,\n    merchant_name,\n    category_guid,\n  } = instance_slot\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 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          <DepositLogo\n            categoryGuid={category_guid}\n            iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n            institutionGuid={institution_guid}\n            institutionName={institution_name}\n            merchantGuid={merchant_guid}\n            merchantName={merchant_name}\n          />\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    const secondaryText =\n      layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    const amountText = (\n      <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n        {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n      </Text>\n    )\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            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        p: 16,\n        ...layoutConfig,\n      }}\n    >\n      {header_text && <HeaderComponent headerText={header_text} />}\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          ...(header_text && {\n            borderTopLeftRadius: '0',\n            borderTopRightRadius: '0',\n          }),\n          gap: 16,\n          p: 16,\n          width: '100%',\n          ...((institution_guid || icon_name) && {\n            flexDirection: 'row',\n          }),\n        }}\n      >\n        <IconComponent slot={instance_slot} variant={variant} />\n\n        <Stack>\n          <Text variant=\"h1\">{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            <Text variant=\"body2\">{sub_text}</Text>\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.d.ts

@@ -4,7 +4,7 @@ export interface BlockLayoutConfig {
     logo_color?: string;
     logo_bGcolor?: string;
     logo_border_color?: string;
-    /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on transparent_overdraft). */
+    /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */
     sub_logo?: string;
     /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */
     isConfetti?: boolean;

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

@@ -1,41 +1,25 @@
-import { CELEBRATION_GRADIENT as a, WARM_LIME_ACCENT_GRADIENT as r } from "../../../components/celebrationGradients.es.js";
+import { CELEBRATION_GRADIENT as o, WARM_LIME_ACCENT_GRADIENT as a } from "../../../components/celebrationGradients.es.js";
 import { alpha as e } from "@mui/material/styles";
-var i = (o) => ({
-  transparent_overdraft: {
-    background: o.palette.warning.light,
+var i = (r) => ({
+  overdraft_warning: {
+    background: r.palette.warning.light,
     sub_logo: "error"
   },
-  low_account_balance: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
+  low_balance_alert: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
   status_off_track: {
     logo_color: "background.paper",
     logo_bGcolor: "error.main",
     background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)"
   },
-  monthly_credit_card_interest_summary: {
+  interest_charges_summary: {
     logo_color: "text.primary",
-    logo_bGcolor: e(o.palette.categories?.feesCharges || "", 0.25),
+    logo_bGcolor: e(r.palette.categories?.feesCharges || "", 0.25),
     logo_border_color: "categories.feesCharges",
     background: "linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)"
   },
-  unified_deposit: {
+  deposit_received: {
     isConfetti: !0,
-    gradient: r,
-    graphic: "logo",
-    amountVariant: "h3",
-    amountPrefix: "+",
-    categoryStrip: !0,
-    rowSx: {
-      gap: 12,
-      p: 12
-    },
-    secondarySource: "merchant",
-    secondaryPosition: "below",
-    secondaryVariant: "body2",
-    secondaryColor: "text.primary"
-  },
-  unified_deposit_emergency_fund: {
-    isConfetti: !0,
-    gradient: r,
+    gradient: a,
     graphic: "logo",
     amountVariant: "h3",
     amountPrefix: "+",
@@ -51,7 +35,7 @@ var i = (o) => ({
   },
   status_on_track: {
     isConfetti: !0,
-    gradient: r,
+    gradient: a,
     graphic: "logo",
     amountVariant: "h2",
     rowSx: {
@@ -63,9 +47,9 @@ var i = (o) => ({
     secondaryVariant: "caption",
     secondaryColor: "text.secondary"
   },
-  celebrate_credit_card_payoff: {
+  payoff_celebration: {
     isConfetti: !0,
-    gradient: a,
+    gradient: o,
     graphic: "paidOffCard",
     amountVariant: "h2",
     rowSx: {
@@ -78,9 +62,9 @@ var i = (o) => ({
     secondaryVariant: "caption",
     secondaryColor: "text.secondary"
   },
-  savings_account_deposit: {
+  savings_deposit: {
     isConfetti: !0,
-    gradient: a,
+    gradient: o,
     graphic: "savings",
     amountVariant: "h2",
     rowSx: {

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  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  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on transparent_overdraft). */\n  sub_logo?: 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  /** 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\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    transparent_overdraft: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    low_account_balance: {\n      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\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      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\n    monthly_credit_card_interest_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    unified_deposit: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    unified_deposit_emergency_fund: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: 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    celebrate_credit_card_payoff: {\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_account_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":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,uBAAuB;AAAA,IACrB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,qBAAqB,EACnB,YACE,0FACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;AAAA,EACA,sCAAsC;AAAA,IACpC,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,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,gCAAgC;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,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,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,8BAA8B;AAAA,IAC5B,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,yBAAyB;AAAA,IACvB,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  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  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: 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  /** 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\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: {\n      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\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      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\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      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":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB,EACjB,YACE,0FACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;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,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/blocks/ComponentBlocks/TransactionBlock/layout.d.ts

@@ -3,19 +3,19 @@ import { Theme } from '@mui/material/styles';
  * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same
  * pre-localized rows through `TransactionListCard`; only the header and the slot differ.
  *
- * - `WithHeader`                   — row under a date header (Fee Detected, Large Transaction).
- * - `NoHeader`                     — the row alone (Large Transaction without a merchant).
- * - `UncategorizedTransaction`     — filled primary header ("{count} transactions").
- * - `SubscriptionDetected`         — borderless row on the blue slot wash.
- * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and
- *   subscribed / not-subscribed status row are not drawn yet.
+ * - `WithHeader`              — row under a date header (Fee Detected, Large Transaction).
+ * - `NoHeader`                — the row alone (Large Transaction without a merchant).
+ * - `UncategorizedTransaction` — filled primary header ("{count} transactions").
+ * - `InfoWash`                — borderless row on the blue slot wash (e.g. Subscription Detected).
+ * - `WarningWash`             — borderless row on the warning slot wash (e.g. Unexpected
+ *   Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.
  */
 export declare const transactionBlockVariant: {
     readonly WithHeader: "with_header";
     readonly NoHeader: "no_header";
     readonly UncategorizedTransaction: "uncategorized_transaction";
-    readonly SubscriptionDetected: "subscription_detected";
-    readonly UnexpectedSubscriptionPayment: "unexpected_subscription_payment";
+    readonly InfoWash: "info_wash";
+    readonly WarningWash: "warning_wash";
 };
 export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
 export interface TransactionLayoutConfig {

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

@@ -1,29 +1,29 @@
-import { WARNING_WASH_GRADIENT as r, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
-var e = {
+import { WARNING_WASH_GRADIENT as e, getPrimaryWashGradient as n } from "../../../components/celebrationGradients.es.js";
+var a = {
   WithHeader: "with_header",
   NoHeader: "no_header",
   UncategorizedTransaction: "uncategorized_transaction",
-  SubscriptionDetected: "subscription_detected",
-  UnexpectedSubscriptionPayment: "unexpected_subscription_payment"
-}, i = (a) => ({
-  [e.WithHeader]: { showHeader: !0 },
-  [e.NoHeader]: { showHeader: !1 },
-  [e.UncategorizedTransaction]: {
+  InfoWash: "info_wash",
+  WarningWash: "warning_wash"
+}, t = (r) => ({
+  [a.WithHeader]: { showHeader: !0 },
+  [a.NoHeader]: { showHeader: !1 },
+  [a.UncategorizedTransaction]: {
     showHeader: !0,
     cardVariant: "primary"
   },
-  [e.SubscriptionDetected]: {
+  [a.InfoWash]: {
     showHeader: !1,
-    background: t(a)
+    background: n(r)
   },
-  [e.UnexpectedSubscriptionPayment]: {
+  [a.WarningWash]: {
     showHeader: !1,
-    background: r
+    background: e
   }
 });
 export {
-  i as getLayoutConfig,
-  e as transactionBlockVariant
+  t as getLayoutConfig,
+  a as transactionBlockVariant
 };
 
 //# sourceMappingURL=layout.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n  WARNING_WASH_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader`                   — row under a date header (Fee Detected, Large Transaction).\n * - `NoHeader`                     — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction`     — filled primary header (\"{count} transactions\").\n * - `SubscriptionDetected`         — borderless row on the blue slot wash.\n * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and\n *   subscribed / not-subscribed status row are not drawn yet.\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  SubscriptionDetected: 'subscription_detected',\n  UnexpectedSubscriptionPayment: 'unexpected_subscription_payment',\n} as const\n\nexport type TransactionBlockVariant =\n  (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n  /** Show `instance_slot.data.header_text` above the rows. */\n  showHeader: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** CSS background for the slot behind the card; the card then renders borderless on paper. */\n  background?: string\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  [transactionBlockVariant.WithHeader]: { showHeader: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.SubscriptionDetected]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n  },\n  [transactionBlockVariant.UnexpectedSubscriptionPayment]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n  },\n})\n"],"mappings":";AAkBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,sBAAsB;AAAA,EACtB,+BAA+B;AACjC,GAea,IAAA,CACX,OAC8D;AAAA,EAC7D,CAAA,EAAwB,UAAA,GAAa,EAAE,YAAY,GAAK;AAAA,EACxD,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,oBAAA,GAAuB;AAAA,IAC9C,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,EAC1C;AAAA,EACC,CAAA,EAAwB,6BAAA,GAAgC;AAAA,IACvD,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n  WARNING_WASH_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader`              — row under a date header (Fee Detected, Large Transaction).\n * - `NoHeader`                — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction` — filled primary header (\"{count} transactions\").\n * - `InfoWash`                — borderless row on the blue slot wash (e.g. Subscription Detected).\n * - `WarningWash`             — borderless row on the warning slot wash (e.g. Unexpected\n *   Subscription Payment). Treatment names, not beat names, so any beat can reuse the wash.\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  InfoWash: 'info_wash',\n  WarningWash: 'warning_wash',\n} as const\n\nexport type TransactionBlockVariant =\n  (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n  /** Show `instance_slot.data.header_text` above the rows. */\n  showHeader: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** CSS background for the slot behind the card; the card then renders borderless on paper. */\n  background?: string\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  [transactionBlockVariant.WithHeader]: { showHeader: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.InfoWash]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n  },\n  [transactionBlockVariant.WarningWash]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n  },\n})\n"],"mappings":";AAkBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AACf,GAea,IAAA,CACX,OAC8D;AAAA,EAC7D,CAAA,EAAwB,UAAA,GAAa,EAAE,YAAY,GAAK;AAAA,EACxD,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,QAAA,GAAW;AAAA,IAClC,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,EAC1C;AAAA,EACC,CAAA,EAAwB,WAAA,GAAc;AAAA,IACrC,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACF"}

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

@@ -131,7 +131,7 @@ var h = [
     variant: p
   });
 }, v = y({
-  variants: { [b.UpcomingSubscription]: f },
+  variants: { [b.Hero]: f },
   fallback: f,
   name: "UpcomingSubscriptionBlock"
 });

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

@@ -1 +1 @@
-{"version":3,"file":"UpcomingSubscriptionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport SubscriptionHeroCard from '../../../components/SubscriptionHeroCard'\nimport { createVariantBlock } from '../../createVariantBlock'\n\nimport { upcomingSubscriptionVariant } from './layout'\n\ninterface UpcomingSubscriptionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n// Fixed tile positions for the scattered merchant-logo backdrop. Each cell sits over the\n// 320x182-ish hero slot in CSS percentages; the card's `overflow: hidden` clips any that fall\n// partly off-frame, which matches the Figma design.\nexport const BACKDROP_TILES: { size: number; opacity: number; left: number; top: number }[] = [\n  { size: 51, opacity: 0.5, left: 6.9, top: -13.7 },\n  { size: 51, opacity: 0.5, left: 82.8, top: 75.9 },\n  { size: 33, opacity: 0.35, left: 15.9, top: 35.7 },\n  { size: 33, opacity: 0.35, left: -5.0, top: 57.1 },\n  { size: 33, opacity: 0.35, left: 9.3, top: 89.8 },\n  { size: 33, opacity: 0.35, left: 96.0, top: 48.8 },\n  { size: 33, opacity: 0.35, left: 69.7, top: -9.3 },\n  { size: 26, opacity: 0.25, left: 33.1, top: 76.4 },\n  { size: 26, opacity: 0.25, left: 0.6, top: 24.8 },\n  { size: 26, opacity: 0.25, left: 94.1, top: 5.5 },\n  { size: 26, opacity: 0.25, left: 75.4, top: 27.5 },\n  { size: 16, opacity: 0.1, left: 59.7, top: 88.8 },\n  { size: 16, opacity: 0.1, left: 72.3, top: 57.9 },\n]\n\nconst UpcomingSubscriptionVariant = ({ payload }: UpcomingSubscriptionBlockProps) => {\n  const { instance_slot } = payload\n  const { amount, cadence, merchant_guid, merchant_name } = instance_slot\n\n  const logoRef = merchant_guid ? { alt: merchant_name ?? '', guid: merchant_guid } : null\n  const amountText = formatCurrency(amount ?? 0, '0,0.00')\n  const price = cadence ? `${amountText} / ${cadence}` : amountText\n\n  const backdrop = logoRef ? (\n    // Defensive: SubscriptionHeroCard already wraps `backdrop` in an aria-hidden container, but\n    // we mark the inner cluster aria-hidden too so AT skips the 13 tiles even if the shared\n    // card's wrapper is refactored.\n    <Box aria-hidden={true} data-testid=\"upcoming-subscription-backdrop\">\n      {BACKDROP_TILES.map((t) => (\n        <Box\n          key={`${t.size}-${t.left}-${t.top}`}\n          sx={{\n            alignItems: 'center',\n            display: 'flex',\n            height: t.size,\n            justifyContent: 'center',\n            left: `${t.left}%`,\n            opacity: t.opacity,\n            position: 'absolute',\n            top: `${t.top}%`,\n            width: t.size,\n          }}\n        >\n          <LogoFromGuid logo={logoRef} size={t.size} />\n        </Box>\n      ))}\n    </Box>\n  ) : null\n\n  return (\n    <Stack sx={{ px: 16 }}>\n      <SubscriptionHeroCard\n        backdrop={backdrop}\n        logo={logoRef ? <LogoFromGuid logo={logoRef} size={64} /> : null}\n        name={merchant_name ?? ''}\n        price={price}\n        sx={{ px: 0 }}\n      />\n    </Stack>\n  )\n}\n\n/**\n * Upcoming Subscription component block (Figma: \"Full | Upcoming Subscription\"). Reads\n * `amount`, `cadence`, and merchant facts off `instance_slot` (V2 flat shape — no\n * `instance_slot_data`) and renders the shared `SubscriptionHeroCard` with the scattered\n * faded-logo backdrop.\n *\n * Wrapped in `createVariantBlock` from day one so an added design branch is a new registry\n * entry, not a rewrite of dispatch logic. Today only `upcoming_subscription` is defined; an\n * unknown variant degrades to it.\n */\nconst UpcomingSubscriptionBlock = ({ payload, beatGuid }: UpcomingSubscriptionBlockProps) => {\n  const variant = payload.instance_slot.variant ?? undefined\n  return <Variants beatGuid={beatGuid} payload={payload} variant={variant} />\n}\n\nconst Variants = createVariantBlock<UpcomingSubscriptionBlockProps>({\n  variants: {\n    [upcomingSubscriptionVariant.UpcomingSubscription]: UpcomingSubscriptionVariant,\n  },\n  fallback: UpcomingSubscriptionVariant,\n  name: 'UpcomingSubscriptionBlock',\n})\n\nexport default UpcomingSubscriptionBlock\n"],"mappings":"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"}
+{"version":3,"file":"UpcomingSubscriptionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport SubscriptionHeroCard from '../../../components/SubscriptionHeroCard'\nimport { createVariantBlock } from '../../createVariantBlock'\n\nimport { upcomingSubscriptionVariant } from './layout'\n\ninterface UpcomingSubscriptionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n// Fixed tile positions for the scattered merchant-logo backdrop. Each cell sits over the\n// 320x182-ish hero slot in CSS percentages; the card's `overflow: hidden` clips any that fall\n// partly off-frame, which matches the Figma design.\nexport const BACKDROP_TILES: { size: number; opacity: number; left: number; top: number }[] = [\n  { size: 51, opacity: 0.5, left: 6.9, top: -13.7 },\n  { size: 51, opacity: 0.5, left: 82.8, top: 75.9 },\n  { size: 33, opacity: 0.35, left: 15.9, top: 35.7 },\n  { size: 33, opacity: 0.35, left: -5.0, top: 57.1 },\n  { size: 33, opacity: 0.35, left: 9.3, top: 89.8 },\n  { size: 33, opacity: 0.35, left: 96.0, top: 48.8 },\n  { size: 33, opacity: 0.35, left: 69.7, top: -9.3 },\n  { size: 26, opacity: 0.25, left: 33.1, top: 76.4 },\n  { size: 26, opacity: 0.25, left: 0.6, top: 24.8 },\n  { size: 26, opacity: 0.25, left: 94.1, top: 5.5 },\n  { size: 26, opacity: 0.25, left: 75.4, top: 27.5 },\n  { size: 16, opacity: 0.1, left: 59.7, top: 88.8 },\n  { size: 16, opacity: 0.1, left: 72.3, top: 57.9 },\n]\n\nconst UpcomingSubscriptionVariant = ({ payload }: UpcomingSubscriptionBlockProps) => {\n  const { instance_slot } = payload\n  const { amount, cadence, merchant_guid, merchant_name } = instance_slot\n\n  const logoRef = merchant_guid ? { alt: merchant_name ?? '', guid: merchant_guid } : null\n  const amountText = formatCurrency(amount ?? 0, '0,0.00')\n  const price = cadence ? `${amountText} / ${cadence}` : amountText\n\n  const backdrop = logoRef ? (\n    // Defensive: SubscriptionHeroCard already wraps `backdrop` in an aria-hidden container, but\n    // we mark the inner cluster aria-hidden too so AT skips the 13 tiles even if the shared\n    // card's wrapper is refactored.\n    <Box aria-hidden={true} data-testid=\"upcoming-subscription-backdrop\">\n      {BACKDROP_TILES.map((t) => (\n        <Box\n          key={`${t.size}-${t.left}-${t.top}`}\n          sx={{\n            alignItems: 'center',\n            display: 'flex',\n            height: t.size,\n            justifyContent: 'center',\n            left: `${t.left}%`,\n            opacity: t.opacity,\n            position: 'absolute',\n            top: `${t.top}%`,\n            width: t.size,\n          }}\n        >\n          <LogoFromGuid logo={logoRef} size={t.size} />\n        </Box>\n      ))}\n    </Box>\n  ) : null\n\n  return (\n    <Stack sx={{ px: 16 }}>\n      <SubscriptionHeroCard\n        backdrop={backdrop}\n        logo={logoRef ? <LogoFromGuid logo={logoRef} size={64} /> : null}\n        name={merchant_name ?? ''}\n        price={price}\n        sx={{ px: 0 }}\n      />\n    </Stack>\n  )\n}\n\n/**\n * Upcoming Subscription component block (Figma: \"Full | Upcoming Subscription\"). Reads\n * `amount`, `cadence`, and merchant facts off `instance_slot` (V2 flat shape — no\n * `instance_slot_data`) and renders the shared `SubscriptionHeroCard` with the scattered\n * faded-logo backdrop.\n *\n * Wrapped in `createVariantBlock` from day one so an added design branch is a new registry\n * entry, not a rewrite of dispatch logic. Today only `upcoming_subscription` is defined; an\n * unknown variant degrades to it.\n */\nconst UpcomingSubscriptionBlock = ({ payload, beatGuid }: UpcomingSubscriptionBlockProps) => {\n  const variant = payload.instance_slot.variant ?? undefined\n  return <Variants beatGuid={beatGuid} payload={payload} variant={variant} />\n}\n\nconst Variants = createVariantBlock<UpcomingSubscriptionBlockProps>({\n  variants: {\n    [upcomingSubscriptionVariant.Hero]: UpcomingSubscriptionVariant,\n  },\n  fallback: UpcomingSubscriptionVariant,\n  name: 'UpcomingSubscriptionBlock',\n})\n\nexport default UpcomingSubscriptionBlock\n"],"mappings":"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"}

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

@@ -1,13 +1,14 @@
 /**
  * Design branches of the Upcoming Subscription component block.
  *
- * - `UpcomingSubscription` — the only variant today (Figma: "Full | Upcoming Subscription"):
- *   64px hero merchant logo + name (h2) + price pill, over a scattered faded-logo backdrop.
+ * - `Hero` — the only variant today (Figma: "Full | Upcoming Subscription"): 64px hero merchant
+ *   logo + name (h2) + price pill, over a scattered faded-logo backdrop. Design-named (not the beat
+ *   name) so another beat wanting the same hero can reuse it.
  *
  * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry
  * rather than editing dispatch logic.
  */
 export declare const upcomingSubscriptionVariant: {
-    readonly UpcomingSubscription: "upcoming_subscription";
+    readonly Hero: "hero";
 };
 export type UpcomingSubscriptionVariant = (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant];

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

@@ -1,6 +1,6 @@
-var i = { UpcomingSubscription: "upcoming_subscription" };
+var r = { Hero: "hero" };
 export {
-  i as upcomingSubscriptionVariant
+  r as upcomingSubscriptionVariant
 };
 
 //# sourceMappingURL=layout.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.ts"],"sourcesContent":["/**\n * Design branches of the Upcoming Subscription component block.\n *\n * - `UpcomingSubscription` — the only variant today (Figma: \"Full | Upcoming Subscription\"):\n *   64px hero merchant logo + name (h2) + price pill, over a scattered faded-logo backdrop.\n *\n * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry\n * rather than editing dispatch logic.\n */\nexport const upcomingSubscriptionVariant = {\n  UpcomingSubscription: 'upcoming_subscription',\n} as const\n\nexport type UpcomingSubscriptionVariant =\n  (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant]\n"],"mappings":"AASA,IAAa,IAA8B,EACzC,sBAAsB,wBACxB"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/UpcomingSubscriptionBlock/layout.ts"],"sourcesContent":["/**\n * Design branches of the Upcoming Subscription component block.\n *\n * - `Hero` — the only variant today (Figma: \"Full | Upcoming Subscription\"): 64px hero merchant\n *   logo + name (h2) + price pill, over a scattered faded-logo backdrop. Design-named (not the beat\n *   name) so another beat wanting the same hero can reuse it.\n *\n * Scaffolded through `createVariantBlock` so adding a future design branch is a new registry entry\n * rather than editing dispatch logic.\n */\nexport const upcomingSubscriptionVariant = {\n  Hero: 'hero',\n} as const\n\nexport type UpcomingSubscriptionVariant =\n  (typeof upcomingSubscriptionVariant)[keyof typeof upcomingSubscriptionVariant]\n"],"mappings":"AAUA,IAAa,IAA8B,EACzC,MAAM,OACR"}

package/package.json

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