@mx-cartographer/experiences 9.4.10-alpha.al1 → 9.4.11

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [9.4.11] - 09-02-2026
+
+- **ADDED** - insights-v2 `AccountSwitchBlock` component block for the discovered-accounts connect insight: two institution logos on a `TransferLogoCard` track, gated on the payload `is_connected` flag — a pending state (link badge) and a connected success state (success badge + `ACCOUNT_CONNECTED_GRADIENT` wash + confetti); registered as `account_switch_block` in `mappings/blocks.ts` (WEC-1310)
+- **ADDED** - `TransferLogoCard` `dotColor` prop (theme-aware connector dots) and `ACCOUNT_CONNECTED_GRADIENT` (20% warm→pink success wash) in `celebrationGradients`; `AccountSwitchBlockData` added to the insights-v2 instance-slot-data union (WEC-1310)
+
 ## [9.4.10] - 09-01-2026
 
 - **FIXED** - `background_color`/`paper_color` are treated as light-mode colors under `mode: browser`, preventing white-on-white text in dark mode (MEW-3445)

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

@@ -1,6 +1,6 @@
 import { DataSeries, Legends } from '../../core';
 import { Transaction } from './Transaction';
-export interface InsightsInstanceSlotData extends Partial<BarChartBlockData>, Partial<BudgetBlockData>, Partial<DonutChartBlockData>, Partial<DoubleProgressBarBlockData>, Partial<ImageBlockData>, Partial<AccountBlockData>, Partial<SaveExtraBlockData>, Partial<StepChartBlockData>, Partial<SVGImageBlockData>, Partial<CategoryTransactionsBlockData>, Partial<CommonProps> {
+export interface InsightsInstanceSlotData extends Partial<BarChartBlockData>, Partial<BudgetBlockData>, Partial<DonutChartBlockData>, Partial<DoubleProgressBarBlockData>, Partial<ImageBlockData>, Partial<AccountBlockData>, Partial<SaveExtraBlockData>, Partial<StepChartBlockData>, Partial<SVGImageBlockData>, Partial<CategoryTransactionsBlockData>, Partial<AccountSwitchBlockData>, Partial<CommonProps> {
 }
 interface CommonProps {
     amount?: number;
@@ -80,6 +80,13 @@ export interface SaveExtraBlockData {
     /** SAVE_ENOUGH_TO_LIVE_ON: date for the "Your available balances as of {date}" line. */
     date?: string;
 }
+export interface AccountSwitchBlockData {
+    discovered_institution_guid: string;
+    discovered_institution_name: string;
+    held_institution_guid: string;
+    held_institution_name: string;
+    is_connected: boolean;
+}
 export interface StepChartBlockData {
     completed_steps: number;
     label_1: string;

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'\nimport type { Transaction } from './Transaction'\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<CategoryTransactionsBlockData>,\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  legends?: (Legends | LegendProps)[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\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// 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\nexport type InsightTransaction = Pick<Transaction, 'amount'> &\n  Partial<Pick<Transaction, 'category_guid' | 'date' | 'description' | 'merchant_guid'>> & {\n    merchant_name?: string\n  }\n\nexport interface CategoryTransactionsBlockData {\n  primary_transaction?: InsightTransaction\n}\n"],"mappings":"AA0HA,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'\nimport type { Transaction } from './Transaction'\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<CategoryTransactionsBlockData>,\n    Partial<AccountSwitchBlockData>,\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  legends?: (Legends | LegendProps)[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\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\nexport type InsightTransaction = Pick<Transaction, 'amount'> &\n  Partial<Pick<Transaction, 'category_guid' | 'date' | 'description' | 'merchant_guid'>> & {\n    merchant_name?: string\n  }\n\nexport interface CategoryTransactionsBlockData {\n  primary_transaction?: InsightTransaction\n}\n"],"mappings":"AAoIA,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

@@ -0,0 +1,10 @@
+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.
+ */
+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

@@ -0,0 +1,43 @@
+import "../../../components/celebrationGradients.es.js";
+import u from "../../../components/TransferLogoCard.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, {
+      alt: s,
+      institutionGuid: a,
+      size: r
+    }),
+    icon: t ? g : m,
+    to: /* @__PURE__ */ o(i, {
+      alt: d,
+      institutionGuid: c,
+      size: r
+    }),
+    ...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
+    }
+  });
+};
+export {
+  x as default
+};
+
+//# sourceMappingURL=AccountSwitchBlock.es.js.map

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

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

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

