@mx-cartographer/experiences 9.4.70 → 9.4.71

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [9.4.71] - 10-09-2026
+
+- **CHANGED** - `DirectDepositVariant` (`DirectDepositBlock/layout.ts`) is now a single `directDepositVariant` const object used both as the runtime value and as the source for the derived `DirectDepositVariant` type, so a variant name only needs to change in one place; `getLayoutConfig`'s keys are computed properties off that object instead of retyped literals (WEC-1875)
+- **FIXED** - `DirectDepositBlockBeats.ts` fixture typed its `insights_payload` per-JSON-literal, which broke `primary_cta` access for the `DirectDepositComplete` variant (no CTA on that beat) with a `TS2339` typecheck error; `insights_payload` is now cast to the real `InsightsPayload` type (matching `TransactionBlockBeats.ts`'s pattern), which already models `primary_cta` as optional (WEC-1875)
+- **CHANGED** - `DirectDepositBlockPayload.json` fixture's `instance_slot.variant` values switched to snake_case (WEC-1875)
+- **CHANGED** - Extracted `ConfettiOverlay` (`src/insights-v2/components/shared/ConfettiOverlay.tsx`) as a shared component, used by both `DirectDepositCard` and `TransferLogoCard` instead of each defining its own (WEC-1875)
+
 ## [9.4.70] - 10-09-2026
 
 - **ADDED** - `PrimaryCTA` / `SecondaryCTA` accept a backend-described `metadata` object (`event`, `action`, `payload`); on press the CTA runner posts that message to the host after the step's handler and effects succeed, so per-insight post messages no longer need frontend code (WEC-1852)

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

@@ -253,4 +253,12 @@ export interface InstanceSlot {
      * from `InsightsPayload.instance_slot_data` instead and leave this absent.
      */
     data_series?: InstanceSlotRow[];
+    /** Primary line on the hero card, e.g. "Epic Bank Checking, *1234". */
+    account_name?: string;
+    /** Secondary line beneath the name, e.g. "Checking Account" / "Credit Card". */
+    account_type?: string;
+    /** Status pill label, e.g. "Direct Deposit Not Set Up" / "Interest Rate: 19.99% APR". */
+    status_text?: string;
+    institution_guid?: string;
+    institution_name?: string;
 }

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

@@ -0,0 +1,16 @@
+import { InsightsPayload } from '../../../../core';
+interface DirectDepositBlockProps {
+    payload: InsightsPayload;
+    beatGuid?: string;
+}
+/**
+ * Direct Deposit component block — the shared hero visual for the Set Up
+ * Direct Deposit, Switch Direct Deposit, and Missing Interest Rate beats.
+ *
+ * The backend picks the design branch via `instance_slot.variant` and carries
+ * the account facts flat on `instance_slot` (V2 contract — no
+ * `instance_slot_data`). Everything variant-specific is flat on the layout
+ * config (`./layout.ts`); `DirectDepositCard` is a variant-agnostic hero.
+ */
+declare const DirectDepositBlock: ({ payload }: DirectDepositBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default DirectDepositBlock;

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

@@ -0,0 +1,24 @@
+import { DepositLogo as f } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import { directDepositVariant as l, getLayoutConfig as D } from "./layout.es.js";
+import g from "../../../components/DirectDepositCard.es.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as _ } from "@mui/material/styles";
+var L = ({ payload: i }) => {
+  const e = _(), { instance_slot: n } = i, { account_name: a, account_type: s, institution_guid: r, institution_name: c, status_text: m, variant: u } = n, t = D(e), p = t[u] ?? t[l.SetUpDirectDeposit];
+  return /* @__PURE__ */ o(g, {
+    ...p,
+    logo: /* @__PURE__ */ o(f, {
+      iconName: "account_balance",
+      institutionName: c ?? "",
+      institutionGuid: r ?? ""
+    }),
+    name: a,
+    statusLabel: m,
+    subtitle: s
+  });
+};
+export {
+  L as default
+};
+
+//# sourceMappingURL=DirectDepositBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DirectDepositBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport type { InsightsPayload } from '../../../../core'\n\nimport DirectDepositCard from '../../../components/DirectDepositCard'\n\nimport { directDepositVariant, getLayoutConfig, type DirectDepositVariant } from './layout'\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\n\ninterface DirectDepositBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/**\n * Direct Deposit component block — the shared hero visual for the Set Up\n * Direct Deposit, Switch Direct Deposit, and Missing Interest Rate beats.\n *\n * The backend picks the design branch via `instance_slot.variant` and carries\n * the account facts flat on `instance_slot` (V2 contract — no\n * `instance_slot_data`). Everything variant-specific is flat on the layout\n * config (`./layout.ts`); `DirectDepositCard` is a variant-agnostic hero.\n */\nconst DirectDepositBlock = ({ payload }: DirectDepositBlockProps) => {\n  const theme = useTheme()\n  const { instance_slot } = payload\n  const { account_name, account_type, institution_guid, institution_name, status_text, variant } =\n    instance_slot\n\n  const layoutConfig = getLayoutConfig(theme)\n  // Unknown backend variants degrade to the pending setup styling rather than\n  // crashing (mirrors createVariantBlock's fallback philosophy).\n  const config =\n    layoutConfig[variant as DirectDepositVariant] ??\n    layoutConfig[directDepositVariant.SetUpDirectDeposit]\n\n  return (\n    <DirectDepositCard\n      {...config}\n      logo={\n        <DepositLogo\n          iconName=\"account_balance\"\n          institutionName={institution_name ?? ''}\n          institutionGuid={institution_guid ?? ''}\n        />\n      }\n      name={account_name}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DirectDepositBlock\n"],"mappings":";;;;;AAuBA,IAAM,IAAA,CAAsB,EAAE,SAAA,EAAA,MAAuC;AACnE,QAAM,IAAQ,EAAS,GACjB,EAAE,eAAA,EAAA,IAAkB,GACpB,EAAE,cAAA,GAAc,cAAA,GAAc,kBAAA,GAAkB,kBAAA,GAAkB,aAAA,GAAa,SAAA,EAAA,IACnF,GAEI,IAAe,EAAgB,CAAK,GAGpC,IACJ,EAAa,CAAA,KACb,EAAa,EAAqB,kBAAA;AAEpC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}

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

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

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

@@ -0,0 +1,28 @@
+import { Theme } from '@mui/material/styles';
+import { DirectDepositCardStyleProps, DirectDepositPillConfig } from '../../../components/DirectDepositCard';
+/**
+ * Design branches of the Direct Deposit component block (Figma: "Direct
+ * Deposit" — Detailed Primary / Detailed Success / Deposit Completed):
+ *
+ * - `SetUpDirectDeposit`    — pending setup: flat `primary.lighter` slot, neutral pill
+ *   ("Direct Deposit Not Set Up").
+ * - `DirectDepositComplete` — Set Up / Switch Direct Deposit success: celebration wash +
+ *   confetti, solid success pill with a check_circle glyph ("Direct Deposit Complete").
+ * - `MissingInterestRate`   — pending rate: blue gradient slot, primary-tinted pill
+ *   ("Unknown Interest Rate (APR)%").
+ * - `InterestRateAdded`     — rate added: green gradient slot, solid success pill
+ *   ("Interest Rate: 19.99% APR").
+ */
+export declare const directDepositVariant: {
+    readonly SetUpDirectDeposit: "set_up_direct_deposit";
+    readonly DirectDepositComplete: "direct_deposit_complete";
+    readonly MissingInterestRate: "missing_interest_rate";
+    readonly InterestRateAdded: "interest_rate_added";
+};
+export type DirectDepositVariant = (typeof directDepositVariant)[keyof typeof directDepositVariant];
+export declare const NEUTRAL_PILL: DirectDepositPillConfig;
+/**
+ * Per-variant style props for `DirectDepositCard`, keyed by the backend
+ * `instance_slot.variant` (mirrors AccountBlock's `getLayoutConfig`).
+ */
+export declare const getLayoutConfig: (theme: Theme) => Record<DirectDepositVariant, DirectDepositCardStyleProps>;

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

@@ -0,0 +1,63 @@
+import { WARM_LIME_ACCENT_GRADIENT as o } from "../../../components/celebrationGradients.es.js";
+var e = {
+  SetUpDirectDeposit: "set_up_direct_deposit",
+  DirectDepositComplete: "direct_deposit_complete",
+  MissingInterestRate: "missing_interest_rate",
+  InterestRateAdded: "interest_rate_added"
+}, i = {
+  light: "linear-gradient(180deg, #A0B9F8 0%, #2C64EF 100%)",
+  dark: "linear-gradient(180deg, #1F46A7 0%, #6B92F4 100%)"
+}, l = {
+  light: "linear-gradient(180deg, #94C9B7 0%, #12875E 100%)",
+  dark: "linear-gradient(180deg, #0D5F42 0%, #59AB8E 100%)"
+}, n = {
+  bgcolor: "grey.200",
+  borderColor: "grey.200",
+  labelColor: "text.primary"
+}, d = {
+  bgcolor: "primary.lighter",
+  borderColor: "primary.lighter",
+  labelColor: "text.primary"
+}, t = {
+  bgcolor: "success.main",
+  borderColor: "success.main",
+  labelColor: "success.contrastText"
+}, c = (a) => {
+  const r = a.palette.mode;
+  return {
+    [e.SetUpDirectDeposit]: {
+      bgcolor: "primary.lighter",
+      nameVariant: "body2",
+      pill: n
+    },
+    [e.DirectDepositComplete]: {
+      backgroundImage: o,
+      bgcolor: "background.paper",
+      nameVariant: "body2",
+      pill: {
+        ...t,
+        icon: "check_circle"
+      },
+      showConfetti: !0
+    },
+    [e.MissingInterestRate]: {
+      backgroundImage: i[r],
+      bgcolor: "background.paper",
+      nameVariant: "body1",
+      pill: d
+    },
+    [e.InterestRateAdded]: {
+      backgroundImage: l[r],
+      bgcolor: "background.paper",
+      nameVariant: "body1",
+      pill: t
+    }
+  };
+};
+export {
+  n as NEUTRAL_PILL,
+  e as directDepositVariant,
+  c as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport { WARM_LIME_ACCENT_GRADIENT } from '../../../components/celebrationGradients'\nimport type {\n  DirectDepositCardStyleProps,\n  DirectDepositPillConfig,\n} from '../../../components/DirectDepositCard'\n\n/**\n * Design branches of the Direct Deposit component block (Figma: \"Direct\n * Deposit\" — Detailed Primary / Detailed Success / Deposit Completed):\n *\n * - `SetUpDirectDeposit`    — pending setup: flat `primary.lighter` slot, neutral pill\n *   (\"Direct Deposit Not Set Up\").\n * - `DirectDepositComplete` — Set Up / Switch Direct Deposit success: celebration wash +\n *   confetti, solid success pill with a check_circle glyph (\"Direct Deposit Complete\").\n * - `MissingInterestRate`   — pending rate: blue gradient slot, primary-tinted pill\n *   (\"Unknown Interest Rate (APR)%\").\n * - `InterestRateAdded`     — rate added: green gradient slot, solid success pill\n *   (\"Interest Rate: 19.99% APR\").\n */\nexport const directDepositVariant = {\n  SetUpDirectDeposit: 'set_up_direct_deposit',\n  DirectDepositComplete: 'direct_deposit_complete',\n  MissingInterestRate: 'missing_interest_rate',\n  InterestRateAdded: 'interest_rate_added',\n} as const\n\nexport type DirectDepositVariant = (typeof directDepositVariant)[keyof typeof directDepositVariant]\n\n// Figma slot gradients (opaque, vertical). Light/dark pairs are taken from the\n// light and dark pages of the Missing Interest Rates frame — they are bespoke\n// blends with no theme token, so they stay literal hexes keyed by palette mode.\nconst MISSING_RATE_GRADIENTS = {\n  light: 'linear-gradient(180deg, #A0B9F8 0%, #2C64EF 100%)',\n  dark: 'linear-gradient(180deg, #1F46A7 0%, #6B92F4 100%)',\n} as const\n\nconst RATE_ADDED_GRADIENTS = {\n  light: 'linear-gradient(180deg, #94C9B7 0%, #12875E 100%)',\n  dark: 'linear-gradient(180deg, #0D5F42 0%, #59AB8E 100%)',\n} as const\n\n// Figma light-mode references: neutral pill #ececec, primary-tinted pill\n// #dfe8fd (`primary.lighter`), solid success pill #12875e (`success.main`).\nexport const NEUTRAL_PILL: DirectDepositPillConfig = {\n  bgcolor: 'grey.200',\n  borderColor: 'grey.200',\n  labelColor: 'text.primary',\n}\n\nconst PRIMARY_TINT_PILL: DirectDepositPillConfig = {\n  bgcolor: 'primary.lighter',\n  borderColor: 'primary.lighter',\n  labelColor: 'text.primary',\n}\n\nconst SUCCESS_PILL: DirectDepositPillConfig = {\n  bgcolor: 'success.main',\n  borderColor: 'success.main',\n  labelColor: 'success.contrastText',\n}\n\n/**\n * Per-variant style props for `DirectDepositCard`, keyed by the backend\n * `instance_slot.variant` (mirrors AccountBlock's `getLayoutConfig`).\n */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<DirectDepositVariant, DirectDepositCardStyleProps> => {\n  const mode = theme.palette.mode\n\n  return {\n    [directDepositVariant.SetUpDirectDeposit]: {\n      bgcolor: 'primary.lighter',\n      nameVariant: 'body2',\n      pill: NEUTRAL_PILL,\n    },\n    [directDepositVariant.DirectDepositComplete]: {\n      backgroundImage: WARM_LIME_ACCENT_GRADIENT,\n      bgcolor: 'background.paper',\n      nameVariant: 'body2',\n      // Figma 1941:192796: 16px check_circle inside the complete pill.\n      pill: { ...SUCCESS_PILL, icon: 'check_circle' },\n      showConfetti: true,\n    },\n    [directDepositVariant.MissingInterestRate]: {\n      backgroundImage: MISSING_RATE_GRADIENTS[mode],\n      bgcolor: 'background.paper',\n      nameVariant: 'body1',\n      pill: PRIMARY_TINT_PILL,\n    },\n    [directDepositVariant.InterestRateAdded]: {\n      backgroundImage: RATE_ADDED_GRADIENTS[mode],\n      bgcolor: 'background.paper',\n      nameVariant: 'body1',\n      pill: SUCCESS_PILL,\n    },\n  }\n}\n"],"mappings":";AAqBA,IAAa,IAAuB;AAAA,EAClC,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB,mBAAmB;AACrB,GAOM,IAAyB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR,GAEM,IAAuB;AAAA,EAC3B,OAAO;AAAA,EACP,MAAM;AACR,GAIa,IAAwC;AAAA,EACnD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAEM,IAA6C;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAEM,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAMa,IAAA,CACX,MAC8D;AAC9D,QAAM,IAAO,EAAM,QAAQ;AAE3B,SAAO;AAAA,IACJ,CAAA,EAAqB,kBAAA,GAAqB;AAAA,MACzC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,IACC,CAAA,EAAqB,qBAAA,GAAwB;AAAA,MAC5C,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,aAAa;AAAA,MAEb,MAAM;AAAA,QAAE,GAAG;AAAA,QAAc,MAAM;AAAA,MAAe;AAAA,MAC9C,cAAc;AAAA,IAChB;AAAA,IACC,CAAA,EAAqB,mBAAA,GAAsB;AAAA,MAC1C,iBAAiB,EAAuB,CAAA;AAAA,MACxC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,IACC,CAAA,EAAqB,iBAAA,GAAoB;AAAA,MACxC,iBAAiB,EAAqB,CAAA;AAAA,MACtC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,EACF;AACF"}

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

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

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

@@ -7,6 +7,12 @@ interface AccountHeroCardProps {
     name: ReactNode;
     /** Optional secondary line beneath the name, e.g. "Checking Account". */
     subtitle?: ReactNode;
+    /**
+     * Name typography. Figma: Set Up/Switch Direct Deposit use body2 metrics
+     * (13px / lh 16, default); Missing Interest Rate uses body1 (15px / lh 20).
+     * Both render at weight 600.
+     */
+    nameVariant?: 'body1' | 'body2';
     /** Status element beneath the text (e.g. a `<StatusPill>`). */
     status?: ReactNode;
     /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */
@@ -31,5 +37,5 @@ interface AccountHeroCardProps {
  * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit
  * (complete) Content. Scope is the Content section only.
  */
-declare const AccountHeroCard: ({ backdrop, backgroundImage, bgcolor, logo, name, status, subtitle, sx, }: AccountHeroCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccountHeroCard: ({ backdrop, backgroundImage, bgcolor, logo, name, nameVariant, status, subtitle, sx, }: AccountHeroCardProps) => import("react/jsx-runtime").JSX.Element;
 export default AccountHeroCard;

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

@@ -1,22 +1,21 @@
-import { getLogoElevation as h } from "./logoShadow.es.js";
+import { getLogoElevation as m } from "./logoShadow.es.js";
 import r from "@mui/material/Stack";
 import { Text as d } from "@mxenabled/mxui";
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
 import i from "@mui/material/Box";
-var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo: p, name: c, status: a, subtitle: l, sx: x }) => /* @__PURE__ */ e(i, {
+var v = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo: p, name: c, nameVariant: x = "body2", status: a, subtitle: l, sx: h }) => /* @__PURE__ */ e(i, {
   sx: {
     alignItems: "center",
     bgcolor: s,
     ...o && { backgroundImage: o },
     display: "flex",
     flexDirection: "column",
-    overflow: "hidden",
     pb: 16,
     position: "relative",
     pt: 41,
     px: 16,
     width: "100%",
-    ...x
+    ...h
   },
   children: [n && /* @__PURE__ */ t(i, {
     "aria-hidden": !0,
@@ -31,7 +30,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
       alignItems: "center",
       bgcolor: "background.paper",
       borderRadius: "8px",
-      boxShadow: h,
+      boxShadow: m,
       gap: 16,
       pb: 16,
       position: "relative",
@@ -65,7 +64,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
         children: [/* @__PURE__ */ t(d, {
           sx: { fontWeight: 600 },
           truncate: !0,
-          variant: "body2",
+          variant: x,
           children: c
         }), l && /* @__PURE__ */ t(d, {
           color: "text.secondary",
@@ -85,7 +84,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
   })]
 });
 export {
-  w as default
+  v as default
 };
 
 //# sourceMappingURL=AccountHeroCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccountHeroCard.es.js","names":[],"sources":["../../../src/insights-v2/components/AccountHeroCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { getLogoElevation } from './logoShadow'\n\n// Figma: the logo overhangs the white card's top edge by 25px and the slot pads\n// 16px above that overhang (so `pt = overhang + 16`).\nconst LOGO_OVERHANG = 25\n\ninterface AccountHeroCardProps {\n  /** Central account/institution logo, rendered overhanging the card's top edge. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Checking, *1234\". */\n  name: ReactNode\n  /** Optional secondary line beneath the name, e.g. \"Checking Account\". */\n  subtitle?: ReactNode\n  /** Status element beneath the text (e.g. a `<StatusPill>`). */\n  status?: ReactNode\n  /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */\n  backdrop?: ReactNode\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 decorative wash layered over `bgcolor` (e.g. a celebration\n   * gradient). Figma's gradient is ~20% opacity over a white base, so this is a\n   * `backgroundImage` on top of `bgcolor`, not a replacement — pass\n   * `bgcolor=\"background.paper\"` with it for the complete state.\n   */\n  backgroundImage?: string\n  sx?: SxProps\n}\n\n/**\n * A centered account hero: an overhanging institution logo above a white card\n * with a name, optional subtitle, and a status slot, over a tinted (or\n * gradient + confetti) slot.\n *\n * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit\n * (complete) Content. Scope is the Content section only.\n */\nconst AccountHeroCard = ({\n  backdrop,\n  backgroundImage,\n  bgcolor = 'primary.lighter',\n  logo,\n  name,\n  status,\n  subtitle,\n  sx,\n}: AccountHeroCardProps) => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      bgcolor,\n      ...(backgroundImage && { backgroundImage }),\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden',\n      pb: 16,\n      position: 'relative',\n      pt: LOGO_OVERHANG + 16,\n      px: 16,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    {backdrop && (\n      <Box aria-hidden={true} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n        {backdrop}\n      </Box>\n    )}\n    <Stack\n      sx={{\n        alignItems: 'center',\n        // Theme-aware card surface (white in light, dark surface in dark) — not\n        // `common.white`, which stays white and breaks dark mode.\n        bgcolor: 'background.paper',\n        borderRadius: '8px',\n        // Figma: soft card drop-shadow (0 2px 8px rgba(0,0,0,0.12)).\n        boxShadow: getLogoElevation,\n        gap: 16,\n        pb: 16,\n        position: 'relative',\n        pt: 36,\n        px: 16,\n        width: '100%',\n        zIndex: 1,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          left: '50%',\n          position: 'absolute',\n          top: -LOGO_OVERHANG,\n          transform: 'translateX(-50%)',\n        }}\n      >\n        {logo}\n      </Box>\n      <Stack sx={{ alignItems: 'center', gap: 12, minWidth: 0, width: '100%' }}>\n        <Stack sx={{ alignItems: 'center', minWidth: 0, width: '100%' }}>\n          {/* Figma name style: body2 metrics (13px / lineHeight 16) at weight\n              600. MXUI `bold` renders 700, so set fontWeight explicitly. */}\n          <Text sx={{ fontWeight: 600 }} truncate={true} variant=\"body2\">\n            {name}\n          </Text>\n          {subtitle && (\n            <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n        {/* Center the status regardless of its own alignment (StatusPill\n            defaults to `alignSelf: flex-start` for left-aligned contexts). */}\n        {status && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>{status}</Box>\n        )}\n      </Stack>\n    </Stack>\n  </Box>\n)\n\nexport default AccountHeroCard\n"],"mappings":";;;;;AA8CA,IAAM,IAAA,CAAmB,EACvB,UAAA,GACA,iBAAA,GACA,SAAA,IAAU,mBACV,MAAA,GACA,MAAA,GACA,QAAA,GACA,UAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAA;AAAA,IACA,GAAI,KAAmB,EAAE,iBAAA,EAAgB;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAdF,UAAA,CAgBG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACrE,UAAA;AAAA,EACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MAGZ,SAAS;AAAA,MACT,cAAc;AAAA,MAEd,WAAW;AAAA,MACX,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAhBF,UAAA,CAkBE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,MAAM;AAAA,QACN,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MAEC,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,UAAU;AAAA,QAAG,OAAO;AAAA,MAAO;AAAA,MAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,UAAU;AAAA,UAAG,OAAO;AAAA,QAAO;AAAA,QAA9D,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,UAAU;AAAA,UAAM,SAAQ;AAAA,UACpD,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,UAAU;AAAA,UAAM,SAAQ;AAAA,UAClD,UAAA;AAAA,QACG,CAAA,CAEH;AAAA,MAGN,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,gBAAgB;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAAI,UAAA;AAAA,MAAY,CAAA,CAEjF;AAAA,IACF,CAAA,CAAA;AAAA,EACJ,CAAA,CAAA"}
+{"version":3,"file":"AccountHeroCard.es.js","names":[],"sources":["../../../src/insights-v2/components/AccountHeroCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { getLogoElevation } from './logoShadow'\n\n// Figma: the logo overhangs the white card's top edge by 25px and the slot pads\n// 16px above that overhang (so `pt = overhang + 16`).\nconst LOGO_OVERHANG = 25\n\ninterface AccountHeroCardProps {\n  /** Central account/institution logo, rendered overhanging the card's top edge. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Checking, *1234\". */\n  name: ReactNode\n  /** Optional secondary line beneath the name, e.g. \"Checking Account\". */\n  subtitle?: ReactNode\n  /**\n   * Name typography. Figma: Set Up/Switch Direct Deposit use body2 metrics\n   * (13px / lh 16, default); Missing Interest Rate uses body1 (15px / lh 20).\n   * Both render at weight 600.\n   */\n  nameVariant?: 'body1' | 'body2'\n  /** Status element beneath the text (e.g. a `<StatusPill>`). */\n  status?: ReactNode\n  /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */\n  backdrop?: ReactNode\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 decorative wash layered over `bgcolor` (e.g. a celebration\n   * gradient). Figma's gradient is ~20% opacity over a white base, so this is a\n   * `backgroundImage` on top of `bgcolor`, not a replacement — pass\n   * `bgcolor=\"background.paper\"` with it for the complete state.\n   */\n  backgroundImage?: string\n  sx?: SxProps\n}\n\n/**\n * A centered account hero: an overhanging institution logo above a white card\n * with a name, optional subtitle, and a status slot, over a tinted (or\n * gradient + confetti) slot.\n *\n * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit\n * (complete) Content. Scope is the Content section only.\n */\nconst AccountHeroCard = ({\n  backdrop,\n  backgroundImage,\n  bgcolor = 'primary.lighter',\n  logo,\n  name,\n  nameVariant = 'body2',\n  status,\n  subtitle,\n  sx,\n}: AccountHeroCardProps) => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      bgcolor,\n      ...(backgroundImage && { backgroundImage }),\n      display: 'flex',\n      flexDirection: 'column',\n      pb: 16,\n      position: 'relative',\n      pt: LOGO_OVERHANG + 16,\n      px: 16,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    {backdrop && (\n      <Box aria-hidden={true} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n        {backdrop}\n      </Box>\n    )}\n    <Stack\n      sx={{\n        alignItems: 'center',\n        // Theme-aware card surface (white in light, dark surface in dark) — not\n        // `common.white`, which stays white and breaks dark mode.\n        bgcolor: 'background.paper',\n        borderRadius: '8px',\n        // Figma: soft card drop-shadow (0 2px 8px rgba(0,0,0,0.12)).\n        boxShadow: getLogoElevation,\n        gap: 16,\n        pb: 16,\n        position: 'relative',\n        pt: 36,\n        px: 16,\n        width: '100%',\n        zIndex: 1,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          left: '50%',\n          position: 'absolute',\n          top: -LOGO_OVERHANG,\n          transform: 'translateX(-50%)',\n        }}\n      >\n        {logo}\n      </Box>\n      <Stack sx={{ alignItems: 'center', gap: 12, minWidth: 0, width: '100%' }}>\n        <Stack sx={{ alignItems: 'center', minWidth: 0, width: '100%' }}>\n          {/* Figma name style: body2 (13/16) or body1 (15/20) metrics at weight\n              600. MXUI `bold` renders 700, so set fontWeight explicitly. */}\n          <Text sx={{ fontWeight: 600 }} truncate={true} variant={nameVariant}>\n            {name}\n          </Text>\n          {subtitle && (\n            <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n        {/* Center the status regardless of its own alignment (StatusPill\n            defaults to `alignSelf: flex-start` for left-aligned contexts). */}\n        {status && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>{status}</Box>\n        )}\n      </Stack>\n    </Stack>\n  </Box>\n)\n\nexport default AccountHeroCard\n"],"mappings":";;;;;AAoDA,IAAM,IAAA,CAAmB,EACvB,UAAA,GACA,iBAAA,GACA,SAAA,IAAU,mBACV,MAAA,GACA,MAAA,GACA,aAAA,IAAc,SACd,QAAA,GACA,UAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAA;AAAA,IACA,GAAI,KAAmB,EAAE,iBAAA,EAAgB;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAbF,UAAA,CAeG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACrE,UAAA;AAAA,EACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MAGZ,SAAS;AAAA,MACT,cAAc;AAAA,MAEd,WAAW;AAAA,MACX,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAhBF,UAAA,CAkBE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,MAAM;AAAA,QACN,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MAEC,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,UAAU;AAAA,QAAG,OAAO;AAAA,MAAO;AAAA,MAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,UAAU;AAAA,UAAG,OAAO;AAAA,QAAO;AAAA,QAA9D,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,UAAU;AAAA,UAAM,SAAS;AAAA,UACrD,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,UAAU;AAAA,UAAM,SAAQ;AAAA,UAClD,UAAA;AAAA,QACG,CAAA,CAEH;AAAA,MAGN,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,gBAAgB;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAAI,UAAA;AAAA,MAAY,CAAA,CAEjF;AAAA,IACF,CAAA,CAAA;AAAA,EACJ,CAAA,CAAA"}

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

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export interface DirectDepositPillConfig {
+    /** Pill background color token. */
+    bgcolor: string;
+    /** Pill border color token. */
+    borderColor: string;
+    /** Pill label color token. */
+    labelColor: string;
+    /** Optional mx-icons glyph rendered before the label (e.g. `check_circle`). */
+    icon?: string;
+}
+/**
+ * Style props for the card. Variant-specific values live in the Direct Deposit
+ * block's `layout.ts` (`getLayoutConfig`) — the card itself is variant-agnostic.
+ */
+export interface DirectDepositCardStyleProps {
+    /** Slot surface token behind the white hero card. Default `primary.lighter`. */
+    bgcolor?: string;
+    /** Decorative wash layered over `bgcolor` (celebration/gradient slots). */
+    backgroundImage?: string;
+    /** Confetti burst behind the hero card (complete states). */
+    showConfetti?: boolean;
+    /** Hero name typography. Default `body2` (13/16); rate variants use `body1` (15/20). */
+    nameVariant?: 'body1' | 'body2';
+    /** Status pill color tokens + optional leading glyph. */
+    pill?: DirectDepositPillConfig;
+}
+interface DirectDepositCardProps extends DirectDepositCardStyleProps {
+    /** Institution/account logo, rendered overhanging the hero card's top edge. */
+    logo: ReactNode;
+    /** Primary line, e.g. "Epic Bank Checking, *1234". */
+    name: ReactNode;
+    /** Optional secondary line, e.g. "Checking Account" / "Credit Card". */
+    subtitle?: ReactNode;
+    /** Optional status pill label, e.g. "Direct Deposit Not Set Up". */
+    statusLabel?: ReactNode;
+}
+/**
+ * The basic Direct Deposit hero card: an overhanging logo above a white card
+ * with a name, optional subtitle, and a status pill, over a tinted/gradient
+ * slot with an optional confetti backdrop.
+ *
+ * Purely presentational — it knows nothing about beats or variants. The Direct
+ * Deposit block resolves `instance_slot.variant` to these style props via its
+ * `layout.ts` (`getLayoutConfig`).
+ */
+declare const DirectDepositCard: ({ backgroundImage, bgcolor, logo, name, nameVariant, pill, showConfetti, statusLabel, subtitle, }: DirectDepositCardProps) => import("react/jsx-runtime").JSX.Element;
+export default DirectDepositCard;

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

@@ -0,0 +1,37 @@
+import n from "./StatusPill.es.js";
+import { ConfettiOverlay as b } from "./shared/ConfettiOverlay.es.js";
+import f from "./AccountHeroCard.es.js";
+import { NEUTRAL_PILL as s } from "../blocks/ComponentBlocks/DirectDepositBlock/layout.es.js";
+import { Icon as C } from "@mxenabled/mx-icons";
+import { jsx as r } from "react/jsx-runtime";
+var h = ({ backgroundImage: t, bgcolor: i = "primary.lighter", logo: a, name: d, nameVariant: m = "body2", pill: o = s, showConfetti: l = !1, statusLabel: e, subtitle: c }) => /* @__PURE__ */ r(f, {
+  backdrop: l ? /* @__PURE__ */ r(b, {}) : void 0,
+  backgroundImage: t,
+  bgcolor: i,
+  logo: a,
+  name: d,
+  nameVariant: m,
+  status: e ? /* @__PURE__ */ r(n, {
+    bgcolor: o.bgcolor,
+    borderColor: o.borderColor,
+    icon: o.icon ? /* @__PURE__ */ r(C, {
+      "aria-hidden": !0,
+      "data-testid": "pill-icon",
+      name: o.icon,
+      size: 16,
+      sx: { color: o.labelColor }
+    }) : void 0,
+    label: e,
+    labelColor: o.labelColor,
+    sx: {
+      border: "none",
+      px: 12
+    }
+  }) : void 0,
+  subtitle: c
+});
+export {
+  h as default
+};
+
+//# sourceMappingURL=DirectDepositCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DirectDepositCard.es.js","names":[],"sources":["../../../src/insights-v2/components/DirectDepositCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport AccountHeroCard from './AccountHeroCard'\nimport StatusPill from './StatusPill'\n\nimport { ConfettiOverlay } from './shared/ConfettiOverlay'\nimport { NEUTRAL_PILL } from '../blocks/ComponentBlocks/DirectDepositBlock/layout'\n\nexport interface DirectDepositPillConfig {\n  /** Pill background color token. */\n  bgcolor: string\n  /** Pill border color token. */\n  borderColor: string\n  /** Pill label color token. */\n  labelColor: string\n  /** Optional mx-icons glyph rendered before the label (e.g. `check_circle`). */\n  icon?: string\n}\n\n/**\n * Style props for the card. Variant-specific values live in the Direct Deposit\n * block's `layout.ts` (`getLayoutConfig`) — the card itself is variant-agnostic.\n */\nexport interface DirectDepositCardStyleProps {\n  /** Slot surface token behind the white hero card. Default `primary.lighter`. */\n  bgcolor?: string\n  /** Decorative wash layered over `bgcolor` (celebration/gradient slots). */\n  backgroundImage?: string\n  /** Confetti burst behind the hero card (complete states). */\n  showConfetti?: boolean\n  /** Hero name typography. Default `body2` (13/16); rate variants use `body1` (15/20). */\n  nameVariant?: 'body1' | 'body2'\n  /** Status pill color tokens + optional leading glyph. */\n  pill?: DirectDepositPillConfig\n}\n\ninterface DirectDepositCardProps extends DirectDepositCardStyleProps {\n  /** Institution/account logo, rendered overhanging the hero card's top edge. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Checking, *1234\". */\n  name: ReactNode\n  /** Optional secondary line, e.g. \"Checking Account\" / \"Credit Card\". */\n  subtitle?: ReactNode\n  /** Optional status pill label, e.g. \"Direct Deposit Not Set Up\". */\n  statusLabel?: ReactNode\n}\n\n/**\n * The basic Direct Deposit hero card: an overhanging logo above a white card\n * with a name, optional subtitle, and a status pill, over a tinted/gradient\n * slot with an optional confetti backdrop.\n *\n * Purely presentational — it knows nothing about beats or variants. The Direct\n * Deposit block resolves `instance_slot.variant` to these style props via its\n * `layout.ts` (`getLayoutConfig`).\n */\nconst DirectDepositCard = ({\n  backgroundImage,\n  bgcolor = 'primary.lighter',\n  logo,\n  name,\n  nameVariant = 'body2',\n  pill = NEUTRAL_PILL,\n  showConfetti = false,\n  statusLabel,\n  subtitle,\n}: DirectDepositCardProps) => {\n  return (\n    <AccountHeroCard\n      backdrop={showConfetti ? <ConfettiOverlay /> : undefined}\n      backgroundImage={backgroundImage}\n      bgcolor={bgcolor}\n      logo={logo}\n      name={name}\n      nameVariant={nameVariant}\n      status={\n        statusLabel ? (\n          <StatusPill\n            bgcolor={pill.bgcolor}\n            borderColor={pill.borderColor}\n            icon={\n              pill.icon ? (\n                <Icon\n                  aria-hidden={true}\n                  data-testid=\"pill-icon\"\n                  name={pill.icon}\n                  size={16}\n                  sx={{ color: pill.labelColor }}\n                />\n              ) : undefined\n            }\n            label={statusLabel}\n            labelColor={pill.labelColor}\n            // Figma pill geometry: 24px tall, 12px side padding, no stroke\n            // (StatusPill defaults draw a 1px border and 16px padding).\n            sx={{ border: 'none', px: 12 }}\n          />\n        ) : undefined\n      }\n      subtitle={subtitle}\n    />\n  )\n}\n\nexport default DirectDepositCard\n"],"mappings":";;;;;;AA0DA,IAAM,IAAA,CAAqB,EACzB,iBAAA,GACA,SAAA,IAAU,mBACV,MAAA,GACA,MAAA,GACA,aAAA,IAAc,SACd,MAAA,IAAO,GACP,cAAA,IAAe,IACf,aAAA,GACA,UAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,UAAU,IAAe,gBAAA,EAAC,GAAD,CAAkB,CAAA,IAAI;AAAA,EAC9B,iBAAA;AAAA,EACR,SAAA;AAAA,EACH,MAAA;AAAA,EACA,MAAA;AAAA,EACO,aAAA;AAAA,EACb,QACE,IACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS,EAAK;AAAA,IACd,aAAa,EAAK;AAAA,IAClB,MACE,EAAK,OACH,gBAAA,EAAC,GAAD;AAAA,MACE,eAAa;AAAA,MACb,eAAY;AAAA,MACZ,MAAM,EAAK;AAAA,MACX,MAAM;AAAA,MACN,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,IAC9B,CAAA,IACC;AAAA,IAEN,OAAO;AAAA,IACP,YAAY,EAAK;AAAA,IAGjB,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,IAAI;AAAA,IAAG;AAAA,EAC9B,CAAA,IACC;AAAA,EAEI,UAAA;AACX,CAAA"}

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

@@ -34,6 +34,11 @@ interface TransferLogoCardProps {
     showConfetti?: boolean;
     sx?: SxProps;
 }
+/**
+ * Confetti overlay for the success state. Measures the container and fires the
+ * burst once dimensions arrive. Scoped to this component so the resize listener
+ * only mounts when confetti is shown.
+ */
 /**
  * A from → to account transfer visual: two institution logos on a rounded track
  * with a central arrow badge and connector dots between them.

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

@@ -1,118 +1,100 @@
-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 { ConfettiOverlay as w } from "./shared/ConfettiOverlay.es.js";
 import d from "@mui/material/Stack";
-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, {
+import { Icon as v } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import e from "@mui/material/Box";
+import I from "@mui/material/Card";
+var b = 240, R = 40, T = 204, y = /* @__PURE__ */ r(v, {
   "aria-hidden": !0,
   name: "arrow_forward",
   size: 20,
   sx: { color: "neutral.lighter" }
-}), s = ({ color: t = "neutral.darker", size: e = 4 }) => /* @__PURE__ */ r(i, { sx: {
-  bgcolor: t,
+}), a = ({ color: n = "neutral.darker", size: i = 4 }) => /* @__PURE__ */ r(e, { sx: {
+  bgcolor: n,
   borderRadius: "4px",
-  height: e,
-  width: e
-} }), j = () => {
-  const t = I(null), { height: e, width: o } = w(t);
-  return /* @__PURE__ */ r(i, {
-    "aria-hidden": !0,
-    ref: t,
-    sx: {
-      inset: 0,
-      position: "absolute",
-      zIndex: 0
-    },
-    children: /* @__PURE__ */ r(v, {
-      height: e,
-      shouldRun: e > 0,
-      width: o
-    })
-  });
-}, 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 = {
+  height: i,
+  width: i
+} }), S = ({ badgeBgColor: n = "neutral.darker", bgcolor: i = "primary.lighter", backgroundImage: s, dotColor: t = "neutral.darker", from: x, hasBigDots: f = !0, icon: p = y, showConfetti: g = !1, size: l = 64, to: m, sx: u }) => {
+  const h = f ? 6 : 4, c = {
     borderRadius: "4px",
     flexShrink: 0,
     height: l,
     overflow: "hidden",
     width: l
   };
-  return /* @__PURE__ */ a(i, {
+  return /* @__PURE__ */ o(e, {
     sx: {
-      bgcolor: e,
-      ...o && { backgroundImage: o },
+      bgcolor: i,
+      ...s && { backgroundImage: s },
       p: 16,
       position: "relative",
       width: "100%",
-      ...g
+      ...u
     },
-    children: [m && /* @__PURE__ */ r(j, {}), /* @__PURE__ */ r(b, {
+    children: [g && /* @__PURE__ */ r(w, {}), /* @__PURE__ */ r(I, {
       sx: {
         position: "relative",
         py: 16,
         zIndex: 1
       },
-      children: /* @__PURE__ */ a(i, {
+      children: /* @__PURE__ */ o(e, {
         sx: {
           display: "grid",
           placeItems: "center"
         },
-        children: [/* @__PURE__ */ r(i, { sx: {
+        children: [/* @__PURE__ */ r(e, { sx: {
           bgcolor: "neutral.lighter",
           borderRadius: "24px",
           gridArea: "1 / 1",
-          height: T,
-          width: y
-        } }), /* @__PURE__ */ a(d, {
+          height: R,
+          width: b
+        } }), /* @__PURE__ */ o(d, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
             gridArea: "1 / 1",
             height: l,
             justifyContent: "space-between",
-            width: C
+            width: T
           },
           children: [
-            /* @__PURE__ */ r(i, {
+            /* @__PURE__ */ r(e, {
               sx: c,
-              children: f
+              children: x
             }),
-            /* @__PURE__ */ a(d, {
+            /* @__PURE__ */ o(d, {
               sx: {
                 alignItems: "center",
                 flexDirection: "row",
                 gap: 4
               },
               children: [
-                /* @__PURE__ */ r(s, { color: n }),
-                /* @__PURE__ */ r(s, {
-                  color: n,
+                /* @__PURE__ */ r(a, { color: t }),
+                /* @__PURE__ */ r(a, {
+                  color: t,
                   size: h
                 }),
                 /* @__PURE__ */ r(d, {
                   sx: {
                     alignItems: "center",
-                    bgcolor: t,
+                    bgcolor: n,
                     borderRadius: "50%",
                     height: 28,
                     justifyContent: "center",
                     width: 28
                   },
-                  children: u
+                  children: p
                 }),
-                /* @__PURE__ */ r(s, {
-                  color: n,
+                /* @__PURE__ */ r(a, {
+                  color: t,
                   size: h
                 }),
-                /* @__PURE__ */ r(s, { color: n })
+                /* @__PURE__ */ r(a, { color: t })
               ]
             }),
-            /* @__PURE__ */ r(i, {
+            /* @__PURE__ */ r(e, {
               sx: c,
-              children: p
+              children: m
             })
           ]
         })]
@@ -121,7 +103,7 @@ var y = 240, T = 40, C = 204, D = /* @__PURE__ */ r(R, {
   });
 };
 export {
-  O as default
+  S 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  /** 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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"}
+{"version":3,"file":"TransferLogoCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransferLogoCard.tsx"],"sourcesContent":["import type { ReactNode } 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'\nimport { ConfettiOverlay } from './shared/ConfettiOverlay'\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 */\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/shared/ConfettiOverlay.d.ts

@@ -0,0 +1 @@
+export declare const ConfettiOverlay: () => import("react/jsx-runtime").JSX.Element;

package/dist/insights-v2/components/shared/ConfettiOverlay.es.js

@@ -0,0 +1,27 @@
+import { useContainerDimensions as i } from "../../hooks/useContainerDimensions.es.js";
+import { Confetti as n } from "./Confetti.es.js";
+import { useRef as s } from "react";
+import { jsx as e } from "react/jsx-runtime";
+import { Box as m } from "@mui/material";
+var d = () => {
+  const o = s(null), { height: r, width: t } = i(o);
+  return /* @__PURE__ */ e(m, {
+    "aria-hidden": !0,
+    ref: o,
+    sx: {
+      inset: 0,
+      position: "absolute",
+      zIndex: 0
+    },
+    children: /* @__PURE__ */ e(n, {
+      height: r,
+      shouldRun: r > 0,
+      width: t
+    })
+  });
+};
+export {
+  d as ConfettiOverlay
+};
+
+//# sourceMappingURL=ConfettiOverlay.es.js.map

package/dist/insights-v2/components/shared/ConfettiOverlay.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfettiOverlay.es.js","names":[],"sources":["../../../../src/insights-v2/components/shared/ConfettiOverlay.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useContainerDimensions } from '../../hooks/useContainerDimensions'\nimport Confetti from './Confetti'\nimport { Box } from '@mui/material'\n\nexport const 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"],"mappings":";;;;;AAKA,IAAa,IAAA,MAAwB;AACnC,QAAM,IAAa,EAAuB,IAAI,GACxC,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAU;AAC3D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,KAAK;AAAA,IAAY,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACvF,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAkB,QAAA;AAAA,MAAQ,WAAW,IAAS;AAAA,MAAU,OAAA;AAAA,IAAQ,CAAA;AAAA,EAC7D,CAAA;AAET"}

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

@@ -1,5 +1,6 @@
 export * from './blocks';
 export { default as AccountHeroCard } from './components/AccountHeroCard';
+export { default as DirectDepositCard, type DirectDepositCardStyleProps, type DirectDepositPillConfig, } from './components/DirectDepositCard';
 export { default as AmountPill } from './components/AmountPill';
 export { default as BadgedTile } from './components/BadgedTile';
 export { default as StatusBadge, type StatusTone } from './components/StatusBadge';

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

@@ -8,7 +8,7 @@ import d, { isLogoGuid as C } from "./components/LogoFromGuid.es.js";
 import B from "./components/StatusBadge.es.js";
 import h from "./components/CompactInsightCard.es.js";
 import S from "./components/InsightErrorCard.es.js";
-import { BAR_CHART_VARIANTS as T, barChartVariant as b, buildChartData as D, buildDataSeries as I } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { BAR_CHART_VARIANTS as A, barChartVariant as T, buildChartData as b, buildDataSeries as I } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as H } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as O } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
 import E from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
@@ -17,90 +17,94 @@ import V from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBloc
 import y from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import G from "./components/TransferLogoCard.es.js";
 import N from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
-import { BudgetBlock as U } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import q from "./components/SaveAnExtraCard.es.js";
-import J from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import Q from "./components/InsightTransactionRow.es.js";
-import Y from "./components/TransactionListCard.es.js";
-import { TransactionBlock as $, TransactionBlockVariant as rr } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import tr from "./components/WithdrawalCard.es.js";
-import ir from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
-import { SVGImageBlock as pr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import er from "./components/AccountHeroCard.es.js";
-import sr from "./components/AmountPill.es.js";
-import lr from "./components/DesignateEmergencySavingsCard.es.js";
-import { ErrorCard as Cr } from "./components/ErrorCard.es.js";
-import { FeedbackBar as Br } from "./components/FeedbackBar.es.js";
-import hr from "./components/FeedbackDialog.es.js";
-import { DismissInsightDialog as Sr } from "./components/DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as Tr } from "./components/HiddenConfirmationCard.es.js";
-import { LoadingCard as Dr } from "./components/LoadingCard.es.js";
-import { ObsolesceBanner as Lr } from "./components/ObsolesceBanner.es.js";
-import { HOST_ACTIONS as vr } from "./ctaActions/hostActions.es.js";
-import { useBeatCtaActions as wr, useCtaHandler as Er } from "./ctaActions/useCtaAction.es.js";
-import Rr from "./components/BaseLayout.es.js";
-import Vr from "./components/StatusMessageCard.es.js";
-import yr from "./components/LogoTile.es.js";
-import Gr from "./components/LogoClusterCard.es.js";
-import Nr from "./components/MerchantHighlightCard.es.js";
-import Ur from "./components/P2PLogoStack.es.js";
-import qr from "./components/SavingsOpportunityCard.es.js";
-import Jr from "./components/SubscriptionHeroCard.es.js";
-import Qr from "./components/UpcomingBillCard.es.js";
+import U from "./components/AccountHeroCard.es.js";
+import q from "./components/DirectDepositCard.es.js";
+import J from "./blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js";
+import { BudgetBlock as Q } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+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 sr from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import { SVGImageBlock as lr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import Cr from "./components/AmountPill.es.js";
+import Br from "./components/DesignateEmergencySavingsCard.es.js";
+import { ErrorCard as hr } from "./components/ErrorCard.es.js";
+import { FeedbackBar as Sr } from "./components/FeedbackBar.es.js";
+import Ar from "./components/FeedbackDialog.es.js";
+import { DismissInsightDialog as br } from "./components/DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as Lr } from "./components/HiddenConfirmationCard.es.js";
+import { LoadingCard as vr } from "./components/LoadingCard.es.js";
+import { ObsolesceBanner as wr } from "./components/ObsolesceBanner.es.js";
+import { HOST_ACTIONS as Pr } from "./ctaActions/hostActions.es.js";
+import { useBeatCtaActions as Mr, useCtaHandler as Vr } from "./ctaActions/useCtaAction.es.js";
+import yr from "./components/BaseLayout.es.js";
+import Gr from "./components/StatusMessageCard.es.js";
+import Nr from "./components/LogoTile.es.js";
+import Ur from "./components/LogoClusterCard.es.js";
+import qr from "./components/MerchantHighlightCard.es.js";
+import Jr from "./components/P2PLogoStack.es.js";
+import Qr from "./components/SavingsOpportunityCard.es.js";
+import Yr from "./components/SubscriptionHeroCard.es.js";
+import $r from "./components/UpcomingBillCard.es.js";
 export {
   y as AccountBlock,
-  er as AccountHeroCard,
+  U as AccountHeroCard,
   N as AccountSwitchBlock,
-  sr as AmountPill,
-  T as BAR_CHART_VARIANTS,
+  Cr as AmountPill,
+  A as BAR_CHART_VARIANTS,
   f as BadgedTile,
   H as BarchartBlock,
-  Rr as BaseLayout,
-  U as BudgetBlock,
+  yr as BaseLayout,
+  Q as BudgetBlock,
   h as CompactInsightCard,
-  lr as DesignateEmergencySavingsCard,
-  Sr as DismissInsightDialog,
+  Br as DesignateEmergencySavingsCard,
+  J as DirectDepositBlock,
+  q as DirectDepositCard,
+  br as DismissInsightDialog,
   R as DonutChartBlock,
   O as DoubleBarChartBlock,
   V as DoubleProgressBarBlock,
-  Cr as ErrorCard,
-  Br as FeedbackBar,
-  hr as FeedbackDialog,
-  vr as HOST_ACTIONS,
-  Tr as HiddenConfirmationCard,
+  hr as ErrorCard,
+  Sr as FeedbackBar,
+  Ar as FeedbackDialog,
+  Pr as HOST_ACTIONS,
+  Lr as HiddenConfirmationCard,
   S as InsightErrorCard,
   c as InsightOptionsMenu,
-  Q as InsightTransactionRow,
-  Dr as LoadingCard,
-  Gr as LogoClusterCard,
+  or as InsightTransactionRow,
+  vr as LoadingCard,
+  Ur as LogoClusterCard,
   d as LogoFromGuid,
-  yr as LogoTile,
-  Nr as MerchantHighlightCard,
-  Lr as ObsolesceBanner,
+  Nr as LogoTile,
+  qr as MerchantHighlightCard,
+  wr as ObsolesceBanner,
   n as OverflowMenu,
-  Ur as P2PLogoStack,
-  pr as SVGImageBlock,
-  q as SaveAnExtraCard,
-  J as SaveExtraBlock,
-  qr as SavingsOpportunityCard,
+  Jr as P2PLogoStack,
+  lr as SVGImageBlock,
+  Y as SaveAnExtraCard,
+  $ as SaveExtraBlock,
+  Qr as SavingsOpportunityCard,
   B as StatusBadge,
-  Vr as StatusMessageCard,
+  Gr as StatusMessageCard,
   o as StatusPill,
   E as StepChartBlock,
-  Jr as SubscriptionHeroCard,
-  $ as TransactionBlock,
-  rr as TransactionBlockVariant,
-  Y as TransactionListCard,
+  Yr as SubscriptionHeroCard,
+  ar as TransactionBlock,
+  pr as TransactionBlockVariant,
+  mr as TransactionListCard,
   G as TransferLogoCard,
-  Qr as UpcomingBillCard,
-  ir as WithdrawalBlock,
-  tr as WithdrawalCard,
-  b as barChartVariant,
-  D as buildChartData,
+  $r as UpcomingBillCard,
+  sr as WithdrawalBlock,
+  er as WithdrawalCard,
+  T as barChartVariant,
+  b as buildChartData,
   I as buildDataSeries,
   C as isLogoGuid,
   m as resolveInsightRender,
   a as useBeatActions,
-  wr as useBeatCtaActions,
-  Er as useCtaHandler
+  Mr as useBeatCtaActions,
+  Vr as useCtaHandler
 };

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

@@ -1,52 +1,53 @@
-import { ContactSupportActionBlock as n } from "../actionBlocks/ContactSupportActionBlock.es.js";
+import { ContactSupportActionBlock as l } from "../actionBlocks/ContactSupportActionBlock.es.js";
 import { actionBlocksKey as r } from "./actionBlocksKey.es.js";
-import { BarchartBlock as l } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
+import { BarchartBlock as n } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as m } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
 import _ from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
 import p from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import s from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import k from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import C from "../blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
-import { BudgetBlock as B } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import T from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import B from "../blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js";
+import { BudgetBlock as T } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import f from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
 import { TransactionBlock as u } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import f from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
-import A from "../blocks/ImageBlocks/ImageBlock.es.js";
-import { SVGImageBlock as O } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import A from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import O from "../blocks/ImageBlocks/ImageBlock.es.js";
+import { SVGImageBlock as b } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
 import { PlaceholderActionBlock as N } from "../actionBlocks/PlaceholderActionBlock.es.js";
-import { getMakeTransferDrawerTitle as b } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
-import { MakeTransferActionBlockLayer as h } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
-import { getDrawerHeaderTitle as I } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
+import { getMakeTransferDrawerTitle as h } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
+import { MakeTransferActionBlockLayer as I } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
+import { getDrawerHeaderTitle as d } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
 import { TransactionDetailsBlock as g } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
 import { useTransactionDetailsPrepare as a } from "../actionBlocks/TransactionDetailsBlock/useTransactionDetailsPrepare.es.js";
 import { TransactionHistoryBlock as L } from "../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js";
 import { useRecurringTransactionPrepare as i } from "../actionBlocks/RecurringTransactionBlock/useRecurringTransactionPrepare.es.js";
 import { RecurringTransactionBlock as S } from "../actionBlocks/RecurringTransactionBlock/RecurringTransactionBlock.es.js";
-import { TransactionListBlock as d } from "../actionBlocks/TransactionListBlock/TransactionListBlock.es.js";
-import { RemainingCashBlock as R } from "../actionBlocks/RemainingCashBlock/RemainingCashBlock.es.js";
+import { TransactionListBlock as R } from "../actionBlocks/TransactionListBlock/TransactionListBlock.es.js";
+import { RemainingCashBlock as P } from "../actionBlocks/RemainingCashBlock/RemainingCashBlock.es.js";
 var e = (t) => {
-}, P = /* @__PURE__ */ new Set([
+}, D = /* @__PURE__ */ new Set([
   "",
   "null",
   "undefined"
-]), eo = (t) => {
+]), io = (t) => {
   const o = t?.trim().toLowerCase();
-  return !!o && !P.has(o);
-}, ao = {
+  return !!o && !D.has(o);
+}, co = {
   [r.PLACEHOLDER_ACTION_BLOCK]: {
     Component: N,
     usePrepare: e,
     title: () => "Action Block Layer Drilldown"
   },
   [r.MAKE_TRANSFER_ACTION_BLOCK]: {
-    Component: h,
+    Component: I,
     usePrepare: e,
-    title: b
+    title: h
   },
   [r.TRANSCATION_HISTORY_ACTION_BLOCK]: {
     Component: L,
     usePrepare: e,
-    title: I
+    title: d
   },
   [r.TRANSACTION_DETAILS_ACTION_BLOCK]: {
     Component: g,
@@ -59,39 +60,40 @@ var e = (t) => {
     title: (t, o) => o.recurring?.expense_details ?? ""
   },
   [r.REMAINING_CASH_ACTION_BLOCK]: {
-    Component: R,
+    Component: P,
     usePrepare: i,
     title: (t, o) => o.insights_feed?.remaining_cash?.title ?? ""
   },
   [r.CONTACT_SUPPORT_ACTION_BLOCK]: {
-    Component: n,
+    Component: l,
     usePrepare: e,
     title: (t, o) => o.help?.request_support ?? ""
   },
   [r.TRANSACTION_LIST_ACTION_BLOCK]: {
-    Component: d,
+    Component: R,
     usePrepare: a,
     title: (t, o, c) => c?.insights_payload?.title ?? ""
   }
-}, io = {
+}, lo = {
   account_block: k,
   account_switch_block: C,
-  bar_chart_block: l,
-  budget_block: B,
+  direct_deposit_block: B,
+  bar_chart_block: n,
+  budget_block: T,
   donut_chart_block: p,
   double_bar_chart_block: m,
   double_progress_bar_block: s,
-  image_block: A,
-  save_extra_block: T,
+  image_block: O,
+  save_extra_block: f,
   step_chart_block: _,
-  svg_image_block: O,
-  withdrawal_block: f,
+  svg_image_block: b,
+  withdrawal_block: A,
   transaction_block: u
 };
 export {
-  ao as actionBlocks,
-  io as blocks,
-  eo as hasDrawerBlock
+  co as actionBlocks,
+  lo as blocks,
+  io 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  AccountSwitchBlock,\n  BarchartBlock,\n  BudgetBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n  WithdrawalBlock,\n  TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n  TransactionDetailsBlock,\n  useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\nimport {\n  RecurringTransactionBlock,\n  useRecurringTransactionPrepare,\n} from '../actionBlocks/RecurringTransactionBlock'\nimport { TransactionListBlock } from '../actionBlocks/TransactionListBlock'\nimport { RemainingCashBlock } from '../actionBlocks/RemainingCashBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\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, with the beat available\n  // for blocks that title from beat fields (e.g. transaction-list reads insights_payload.title).\n  // Falls back to the CTA label when the resolver returns an empty string / is absent.\n  title?: (variant: string | null | undefined, copy: GlobalCopy, beat?: Beat) => 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.\n\nexport const actionBlocks = {\n  [actionBlocksKey.PLACEHOLDER_ACTION_BLOCK]: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  [actionBlocksKey.MAKE_TRANSFER_ACTION_BLOCK]: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n  [actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK]: {\n    Component: TransactionHistoryBlock,\n    usePrepare: noop,\n    title: getDrawerHeaderTitle,\n  },\n  [actionBlocksKey.TRANSACTION_DETAILS_ACTION_BLOCK]: {\n    Component: TransactionDetailsBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: () => 'Transaction Details',\n  },\n  // Expense Details for one recurring subscription. Which subscription a beat names is resolved in\n  // `RecurringTransactionBlock/subscriptionBeats.ts`, not through this registry.\n  [actionBlocksKey.RECURRING_TRANSACTION_ACTION_BLOCK]: {\n    Component: RecurringTransactionBlock,\n    usePrepare: useRecurringTransactionPrepare,\n    title: (_variant, copy) => copy.recurring?.expense_details ?? '',\n  },\n  // Remaining Cash for the Payday Cash Left Over Status beat. Store-driven: reuses the recurring\n  // loader, which also loads accounts and categories, so CashflowStore's computeds are ready.\n  [actionBlocksKey.REMAINING_CASH_ACTION_BLOCK]: {\n    Component: RemainingCashBlock,\n    usePrepare: useRecurringTransactionPrepare,\n    title: (_variant, copy) => copy.insights_feed?.remaining_cash?.title ?? '',\n  },\n  // The block renders its own drawer (the help module's RequestSupport) on top of the action\n  // drawer, so the action drawer's title is the CTA label.\n  [actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK]: {\n    Component: ContactSupportActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) => copy.help?.request_support ?? '',\n  },\n  [actionBlocksKey.TRANSACTION_LIST_ACTION_BLOCK]: {\n    Component: TransactionListBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: (_variant, _copy, beat) => beat?.insights_payload?.title ?? '',\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  account_block: AccountBlock,\n  account_switch_block: AccountSwitchBlock,\n  bar_chart_block: BarchartBlock,\n  budget_block: BudgetBlock,\n  donut_chart_block: DonutChartBlock,\n  double_bar_chart_block: DoubleBarChartBlock,\n  double_progress_bar_block: DoubleProgressBarBlock,\n  image_block: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  withdrawal_block: WithdrawalBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,KAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAiBa,KAAe;AAAA,EACzB,CAAA,EAAgB,wBAAA,GAA2B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAgB,0BAAA,GAA6B;AAAA,IAC5C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EAGC,CAAA,EAAgB,kCAAA,GAAqC;AAAA,IACpD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,WAAW,mBAAmB;AAAA,EAChE;AAAA,EAGC,CAAA,EAAgB,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,eAAe,gBAAgB,SAAS;AAAA,EAC1E;AAAA,EAGC,CAAA,EAAgB,4BAAA,GAA+B;AAAA,IAC9C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,MAAM,mBAAmB;AAAA,EAC3D;AAAA,EACC,CAAA,EAAgB,6BAAA,GAAgC;AAAA,IAC/C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,GAAO,MAAS,GAAM,kBAAkB,SAAS;AAAA,EACrE;AACF,GAEa,KAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB"}
+{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  AccountSwitchBlock,\n  DirectDepositBlock,\n  BarchartBlock,\n  BudgetBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n  WithdrawalBlock,\n  TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n  TransactionDetailsBlock,\n  useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\nimport {\n  RecurringTransactionBlock,\n  useRecurringTransactionPrepare,\n} from '../actionBlocks/RecurringTransactionBlock'\nimport { TransactionListBlock } from '../actionBlocks/TransactionListBlock'\nimport { RemainingCashBlock } from '../actionBlocks/RemainingCashBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\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, with the beat available\n  // for blocks that title from beat fields (e.g. transaction-list reads insights_payload.title).\n  // Falls back to the CTA label when the resolver returns an empty string / is absent.\n  title?: (variant: string | null | undefined, copy: GlobalCopy, beat?: Beat) => 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.\n\nexport const actionBlocks = {\n  [actionBlocksKey.PLACEHOLDER_ACTION_BLOCK]: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  [actionBlocksKey.MAKE_TRANSFER_ACTION_BLOCK]: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n  [actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK]: {\n    Component: TransactionHistoryBlock,\n    usePrepare: noop,\n    title: getDrawerHeaderTitle,\n  },\n  [actionBlocksKey.TRANSACTION_DETAILS_ACTION_BLOCK]: {\n    Component: TransactionDetailsBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: () => 'Transaction Details',\n  },\n  // Expense Details for one recurring subscription. Which subscription a beat names is resolved in\n  // `RecurringTransactionBlock/subscriptionBeats.ts`, not through this registry.\n  [actionBlocksKey.RECURRING_TRANSACTION_ACTION_BLOCK]: {\n    Component: RecurringTransactionBlock,\n    usePrepare: useRecurringTransactionPrepare,\n    title: (_variant, copy) => copy.recurring?.expense_details ?? '',\n  },\n  // Remaining Cash for the Payday Cash Left Over Status beat. Store-driven: reuses the recurring\n  // loader, which also loads accounts and categories, so CashflowStore's computeds are ready.\n  [actionBlocksKey.REMAINING_CASH_ACTION_BLOCK]: {\n    Component: RemainingCashBlock,\n    usePrepare: useRecurringTransactionPrepare,\n    title: (_variant, copy) => copy.insights_feed?.remaining_cash?.title ?? '',\n  },\n  // The block renders its own drawer (the help module's RequestSupport) on top of the action\n  // drawer, so the action drawer's title is the CTA label.\n  [actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK]: {\n    Component: ContactSupportActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) => copy.help?.request_support ?? '',\n  },\n  [actionBlocksKey.TRANSACTION_LIST_ACTION_BLOCK]: {\n    Component: TransactionListBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: (_variant, _copy, beat) => beat?.insights_payload?.title ?? '',\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  account_block: AccountBlock,\n  account_switch_block: AccountSwitchBlock,\n  direct_deposit_block: DirectDepositBlock,\n  bar_chart_block: BarchartBlock,\n  budget_block: BudgetBlock,\n  donut_chart_block: DonutChartBlock,\n  double_bar_chart_block: DoubleBarChartBlock,\n  double_progress_bar_block: DoubleProgressBarBlock,\n  image_block: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  withdrawal_block: WithdrawalBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,KAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAiBa,KAAe;AAAA,EACzB,CAAA,EAAgB,wBAAA,GAA2B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAgB,0BAAA,GAA6B;AAAA,IAC5C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EAGC,CAAA,EAAgB,kCAAA,GAAqC;AAAA,IACpD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,WAAW,mBAAmB;AAAA,EAChE;AAAA,EAGC,CAAA,EAAgB,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,eAAe,gBAAgB,SAAS;AAAA,EAC1E;AAAA,EAGC,CAAA,EAAgB,4BAAA,GAA+B;AAAA,IAC9C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,MAAM,mBAAmB;AAAA,EAC3D;AAAA,EACC,CAAA,EAAgB,6BAAA,GAAgC;AAAA,IAC/C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,GAAO,MAAS,GAAM,kBAAkB,SAAS;AAAA,EACrE;AACF,GAEa,KAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB"}

package/package.json

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