@mx-cartographer/experiences 9.6.1 → 9.6.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [9.6.2] - 10-12-2026
+
+- **CHANGED** - `AccountSwitchBlock` reads its per-variant props from a new `layout.ts` keyed by `instance_slot.variant` (`account_connect`, `account_connected`, `switch_direct_deposit`), so Switch Direct Deposit's pending state shares the block with Discovered Accounts. `account_connect` now renders the Figma blue slot gradient; unknown variants fall back to it (WEC-1891)
+- **REMOVED** - `is_connected` from the exported `AccountSwitchBlockData` type. The connect / connected state comes from `instance_slot.variant`, which ditto has sent since 1.0; no host read the flag (WEC-1891)
+- **CHANGED** - `TransactionBlock` reads header and slot treatment from a new `layout.ts` keyed by `instance_slot.variant`. Adds `uncategorized_transaction` (filled primary header), `subscription_detected` (blue slot wash) and `unexpected_subscription_payment` (warning slot wash) alongside `with_header` / `no_header`; unknown variants fall back to the plain row. Shared `getPrimaryWashGradient` and `WARNING_WASH_GRADIENT` added to `celebrationGradients` (WEC-1891)
+- **ADDED** - `resolveVariantConfig` (insights-v2 blocks): shared lookup from a block's `layout.ts` table by `instance_slot.variant`, guarded with `Object.hasOwn` so a backend-controlled key can never resolve to an inherited object property, and warning on an unknown variant before falling back (same contract as `createVariantBlock`). Both blocks above use it (WEC-1891)
+
 ## [9.6.1] - 10-12-2026
 
 - **ADDED** - Three Insights V2 CTA action blocks, registered in `actionBlocksKey`/`blocks`: `feedback_modal_block` (`FeedbackModalActionBlock`) renders a survey dialog with a success/error `StatusSnackbar` on top of the action drawer; `connection_detail_block` (`ConnectionDetailActionBlock`) shows the connection-details education drilldown (`ConnectionDetailDrillDown`); and `connect_widget_block` (`ConnectWidgetActionBlock`) boots MX's Connect widget (web-widget-sdk iframe) inside the drawer. Added `feedback_modal` and `connection_details` copy under `insights_feed`, exported the new `FeedbackModal`, `StatusSnackbar`, and `ConnectionDetailDrillDown` components, and added tests and stories (WEC-1879)

package/dist/core/types/InsightsInstanceSlotData.d.ts

@@ -88,7 +88,6 @@ export interface AccountSwitchBlockData {
     discovered_institution_name: string;
     held_institution_guid: string;
     held_institution_name: string;
-    is_connected: boolean;
 }
 export interface StepChartBlockData {
     completed_steps: number;

package/dist/core/types/InsightsInstanceSlotData.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends } from '../../core'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BarChartBlockData>,\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<DoubleProgressBarBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<SaveExtraBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<AccountSwitchBlockData>,\n    Partial<TransactionDetailsBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  date?: string\n  legends?: Legends[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n  transaction_guids?: string[]\n  account_guids?: string[]\n  primary_transaction_guid?: string\n}\n\n//BarChart Block\nexport interface BarChartBlockData {\n  average_amount?: number\n  ariaLabel?: string\n}\n\n//DonutChart Block\ninterface Main {\n  value: string\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: Main\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\n//DoubleProgressBar Block\n\ninterface DoubleProgressBarProps {\n  label: string\n  value: number\n}\nexport interface DoubleProgressBarBlockData {\n  doubleProgressBar: {\n    previous: DoubleProgressBarProps\n    latest: DoubleProgressBarProps\n  }\n}\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\nexport interface SaveExtraBlockData {\n  /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */\n  primary_text?: string[]\n  /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */\n  secondary_text?: string[]\n  /** MakeTransfer drilldown: available balance (both variants). */\n  available_balance?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */\n  avg_monthly_spend?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. \"2 months, 11 days\"). */\n  time_period?: string\n  /** SAVE_AN_EXTRA_100: upcoming expenses (the \"Expenses\" figure). */\n  upcoming_expenses?: number\n  /** SAVE_AN_EXTRA_100: total remaining after expenses. */\n  total_remaining?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: date for the \"Your available balances as of {date}\" line. */\n  date?: string\n}\n\n//AccountSwitch Block\nexport interface AccountSwitchBlockData {\n  discovered_institution_guid: string\n  discovered_institution_name: string\n  held_institution_guid: string\n  held_institution_name: string\n  is_connected: boolean\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\n// TransactionDetails Action Block\n// The drawer's subject is `InsightsPayload.primary_transaction_guid`; only action configuration\n// lives here.\nexport interface TransactionDetailsBlockData {\n  /** `TopActions` member names, e.g. `['Category', 'Date', 'Memo']`. Omit for the defaults. */\n  top_actions?: string[]\n  /** `BottomActions` member names, e.g. `['MerchantBudget', 'HideTransaction']`. Omit for defaults. */\n  bottom_actions?: string[]\n}\n"],"mappings":"AAuIA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}
+{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends } from '../../core'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BarChartBlockData>,\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<DoubleProgressBarBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<SaveExtraBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<AccountSwitchBlockData>,\n    Partial<TransactionDetailsBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  date?: string\n  legends?: Legends[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n  transaction_guids?: string[]\n  account_guids?: string[]\n  primary_transaction_guid?: string\n}\n\n//BarChart Block\nexport interface BarChartBlockData {\n  average_amount?: number\n  ariaLabel?: string\n}\n\n//DonutChart Block\ninterface Main {\n  value: string\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: Main\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\n//DoubleProgressBar Block\n\ninterface DoubleProgressBarProps {\n  label: string\n  value: number\n}\nexport interface DoubleProgressBarBlockData {\n  doubleProgressBar: {\n    previous: DoubleProgressBarProps\n    latest: DoubleProgressBarProps\n  }\n}\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\nexport interface SaveExtraBlockData {\n  /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */\n  primary_text?: string[]\n  /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */\n  secondary_text?: string[]\n  /** MakeTransfer drilldown: available balance (both variants). */\n  available_balance?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */\n  avg_monthly_spend?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. \"2 months, 11 days\"). */\n  time_period?: string\n  /** SAVE_AN_EXTRA_100: upcoming expenses (the \"Expenses\" figure). */\n  upcoming_expenses?: number\n  /** SAVE_AN_EXTRA_100: total remaining after expenses. */\n  total_remaining?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: date for the \"Your available balances as of {date}\" line. */\n  date?: string\n}\n\n// AccountSwitch Block. State comes from `instance_slot.variant`, not a data flag.\nexport interface AccountSwitchBlockData {\n  discovered_institution_guid: string\n  discovered_institution_name: string\n  held_institution_guid: string\n  held_institution_name: string\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\n// TransactionDetails Action Block\n// The drawer's subject is `InsightsPayload.primary_transaction_guid`; only action configuration\n// lives here.\nexport interface TransactionDetailsBlockData {\n  /** `TopActions` member names, e.g. `['Category', 'Date', 'Memo']`. Omit for the defaults. */\n  top_actions?: string[]\n  /** `BottomActions` member names, e.g. `['MerchantBudget', 'HideTransaction']`. Omit for defaults. */\n  bottom_actions?: string[]\n}\n"],"mappings":"AAsIA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}

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