@@ -0,0 +1 @@
+export { default as AccountSwitchBlock } from './AccountSwitchBlock';

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

@@ -1,4 +1,5 @@
 export * from './AccountBlock';
+export * from './AccountSwitchBlock';
 export * from './BudgetBlock';
 export * from './SaveExtraBlock';
 export * from './TransactionBlock';

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

@@ -14,6 +14,8 @@ interface TransferLogoCardProps {
      * Accounts insight for cross-insight consistency. Default true.
      */
     hasBigDots?: boolean;
+    /** Connector-dot color token. Default `neutral.darker` (theme-aware). */
+    dotColor?: string;
     /** Center badge background color token. Default `neutral.darker` (dark circle
      * for Switch DD default; set to `success.main` for Discovered Accounts success). */
     badgeBgColor?: string;
@@ -40,5 +42,5 @@ interface TransferLogoCardProps {
  * `insights/components/shared/ConnectionCard` (grid-overlaid track + row).
  * Scope is the Content section only.
  */
-declare const TransferLogoCard: ({ badgeBgColor, bgcolor, backgroundImage, from, hasBigDots, icon, showConfetti, size, to, sx, }: TransferLogoCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const TransferLogoCard: ({ badgeBgColor, bgcolor, backgroundImage, dotColor, from, hasBigDots, icon, showConfetti, size, to, sx, }: TransferLogoCardProps) => import("react/jsx-runtime").JSX.Element;
 export default TransferLogoCard;

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

@@ -1,111 +1,117 @@
-import { useContainerDimensions as g } from "../hooks/useContainerDimensions.es.js";
-import { Confetti as w } from "./shared/Confetti.es.js";
-import { useRef as v } from "react";
+import { useContainerDimensions as w } from "../hooks/useContainerDimensions.es.js";
+import { Confetti as v } from "./shared/Confetti.es.js";
+import { useRef as I } from "react";
 import d from "@mui/material/Stack";
-import { Icon as I } from "@mxenabled/mx-icons";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import t from "@mui/material/Box";
-import R from "@mui/material/Card";
-var C = 240, b = 40, y = 204, T = /* @__PURE__ */ r(I, {
+import { Icon as R } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+import b from "@mui/material/Card";
+var y = 240, T = 40, C = 204, D = /* @__PURE__ */ r(R, {
   "aria-hidden": !0,
   name: "arrow_forward",
   size: 20,
   sx: { color: "neutral.lighter" }
-}), a = ({ size: e = 4 }) => /* @__PURE__ */ r(t, { sx: {
-  bgcolor: "neutral.darker",
+}), s = ({ color: t = "neutral.darker", size: e = 4 }) => /* @__PURE__ */ r(i, { sx: {
+  bgcolor: t,
   borderRadius: "4px",
   height: e,
   width: e
-} }), D = () => {
-  const e = v(null), { height: i, width: o } = g(e);
-  return /* @__PURE__ */ r(t, {
+} }), j = () => {
+  const t = I(null), { height: e, width: o } = w(t);
+  return /* @__PURE__ */ r(i, {
     "aria-hidden": !0,
-    ref: e,
+    ref: t,
     sx: {
       inset: 0,
       position: "absolute",
       zIndex: 0
     },
-    children: /* @__PURE__ */ r(w, {
-      height: i,
-      shouldRun: i > 0,
+    children: /* @__PURE__ */ r(v, {
+      height: e,
+      shouldRun: e > 0,
       width: o
     })
   });
-}, K = ({ badgeBgColor: e = "neutral.darker", bgcolor: i = "primary.lighter", backgroundImage: o, from: c, hasBigDots: f = !0, icon: x = T, showConfetti: m = !1, size: s = 64, to: p, sx: u }) => {
-  const l = f ? 6 : 4, h = {
+}, O = ({ badgeBgColor: t = "neutral.darker", bgcolor: e = "primary.lighter", backgroundImage: o, dotColor: n = "neutral.darker", from: f, hasBigDots: x = !0, icon: u = D, showConfetti: m = !1, size: l = 64, to: p, sx: g }) => {
+  const h = x ? 6 : 4, c = {
     borderRadius: "4px",
     flexShrink: 0,
-    height: s,
+    height: l,
     overflow: "hidden",
-    width: s
+    width: l
   };
-  return /* @__PURE__ */ n(t, {
+  return /* @__PURE__ */ a(i, {
     sx: {
-      bgcolor: i,
+      bgcolor: e,
       ...o && { backgroundImage: o },
       p: 16,
       position: "relative",
       width: "100%",
-      ...u
+      ...g
     },
-    children: [m && /* @__PURE__ */ r(D, {}), /* @__PURE__ */ r(R, {
+    children: [m && /* @__PURE__ */ r(j, {}), /* @__PURE__ */ r(b, {
       sx: {
         position: "relative",
         py: 16,
         zIndex: 1
       },
-      children: /* @__PURE__ */ n(t, {
+      children: /* @__PURE__ */ a(i, {
         sx: {
           display: "grid",
           placeItems: "center"
         },
-        children: [/* @__PURE__ */ r(t, { sx: {
+        children: [/* @__PURE__ */ r(i, { sx: {
           bgcolor: "neutral.lighter",
           borderRadius: "24px",
           gridArea: "1 / 1",
-          height: b,
-          width: C
-        } }), /* @__PURE__ */ n(d, {
+          height: T,
+          width: y
+        } }), /* @__PURE__ */ a(d, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
             gridArea: "1 / 1",
-            height: s,
+            height: l,
             justifyContent: "space-between",
-            width: y
+            width: C
           },
           children: [
-            /* @__PURE__ */ r(t, {
-              sx: h,
-              children: c
+            /* @__PURE__ */ r(i, {
+              sx: c,
+              children: f
             }),
-            /* @__PURE__ */ n(d, {
+            /* @__PURE__ */ a(d, {
               sx: {
                 alignItems: "center",
                 flexDirection: "row",
                 gap: 4
               },
               children: [
-                /* @__PURE__ */ r(a, {}),
-                /* @__PURE__ */ r(a, { size: l }),
+                /* @__PURE__ */ r(s, { color: n }),
+                /* @__PURE__ */ r(s, {
+                  color: n,
+                  size: h
+                }),
                 /* @__PURE__ */ r(d, {
                   sx: {
                     alignItems: "center",
-                    bgcolor: e,
+                    bgcolor: t,
                     borderRadius: "50%",
                     height: 28,
                     justifyContent: "center",
                     width: 28
                   },
-                  children: x
+                  children: u
+                }),
+                /* @__PURE__ */ r(s, {
+                  color: n,
+                  size: h
                 }),
-                /* @__PURE__ */ r(a, { size: l }),
-                /* @__PURE__ */ r(a, {})
+                /* @__PURE__ */ r(s, { color: n })
               ]
             }),
-            /* @__PURE__ */ r(t, {
-              sx: h,
+            /* @__PURE__ */ r(i, {
+              sx: c,
               children: p
             })
           ]
@@ -115,7 +121,7 @@ var C = 240, b = 40, y = 204, T = /* @__PURE__ */ r(I, {
   });
 };
 export {
-  K as default
+  O as default
 };
 
 //# sourceMappingURL=TransferLogoCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransferLogoCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransferLogoCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Confetti } from './shared/Confetti'\nimport { useContainerDimensions } from '../hooks/useContainerDimensions'\n\n// Figma track/row footprints (mirrors v1 `shared/ConnectionCard`): a 240×40\n// rounded track centered behind a 204×64 row of logos + center badge.\nconst TRACK_WIDTH = 240\nconst TRACK_HEIGHT = 40\nconst ROW_WIDTH = 204\n\ninterface TransferLogoCardProps {\n  /** Source institution logo (left). */\n  from: ReactNode\n  /** Destination institution logo (right). */\n  to: ReactNode\n  /** Logo tile size in px (Figma: 64). */\n  size?: number\n  /** Arrow icon rendered in the center badge. Defaults to a right arrow. */\n  icon?: ReactNode\n  /**\n   * Enlarge the inner connector dots (6px vs 4px), matching the Discovered\n   * Accounts insight for cross-insight consistency. Default true.\n   */\n  hasBigDots?: boolean\n  /** Center badge background color token. Default `neutral.darker` (dark circle\n   * for Switch DD default; set to `success.main` for Discovered Accounts success). */\n  badgeBgColor?: string\n  /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,\n   * theme-aware: light-blue in light mode, navy in dark). */\n  bgcolor?: string\n  /**\n   * Optional background image (e.g., celebration gradient) for success states.\n   * Layered over the `bgcolor` via `backgroundImage` (not `background` shorthand).\n   */\n  backgroundImage?: string\n  /**\n   * Show a confetti animation filling the slot (for success/celebration states).\n   * Requires `useContainerDimensions` to measure the slot. Default false.\n   */\n  showConfetti?: boolean\n  sx?: SxProps\n}\n\n// Default center-badge glyph. Hoisted to a stable reference so it isn't\n// re-created each render (`neutral.lighter` is the theme-aware inverse of the\n// badge fill: light glyph on dark badge, and vice-versa in dark).\nconst defaultTransferIcon = (\n  <Icon aria-hidden={true} name=\"arrow_forward\" size={20} sx={{ color: 'neutral.lighter' }} />\n)\n\n// Connector dot: a small rounded square that reads as a dot at this size\n// (matches v1 `ConnectionCard`'s `Dot`). `neutral.darker` is theme-aware. The\n// inner pair is larger (`bigDots`, as Discovered Accounts uses) than the outer.\nconst Dot = ({ size = 4 }: { size?: number }) => (\n  <Box sx={{ bgcolor: 'neutral.darker', borderRadius: '4px', height: size, width: size }} />\n)\n\n/**\n * Confetti overlay for the success state. Measures the container and fires the\n * burst once dimensions arrive. Scoped to this component so the resize listener\n * only mounts when confetti is shown.\n */\nconst ConfettiOverlay = () => {\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(overlayRef)\n  return (\n    <Box aria-hidden={true} ref={overlayRef} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n      <Confetti height={height} shouldRun={height > 0} width={width} />\n    </Box>\n  )\n}\n\n/**\n * A from → to account transfer visual: two institution logos on a rounded track\n * with a central arrow badge and connector dots between them.\n *\n * Figma: Switch Direct Deposit (default) Content. Structure ported from v1\n * `insights/components/shared/ConnectionCard` (grid-overlaid track + row).\n * Scope is the Content section only.\n */\nconst TransferLogoCard = ({\n  badgeBgColor = 'neutral.darker',\n  bgcolor = 'primary.lighter',\n  backgroundImage,\n  from,\n  hasBigDots = true,\n  icon = defaultTransferIcon,\n  showConfetti = false,\n  size = 64,\n  to,\n  sx,\n}: TransferLogoCardProps) => {\n  const dotSize = hasBigDots ? 6 : 4\n  const logoSx = {\n    borderRadius: '4px',\n    flexShrink: 0,\n    height: size,\n    overflow: 'hidden',\n    width: size,\n  } as const\n\n  return (\n    <Box\n      sx={{\n        bgcolor,\n        ...(backgroundImage && { backgroundImage }),\n        p: 16,\n        // Positioned wrapper so the confetti overlay can fill the slot; the card\n        // sits above it (zIndex). No `overflow: hidden` — that would clip the\n        // burst's upper area (per the figma-to-code confetti guidance).\n        position: 'relative',\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {showConfetti && <ConfettiOverlay />}\n      <Card sx={{ position: 'relative', py: 16, zIndex: 1 }}>\n        <Box sx={{ display: 'grid', placeItems: 'center' }}>\n          {/* Grey track, centered behind the row via a shared grid cell. */}\n          <Box\n            sx={{\n              bgcolor: 'neutral.lighter',\n              borderRadius: '24px',\n              gridArea: '1 / 1',\n              height: TRACK_HEIGHT,\n              width: TRACK_WIDTH,\n            }}\n          />\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gridArea: '1 / 1',\n              height: size,\n              justifyContent: 'space-between',\n              width: ROW_WIDTH,\n            }}\n          >\n            <Box sx={logoSx}>{from}</Box>\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n              <Dot />\n              <Dot size={dotSize} />\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  bgcolor: badgeBgColor,\n                  borderRadius: '50%',\n                  height: 28,\n                  justifyContent: 'center',\n                  width: 28,\n                }}\n              >\n                {icon}\n              </Stack>\n              <Dot size={dotSize} />\n              <Dot />\n            </Stack>\n            <Box sx={logoSx}>{to}</Box>\n          </Stack>\n        </Box>\n      </Card>\n    </Box>\n  )\n}\n\nexport default TransferLogoCard\n"],"mappings":"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"}
+{"version":3,"file":"TransferLogoCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransferLogoCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Confetti } from './shared/Confetti'\nimport { useContainerDimensions } from '../hooks/useContainerDimensions'\n\n// Figma track/row footprints (mirrors v1 `shared/ConnectionCard`): a 240×40\n// rounded track centered behind a 204×64 row of logos + center badge.\nconst TRACK_WIDTH = 240\nconst TRACK_HEIGHT = 40\nconst ROW_WIDTH = 204\n\ninterface TransferLogoCardProps {\n  /** Source institution logo (left). */\n  from: ReactNode\n  /** Destination institution logo (right). */\n  to: ReactNode\n  /** Logo tile size in px (Figma: 64). */\n  size?: number\n  /** Arrow icon rendered in the center badge. Defaults to a right arrow. */\n  icon?: ReactNode\n  /**\n   * Enlarge the inner connector dots (6px vs 4px), matching the Discovered\n   * Accounts insight for cross-insight consistency. Default true.\n   */\n  hasBigDots?: boolean\n  /** Connector-dot color token. Default `neutral.darker` (theme-aware). */\n  dotColor?: string\n  /** Center badge background color token. Default `neutral.darker` (dark circle\n   * for Switch DD default; set to `success.main` for Discovered Accounts success). */\n  badgeBgColor?: string\n  /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,\n   * theme-aware: light-blue in light mode, navy in dark). */\n  bgcolor?: string\n  /**\n   * Optional background image (e.g., celebration gradient) for success states.\n   * Layered over the `bgcolor` via `backgroundImage` (not `background` shorthand).\n   */\n  backgroundImage?: string\n  /**\n   * Show a confetti animation filling the slot (for success/celebration states).\n   * Requires `useContainerDimensions` to measure the slot. Default false.\n   */\n  showConfetti?: boolean\n  sx?: SxProps\n}\n\n// Default center-badge glyph. Hoisted to a stable reference so it isn't\n// re-created each render (`neutral.lighter` is the theme-aware inverse of the\n// badge fill: light glyph on dark badge, and vice-versa in dark).\nconst defaultTransferIcon = (\n  <Icon aria-hidden={true} name=\"arrow_forward\" size={20} sx={{ color: 'neutral.lighter' }} />\n)\n\n// Connector dot: a small rounded square that reads as a dot at this size\n// (matches v1 `ConnectionCard`'s `Dot`). `neutral.darker` is theme-aware. The\n// inner pair is larger (`bigDots`, as Discovered Accounts uses) than the outer.\nconst Dot = ({ color = 'neutral.darker', size = 4 }: { color?: string; size?: number }) => (\n  <Box sx={{ bgcolor: color, borderRadius: '4px', height: size, width: size }} />\n)\n\n/**\n * Confetti overlay for the success state. Measures the container and fires the\n * burst once dimensions arrive. Scoped to this component so the resize listener\n * only mounts when confetti is shown.\n */\nconst ConfettiOverlay = () => {\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(overlayRef)\n  return (\n    <Box aria-hidden={true} ref={overlayRef} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n      <Confetti height={height} shouldRun={height > 0} width={width} />\n    </Box>\n  )\n}\n\n/**\n * A from → to account transfer visual: two institution logos on a rounded track\n * with a central arrow badge and connector dots between them.\n *\n * Figma: Switch Direct Deposit (default) Content. Structure ported from v1\n * `insights/components/shared/ConnectionCard` (grid-overlaid track + row).\n * Scope is the Content section only.\n */\nconst TransferLogoCard = ({\n  badgeBgColor = 'neutral.darker',\n  bgcolor = 'primary.lighter',\n  backgroundImage,\n  dotColor = 'neutral.darker',\n  from,\n  hasBigDots = true,\n  icon = defaultTransferIcon,\n  showConfetti = false,\n  size = 64,\n  to,\n  sx,\n}: TransferLogoCardProps) => {\n  const dotSize = hasBigDots ? 6 : 4\n  const logoSx = {\n    borderRadius: '4px',\n    flexShrink: 0,\n    height: size,\n    overflow: 'hidden',\n    width: size,\n  } as const\n\n  return (\n    <Box\n      sx={{\n        bgcolor,\n        ...(backgroundImage && { backgroundImage }),\n        p: 16,\n        // Positioned wrapper so the confetti overlay can fill the slot; the card\n        // sits above it (zIndex). No `overflow: hidden` — that would clip the\n        // burst's upper area (per the figma-to-code confetti guidance).\n        position: 'relative',\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {showConfetti && <ConfettiOverlay />}\n      <Card sx={{ position: 'relative', py: 16, zIndex: 1 }}>\n        <Box sx={{ display: 'grid', placeItems: 'center' }}>\n          {/* Grey track, centered behind the row via a shared grid cell. */}\n          <Box\n            sx={{\n              bgcolor: 'neutral.lighter',\n              borderRadius: '24px',\n              gridArea: '1 / 1',\n              height: TRACK_HEIGHT,\n              width: TRACK_WIDTH,\n            }}\n          />\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gridArea: '1 / 1',\n              height: size,\n              justifyContent: 'space-between',\n              width: ROW_WIDTH,\n            }}\n          >\n            <Box sx={logoSx}>{from}</Box>\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n              <Dot color={dotColor} />\n              <Dot color={dotColor} size={dotSize} />\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  bgcolor: badgeBgColor,\n                  borderRadius: '50%',\n                  height: 28,\n                  justifyContent: 'center',\n                  width: 28,\n                }}\n              >\n                {icon}\n              </Stack>\n              <Dot color={dotColor} size={dotSize} />\n              <Dot color={dotColor} />\n            </Stack>\n            <Box sx={logoSx}>{to}</Box>\n          </Stack>\n        </Box>\n      </Card>\n    </Box>\n  )\n}\n\nexport default TransferLogoCard\n"],"mappings":"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"}

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

@@ -17,3 +17,9 @@ export declare const WARM_LIME_ACCENT_GRADIENT = "linear-gradient(200.73deg, rgb
 export declare const CELEBRATION_GRADIENT = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)";
 /** Peach → pink gradient for Discovered Accounts success state. */
 export declare const DISCOVERED_ACCOUNTS_GRADIENT = "linear-gradient(200.73deg, rgba(255, 224, 153, 1) 1.86%, rgba(255, 129, 230, 1) 101.54%)";
+/**
+ * Warm → pink wash at 20% opacity for the account-connected success state.
+ * Layer over `background.paper` (the Figma spec's `#FFF` base), not the
+ * `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%)";

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

@@ -1,5 +1,6 @@
-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%)";
+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%)";
 export {
+  g as ACCOUNT_CONNECTED_GRADIENT,
   a as CELEBRATION_GRADIENT,
   r as WARM_LIME_ACCENT_GRADIENT
 };

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"],"mappings":"AAeA,IAAa,IACX,+FAGW,IACX"}
+{"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"}

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

@@ -1,59 +1,61 @@
-import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as a } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as p } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
+import { DoubleBarChartBlock as c } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
 import l from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import s from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import g from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
-import { BudgetBlock as u } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import S from "./components/SaveAnExtraCard.es.js";
-import h from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import T from "./components/InsightTransactionRow.es.js";
-import D from "./components/TransactionListCard.es.js";
-import { CategoryTransactionsBlock as P } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import { SVGImageBlock as y } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import R from "./components/AccountHeroCard.es.js";
-import E from "./components/AmountPill.es.js";
-import V from "./components/DesignateEmergencySavingsCard.es.js";
-import _ from "./components/BaseLayout.es.js";
-import G from "./components/StatusMessageCard.es.js";
-import O from "./components/LogoTile.es.js";
-import j from "./components/LogoClusterCard.es.js";
-import z from "./components/MerchantHighlightCard.es.js";
-import J from "./components/P2PLogoStack.es.js";
-import Q from "./components/SavingsOpportunityCard.es.js";
-import X from "./components/StatusPill.es.js";
-import Z from "./components/SubscriptionHeroCard.es.js";
-import rr from "./components/TransferLogoCard.es.js";
-import tr from "./components/UpcomingBillCard.es.js";
+import u from "./components/TransferLogoCard.es.js";
+import S from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
+import { BudgetBlock as h } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import T from "./components/SaveAnExtraCard.es.js";
+import D from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import P from "./components/InsightTransactionRow.es.js";
+import y from "./components/TransactionListCard.es.js";
+import { CategoryTransactionsBlock as R } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import { SVGImageBlock as E } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import V from "./components/AccountHeroCard.es.js";
+import M from "./components/AmountPill.es.js";
+import G from "./components/DesignateEmergencySavingsCard.es.js";
+import O from "./components/BaseLayout.es.js";
+import j from "./components/StatusMessageCard.es.js";
+import z from "./components/LogoTile.es.js";
+import J from "./components/LogoClusterCard.es.js";
+import Q from "./components/MerchantHighlightCard.es.js";
+import X from "./components/P2PLogoStack.es.js";
+import Z from "./components/SavingsOpportunityCard.es.js";
+import rr from "./components/StatusPill.es.js";
+import tr from "./components/SubscriptionHeroCard.es.js";
+import ir from "./components/UpcomingBillCard.es.js";
 export {
   g as AccountBlock,
-  R as AccountHeroCard,
-  E as AmountPill,
+  V as AccountHeroCard,
+  S as AccountSwitchBlock,
+  M as AmountPill,
   o as BAR_CHART_VARIANTS,
   p as BarchartBlock,
-  _ as BaseLayout,
-  u as BudgetBlock,
-  P as CategoryTransactionsBlock,
-  V as DesignateEmergencySavingsCard,
+  O as BaseLayout,
+  h as BudgetBlock,
+  R as CategoryTransactionsBlock,
+  G as DesignateEmergencySavingsCard,
   l as DonutChartBlock,
-  e as DoubleBarChartBlock,
+  c as DoubleBarChartBlock,
   s as DoubleProgressBarBlock,
-  T as InsightTransactionRow,
-  j as LogoClusterCard,
-  O as LogoTile,
-  z as MerchantHighlightCard,
-  J as P2PLogoStack,
-  y as SVGImageBlock,
-  S as SaveAnExtraCard,
-  h as SaveExtraBlock,
-  Q as SavingsOpportunityCard,
-  G as StatusMessageCard,
-  X as StatusPill,
-  Z as SubscriptionHeroCard,
-  D as TransactionListCard,
-  rr as TransferLogoCard,
-  tr as UpcomingBillCard,
+  P as InsightTransactionRow,
+  J as LogoClusterCard,
+  z as LogoTile,
+  Q as MerchantHighlightCard,
+  X as P2PLogoStack,
+  E as SVGImageBlock,
+  T as SaveAnExtraCard,
+  D as SaveExtraBlock,
+  Z as SavingsOpportunityCard,
+  j as StatusMessageCard,
+  rr as StatusPill,
+  tr as SubscriptionHeroCard,
+  y as TransactionListCard,
+  u as TransferLogoCard,
+  ir as UpcomingBillCard,
   t as barChartVariant,
   m as buildChartData,
-  a as buildDataSeries
+  i as buildDataSeries
 };

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

@@ -1,53 +1,55 @@
 import { BarchartBlock as e } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as a } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import m from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
-import l from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
-import c from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
-import { BudgetBlock as i } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import n from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import c from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import m from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
+import l from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
+import i from "../blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
+import { BudgetBlock as n } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import k from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
 import { CategoryTransactionsBlock as B } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import k from "../blocks/ImageBlocks/ImageBlock.es.js";
-import { SVGImageBlock as p } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import f from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
-import { PlaceholderActionBlock as s } from "../actionBlocks/PlaceholderActionBlock.es.js";
-import { getMakeTransferDrawerTitle as u } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
-import { MakeTransferActionBlockLayer as h } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
+import p from "../blocks/ImageBlocks/ImageBlock.es.js";
+import { SVGImageBlock as f } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import s from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import { PlaceholderActionBlock as u } from "../actionBlocks/PlaceholderActionBlock.es.js";
+import { getMakeTransferDrawerTitle as h } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
+import { MakeTransferActionBlockLayer as C } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
 var t = (o) => {
-}, C = /* @__PURE__ */ new Set([
+}, _ = /* @__PURE__ */ new Set([
   "",
   "null",
   "undefined"
-]), E = (o) => {
+]), M = (o) => {
   const r = o?.trim().toLowerCase();
-  return !!r && !C.has(r);
-}, I = {
+  return !!r && !_.has(r);
+}, N = {
   PlaceholderActionBlock: {
-    Component: s,
+    Component: u,
     usePrepare: t,
     title: () => "Action Block Layer Drilldown"
   },
   make_transfer: {
-    Component: h,
+    Component: C,
     usePrepare: t,
-    title: u
+    title: h
   }
-}, M = {
-  AccountBlock: c,
+}, O = {
+  AccountBlock: l,
+  account_switch_block: i,
   BarChartBlock: e,
-  BudgetBlock: i,
+  BudgetBlock: n,
   CategoryTransactionsBlock: B,
-  DonutChartBlock: m,
+  DonutChartBlock: c,
   DoubleBarChartBlock: a,
-  DoubleProgressBarBlock: l,
-  ImageBlock: k,
-  save_extra_block: n,
-  StepChartBlock: f,
-  SVGImageBlock: p
+  DoubleProgressBarBlock: m,
+  ImageBlock: p,
+  save_extra_block: k,
+  StepChartBlock: s,
+  SVGImageBlock: f
 };
 export {
-  I as actionBlocks,
-  M as blocks,
-  E as hasDrawerBlock
+  N as actionBlocks,
+  O as blocks,
+  M as hasDrawerBlock
 };
 
 //# sourceMappingURL=blocks.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  BarchartBlock,\n  BudgetBlock,\n  CategoryTransactionsBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n  const normalized = block?.trim().toLowerCase()\n  return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  // Resolves the drawer title from the clicked CTA's variant + copy (e.g.\n  // MakeTransfer reads its variant title from layout.ts). Falls back to the CTA label.\n  title?: (variant: string | null | undefined, copy: GlobalCopy) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\nexport const actionBlocks = {\n  PlaceholderActionBlock: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  make_transfer: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  AccountBlock: AccountBlock,\n  BarChartBlock: BarchartBlock,\n  BudgetBlock: BudgetBlock,\n  CategoryTransactionsBlock: CategoryTransactionsBlock,\n  DonutChartBlock: DonutChartBlock,\n  DoubleBarChartBlock: DoubleBarChartBlock,\n  DoubleProgressBarBlock: DoubleProgressBarBlock,\n  ImageBlock: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  StepChartBlock: StepChartBlock,\n  SVGImageBlock: SVGImageBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,IAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAea,IAAe;AAAA,EAC1B,wBAAwB;AAAA,IACtB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,GAEa,IAAS;AAAA,EACN,cAAA;AAAA,EACd,eAAe;AAAA,EACF,aAAA;AAAA,EACc,2BAAA;AAAA,EACV,iBAAA;AAAA,EACI,qBAAA;AAAA,EACG,wBAAA;AAAA,EACZ,YAAA;AAAA,EACZ,kBAAkB;AAAA,EACF,gBAAA;AAAA,EACD,eAAA;AACjB"}
+{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  AccountSwitchBlock,\n  BarchartBlock,\n  BudgetBlock,\n  CategoryTransactionsBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n  const normalized = block?.trim().toLowerCase()\n  return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  // Resolves the drawer title from the clicked CTA's variant + copy (e.g.\n  // MakeTransfer reads its variant title from layout.ts). Falls back to the CTA label.\n  title?: (variant: string | null | undefined, copy: GlobalCopy) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\nexport const actionBlocks = {\n  PlaceholderActionBlock: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  make_transfer: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  AccountBlock: AccountBlock,\n  account_switch_block: AccountSwitchBlock,\n  BarChartBlock: BarchartBlock,\n  BudgetBlock: BudgetBlock,\n  CategoryTransactionsBlock: CategoryTransactionsBlock,\n  DonutChartBlock: DonutChartBlock,\n  DoubleBarChartBlock: DoubleBarChartBlock,\n  DoubleProgressBarBlock: DoubleProgressBarBlock,\n  ImageBlock: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  StepChartBlock: StepChartBlock,\n  SVGImageBlock: SVGImageBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,IAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAea,IAAe;AAAA,EAC1B,wBAAwB;AAAA,IACtB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,GAEa,IAAS;AAAA,EACN,cAAA;AAAA,EACd,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACF,aAAA;AAAA,EACc,2BAAA;AAAA,EACV,iBAAA;AAAA,EACI,qBAAA;AAAA,EACG,wBAAA;AAAA,EACZ,YAAA;AAAA,EACZ,kBAAkB;AAAA,EACF,gBAAA;AAAA,EACD,eAAA;AACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.4.10-alpha.al1",
+  "version": "9.4.11",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",