@@ -1,10 +1,8 @@
 import { AccountSwitchBlockData } from '../../../../core/types/InsightsInstanceSlotData';
 import { BlockProps } from '../../types';
 /**
- * Discovered-accounts connect visual: two institution logos on a transfer track.
- * The pending state (`is_connected: false`) shows a link badge on the default
- * slot; the connected state (`is_connected: true`) switches to a success badge
- * with the discovered-accounts gradient and a confetti wash.
+ * Two institution logos on a transfer track, shared by Discovered Accounts and Switch
+ * Direct Deposit. `instance_slot.variant` picks the design branch from `./layout.ts`.
  */
 declare const AccountSwitchBlock: ({ payload }: BlockProps<AccountSwitchBlockData>) => import("react/jsx-runtime").JSX.Element;
 export default AccountSwitchBlock;

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

@@ -1,43 +1,34 @@
-import "../../../components/celebrationGradients.es.js";
-import u from "../../../components/TransferLogoCard.es.js";
+import _ from "../../../components/TransferLogoCard.es.js";
+import { resolveVariantConfig as l } from "../../resolveVariantConfig.es.js";
+import { accountSwitchVariant as g, getLayoutConfig as h } from "./layout.es.js";
 import { InstitutionLogo as i } from "@mxenabled/mxui";
-import { Icon as e } from "@mxenabled/mx-icons";
-import { jsx as o } from "react/jsx-runtime";
-var r = 64, m = /* @__PURE__ */ o(e, {
-  "aria-hidden": !0,
-  name: "link",
-  size: 20,
-  sx: { color: "primary.contrastText" }
-}), g = /* @__PURE__ */ o(e, {
-  "aria-hidden": !0,
-  name: "check_circle",
-  size: 20,
-  sx: { color: "common.white" }
-}), x = ({ payload: n }) => {
-  const { discovered_institution_guid: a, discovered_institution_name: s, held_institution_guid: c, held_institution_name: d, is_connected: t } = n.instance_slot_data;
-  return /* @__PURE__ */ o(u, {
-    badgeBgColor: t ? "success.main" : "text.secondary",
-    dotColor: "text.secondary",
-    from: /* @__PURE__ */ o(i, {
+import { Icon as p } from "@mxenabled/mx-icons";
+import { jsx as t } from "react/jsx-runtime";
+import { useTheme as v } from "@mui/material/styles";
+var n = 64, A = ({ payload: o }) => {
+  const r = v(), { variant: e } = o.instance_slot, { discovered_institution_guid: c, discovered_institution_name: s, held_institution_guid: a, held_institution_name: m } = o.instance_slot_data, { badgeIcon: u, badgeIconColor: d, ...f } = l(h(r), e, g.AccountConnect, "AccountSwitchBlock");
+  return /* @__PURE__ */ t(_, {
+    ...f,
+    from: /* @__PURE__ */ t(i, {
       alt: s,
-      institutionGuid: a,
-      size: r
-    }),
-    icon: t ? g : m,
-    to: /* @__PURE__ */ o(i, {
-      alt: d,
       institutionGuid: c,
-      size: r
+      size: n
     }),
-    ...t && {
-      backgroundImage: "linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)",
-      bgcolor: "background.paper",
-      showConfetti: !0
-    }
+    icon: /* @__PURE__ */ t(p, {
+      "aria-hidden": !0,
+      name: u,
+      size: 20,
+      sx: { color: d }
+    }),
+    to: /* @__PURE__ */ t(i, {
+      alt: m,
+      institutionGuid: a,
+      size: n
+    })
   });
 };
 export {
-  x as default
+  A as default
 };
 
 //# sourceMappingURL=AccountSwitchBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccountSwitchBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.tsx"],"sourcesContent":["import { InstitutionLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport type { AccountSwitchBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport TransferLogoCard from '../../../components/TransferLogoCard'\nimport { ACCOUNT_CONNECTED_GRADIENT } from '../../../components/celebrationGradients'\n\nimport type { BlockProps } from '../../types'\n\nconst LOGO_SIZE = 64\n\n// Center-badge glyphs, hoisted to stable module-scope references so they aren't\n// re-created each render: `link` for the pending \"connect\" state and\n// `check_circle` for the connected success state (mirrors TransferLogoCard's\n// Discovered Accounts default/success states).\nconst linkBadge = (\n  <Icon aria-hidden={true} name=\"link\" size={20} sx={{ color: 'primary.contrastText' }} />\n)\nconst successBadge = (\n  <Icon aria-hidden={true} name=\"check_circle\" size={20} sx={{ color: 'common.white' }} />\n)\n\n/**\n * Discovered-accounts connect visual: two institution logos on a transfer track.\n * The pending state (`is_connected: false`) shows a link badge on the default\n * slot; the connected state (`is_connected: true`) switches to a success badge\n * with the discovered-accounts gradient and a confetti wash.\n */\nconst AccountSwitchBlock = ({ payload }: BlockProps<AccountSwitchBlockData>) => {\n  const {\n    discovered_institution_guid,\n    discovered_institution_name,\n    held_institution_guid,\n    held_institution_name,\n    is_connected,\n  } = payload.instance_slot_data\n\n  const from = (\n    <InstitutionLogo\n      alt={discovered_institution_name}\n      institutionGuid={discovered_institution_guid}\n      size={LOGO_SIZE}\n    />\n  )\n  const to = (\n    <InstitutionLogo\n      alt={held_institution_name}\n      institutionGuid={held_institution_guid}\n      size={LOGO_SIZE}\n    />\n  )\n\n  return (\n    <TransferLogoCard\n      badgeBgColor={is_connected ? 'success.main' : 'text.secondary'}\n      dotColor=\"text.secondary\"\n      from={from}\n      icon={is_connected ? successBadge : linkBadge}\n      to={to}\n      {...(is_connected && {\n        backgroundImage: ACCOUNT_CONNECTED_GRADIENT,\n        bgcolor: 'background.paper',\n        showConfetti: true,\n      })}\n    />\n  )\n}\n\nexport default AccountSwitchBlock\n"],"mappings":";;;;;AAUA,IAAM,IAAY,IAMZ,IACJ,gBAAA,EAAC,GAAD;AAAA,EAAM,eAAa;AAAA,EAAM,MAAK;AAAA,EAAO,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,uBAAuB;AAAI,CAAA,GAEnF,IACJ,gBAAA,EAAC,GAAD;AAAA,EAAM,eAAa;AAAA,EAAM,MAAK;AAAA,EAAe,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,eAAe;AAAI,CAAA,GASnF,IAAA,CAAsB,EAAE,SAAA,EAAA,MAAkD;AAC9E,QAAM,EACJ,6BAAA,GACA,6BAAA,GACA,uBAAA,GACA,uBAAA,GACA,cAAA,EAAA,IACE,EAAQ;AAiBZ,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc,IAAe,iBAAiB;AAAA,IAC9C,UAAS;AAAA,IACH,MAlBR,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,iBAAiB;AAAA,MACjB,MAAM;AAAA,IACP,CAcO;AAAA,IACN,MAAM,IAAe,IAAe;AAAA,IAChC,IAbN,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,iBAAiB;AAAA,MACjB,MAAM;AAAA,IACP,CASK;AAAA,IACJ,GAAK,KAAgB;AAAA,MACnB,iBAAA;AAAA,MACA,SAAS;AAAA,MACT,cAAc;AAAA,IAChB;AAAA,EACD,CAAA;AAEL"}
+{"version":3,"file":"AccountSwitchBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport type { AccountSwitchBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport TransferLogoCard from '../../../components/TransferLogoCard'\n\nimport type { BlockProps } from '../../types'\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { accountSwitchVariant, getLayoutConfig } from './layout'\n\nconst LOGO_SIZE = 64\n\n/**\n * Two institution logos on a transfer track, shared by Discovered Accounts and Switch\n * Direct Deposit. `instance_slot.variant` picks the design branch from `./layout.ts`.\n */\nconst AccountSwitchBlock = ({ payload }: BlockProps<AccountSwitchBlockData>) => {\n  const theme = useTheme()\n  const { variant } = payload.instance_slot\n  const {\n    discovered_institution_guid,\n    discovered_institution_name,\n    held_institution_guid,\n    held_institution_name,\n  } = payload.instance_slot_data\n\n  // Pending connect is the safe default: it promises nothing (no success badge, no confetti).\n  const { badgeIcon, badgeIconColor, ...cardProps } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    accountSwitchVariant.AccountConnect,\n    'AccountSwitchBlock',\n  )\n\n  return (\n    <TransferLogoCard\n      {...cardProps}\n      from={\n        <InstitutionLogo\n          alt={discovered_institution_name}\n          institutionGuid={discovered_institution_guid}\n          size={LOGO_SIZE}\n        />\n      }\n      icon={<Icon aria-hidden={true} name={badgeIcon} size={20} sx={{ color: badgeIconColor }} />}\n      to={\n        <InstitutionLogo\n          alt={held_institution_name}\n          institutionGuid={held_institution_guid}\n          size={LOGO_SIZE}\n        />\n      }\n    />\n  )\n}\n\nexport default AccountSwitchBlock\n"],"mappings":";;;;;;;AAYA,IAAM,IAAY,IAMZ,IAAA,CAAsB,EAAE,SAAA,EAAA,MAAkD;AAC9E,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAQ,eACtB,EACJ,6BAAA,GACA,6BAAA,GACA,uBAAA,GACA,uBAAA,EAAA,IACE,EAAQ,oBAGN,EAAE,WAAA,GAAW,gBAAA,GAAgB,GAAG,EAAA,IAAc,EAClD,EAAgB,CAAK,GACrB,GACA,EAAqB,gBACrB,oBACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,iBAAiB;AAAA,MACjB,MAAM;AAAA,IACP,CAAA;AAAA,IAEH,MAAM,gBAAA,EAAC,GAAD;AAAA,MAAM,eAAa;AAAA,MAAM,MAAM;AAAA,MAAW,MAAM;AAAA,MAAI,IAAI,EAAE,OAAO,EAAe;AAAA,IAAI,CAAA;AAAA,IAC1F,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,iBAAiB;AAAA,MACjB,MAAM;AAAA,IACP,CAAA;AAAA,EAEJ,CAAA;AAEL"}

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

@@ -0,0 +1,36 @@
+import { Theme } from '@mui/material/styles';
+/**
+ * Account Switch block variants, keyed by the backend `instance_slot.variant`. All share
+ * `TransferLogoCard`; only the slot surface, center badge and connector dots differ.
+ *
+ * - `AccountConnect`      — Discovered Accounts pending: blue gradient, link badge.
+ * - `AccountConnected`    — Discovered Accounts success: pink wash, confetti, check badge.
+ * - `SwitchDirectDeposit` — Switch Direct Deposit pending: flat tinted slot, arrow badge.
+ *   Its complete state is a different layout, served by `direct_deposit_block`.
+ */
+export declare const accountSwitchVariant: {
+    readonly AccountConnect: "account_connect";
+    readonly AccountConnected: "account_connected";
+    readonly SwitchDirectDeposit: "switch_direct_deposit";
+};
+export type AccountSwitchVariant = (typeof accountSwitchVariant)[keyof typeof accountSwitchVariant];
+export interface AccountSwitchLayoutConfig {
+    /** Slot surface color token. */
+    bgcolor: string;
+    /** Optional gradient layered over `bgcolor`. */
+    backgroundImage?: string;
+    /** Center badge background color token. */
+    badgeBgColor: string;
+    /** mx-icons glyph rendered in the center badge. */
+    badgeIcon: string;
+    /** Color token for the badge glyph. */
+    badgeIconColor: string;
+    /** Connector-dot color token. */
+    dotColor: string;
+    /** Enlarge the inner connector dots (6px vs 4px). */
+    hasBigDots: boolean;
+    /** Confetti burst filling the slot (success states). */
+    showConfetti?: boolean;
+}
+/** Per-variant `TransferLogoCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */
+export declare const getLayoutConfig: (theme: Theme) => Record<AccountSwitchVariant, AccountSwitchLayoutConfig>;

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

@@ -0,0 +1,40 @@
+import { ACCOUNT_CONNECTED_GRADIENT as r, getPrimaryWashGradient as e } from "../../../components/celebrationGradients.es.js";
+var o = {
+  AccountConnect: "account_connect",
+  AccountConnected: "account_connected",
+  SwitchDirectDeposit: "switch_direct_deposit"
+}, a = (t) => ({
+  [o.AccountConnect]: {
+    backgroundImage: e(t),
+    bgcolor: "background.paper",
+    badgeBgColor: "text.secondary",
+    badgeIcon: "link",
+    badgeIconColor: "primary.contrastText",
+    dotColor: "text.secondary",
+    hasBigDots: !0
+  },
+  [o.AccountConnected]: {
+    backgroundImage: r,
+    bgcolor: "background.paper",
+    badgeBgColor: "success.main",
+    badgeIcon: "check",
+    badgeIconColor: "common.white",
+    dotColor: "text.secondary",
+    hasBigDots: !0,
+    showConfetti: !0
+  },
+  [o.SwitchDirectDeposit]: {
+    bgcolor: "primary.lighter",
+    badgeBgColor: "neutral.darker",
+    badgeIcon: "arrow_forward",
+    badgeIconColor: "neutral.lighter",
+    dotColor: "neutral.darker",
+    hasBigDots: !1
+  }
+});
+export {
+  o as accountSwitchVariant,
+  a as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountSwitchBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n  ACCOUNT_CONNECTED_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Account Switch block variants, keyed by the backend `instance_slot.variant`. All share\n * `TransferLogoCard`; only the slot surface, center badge and connector dots differ.\n *\n * - `AccountConnect`      — Discovered Accounts pending: blue gradient, link badge.\n * - `AccountConnected`    — Discovered Accounts success: pink wash, confetti, check badge.\n * - `SwitchDirectDeposit` — Switch Direct Deposit pending: flat tinted slot, arrow badge.\n *   Its complete state is a different layout, served by `direct_deposit_block`.\n */\nexport const accountSwitchVariant = {\n  AccountConnect: 'account_connect',\n  AccountConnected: 'account_connected',\n  SwitchDirectDeposit: 'switch_direct_deposit',\n} as const\n\nexport type AccountSwitchVariant = (typeof accountSwitchVariant)[keyof typeof accountSwitchVariant]\n\nexport interface AccountSwitchLayoutConfig {\n  /** Slot surface color token. */\n  bgcolor: string\n  /** Optional gradient layered over `bgcolor`. */\n  backgroundImage?: string\n  /** Center badge background color token. */\n  badgeBgColor: string\n  /** mx-icons glyph rendered in the center badge. */\n  badgeIcon: string\n  /** Color token for the badge glyph. */\n  badgeIconColor: string\n  /** Connector-dot color token. */\n  dotColor: string\n  /** Enlarge the inner connector dots (6px vs 4px). */\n  hasBigDots: boolean\n  /** Confetti burst filling the slot (success states). */\n  showConfetti?: boolean\n}\n\n/** Per-variant `TransferLogoCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<AccountSwitchVariant, AccountSwitchLayoutConfig> => {\n  return {\n    [accountSwitchVariant.AccountConnect]: {\n      backgroundImage: getPrimaryWashGradient(theme),\n      bgcolor: 'background.paper',\n      badgeBgColor: 'text.secondary',\n      badgeIcon: 'link',\n      badgeIconColor: 'primary.contrastText',\n      dotColor: 'text.secondary',\n      hasBigDots: true,\n    },\n    [accountSwitchVariant.AccountConnected]: {\n      backgroundImage: ACCOUNT_CONNECTED_GRADIENT,\n      bgcolor: 'background.paper',\n      badgeBgColor: 'success.main',\n      // Figma \"Common/Check\": a bare check on the solid success badge (not `check_circle`).\n      badgeIcon: 'check',\n      badgeIconColor: 'common.white',\n      dotColor: 'text.secondary',\n      hasBigDots: true,\n      showConfetti: true,\n    },\n    [accountSwitchVariant.SwitchDirectDeposit]: {\n      bgcolor: 'primary.lighter',\n      badgeBgColor: 'neutral.darker',\n      badgeIcon: 'arrow_forward',\n      badgeIconColor: 'neutral.lighter',\n      dotColor: 'neutral.darker',\n      hasBigDots: false,\n    },\n  }\n}\n"],"mappings":";AAgBA,IAAa,IAAuB;AAAA,EAClC,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB,GAwBa,IAAA,CACX,OAEO;AAAA,EACJ,CAAA,EAAqB,cAAA,GAAiB;AAAA,IACrC,iBAAiB,EAAuB,CAAK;AAAA,IAC7C,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAqB,gBAAA,GAAmB;AAAA,IACvC,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,cAAc;AAAA,IAEd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACC,CAAA,EAAqB,mBAAA,GAAsB;AAAA,IAC1C,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF"}

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

@@ -4,28 +4,18 @@ interface TransactionBlockProps {
     beatGuid?: string;
 }
 /**
- * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:
- * - `with_header` — transaction row under a date header (the `with_merchant` card).
- * - `no_header`   — the row alone (the `no_merchant` card).
- */
-export declare const TransactionBlockVariant: {
-    readonly WithHeader: "with_header";
-    readonly NoHeader: "no_header";
-};
-/**
- * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).
- *
- * Renders rows the backend already localized and carried inline on `instance_slot.data.series`
- * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,
- * because the contract sends it as a number.
+ * The `transaction_block`: rows the backend already localized, carried inline on
+ * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the
+ * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`
+ * picks the header and slot treatment from `./layout.ts`.
  *
  * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo
  * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.
  *
- * Under `with_header` the card header comes from `instance_slot.data.header_text`, which tupac sends
- * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`
- * card a row's `secondary_text` is the category, so reading it here rendered the category twice
- * and dropped the date entirely.
+ * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the
+ * transaction date, or "{count} transactions"). It deliberately does *not* come from the first
+ * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here
+ * rendered the category twice and dropped the date entirely.
  */
 export declare const TransactionBlock: (({ payload }: TransactionBlockProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;

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

@@ -1,73 +1,74 @@
-import { useCategoryStore as g } from "../../../../common/context/hooks.es.js";
+import { useCategoryStore as p } from "../../../../common/context/hooks.es.js";
 import { slot as c } from "../../../../core/types/Insights.es.js";
-import { formatCurrency as l } from "../../../../core/utils/NumberFormatting.es.js";
-import { logoFromRef as _ } from "../../../components/shared/EntityLogo.es.js";
-import f from "../../../components/TransactionListCard.es.js";
-import { observer as h } from "mobx-react-lite";
-import { CategoryIcon as y, InstitutionLogo as p, MerchantLogo as x } from "@mxenabled/mxui";
-import { Icon as v } from "@mxenabled/mx-icons";
-import { jsx as r } from "react/jsx-runtime";
-import d from "@mui/material/Box";
-var I = {
-  WithHeader: "with_header",
-  NoHeader: "no_header"
-}, o = 32, G = Math.round(o * 0.625), C = (i, n) => {
-  const t = _(i.logo, i.primary_text);
+import { formatCurrency as _ } from "../../../../core/utils/NumberFormatting.es.js";
+import { logoFromRef as y } from "../../../components/shared/EntityLogo.es.js";
+import { resolveVariantConfig as h } from "../../resolveVariantConfig.es.js";
+import x from "../../../components/TransactionListCard.es.js";
+import { getLayoutConfig as v, transactionBlockVariant as C } from "./layout.es.js";
+import { observer as I } from "mobx-react-lite";
+import { CategoryIcon as G, InstitutionLogo as L, MerchantLogo as O } from "@mxenabled/mxui";
+import { Icon as T } from "@mxenabled/mx-icons";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as b } from "@mui/material/styles";
+import u from "@mui/material/Box";
+var r = 32, k = Math.round(r * 0.625), z = (n, a) => {
+  const t = y(n.logo, n.primary_text);
   if (t) {
-    if (t.logo_name) return /* @__PURE__ */ r(d, {
+    if (t.logo_name) return /* @__PURE__ */ o(u, {
       sx: {
         alignItems: "center",
         display: "flex",
-        height: o,
+        height: r,
         justifyContent: "center",
-        width: o
+        width: r
       },
-      children: /* @__PURE__ */ r(v, {
+      children: /* @__PURE__ */ o(T, {
         name: t.logo_name,
-        size: G,
+        size: k,
         sx: { color: t.logo_color }
       })
     });
-    if (t.merchant_guid) return /* @__PURE__ */ r(x, {
+    if (t.merchant_guid) return /* @__PURE__ */ o(O, {
       alt: t.merchant_name ?? "",
-      categoryGuid: t.category_guid ? n(t.category_guid) : "",
+      categoryGuid: t.category_guid ? a(t.category_guid) : "",
       merchantGuid: t.merchant_guid,
-      size: o
+      size: r
     });
-    if (t.institution_guid) return /* @__PURE__ */ r(p, {
+    if (t.institution_guid) return /* @__PURE__ */ o(L, {
       alt: t.institution_name ?? "",
       institutionGuid: t.institution_guid,
-      size: o
+      size: r
     });
     if (t.category_guid) {
-      const a = n(t.category_guid);
-      return /* @__PURE__ */ r(d, {
-        "data-testid": `category-icon-${a}`,
+      const e = a(t.category_guid);
+      return /* @__PURE__ */ o(u, {
+        "data-testid": `category-icon-${e}`,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ r(y, {
-          categoryGuid: a,
-          size: o
+        children: /* @__PURE__ */ o(G, {
+          categoryGuid: e,
+          size: r
         })
       });
     }
   }
-}, j = h(({ payload: i }) => {
-  const { getTopLevelCategoryGuid: n } = g(), { data: t, variant: a } = i.instance_slot, s = c(t, "series"), m = c(t, "header_text");
+}, F = I(({ payload: n }) => {
+  const a = b(), { getTopLevelCategoryGuid: t } = p(), { data: e, variant: d } = n.instance_slot, s = c(e, "series"), m = c(e, "header_text");
   if (!Array.isArray(s) || !s.length) return null;
-  const u = a === I.WithHeader && typeof m == "string" ? m : void 0;
-  return /* @__PURE__ */ r(f, {
-    header: u,
-    rows: s.map((e) => ({
-      amount: typeof e.amount == "number" ? l(e.amount, "0,0.00") : "",
-      leading: C(e, n),
-      subtitle: e.secondary_text ?? "",
-      title: e.primary_text ?? ""
+  const { background: g, cardVariant: l, showHeader: f } = h(v(a), d, C.NoHeader, "TransactionBlock");
+  return /* @__PURE__ */ o(x, {
+    background: g,
+    header: f && typeof m == "string" ? m : void 0,
+    variant: l,
+    rows: s.map((i) => ({
+      amount: typeof i.amount == "number" ? _(i.amount, "0,0.00") : "",
+      leading: z(i, t),
+      subtitle: i.secondary_text ?? "",
+      title: i.primary_text ?? ""
     }))
   });
 });
 export {
-  j as TransactionBlock,
-  I as TransactionBlockVariant
+  F as TransactionBlock
 };
 
 //# sourceMappingURL=TransactionBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/**\n * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:\n * - `with_header` — transaction row under a date header (the `with_merchant` card).\n * - `no_header`   — the row alone (the `no_merchant` card).\n */\nexport const TransactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n} as const\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That applies both to a `CAT-`\n * row logo and to a merchant's `fallback_guid`, which `MerchantLogo` draws through the same\n * `CategoryIcon` when the merchant image fails to load.\n */\nconst renderRowLogo = (row: InstanceSlotRow, resolveTopLevelCategory: (guid: string) => string) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A fixed box the size of the other logos keeps the row's text column aligned.\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n        }}\n      >\n        <Icon name={logo.logo_name} size={ROW_ICON_SIZE} sx={{ color: logo.logo_color }} />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).\n *\n * Renders rows the backend already localized and carried inline on `instance_slot.data.series`\n * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,\n * because the contract sends it as a number.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * Under `with_header` the card header comes from `instance_slot.data.header_text`, which tupac sends\n * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`\n * card a row's `secondary_text` is the category, so reading it here rendered the category twice\n * and dropped the date entirely.\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { data, variant } = payload.instance_slot\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header =\n    variant === TransactionBlockVariant.WithHeader && typeof headerText === 'string'\n      ? headerText\n      : undefined\n\n  return (\n    <TransactionListCard\n      header={header}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        leading: renderRowLogo(row, getTopLevelCategoryGuid),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;AAyBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEM,IAAgB,IAEhB,IAAgB,KAAK,MAAM,IAAgB,KAAK,GAahD,IAAA,CAAiB,GAAsB,MAAsD;AACjG,QAAM,IAAO,EAAY,EAAI,MAAM,EAAI,YAAY;AAEnD,MAAK,GAEL;AAAA,QAAI,EAAK,UAEP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK;AAAA,QAAW,MAAM;AAAA,QAAe,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,MAAI,CAAA;AAAA,IAC/E,CAAA;AAIT,QAAI,EAAK,cACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,iBAAiB;AAAA,MAC3B,cAAc,EAAK,gBAAgB,EAAwB,EAAK,aAAa,IAAI;AAAA,MACjF,cAAc,EAAK;AAAA,MACnB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,iBACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,oBAAoB;AAAA,MAC9B,iBAAiB,EAAK;AAAA,MACtB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,eAAe;AACtB,YAAM,IAAe,EAAwB,EAAK,aAAa;AAC/D,aACE,gBAAA,EAAC,GAAD;AAAA,QAAK,eAAa,iBAAiB,CAAA;AAAA,QAAgB,IAAI,EAAE,SAAS,OAAO;AAAA,QACvE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAc,MAAM;AAAA,QAAgB,CAAA;AAAA,MAC7D,CAAA;AAAA,IAET;AAAA;AAGF,GAiBa,IAAmB,EAAA,CAAU,EAAE,SAAA,EAAA,MAAqC;AAC/E,QAAM,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,MAAA,GAAM,SAAA,EAAA,IAAY,EAAQ,eAC5B,IAAS,EAAwB,GAAM,QAAQ,GAC/C,IAAa,EAAa,GAAM,aAAa;AAEnD,MAAI,CAAC,MAAM,QAAQ,CAAM,KAAK,CAAC,EAAO,OAAQ,QAAO;AAErD,QAAM,IACJ,MAAY,EAAwB,cAAc,OAAO,KAAe,WACpE,IACA;AAEN,SACE,gBAAA,EAAC,GAAD;AAAA,IACU,QAAA;AAAA,IACR,MAAM,EAAO,IAAA,CAAK,OAAS;AAAA,MACzB,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,EAAc,GAAK,CAAuB;AAAA,MACnD,UAAU,EAAI,kBAAkB;AAAA,MAChC,OAAO,EAAI,gBAAgB;AAAA,IAC7B,EAAE;AAAA,EACH,CAAA;AAEL,CAAC"}
+{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That applies both to a `CAT-`\n * row logo and to a merchant's `fallback_guid`, which `MerchantLogo` draws through the same\n * `CategoryIcon` when the merchant image fails to load.\n */\nconst renderRowLogo = (row: InstanceSlotRow, resolveTopLevelCategory: (guid: string) => string) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A fixed box the size of the other logos keeps the row's text column aligned.\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n        }}\n      >\n        <Icon name={logo.logo_name} size={ROW_ICON_SIZE} sx={{ color: logo.logo_color }} />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { data, variant } = payload.instance_slot\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const { background, cardVariant, showHeader } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  return (\n    <TransactionListCard\n      background={background}\n      header={header}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        leading: renderRowLogo(row, getTopLevelCategoryGuid),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAwBA,IAAM,IAAgB,IAEhB,IAAgB,KAAK,MAAM,IAAgB,KAAK,GAahD,IAAA,CAAiB,GAAsB,MAAsD;AACjG,QAAM,IAAO,EAAY,EAAI,MAAM,EAAI,YAAY;AAEnD,MAAK,GAEL;AAAA,QAAI,EAAK,UAEP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK;AAAA,QAAW,MAAM;AAAA,QAAe,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,MAAI,CAAA;AAAA,IAC/E,CAAA;AAIT,QAAI,EAAK,cACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,iBAAiB;AAAA,MAC3B,cAAc,EAAK,gBAAgB,EAAwB,EAAK,aAAa,IAAI;AAAA,MACjF,cAAc,EAAK;AAAA,MACnB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,iBACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,oBAAoB;AAAA,MAC9B,iBAAiB,EAAK;AAAA,MACtB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,eAAe;AACtB,YAAM,IAAe,EAAwB,EAAK,aAAa;AAC/D,aACE,gBAAA,EAAC,GAAD;AAAA,QAAK,eAAa,iBAAiB,CAAA;AAAA,QAAgB,IAAI,EAAE,SAAS,OAAO;AAAA,QACvE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAc,MAAM;AAAA,QAAgB,CAAA;AAAA,MAC7D,CAAA;AAAA,IAET;AAAA;AAGF,GAgBa,IAAmB,EAAA,CAAU,EAAE,SAAA,EAAA,MAAqC;AAC/E,QAAM,IAAQ,EAAS,GACjB,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,MAAA,GAAM,SAAA,EAAA,IAAY,EAAQ,eAC5B,IAAS,EAAwB,GAAM,QAAQ,GAC/C,IAAa,EAAa,GAAM,aAAa;AAEnD,MAAI,CAAC,MAAM,QAAQ,CAAM,KAAK,CAAC,EAAO,OAAQ,QAAO;AAGrD,QAAM,EAAE,YAAA,GAAY,aAAA,GAAa,YAAA,EAAA,IAAe,EAC9C,EAAgB,CAAK,GACrB,GACA,EAAwB,UACxB,kBACF;AAGA,SACE,gBAAA,EAAC,GAAD;AAAA,IACc,YAAA;AAAA,IACJ,QALG,KAAc,OAAO,KAAe,WAAW,IAAa;AAAA,IAMvE,SAAS;AAAA,IACT,MAAM,EAAO,IAAA,CAAK,OAAS;AAAA,MACzB,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,EAAc,GAAK,CAAuB;AAAA,MACnD,UAAU,EAAI,kBAAkB;AAAA,MAChC,OAAO,EAAI,gBAAgB;AAAA,IAC7B,EAAE;AAAA,EACH,CAAA;AAEL,CAAC"}

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

@@ -1 +1,2 @@
-export { TransactionBlock, TransactionBlockVariant } from './TransactionBlock';
+export { TransactionBlock } from './TransactionBlock';
+export { transactionBlockVariant } from './layout';

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

@@ -0,0 +1,30 @@
+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.
+ */
+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";
+};
+export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
+export interface TransactionLayoutConfig {
+    /** Show `instance_slot.data.header_text` above the rows. */
+    showHeader: boolean;
+    /** `TransactionListCard` style: grey utility header, or filled primary header. */
+    cardVariant?: 'default' | 'primary';
+    /** CSS background for the slot behind the card; the card then renders borderless on paper. */
+    background?: string;
+}
+/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */
+export declare const getLayoutConfig: (theme: Theme) => Record<TransactionBlockVariant, TransactionLayoutConfig>;

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

@@ -0,0 +1,29 @@
+import { WARNING_WASH_GRADIENT as r, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
+var e = {
+  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]: {
+    showHeader: !0,
+    cardVariant: "primary"
+  },
+  [e.SubscriptionDetected]: {
+    showHeader: !1,
+    background: t(a)
+  },
+  [e.UnexpectedSubscriptionPayment]: {
+    showHeader: !1,
+    background: r
+  }
+});
+export {
+  i as getLayoutConfig,
+  e as transactionBlockVariant
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +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"}

package/dist/insights-v2/blocks/resolveVariantConfig.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Picks a block's per-variant config from its `layout.ts` table by the backend
+ * `instance_slot.variant`, falling back to `fallback` for anything the table does not own.
+ *
+ * `Object.hasOwn` rather than a bare index: the key is backend-controlled, and an inherited
+ * name like `constructor` would otherwise return a truthy non-config that `??` lets through.
+ * Unknown variants warn, like `createVariantBlock`, so a backend typo or a new server variant
+ * is visible instead of silently degrading.
+ */
+export declare const resolveVariantConfig: <K extends string, C>(table: Record<K, C>, variant: string | null | undefined, fallback: K, blockName: string) => C;

package/dist/insights-v2/blocks/resolveVariantConfig.es.js

@@ -0,0 +1,6 @@
+var u = (o, n, r, e) => n != null && Object.hasOwn(o, n) ? o[n] : (n != null && console.warn(`[${e}] Unknown variant "${n}" — rendering "${r}". Add it to layout.ts.`), o[r]);
+export {
+  u as resolveVariantConfig
+};
+
+//# sourceMappingURL=resolveVariantConfig.es.js.map

package/dist/insights-v2/blocks/resolveVariantConfig.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveVariantConfig.es.js","names":[],"sources":["../../../src/insights-v2/blocks/resolveVariantConfig.ts"],"sourcesContent":["/**\n * Picks a block's per-variant config from its `layout.ts` table by the backend\n * `instance_slot.variant`, falling back to `fallback` for anything the table does not own.\n *\n * `Object.hasOwn` rather than a bare index: the key is backend-controlled, and an inherited\n * name like `constructor` would otherwise return a truthy non-config that `??` lets through.\n * Unknown variants warn, like `createVariantBlock`, so a backend typo or a new server variant\n * is visible instead of silently degrading.\n */\nexport const resolveVariantConfig = <K extends string, C>(\n  table: Record<K, C>,\n  variant: string | null | undefined,\n  fallback: K,\n  blockName: string,\n): C => {\n  if (variant != null && Object.hasOwn(table, variant)) return table[variant as K]\n\n  if (variant != null) {\n    console.warn(\n      `[${blockName}] Unknown variant \"${variant}\" — rendering \"${fallback}\". Add it to layout.ts.`,\n    )\n  }\n\n  return table[fallback]\n}\n"],"mappings":"AASA,IAAa,IAAA,CACX,GACA,GACA,GACA,MAEI,KAAW,QAAQ,OAAO,OAAO,GAAO,CAAO,IAAU,EAAM,CAAA,KAE/D,KAAW,QACb,QAAQ,KACN,IAAI,CAAA,sBAA+B,CAAA,kBAAyB,CAAA,yBAC9D,GAGK,EAAM,CAAA"}

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

@@ -1,12 +1,13 @@
+import { Theme } from '@mui/material/styles';
 /**
- * Decorative celebration washes used behind confetti-backed "complete"/milestone states.
- * Shared so both the block layer (`AccountBlock`) and the presentational
- * components/stories reference one source instead of re-declaring the string.
+ * Decorative slot washes shared by the block layouts and the presentational components, so
+ * one source holds each gradient. The 20%–25% washes layer over `background.paper` via
+ * `backgroundImage`; `DISCOVERED_ACCOUNTS_GRADIENT` is opaque and stands alone.
  *
- * - WARM_LIME_ACCENT_GRADIENT: 20%-opacity warm→lime wash; layer over `background.paper`
- *   for a tinted background. Used for merchant categorization and deposit celebration states.
- * - CELEBRATION_GRADIENT: 20%-opacity warm→pink wash; layer over `background.paper`.
- * - DISCOVERED_ACCOUNTS_GRADIENT: Fully opaque (100% opacity); use as the sole background.
+ * - WARM_LIME_ACCENT_GRADIENT: merchant categorization and deposit celebration states.
+ * - CELEBRATION_GRADIENT / ACCOUNT_CONNECTED_GRADIENT: balance milestones, account connected.
+ * - WARNING_WASH_GRADIENT: a flagged charge (Unexpected Subscription Payment).
+ * - getPrimaryWashGradient(theme): pending connect / detected subscription, from the palette.
  */
 /**
  * Warm → lime accent wash at 20% opacity. Used as a tinted background behind
@@ -23,3 +24,14 @@ export declare const DISCOVERED_ACCOUNTS_GRADIENT = "linear-gradient(200.73deg,
  * `background` shorthand — a 20% gradient over transparency renders wrong.
  */
 export declare const ACCOUNT_CONNECTED_GRADIENT = "linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)";
+/**
+ * Orange → red-orange wash at 25% opacity behind a flagged charge (Unexpected Subscription
+ * Payment). Figma "Warning Gradient 1": a bespoke two-stop blend with no palette token, so it
+ * stays a literal like the other washes here rather than being derived from `palette.warning`.
+ */
+export declare const WARNING_WASH_GRADIENT = "linear-gradient(201deg, rgba(255, 170, 0, 0.25) 1.86%, rgba(255, 68, 0, 0.25) 101.54%)";
+/**
+ * Blue slot wash behind a pending connect / detected-subscription row: `primary.light` →
+ * `primary.main` at 75% over paper, built from the live palette so it follows the theme.
+ */
+export declare const getPrimaryWashGradient: ({ palette }: Theme) => string;

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

@@ -1,8 +1,11 @@
-var r = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)", a = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)", g = "linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)";
+import { alpha as a } from "@mui/material/styles";
+var i = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)", e = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)", n = "linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)", d = "linear-gradient(201deg, rgba(255, 170, 0, 0.25) 1.86%, rgba(255, 68, 0, 0.25) 101.54%)", N = ({ palette: r }) => `linear-gradient(173deg, ${a(r.primary.light, 0.75)} 46.41%, ${a(r.primary.main, 0.75)} 78.14%)`;
 export {
-  g as ACCOUNT_CONNECTED_GRADIENT,
-  a as CELEBRATION_GRADIENT,
-  r as WARM_LIME_ACCENT_GRADIENT
+  n as ACCOUNT_CONNECTED_GRADIENT,
+  e as CELEBRATION_GRADIENT,
+  i as WARM_LIME_ACCENT_GRADIENT,
+  d as WARNING_WASH_GRADIENT,
+  N as getPrimaryWashGradient
 };
 
 //# sourceMappingURL=celebrationGradients.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"celebrationGradients.es.js","names":[],"sources":["../../../src/insights-v2/components/celebrationGradients.ts"],"sourcesContent":["/**\n * Decorative celebration washes used behind confetti-backed \"complete\"/milestone states.\n * Shared so both the block layer (`AccountBlock`) and the presentational\n * components/stories reference one source instead of re-declaring the string.\n *\n * - WARM_LIME_ACCENT_GRADIENT: 20%-opacity warm→lime wash; layer over `background.paper`\n *   for a tinted background. Used for merchant categorization and deposit celebration states.\n * - CELEBRATION_GRADIENT: 20%-opacity warm→pink wash; layer over `background.paper`.\n * - DISCOVERED_ACCOUNTS_GRADIENT: Fully opaque (100% opacity); use as the sole background.\n */\n\n/**\n * Warm → lime accent wash at 20% opacity. Used as a tinted background behind\n * merchant categorization highlights and deposit celebration callouts.\n */\nexport const WARM_LIME_ACCENT_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)'\n\n/** Warm → pink wash behind balance/savings milestones. */\nexport const CELEBRATION_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)'\n\n/** Peach → pink gradient for Discovered Accounts success state. */\nexport const DISCOVERED_ACCOUNTS_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 224, 153, 1) 1.86%, rgba(255, 129, 230, 1) 101.54%)'\n\n/**\n * Warm → pink wash at 20% opacity for the account-connected success state.\n * Layer over `background.paper` (the Figma spec's `#FFF` base), not the\n * `background` shorthand — a 20% gradient over transparency renders wrong.\n */\nexport const ACCOUNT_CONNECTED_GRADIENT =\n  'linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)'\n"],"mappings":"AAeA,IAAa,IACX,+FAGW,IACX,gGAWW,IACX"}
+{"version":3,"file":"celebrationGradients.es.js","names":[],"sources":["../../../src/insights-v2/components/celebrationGradients.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles'\n\n/**\n * Decorative slot washes shared by the block layouts and the presentational components, so\n * one source holds each gradient. The 20%–25% washes layer over `background.paper` via\n * `backgroundImage`; `DISCOVERED_ACCOUNTS_GRADIENT` is opaque and stands alone.\n *\n * - WARM_LIME_ACCENT_GRADIENT: merchant categorization and deposit celebration states.\n * - CELEBRATION_GRADIENT / ACCOUNT_CONNECTED_GRADIENT: balance milestones, account connected.\n * - WARNING_WASH_GRADIENT: a flagged charge (Unexpected Subscription Payment).\n * - getPrimaryWashGradient(theme): pending connect / detected subscription, from the palette.\n */\n\n/**\n * Warm → lime accent wash at 20% opacity. Used as a tinted background behind\n * merchant categorization highlights and deposit celebration callouts.\n */\nexport const WARM_LIME_ACCENT_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)'\n\n/** Warm → pink wash behind balance/savings milestones. */\nexport const CELEBRATION_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)'\n\n/** Peach → pink gradient for Discovered Accounts success state. */\nexport const DISCOVERED_ACCOUNTS_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 224, 153, 1) 1.86%, rgba(255, 129, 230, 1) 101.54%)'\n\n/**\n * Warm → pink wash at 20% opacity for the account-connected success state.\n * Layer over `background.paper` (the Figma spec's `#FFF` base), not the\n * `background` shorthand — a 20% gradient over transparency renders wrong.\n */\nexport const ACCOUNT_CONNECTED_GRADIENT =\n  'linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)'\n\n/**\n * Orange → red-orange wash at 25% opacity behind a flagged charge (Unexpected Subscription\n * Payment). Figma \"Warning Gradient 1\": a bespoke two-stop blend with no palette token, so it\n * stays a literal like the other washes here rather than being derived from `palette.warning`.\n */\nexport const WARNING_WASH_GRADIENT =\n  'linear-gradient(201deg, rgba(255, 170, 0, 0.25) 1.86%, rgba(255, 68, 0, 0.25) 101.54%)'\n\n/**\n * Blue slot wash behind a pending connect / detected-subscription row: `primary.light` →\n * `primary.main` at 75% over paper, built from the live palette so it follows the theme.\n */\nexport const getPrimaryWashGradient = ({ palette }: Theme) =>\n  `linear-gradient(173deg, ${alpha(palette.primary.light, 0.75)} 46.41%, ${alpha(palette.primary.main, 0.75)} 78.14%)`\n"],"mappings":";AAiBA,IAAa,IACX,+FAGW,IACX,gGAWW,IACX,6FAOW,IACX,0FAMW,IAAA,CAA0B,EAAE,SAAA,EAAA,MACvC,2BAA2B,EAAM,EAAQ,QAAQ,OAAO,IAAI,CAAA,YAAa,EAAM,EAAQ,QAAQ,MAAM,IAAI,CAAA"}

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

@@ -25,94 +25,95 @@ import Y from "./components/SaveAnExtraCard.es.js";
 import $ from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
 import or from "./components/InsightTransactionRow.es.js";
 import mr from "./components/TransactionListCard.es.js";
-import { TransactionBlock as ar, TransactionBlockVariant as pr } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import er from "./components/WithdrawalCard.es.js";
-import cr from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
-import { SVGImageBlock as lr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import Cr from "./components/ConnectionDetailDrillDown.es.js";
-import Br from "./components/AmountPill.es.js";
-import kr from "./components/DesignateEmergencySavingsCard.es.js";
-import hr from "./components/shared/StatusSnackbar.es.js";
-import Ar from "./components/FeedbackDialog.es.js";
-import Tr from "./components/FeedbackModal.es.js";
-import Lr from "./components/SurveyModal.es.js";
-import { ErrorCard as Hr } from "./components/ErrorCard.es.js";
-import { HOST_ACTIONS as Mr } from "./ctaActions/hostActions.es.js";
-import { useBeatCtaActions as Er, useCtaHandler as Pr } from "./ctaActions/useCtaAction.es.js";
-import { FeedbackBar as yr } from "./components/FeedbackBar.es.js";
-import { DismissInsightDialog as Vr } from "./components/DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as Gr } from "./components/HiddenConfirmationCard.es.js";
-import { LoadingCard as Nr } from "./components/LoadingCard.es.js";
-import { ObsolesceBanner as Ur } from "./components/ObsolesceBanner.es.js";
-import qr from "./components/BaseLayout.es.js";
-import Jr from "./components/StatusMessageCard.es.js";
-import Qr from "./components/LogoTile.es.js";
-import Yr from "./components/LogoClusterCard.es.js";
-import $r from "./components/MerchantHighlightCard.es.js";
-import oo from "./components/P2PLogoStack.es.js";
-import mo from "./components/SavingsOpportunityCard.es.js";
-import ao from "./components/SubscriptionHeroCard.es.js";
-import fo from "./components/UpcomingBillCard.es.js";
+import { transactionBlockVariant as ar } from "./blocks/ComponentBlocks/TransactionBlock/layout.es.js";
+import { TransactionBlock as fr } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import nr from "./components/WithdrawalCard.es.js";
+import sr from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import { SVGImageBlock as dr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import gr from "./components/ConnectionDetailDrillDown.es.js";
+import ur from "./components/AmountPill.es.js";
+import Sr from "./components/DesignateEmergencySavingsCard.es.js";
+import Dr from "./components/shared/StatusSnackbar.es.js";
+import br from "./components/FeedbackDialog.es.js";
+import Ir from "./components/FeedbackModal.es.js";
+import vr from "./components/SurveyModal.es.js";
+import { ErrorCard as wr } from "./components/ErrorCard.es.js";
+import { HOST_ACTIONS as Or } from "./ctaActions/hostActions.es.js";
+import { useBeatCtaActions as Pr, useCtaHandler as Rr } from "./ctaActions/useCtaAction.es.js";
+import { FeedbackBar as Fr } from "./components/FeedbackBar.es.js";
+import { DismissInsightDialog as xr } from "./components/DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as _r } from "./components/HiddenConfirmationCard.es.js";
+import { LoadingCard as Wr } from "./components/LoadingCard.es.js";
+import { ObsolesceBanner as jr } from "./components/ObsolesceBanner.es.js";
+import zr from "./components/BaseLayout.es.js";
+import Kr from "./components/StatusMessageCard.es.js";
+import Xr from "./components/LogoTile.es.js";
+import Zr from "./components/LogoClusterCard.es.js";
+import ro from "./components/MerchantHighlightCard.es.js";
+import to from "./components/P2PLogoStack.es.js";
+import io from "./components/SavingsOpportunityCard.es.js";
+import po from "./components/SubscriptionHeroCard.es.js";
+import eo from "./components/UpcomingBillCard.es.js";
 export {
   V as AccountBlock,
   U as AccountHeroCard,
   N as AccountSwitchBlock,
-  Br as AmountPill,
+  ur as AmountPill,
   A as BAR_CHART_VARIANTS,
   f as BadgedTile,
   v as BarchartBlock,
-  qr as BaseLayout,
+  zr as BaseLayout,
   Q as BudgetBlock,
   k as CompactInsightCard,
-  Cr as ConnectionDetailDrillDown,
-  kr as DesignateEmergencySavingsCard,
+  gr as ConnectionDetailDrillDown,
+  Sr as DesignateEmergencySavingsCard,
   J as DirectDepositBlock,
   q as DirectDepositCard,
-  Vr as DismissInsightDialog,
+  xr as DismissInsightDialog,
   P as DonutChartBlock,
   w as DoubleBarChartBlock,
   y as DoubleProgressBarBlock,
-  Hr as ErrorCard,
-  yr as FeedbackBar,
-  Ar as FeedbackDialog,
-  Tr as FeedbackModal,
-  Mr as HOST_ACTIONS,
-  Gr as HiddenConfirmationCard,
+  wr as ErrorCard,
+  Fr as FeedbackBar,
+  br as FeedbackDialog,
+  Ir as FeedbackModal,
+  Or as HOST_ACTIONS,
+  _r as HiddenConfirmationCard,
   h as InsightErrorCard,
   s as InsightOptionsMenu,
   or as InsightTransactionRow,
-  Nr as LoadingCard,
-  Yr as LogoClusterCard,
+  Wr as LoadingCard,
+  Zr as LogoClusterCard,
   d as LogoFromGuid,
-  Qr as LogoTile,
-  $r as MerchantHighlightCard,
-  Ur as ObsolesceBanner,
+  Xr as LogoTile,
+  ro as MerchantHighlightCard,
+  jr as ObsolesceBanner,
   n as OverflowMenu,
-  oo as P2PLogoStack,
-  lr as SVGImageBlock,
+  to as P2PLogoStack,
+  dr as SVGImageBlock,
   Y as SaveAnExtraCard,
   $ as SaveExtraBlock,
-  mo as SavingsOpportunityCard,
+  io as SavingsOpportunityCard,
   B as StatusBadge,
-  Jr as StatusMessageCard,
+  Kr as StatusMessageCard,
   o as StatusPill,
-  hr as StatusSnackbar,
+  Dr as StatusSnackbar,
   O as StepChartBlock,
-  ao as SubscriptionHeroCard,
-  Lr as SurveyModal,
-  ar as TransactionBlock,
-  pr as TransactionBlockVariant,
+  po as SubscriptionHeroCard,
+  vr as SurveyModal,
+  fr as TransactionBlock,
   mr as TransactionListCard,
   G as TransferLogoCard,
-  fo as UpcomingBillCard,
-  cr as WithdrawalBlock,
-  er as WithdrawalCard,
+  eo as UpcomingBillCard,
+  sr as WithdrawalBlock,
+  nr as WithdrawalCard,
   b as barChartVariant,
   T as buildChartData,
   I as buildDataSeries,
   C as isLogoGuid,
   m as resolveInsightRender,
+  ar as transactionBlockVariant,
   a as useBeatActions,
-  Er as useBeatCtaActions,
-  Pr as useCtaHandler
+  Pr as useBeatCtaActions,
+  Rr as useCtaHandler
 };

package/package.json

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