@mx-cartographer/experiences 9.6.6 → 9.6.7

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.6.7] - 10-13-2026
+
+- **ADDED** - `debts_block` component block for the Debt Payoff Strategies beat, registered through `BlockType` and the `blocks` registry. Renders the new presentational `DebtPayoffCard` (account row with an optional strategy pill, current balance, and projected payoff / monthly payment / interest rate rows) from facts carried flat on `instance_slot`: `payoff_date`, `monthly_payment` and `interest_rate` are new optional `InstanceSlot` fields beside the shared `amount`, `account_*`, `institution_*` and `status_text`. One look for now (`instance_slot.variant` is not read until a second design branch exists); the logo falls back to a card glyph for credit-card debt and the bank glyph otherwise. Row labels come from a new `insights_feed.debts_block` copy namespace; until a host ships it, the card renders the account row only and warns once (`debts_block: copy namespace missing`), and a slot with no `amount` renders no balance rather than `$0.00`. Mock payloads, beats fixtures, stories and tests (WEC-1298)
+
 ## [9.6.6] - 10-13-2026
 
 - **ADDED** - Beat contract test for the **Subscription Price Increase** insight (`SubscriptionPriceIncreaseContract.test.tsx`), one case per acceptance criterion: the `double_progress_bar_block` previous-vs-new card, opening the Expense Details drawer from the primary CTA, resolving the subscription from `primary_repeating_transaction_guid` on the envelope (transaction walk as the fallback), the no-activity state, and closing back to the feed. The `SubscriptionPriceIncrease` mock payload now names `double_progress_bar_block` and the beat fixture carries `primary_repeating_transaction_guid`, the `DoubleProgressBarBlock` story drives off that shared fixture, and `docs/action-blocks/recurring-transaction-block.md` records the beat and its open questions (MEW2-3308)

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

@@ -221,6 +221,7 @@ export declare const BlockType: {
     readonly DonutChartBlock: "donut_chart_block";
     readonly DoubleBarChartBlock: "double_bar_chart_block";
     readonly DoubleProgressBarBlock: "double_progress_bar_block";
+    readonly DebtsBlock: "debts_block";
     readonly SaveExtraBlock: "save_extra_block";
     readonly SavingsOpportunityBlock: "savings_opportunity_block";
     readonly StepChartBlock: "step_chart_block";
@@ -306,4 +307,10 @@ export interface InstanceSlot {
     icon_name?: string;
     /** Category guid used to render the deposit-card logo fallback. */
     category_guid?: string;
+    /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */
+    payoff_date?: string;
+    /** Monthly payment toward the debt (unformatted); the block formats it as currency. */
+    monthly_payment?: number;
+    /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */
+    interest_rate?: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not (e.g. the account number for the Transaction\n * Details drawer). A flat hash shared by every CTA of the card, omitted when the insight has none.\n * Never carries copy or user actions (memo, tags, hide, flag come from the transaction store).\n */\nexport type DrilldownData = Record<string, string | number | boolean | null>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /** V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`. */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  // TODO: Add in_description_cta to insights_payload from backend\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface SecondaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * nothing. There is deliberately no separate `accounts` key — see tupac's `footer_account_label`.\n   */\n  account?: string\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  ImageBlock: 'image_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsOpportunityBlock: 'savings_opportunity_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), SavingsOpportunityBlock (coupon),\n  //              UpcomingSubscriptionBlock (price per cadence).\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Savings Opportunity block (Save An Extra, Potential Savings, Embedded): purely data-driven\n  // coupon card. Backend sends the caption and the amount, plus `slot` to toggle the green\n  // gradient background when the card is embedded in a parent surface that supplies its own.\n  /** Caption shown above the amount, e.g. `Save an extra` or `Potential savings`. */\n  label?: string\n  /**\n   * Whether to render the green gradient slot behind the coupon. Defaults to true. Backend sends\n   * `false` when the coupon is embedded in a parent surface that supplies its own background.\n   */\n  slot?: boolean\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n}\n"],"mappings":"AA8RA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}
+{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not (e.g. the account number for the Transaction\n * Details drawer). A flat hash shared by every CTA of the card, omitted when the insight has none.\n * Never carries copy or user actions (memo, tags, hide, flag come from the transaction store).\n */\nexport type DrilldownData = Record<string, string | number | boolean | null>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /** V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`. */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  // TODO: Add in_description_cta to insights_payload from backend\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface SecondaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * nothing. There is deliberately no separate `accounts` key — see tupac's `footer_account_label`.\n   */\n  account?: string\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  ImageBlock: 'image_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  DebtsBlock: 'debts_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsOpportunityBlock: 'savings_opportunity_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), SavingsOpportunityBlock (coupon),\n  //              UpcomingSubscriptionBlock (price per cadence).\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Savings Opportunity block (Save An Extra, Potential Savings, Embedded): purely data-driven\n  // coupon card. Backend sends the caption and the amount, plus `slot` to toggle the green\n  // gradient background when the card is embedded in a parent surface that supplies its own.\n  /** Caption shown above the amount, e.g. `Save an extra` or `Potential savings`. */\n  label?: string\n  /**\n   * Whether to render the green gradient slot behind the coupon. Defaults to true. Backend sends\n   * `false` when the coupon is embedded in a parent surface that supplies its own background.\n   */\n  slot?: boolean\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n  // Debts block: `amount` is the current balance; the shared account/institution fields above.\n  /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */\n  payoff_date?: string\n  /** Monthly payment toward the debt (unformatted); the block formats it as currency. */\n  monthly_payment?: number\n  /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */\n  interest_rate?: number\n}\n"],"mappings":"AA+RA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}

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

@@ -245,6 +245,13 @@ export interface AmountInputModalCopy {
     /** Shown in the dialog when the save request fails; the value stays so Save can be retried. */
     save_error: string;
 }
+/** Labels for the Debts component block; the values come pre-formatted off `instance_slot`. */
+export interface DebtsBlockCopy {
+    balance_label: string;
+    payoff_date_label: string;
+    monthly_payment_label: string;
+    interest_rate_label: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
@@ -266,5 +273,7 @@ export interface InsightsFeedCopy {
     dismiss: DismissInsightCopy;
     /** Optional until the localized-content service ships the namespace. */
     amount_input_modal?: AmountInputModalCopy;
+    /** Optional until the localized-content service ships the namespace. */
+    debts_block?: DebtsBlockCopy;
 }
 export {};

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

@@ -0,0 +1,24 @@
+import { InsightsPayload } from '../../../../core';
+import { DebtPayoffCardStyleProps } from '../../../components/DebtPayoffCard';
+interface DebtsBlockProps {
+    payload: InsightsPayload;
+    beatGuid?: string;
+}
+/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */
+export declare const PAYOFF_STYLE: DebtPayoffCardStyleProps;
+/**
+ * Debts component block — the content card for the Debt Payoff Strategies beat.
+ *
+ * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):
+ * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared
+ * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which
+ * ships separately: until it has, the card shows the account row only (never an unlabelled number)
+ * and warns once per mount so the rollout gap is traceable.
+ *
+ * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt
+ * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant
+ * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second
+ * variant, not before.
+ */
+declare const DebtsBlock: ({ payload }: DebtsBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default DebtsBlock;

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

@@ -0,0 +1,56 @@
+import { DATE_FORMATS_INTL as y, formatDate as h } from "../../../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as v } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as _, formatPercentage as g } from "../../../../core/utils/NumberFormatting.es.js";
+import { DepositLogo as D } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import T from "../../../components/DebtPayoffCard.es.js";
+import { parseDueDate as C } from "../UpcomingBillBlock/UpcomingBillBlock.es.js";
+import L from "react";
+import { jsx as b } from "react/jsx-runtime";
+var A = {
+  bgcolor: "primary.lighter",
+  pill: {
+    bgcolor: "primary.lighter",
+    labelColor: "text.primary"
+  }
+}, E = /* @__PURE__ */ new Set([
+  "credit card",
+  "credit_card",
+  "creditcard"
+]), R = (e) => E.has((e ?? "").trim().toLowerCase()) ? "credit_card" : "account_balance", S = (e) => !!e?.balance_label && !!e.payoff_date_label && !!e.monthly_payment_label && !!e.interest_rate_label, B = ({ payload: e }) => {
+  const a = v().insights_feed?.debts_block, t = S(a) ? a : void 0, { account_name: u, account_type: l, amount: r, institution_guid: f, institution_name: p, interest_rate: n, monthly_payment: i, payoff_date: s, status_text: d } = e.instance_slot;
+  L.useEffect(() => {
+    t || console.warn(`debts_block: ${a ? "copy incomplete" : "copy namespace missing"}; rendering the account row only`);
+  }, [a, t]);
+  const c = s ? C(s) : null, o = [];
+  t && c && o.push({
+    label: t.payoff_date_label,
+    value: h(c, y.MONTH_SHORT_YEAR)
+  }), t && i != null && o.push({
+    label: t.monthly_payment_label,
+    value: _(i, "0,0.00")
+  }), t && n != null && o.push({
+    label: t.interest_rate_label,
+    value: g(n / 100)
+  });
+  const m = t !== void 0 && r != null;
+  return /* @__PURE__ */ b(T, {
+    ...A,
+    balance: m ? _(r, "0,0.00") : void 0,
+    balanceLabel: m ? t.balance_label : void 0,
+    logo: /* @__PURE__ */ b(D, {
+      iconName: R(l),
+      institutionGuid: f ?? "",
+      institutionName: p ?? ""
+    }),
+    name: u,
+    stats: o,
+    statusLabel: d,
+    subtitle: l
+  });
+};
+export {
+  A as PAYOFF_STYLE,
+  B as default
+};
+
+//# sourceMappingURL=DebtsBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DebtsBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DebtsBlock/DebtsBlock.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport type { InsightsPayload } from '../../../../core'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DebtsBlockCopy } from '../../../../core/types/localization/InsightsFeedCopy'\nimport { formatCurrency, formatPercentage } from '../../../../core/utils/NumberFormatting'\n\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\nimport DebtPayoffCard, {\n  type DebtPayoffCardStyleProps,\n  type DebtPayoffStat,\n} from '../../../components/DebtPayoffCard'\nimport { parseDueDate } from '../UpcomingBillBlock/UpcomingBillBlock'\n\ninterface DebtsBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/** `projected_payoff` look: primary-tinted slot and pill. The card story mirrors it from here. */\nexport const PAYOFF_STYLE: DebtPayoffCardStyleProps = {\n  bgcolor: 'primary.lighter',\n  pill: { bgcolor: 'primary.lighter', labelColor: 'text.primary' },\n}\n\n/** Account types drawn with the card glyph when there is no institution logo; the rest get the bank. */\nconst CREDIT_CARD_TYPES = new Set(['credit card', 'credit_card', 'creditcard'])\n\nconst iconFor = (accountType?: string) =>\n  CREDIT_CARD_TYPES.has((accountType ?? '').trim().toLowerCase())\n    ? 'credit_card'\n    : 'account_balance'\n\n/** Every label the card renders; a partial namespace counts as missing. */\nconst hasAllLabels = (copy?: DebtsBlockCopy): copy is DebtsBlockCopy =>\n  !!copy?.balance_label &&\n  !!copy.payoff_date_label &&\n  !!copy.monthly_payment_label &&\n  !!copy.interest_rate_label\n\n/**\n * Debts component block — the content card for the Debt Payoff Strategies beat.\n *\n * The debt account's facts arrive flat on `instance_slot` (V2 contract — no `instance_slot_data`):\n * the balance (`amount`), `payoff_date`, `monthly_payment`, `interest_rate`, plus the shared\n * account/institution fields. Row labels come from `insights_feed.debts_block` copy, which\n * ships separately: until it has, the card shows the account row only (never an unlabelled number)\n * and warns once per mount so the rollout gap is traceable.\n *\n * `instance_slot.variant` is not read yet: the architecture doc's other Debts branches (Debt\n * Summary, Interest Summary) have no design, so there is one look. Introduce a per-variant\n * registry (`createVariantBlock` + a `layout.ts` table, as `AccountBlock` does) with the second\n * variant, not before.\n */\nconst DebtsBlock = ({ payload }: DebtsBlockProps) => {\n  const copy = useGlobalCopyStore().insights_feed?.debts_block\n  const labels = hasAllLabels(copy) ? copy : undefined\n  const {\n    account_name,\n    account_type,\n    amount,\n    institution_guid,\n    institution_name,\n    interest_rate,\n    monthly_payment,\n    payoff_date,\n    status_text,\n  } = payload.instance_slot\n\n  React.useEffect(() => {\n    if (labels) return\n    console.warn(\n      `debts_block: ${copy ? 'copy incomplete' : 'copy namespace missing'}; rendering the account row only`,\n    )\n  }, [copy, labels])\n\n  // A row with no value (or an unparseable date) is dropped rather than rendered blank.\n  const payoffDate = payoff_date ? parseDueDate(payoff_date) : null\n  const stats: DebtPayoffStat[] = []\n  if (labels && payoffDate) {\n    stats.push({\n      label: labels.payoff_date_label,\n      value: formatDate(payoffDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n    })\n  }\n  if (labels && monthly_payment != null) {\n    stats.push({\n      label: labels.monthly_payment_label,\n      value: formatCurrency(monthly_payment, '0,0.00'),\n    })\n  }\n  if (labels && interest_rate != null) {\n    // `interest_rate` arrives as a percentage (19.99); Intl's percent style expects a fraction.\n    stats.push({ label: labels.interest_rate_label, value: formatPercentage(interest_rate / 100) })\n  }\n\n  const hasBalance = labels !== undefined && amount != null\n\n  return (\n    <DebtPayoffCard\n      {...PAYOFF_STYLE}\n      balance={hasBalance ? formatCurrency(amount, '0,0.00') : undefined}\n      balanceLabel={hasBalance ? labels.balance_label : undefined}\n      logo={\n        <DepositLogo\n          iconName={iconFor(account_type)}\n          institutionGuid={institution_guid ?? ''}\n          institutionName={institution_name ?? ''}\n        />\n      }\n      name={account_name}\n      stats={stats}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DebtsBlock\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAyC;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AAAA,IAAE,SAAS;AAAA,IAAmB,YAAY;AAAA,EAAe;AACjE,GAGM,IAAoB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAe;AAAA,EAAe;AAAY,CAAC,GAExE,IAAA,CAAW,MACf,EAAkB,KAAK,KAAe,IAAI,KAAK,EAAE,YAAY,CAAC,IAC1D,gBACA,mBAGA,IAAA,CAAgB,MACpB,CAAC,CAAC,GAAM,iBACR,CAAC,CAAC,EAAK,qBACP,CAAC,CAAC,EAAK,yBACP,CAAC,CAAC,EAAK,qBAgBH,IAAA,CAAc,EAAE,SAAA,EAAA,MAA+B;AACnD,QAAM,IAAO,EAAmB,EAAE,eAAe,aAC3C,IAAS,EAAa,CAAI,IAAI,IAAO,QACrC,EACJ,cAAA,GACA,cAAA,GACA,QAAA,GACA,kBAAA,GACA,kBAAA,GACA,eAAA,GACA,iBAAA,GACA,aAAA,GACA,aAAA,EAAA,IACE,EAAQ;AAEZ,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,KACJ,QAAQ,KACN,gBAAgB,IAAO,oBAAoB,wBAAA,kCAC7C;AAAA,EACF,GAAG,CAAC,GAAM,CAAM,CAAC;AAGjB,QAAM,IAAa,IAAc,EAAa,CAAW,IAAI,MACvD,IAA0B,CAAC;AACjC,EAAI,KAAU,KACZ,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAW,GAAY,EAAkB,gBAAgB;AAAA,EAClE,CAAC,GAEC,KAAU,KAAmB,QAC/B,EAAM,KAAK;AAAA,IACT,OAAO,EAAO;AAAA,IACd,OAAO,EAAe,GAAiB,QAAQ;AAAA,EACjD,CAAC,GAEC,KAAU,KAAiB,QAE7B,EAAM,KAAK;AAAA,IAAE,OAAO,EAAO;AAAA,IAAqB,OAAO,EAAiB,IAAgB,GAAG;AAAA,EAAE,CAAC;AAGhG,QAAM,IAAa,MAAW,UAAa,KAAU;AAErD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,SAAS,IAAa,EAAe,GAAQ,QAAQ,IAAI;AAAA,IACzD,cAAc,IAAa,EAAO,gBAAgB;AAAA,IAClD,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU,EAAQ,CAAY;AAAA,MAC9B,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACC,OAAA;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}

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

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

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

@@ -2,6 +2,7 @@ export * from './AccountBlock';
 export * from './AccountSwitchBlock';
 export * from './DirectDepositBlock';
 export * from './BudgetBlock';
+export * from './DebtsBlock';
 export * from './SaveExtraBlock';
 export * from './SavingsOpportunityBlock';
 export * from './TransactionBlock';

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

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export interface DebtPayoffStat {
+    /** Row label, e.g. "Projected payoff". */
+    label: ReactNode;
+    /** Pre-formatted row value, e.g. "Mar 2027". */
+    value: ReactNode;
+}
+export interface DebtPayoffPillConfig {
+    /** Pill background color token. The pill is borderless. */
+    bgcolor: string;
+    /** Pill label color token. */
+    labelColor: string;
+}
+/**
+ * Style props for the card. The Debts block supplies them for its look; the card itself
+ * is variant-agnostic. Only what a caller sets today is here; add a knob with its first caller.
+ */
+export interface DebtPayoffCardStyleProps {
+    /** Slot surface token behind the white card. Default `background.default`. */
+    bgcolor?: string;
+    /** Status pill color tokens. */
+    pill?: DebtPayoffPillConfig;
+}
+interface DebtPayoffCardProps extends DebtPayoffCardStyleProps {
+    /** Institution/account logo rendered beside the account name. */
+    logo: ReactNode;
+    /** Primary line, e.g. "Epic Bank Credit *0987". */
+    name: ReactNode;
+    /** Optional secondary line beneath the name, e.g. "Credit Card". */
+    subtitle?: ReactNode;
+    /** Caption above the balance, e.g. "Current balance". Rendered only together with `balance`. */
+    balanceLabel?: ReactNode;
+    /** Pre-formatted balance, e.g. "$4,500.00". Omitted (with its caption) when unknown. */
+    balance?: ReactNode;
+    /** Label/value rows beneath the balance (payoff date, monthly payment, rate). */
+    stats?: DebtPayoffStat[];
+    /** Optional status pill label beside the account, e.g. the payoff strategy name. */
+    statusLabel?: ReactNode;
+}
+/**
+ * A debt account card: logo + account name row (with an optional status pill), the current
+ * balance, and a divided list of label/value payoff stats, on a tinted slot.
+ *
+ * Purely presentational — it knows nothing about beats or variants; the Debts block passes
+ * the style props for its look.
+ */
+declare const DebtPayoffCard: ({ balance, balanceLabel, bgcolor, logo, name, pill, stats, statusLabel, subtitle, }: DebtPayoffCardProps) => import("react/jsx-runtime").JSX.Element;
+export default DebtPayoffCard;

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

@@ -0,0 +1,132 @@
+import u from "./StatusPill.es.js";
+import e from "@mui/material/Stack";
+import { Text as o } from "@mxenabled/mxui";
+import { Fragment as v, jsx as r, jsxs as t } from "react/jsx-runtime";
+import x from "@mui/material/Box";
+import y from "@mui/material/Divider";
+var w = {
+  bgcolor: "grey.200",
+  labelColor: "text.primary"
+}, h = (i) => typeof i == "string" ? i : void 0, I = ({ balance: i, balanceLabel: l, bgcolor: m = "background.default", logo: s, name: d, pill: a = w, stats: c = [], statusLabel: p, subtitle: n }) => /* @__PURE__ */ r(e, {
+  sx: {
+    px: 16,
+    width: "100%"
+  },
+  children: /* @__PURE__ */ r(x, {
+    sx: {
+      bgcolor: m,
+      borderRadius: "8px",
+      p: 16,
+      width: "100%"
+    },
+    children: /* @__PURE__ */ t(e, {
+      sx: {
+        bgcolor: "background.paper",
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: "8px",
+        gap: 12,
+        p: 16,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ t(e, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ r(x, {
+              sx: {
+                borderRadius: "4px",
+                display: "flex",
+                flexShrink: 0,
+                height: 40,
+                overflow: "hidden",
+                width: 40
+              },
+              children: s
+            }),
+            /* @__PURE__ */ t(e, {
+              sx: {
+                flexGrow: 1,
+                minWidth: 0
+              },
+              children: [/* @__PURE__ */ r(o, {
+                sx: { fontWeight: 600 },
+                title: h(d),
+                truncate: !0,
+                variant: "body2",
+                children: d
+              }), n && /* @__PURE__ */ r(o, {
+                color: "text.secondary",
+                title: h(n),
+                truncate: !0,
+                variant: "caption",
+                children: n
+              })]
+            }),
+            p && /* @__PURE__ */ r(u, {
+              bgcolor: a.bgcolor,
+              label: p,
+              labelColor: a.labelColor,
+              labelVariant: "caption",
+              sx: {
+                alignSelf: "center",
+                border: "none",
+                flexShrink: 0,
+                px: 12
+              }
+            })
+          ]
+        }),
+        i != null && l != null && /* @__PURE__ */ t(e, { children: [/* @__PURE__ */ r(o, {
+          color: "text.secondary",
+          variant: "caption",
+          children: l
+        }), /* @__PURE__ */ r(o, {
+          bold: !0,
+          color: "text.primary",
+          component: "p",
+          variant: "h2",
+          children: i
+        })] }),
+        c.length > 0 && /* @__PURE__ */ t(v, { children: [/* @__PURE__ */ r(y, {}), /* @__PURE__ */ r(e, {
+          component: "dl",
+          sx: {
+            gap: 8,
+            m: 0
+          },
+          children: c.map(({ label: f, value: g }, b) => /* @__PURE__ */ t(e, {
+            sx: {
+              alignItems: "baseline",
+              flexDirection: "row",
+              gap: 12,
+              justifyContent: "space-between"
+            },
+            children: [/* @__PURE__ */ r(o, {
+              color: "text.secondary",
+              component: "dt",
+              variant: "caption",
+              children: f
+            }), /* @__PURE__ */ r(o, {
+              component: "dd",
+              sx: {
+                fontWeight: 600,
+                m: 0
+              },
+              variant: "body2",
+              children: g
+            })]
+          }, b))
+        })] })
+      ]
+    })
+  })
+});
+export {
+  I as default
+};
+
+//# sourceMappingURL=DebtPayoffCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DebtPayoffCard.es.js","names":[],"sources":["../../../src/insights-v2/components/DebtPayoffCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport StatusPill from './StatusPill'\n\nexport interface DebtPayoffStat {\n  /** Row label, e.g. \"Projected payoff\". */\n  label: ReactNode\n  /** Pre-formatted row value, e.g. \"Mar 2027\". */\n  value: ReactNode\n}\n\nexport interface DebtPayoffPillConfig {\n  /** Pill background color token. The pill is borderless. */\n  bgcolor: string\n  /** Pill label color token. */\n  labelColor: string\n}\n\n/**\n * Style props for the card. The Debts block supplies them for its look; the card itself\n * is variant-agnostic. Only what a caller sets today is here; add a knob with its first caller.\n */\nexport interface DebtPayoffCardStyleProps {\n  /** Slot surface token behind the white card. Default `background.default`. */\n  bgcolor?: string\n  /** Status pill color tokens. */\n  pill?: DebtPayoffPillConfig\n}\n\ninterface DebtPayoffCardProps extends DebtPayoffCardStyleProps {\n  /** Institution/account logo rendered beside the account name. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Credit *0987\". */\n  name: ReactNode\n  /** Optional secondary line beneath the name, e.g. \"Credit Card\". */\n  subtitle?: ReactNode\n  /** Caption above the balance, e.g. \"Current balance\". Rendered only together with `balance`. */\n  balanceLabel?: ReactNode\n  /** Pre-formatted balance, e.g. \"$4,500.00\". Omitted (with its caption) when unknown. */\n  balance?: ReactNode\n  /** Label/value rows beneath the balance (payoff date, monthly payment, rate). */\n  stats?: DebtPayoffStat[]\n  /** Optional status pill label beside the account, e.g. the payoff strategy name. */\n  statusLabel?: ReactNode\n}\n\nconst NEUTRAL_PILL: DebtPayoffPillConfig = { bgcolor: 'grey.200', labelColor: 'text.primary' }\n\n/** Native tooltip with the full value for a truncated line, when the value is plain text. */\nconst titleOf = (value: ReactNode) => (typeof value === 'string' ? value : undefined)\n\n/**\n * A debt account card: logo + account name row (with an optional status pill), the current\n * balance, and a divided list of label/value payoff stats, on a tinted slot.\n *\n * Purely presentational — it knows nothing about beats or variants; the Debts block passes\n * the style props for its look.\n */\nconst DebtPayoffCard = ({\n  balance,\n  balanceLabel,\n  bgcolor = 'background.default',\n  logo,\n  name,\n  pill = NEUTRAL_PILL,\n  stats = [],\n  statusLabel,\n  subtitle,\n}: DebtPayoffCardProps) => (\n  <Stack sx={{ px: 16, width: '100%' }}>\n    <Box sx={{ bgcolor, borderRadius: '8px', p: 16, width: '100%' }}>\n      <Stack\n        sx={{\n          bgcolor: 'background.paper',\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: '8px',\n          gap: 12,\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 12 }}>\n          <Box\n            sx={{\n              borderRadius: '4px',\n              display: 'flex',\n              flexShrink: 0,\n              height: 40,\n              overflow: 'hidden',\n              width: 40,\n            }}\n          >\n            {logo}\n          </Box>\n          <Stack sx={{ flexGrow: 1, minWidth: 0 }}>\n            <Text sx={{ fontWeight: 600 }} title={titleOf(name)} truncate={true} variant=\"body2\">\n              {name}\n            </Text>\n            {subtitle && (\n              <Text\n                color=\"text.secondary\"\n                title={titleOf(subtitle)}\n                truncate={true}\n                variant=\"caption\"\n              >\n                {subtitle}\n              </Text>\n            )}\n          </Stack>\n          {statusLabel && (\n            <StatusPill\n              bgcolor={pill.bgcolor}\n              label={statusLabel}\n              labelColor={pill.labelColor}\n              labelVariant=\"caption\"\n              sx={{ alignSelf: 'center', border: 'none', flexShrink: 0, px: 12 }}\n            />\n          )}\n        </Stack>\n\n        {balance != null && balanceLabel != null && (\n          <Stack>\n            <Text color=\"text.secondary\" variant=\"caption\">\n              {balanceLabel}\n            </Text>\n            {/* Display-size figure, not a heading: the feed owns the heading outline. */}\n            <Text bold={true} color=\"text.primary\" component=\"p\" variant=\"h2\">\n              {balance}\n            </Text>\n          </Stack>\n        )}\n\n        {stats.length > 0 && (\n          <>\n            <Divider />\n            <Stack component=\"dl\" sx={{ gap: 8, m: 0 }}>\n              {stats.map(({ label, value }, index) => (\n                <Stack\n                  key={index}\n                  sx={{\n                    alignItems: 'baseline',\n                    flexDirection: 'row',\n                    gap: 12,\n                    justifyContent: 'space-between',\n                  }}\n                >\n                  <Text color=\"text.secondary\" component=\"dt\" variant=\"caption\">\n                    {label}\n                  </Text>\n                  <Text component=\"dd\" sx={{ fontWeight: 600, m: 0 }} variant=\"body2\">\n                    {value}\n                  </Text>\n                </Stack>\n              ))}\n            </Stack>\n          </>\n        )}\n      </Stack>\n    </Box>\n  </Stack>\n)\n\nexport default DebtPayoffCard\n"],"mappings":";;;;;;AAoDA,IAAM,IAAqC;AAAA,EAAE,SAAS;AAAA,EAAY,YAAY;AAAe,GAGvF,IAAA,CAAW,MAAsB,OAAO,KAAU,WAAW,IAAQ,QASrE,IAAA,CAAkB,EACtB,SAAA,GACA,cAAA,GACA,SAAA,IAAU,sBACV,MAAA,GACA,MAAA,GACA,MAAA,IAAO,GACP,OAAA,IAAQ,CAAC,GACT,aAAA,GACA,UAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,IAAI;AAAA,IAAI,OAAO;AAAA,EAAO;AAAA,EACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAA;AAAA,MAAS,cAAc;AAAA,MAAO,GAAG;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,IAC5D,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,cAAc;AAAA,QACd,KAAK;AAAA,QACL,GAAG;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MATF,UAAA;AAAA,QAWE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,YAAY;AAAA,YAAU,eAAe;AAAA,YAAO,KAAK;AAAA,UAAG;AAAA,UAAjE,UAAA;AAAA,YACE,gBAAA,EAAC,GAAD;AAAA,cACE,IAAI;AAAA,gBACF,cAAc;AAAA,gBACd,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,QAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,OAAO;AAAA,cACT;AAAA,cAEC,UAAA;AAAA,YACE,CAAA;AAAA,YACL,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,UAAU;AAAA,gBAAG,UAAU;AAAA,cAAE;AAAA,cAAtC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,gBAAM,IAAI,EAAE,YAAY,IAAI;AAAA,gBAAG,OAAO,EAAQ,CAAI;AAAA,gBAAG,UAAU;AAAA,gBAAM,SAAQ;AAAA,gBAC1E,UAAA;AAAA,cACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,gBACE,OAAM;AAAA,gBACN,OAAO,EAAQ,CAAQ;AAAA,gBACvB,UAAU;AAAA,gBACV,SAAQ;AAAA,gBAEP,UAAA;AAAA,cACG,CAAA,CAEH;AAAA;YACN,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,SAAS,EAAK;AAAA,cACd,OAAO;AAAA,cACP,YAAY,EAAK;AAAA,cACjB,cAAa;AAAA,cACb,IAAI;AAAA,gBAAE,WAAW;AAAA,gBAAU,QAAQ;AAAA,gBAAQ,YAAY;AAAA,gBAAG,IAAI;AAAA,cAAG;AAAA,YAClE,CAAA;AAAA,UAEE;AAAA;QAEN,KAAW,QAAQ,KAAgB,QAClC,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,SAAQ;AAAA,UAClC,UAAA;AAAA,QACG,CAAA,GAEN,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,OAAM;AAAA,UAAe,WAAU;AAAA,UAAI,SAAQ;AAAA,UAC1D,UAAA;AAAA,QACG,CAAA,CACD,EAAA,CAAA;AAAA,QAGR,EAAM,SAAS,KACd,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,CAAU,CAAA,GACV,gBAAA,EAAC,GAAD;AAAA,UAAO,WAAU;AAAA,UAAK,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,GAAG;AAAA,UAAE;AAAA,UACtC,UAAA,EAAM,IAAA,CAAK,EAAE,OAAA,GAAO,OAAA,EAAA,GAAS,MAC5B,gBAAA,EAAC,GAAD;AAAA,YAEE,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,KAAK;AAAA,cACL,gBAAgB;AAAA,YAClB;AAAA,YAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,cAAM,OAAM;AAAA,cAAiB,WAAU;AAAA,cAAK,SAAQ;AAAA,cACjD,UAAA;AAAA,YACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,cAAM,WAAU;AAAA,cAAK,IAAI;AAAA,gBAAE,YAAY;AAAA,gBAAK,GAAG;AAAA,cAAE;AAAA,cAAG,SAAQ;AAAA,cACzD,UAAA;AAAA,YACG,CAAA,CACD;AAAA,UAdA,GAAA,CAcA,CACR;AAAA,QACI,CAAA,CACP,EAAA,CAAA;AAAA,MAEC;AAAA;EACJ,CAAA;AACA,CAAA"}

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

@@ -2,6 +2,7 @@ export * from './blocks';
 export { default as AccountHeroCard } from './components/AccountHeroCard';
 export { default as ConnectionDetailDrillDown, type ConnectionDetailContent, } from './components/ConnectionDetailDrillDown';
 export { default as DirectDepositCard, type DirectDepositCardStyleProps, type DirectDepositPillConfig, } from './components/DirectDepositCard';
+export { default as DebtPayoffCard, type DebtPayoffCardStyleProps, type DebtPayoffPillConfig, type DebtPayoffStat, } from './components/DebtPayoffCard';
 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

@@ -4,15 +4,15 @@ import { useBeatActions as a } from "./beatActions.es.js";
 import f from "./components/BadgedTile.es.js";
 import { OverflowMenu as n } from "./components/OverflowMenu.es.js";
 import { InsightOptionsMenu as l } from "./components/InsightOptionsMenu.es.js";
-import d, { isLogoGuid as g } from "./components/LogoFromGuid.es.js";
-import C from "./components/StatusBadge.es.js";
+import d, { isLogoGuid as B } from "./components/LogoFromGuid.es.js";
+import g from "./components/StatusBadge.es.js";
 import k from "./components/CompactInsightCard.es.js";
 import h from "./components/InsightErrorCard.es.js";
 import { BAR_CHART_VARIANTS as b, barChartVariant as A, buildChartData as T, buildDataSeries as I } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as v } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as O } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import M from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
-import E from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import y from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import P from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import R from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import V from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import G from "./components/TransferLogoCard.es.js";
@@ -21,105 +21,109 @@ import W 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 ro from "./components/SavingsOpportunityCard.es.js";
-import mo from "./blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
-import ao from "./components/InsightTransactionRow.es.js";
-import fo from "./components/TransactionListCard.es.js";
-import { transactionBlockVariant as no } from "./blocks/ComponentBlocks/TransactionBlock/layout.es.js";
-import { TransactionBlock as lo } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import go from "./components/UpcomingBillCard.es.js";
-import Co from "./blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
-import ko from "./components/AmountPill.es.js";
-import ho from "./components/SubscriptionHeroCard.es.js";
-import bo from "./blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.es.js";
-import To from "./components/WithdrawalCard.es.js";
-import Lo from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
-import { SVGImageBlock as Ho } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import wo from "./components/ConnectionDetailDrillDown.es.js";
-import yo from "./components/DesignateEmergencySavingsCard.es.js";
-import Po from "./components/shared/StatusSnackbar.es.js";
-import Fo from "./components/FeedbackDialog.es.js";
-import xo from "./components/FeedbackModal.es.js";
-import Uo from "./components/SurveyModal.es.js";
-import { ErrorCard as No } from "./components/ErrorCard.es.js";
-import { HOST_ACTIONS as jo } from "./ctaActions/hostActions.es.js";
-import { useBeatCtaActions as zo, useCtaHandler as Jo } from "./ctaActions/useCtaAction.es.js";
-import { FeedbackBar as Qo } from "./components/FeedbackBar.es.js";
-import { DismissInsightDialog as Yo } from "./components/DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as $o } from "./components/HiddenConfirmationCard.es.js";
-import { LoadingCard as rr } from "./components/LoadingCard.es.js";
-import { ObsolesceBanner as mr } from "./components/ObsolesceBanner.es.js";
-import ar from "./components/BaseLayout.es.js";
-import fr from "./components/StatusMessageCard.es.js";
-import nr from "./components/LogoTile.es.js";
-import lr from "./components/LogoClusterCard.es.js";
-import dr from "./components/MerchantHighlightCard.es.js";
-import Br from "./components/P2PLogoStack.es.js";
+import Y from "./components/DebtPayoffCard.es.js";
+import $ from "./components/UpcomingBillCard.es.js";
+import ro from "./blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
+import mo from "./blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js";
+import ao from "./components/SaveAnExtraCard.es.js";
+import fo from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import no from "./components/SavingsOpportunityCard.es.js";
+import lo from "./blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
+import Bo from "./components/InsightTransactionRow.es.js";
+import go from "./components/TransactionListCard.es.js";
+import { transactionBlockVariant as ko } from "./blocks/ComponentBlocks/TransactionBlock/layout.es.js";
+import { TransactionBlock as ho } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import bo from "./components/AmountPill.es.js";
+import To from "./components/SubscriptionHeroCard.es.js";
+import Lo from "./blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.es.js";
+import Ho from "./components/WithdrawalCard.es.js";
+import wo from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import { SVGImageBlock as Mo } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import Eo from "./components/ConnectionDetailDrillDown.es.js";
+import Fo from "./components/DesignateEmergencySavingsCard.es.js";
+import xo from "./components/shared/StatusSnackbar.es.js";
+import Uo from "./components/FeedbackDialog.es.js";
+import No from "./components/FeedbackModal.es.js";
+import jo from "./components/SurveyModal.es.js";
+import { ErrorCard as zo } from "./components/ErrorCard.es.js";
+import { HOST_ACTIONS as Ko } from "./ctaActions/hostActions.es.js";
+import { useBeatCtaActions as Xo, useCtaHandler as Yo } from "./ctaActions/useCtaAction.es.js";
+import { FeedbackBar as $o } from "./components/FeedbackBar.es.js";
+import { DismissInsightDialog as rr } from "./components/DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as mr } from "./components/HiddenConfirmationCard.es.js";
+import { LoadingCard as ar } from "./components/LoadingCard.es.js";
+import { ObsolesceBanner as fr } from "./components/ObsolesceBanner.es.js";
+import nr from "./components/BaseLayout.es.js";
+import lr from "./components/StatusMessageCard.es.js";
+import dr from "./components/LogoTile.es.js";
+import Cr from "./components/LogoClusterCard.es.js";
+import ur from "./components/MerchantHighlightCard.es.js";
+import Sr from "./components/P2PLogoStack.es.js";
 export {
   V as AccountBlock,
   W as AccountHeroCard,
   _ as AccountSwitchBlock,
-  ko as AmountPill,
+  bo as AmountPill,
   b as BAR_CHART_VARIANTS,
   f as BadgedTile,
   v as BarchartBlock,
-  ar as BaseLayout,
+  nr as BaseLayout,
   Q as BudgetBlock,
   k as CompactInsightCard,
-  wo as ConnectionDetailDrillDown,
-  yo as DesignateEmergencySavingsCard,
+  Eo as ConnectionDetailDrillDown,
+  Y as DebtPayoffCard,
+  mo as DebtsBlock,
+  Fo as DesignateEmergencySavingsCard,
   J as DirectDepositBlock,
   q as DirectDepositCard,
-  Yo as DismissInsightDialog,
-  E as DonutChartBlock,
+  rr as DismissInsightDialog,
+  P as DonutChartBlock,
   O as DoubleBarChartBlock,
   R as DoubleProgressBarBlock,
-  No as ErrorCard,
-  Qo as FeedbackBar,
-  Fo as FeedbackDialog,
-  xo as FeedbackModal,
-  jo as HOST_ACTIONS,
-  $o as HiddenConfirmationCard,
+  zo as ErrorCard,
+  $o as FeedbackBar,
+  Uo as FeedbackDialog,
+  No as FeedbackModal,
+  Ko as HOST_ACTIONS,
+  mr as HiddenConfirmationCard,
   h as InsightErrorCard,
   l as InsightOptionsMenu,
-  ao as InsightTransactionRow,
-  rr as LoadingCard,
-  lr as LogoClusterCard,
+  Bo as InsightTransactionRow,
+  ar as LoadingCard,
+  Cr as LogoClusterCard,
   d as LogoFromGuid,
-  nr as LogoTile,
-  dr as MerchantHighlightCard,
-  mr as ObsolesceBanner,
+  dr as LogoTile,
+  ur as MerchantHighlightCard,
+  fr as ObsolesceBanner,
   n as OverflowMenu,
-  Br as P2PLogoStack,
-  Ho as SVGImageBlock,
-  Y as SaveAnExtraCard,
-  $ as SaveExtraBlock,
-  mo as SavingsOpportunityBlock,
-  ro as SavingsOpportunityCard,
-  C as StatusBadge,
-  fr as StatusMessageCard,
+  Sr as P2PLogoStack,
+  Mo as SVGImageBlock,
+  ao as SaveAnExtraCard,
+  fo as SaveExtraBlock,
+  lo as SavingsOpportunityBlock,
+  no as SavingsOpportunityCard,
+  g as StatusBadge,
+  lr as StatusMessageCard,
   r as StatusPill,
-  Po as StatusSnackbar,
-  M as StepChartBlock,
-  ho as SubscriptionHeroCard,
-  Uo as SurveyModal,
-  lo as TransactionBlock,
-  fo as TransactionListCard,
+  xo as StatusSnackbar,
+  y as StepChartBlock,
+  To as SubscriptionHeroCard,
+  jo as SurveyModal,
+  ho as TransactionBlock,
+  go as TransactionListCard,
   G as TransferLogoCard,
-  Co as UpcomingBillBlock,
-  go as UpcomingBillCard,
-  bo as UpcomingSubscriptionBlock,
-  Lo as WithdrawalBlock,
-  To as WithdrawalCard,
+  ro as UpcomingBillBlock,
+  $ as UpcomingBillCard,
+  Lo as UpcomingSubscriptionBlock,
+  wo as WithdrawalBlock,
+  Ho as WithdrawalCard,
   A as barChartVariant,
   T as buildChartData,
   I as buildDataSeries,
-  g as isLogoGuid,
+  B as isLogoGuid,
   m as resolveInsightRender,
-  no as transactionBlockVariant,
+  ko as transactionBlockVariant,
   a as useBeatActions,
-  zo as useBeatCtaActions,
-  Jo as useCtaHandler
+  Xo as useBeatCtaActions,
+  Yo as useCtaHandler
 };

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

@@ -1,4 +1,4 @@
-import { ContactSupportActionBlock as c } from "../actionBlocks/ContactSupportActionBlock.es.js";
+import { ContactSupportActionBlock as n } from "../actionBlocks/ContactSupportActionBlock.es.js";
 import { actionBlocksKey as o } from "./actionBlocksKey.es.js";
 import { BarchartBlock as m } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as l } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
@@ -9,120 +9,122 @@ import C from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import k from "../blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
 import B from "../blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js";
 import { BudgetBlock as T } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import A from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import u from "../blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
-import { TransactionBlock as O } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import f from "../blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
+import A from "../blocks/ComponentBlocks/UpcomingBillBlock/UpcomingBillBlock.es.js";
+import u from "../blocks/ComponentBlocks/DebtsBlock/DebtsBlock.es.js";
+import O from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import f from "../blocks/ComponentBlocks/SavingsOpportunityBlock/SavingsOpportunityBlock.es.js";
+import { TransactionBlock as b } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
 import N from "../blocks/ComponentBlocks/UpcomingSubscriptionBlock/UpcomingSubscriptionBlock.es.js";
-import b from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
-import I from "../blocks/ImageBlocks/ImageBlock.es.js";
-import { SVGImageBlock as d } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import { FeedbackModalActionBlock as g } from "../actionBlocks/FeedbackModalActionBlock.es.js";
-import { ConnectionDetailActionBlock as L } from "../actionBlocks/ConnectionDetailActionBlock.es.js";
-import { ConnectWidgetActionBlock as D } from "../actionBlocks/ConnectWidgetActionBlock.es.js";
-import { SurveyModalActionBlock as P } from "../actionBlocks/SurveyModalActionBlock.es.js";
-import { PlaceholderActionBlock as h } from "../actionBlocks/PlaceholderActionBlock.es.js";
-import { getMakeTransferDrawerTitle as S } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
-import { MakeTransferActionBlockLayer as R } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
-import { getDrawerHeaderTitle as K } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
-import { TransactionDetailsBlock as E } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
+import I from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import d from "../blocks/ImageBlocks/ImageBlock.es.js";
+import { SVGImageBlock as g } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import { FeedbackModalActionBlock as L } from "../actionBlocks/FeedbackModalActionBlock.es.js";
+import { ConnectionDetailActionBlock as D } from "../actionBlocks/ConnectionDetailActionBlock.es.js";
+import { ConnectWidgetActionBlock as P } from "../actionBlocks/ConnectWidgetActionBlock.es.js";
+import { SurveyModalActionBlock as h } from "../actionBlocks/SurveyModalActionBlock.es.js";
+import { PlaceholderActionBlock as S } from "../actionBlocks/PlaceholderActionBlock.es.js";
+import { getMakeTransferDrawerTitle as R } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
+import { MakeTransferActionBlockLayer as K } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
+import { getDrawerHeaderTitle as E } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
+import { TransactionDetailsBlock as v } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
 import { useTransactionDetailsPrepare as i } from "../actionBlocks/TransactionDetailsBlock/useTransactionDetailsPrepare.es.js";
-import { TransactionHistoryBlock as v } from "../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js";
+import { TransactionHistoryBlock as M } from "../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js";
 import { useRecurringTransactionPrepare as a } from "../actionBlocks/RecurringTransactionBlock/useRecurringTransactionPrepare.es.js";
-import { RecurringTransactionBlock as M } from "../actionBlocks/RecurringTransactionBlock/RecurringTransactionBlock.es.js";
-import { TransactionListBlock as w } from "../actionBlocks/TransactionListBlock/TransactionListBlock.es.js";
-import { RemainingCashBlock as y } from "../actionBlocks/RemainingCashBlock/RemainingCashBlock.es.js";
-import { hasDrawerBlock as fo } from "./hasDrawerBlock.es.js";
-import { AmountInputModalBlock as U } from "../actionBlocks/AmountInputModalBlock/AmountInputModalBlock.es.js";
+import { RecurringTransactionBlock as w } from "../actionBlocks/RecurringTransactionBlock/RecurringTransactionBlock.es.js";
+import { TransactionListBlock as y } from "../actionBlocks/TransactionListBlock/TransactionListBlock.es.js";
+import { RemainingCashBlock as U } from "../actionBlocks/RemainingCashBlock/RemainingCashBlock.es.js";
+import { hasDrawerBlock as No } from "./hasDrawerBlock.es.js";
+import { AmountInputModalBlock as H } from "../actionBlocks/AmountInputModalBlock/AmountInputModalBlock.es.js";
 var r = (e) => {
-}, bo = {
+}, go = {
   [o.PLACEHOLDER_ACTION_BLOCK]: {
-    Component: h,
+    Component: S,
     usePrepare: r,
     title: () => "Action Block Layer Drilldown"
   },
   [o.MAKE_TRANSFER_ACTION_BLOCK]: {
-    Component: R,
+    Component: K,
     usePrepare: r,
-    title: S
+    title: R
   },
   [o.TRANSCATION_HISTORY_ACTION_BLOCK]: {
-    Component: v,
+    Component: M,
     usePrepare: r,
-    title: K
+    title: E
   },
   [o.TRANSACTION_DETAILS_ACTION_BLOCK]: {
-    Component: E,
+    Component: v,
     usePrepare: i,
     title: () => "Transaction Details"
   },
   [o.RECURRING_TRANSACTION_ACTION_BLOCK]: {
-    Component: M,
+    Component: w,
     usePrepare: a,
     title: (e, t) => t.recurring?.expense_details ?? ""
   },
   [o.REMAINING_CASH_ACTION_BLOCK]: {
-    Component: y,
+    Component: U,
     usePrepare: a,
     title: (e, t) => t.insights_feed?.remaining_cash?.title ?? ""
   },
   [o.CONTACT_SUPPORT_ACTION_BLOCK]: {
-    Component: c,
+    Component: n,
     usePrepare: r,
     title: (e, t) => t.help?.request_support ?? ""
   },
   [o.FEEDBACK_MODAL_ACTION_BLOCK]: {
-    Component: g,
+    Component: L,
     usePrepare: r,
     presentation: "modal"
   },
   [o.CONNECTION_DETAIL_ACTION_BLOCK]: {
-    Component: L,
+    Component: D,
     usePrepare: r,
     title: (e, t) => t.insights_feed?.connection_details?.connection_details_drawer_title ?? ""
   },
   [o.CONNECT_WIDGET_ACTION_BLOCK]: {
-    Component: D,
+    Component: P,
     usePrepare: r
   },
   [o.SURVEY_MODAL_ACTION_BLOCK]: {
-    Component: P,
+    Component: h,
     usePrepare: r,
     presentation: "modal"
   },
   [o.TRANSACTION_LIST_ACTION_BLOCK]: {
-    Component: w,
+    Component: y,
     usePrepare: i,
-    title: (e, t, n) => n?.insights_payload?.title ?? ""
+    title: (e, t, c) => c?.insights_payload?.title ?? ""
   },
   [o.AMOUNT_INPUT_MODAL_ACTION_BLOCK]: {
-    Component: U,
+    Component: H,
     presentation: "modal",
     usePrepare: r
   }
-}, Io = {
+}, Lo = {
   account_block: C,
   account_switch_block: k,
   direct_deposit_block: B,
   bar_chart_block: m,
   budget_block: T,
+  debts_block: u,
   donut_chart_block: _,
   double_bar_chart_block: l,
   double_progress_bar_block: s,
-  image_block: I,
-  save_extra_block: A,
-  savings_opportunity_block: u,
+  image_block: d,
+  save_extra_block: O,
+  savings_opportunity_block: f,
   step_chart_block: p,
-  svg_image_block: d,
-  upcoming_bill_block: f,
+  svg_image_block: g,
+  upcoming_bill_block: A,
   upcoming_subscription_block: N,
-  withdrawal_block: b,
-  transaction_block: O
+  withdrawal_block: I,
+  transaction_block: b
 };
 export {
-  bo as actionBlocks,
-  Io as blocks,
-  fo as hasDrawerBlock
+  go as actionBlocks,
+  Lo as blocks,
+  No 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  DirectDepositBlock,\n  BarchartBlock,\n  BudgetBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SavingsOpportunityBlock,\n  SVGImageBlock,\n  UpcomingBillBlock,\n  UpcomingSubscriptionBlock,\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 { FeedbackModalActionBlock } from '../actionBlocks/FeedbackModalActionBlock'\nimport { ConnectionDetailActionBlock } from '../actionBlocks/ConnectionDetailActionBlock'\nimport { ConnectWidgetActionBlock } from '../actionBlocks/ConnectWidgetActionBlock'\nimport { SurveyModalActionBlock } from '../actionBlocks/SurveyModalActionBlock'\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'\nimport { AmountInputModalBlock } from '../actionBlocks/AmountInputModalBlock'\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// Re-exported so existing `hasDrawerBlock` imports from this module keep working.\nexport { hasDrawerBlock } from './hasDrawerBlock'\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  // 'drawer' (default) or 'modal' (component renders its own dialog, no Drawer wrapper).\n  presentation?: 'drawer' | 'modal'\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.FEEDBACK_MODAL_ACTION_BLOCK]: {\n    Component: FeedbackModalActionBlock,\n    usePrepare: noop,\n    presentation: 'modal',\n  },\n  [actionBlocksKey.CONNECTION_DETAIL_ACTION_BLOCK]: {\n    Component: ConnectionDetailActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) =>\n      copy.insights_feed?.connection_details?.connection_details_drawer_title ?? '',\n  },\n  // Boots MX's Connect widget (web-widget-sdk iframe) inside the action\n  // drawer; the drawer title falls back to the CTA label.\n  [actionBlocksKey.CONNECT_WIDGET_ACTION_BLOCK]: {\n    Component: ConnectWidgetActionBlock,\n    usePrepare: noop,\n  },\n  [actionBlocksKey.SURVEY_MODAL_ACTION_BLOCK]: {\n    Component: SurveyModalActionBlock,\n    usePrepare: noop,\n    presentation: 'modal',\n  },\n  [actionBlocksKey.TRANSACTION_LIST_ACTION_BLOCK]: {\n    Component: TransactionListBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: (_variant, _copy, beat) => beat?.insights_payload?.title ?? '',\n  },\n  // One whole-dollar setting in a dialog; the CTA variant picks which (low-balance threshold or\n  // safety net). A modal: no drawer, so no drawer title.\n  [actionBlocksKey.AMOUNT_INPUT_MODAL_ACTION_BLOCK]: {\n    Component: AmountInputModalBlock,\n    presentation: 'modal',\n    // Loads inside the block: it mounts only while open, so mounting is the open-time load.\n    usePrepare: noop,\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  savings_opportunity_block: SavingsOpportunityBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  upcoming_bill_block: UpcomingBillBlock,\n  upcoming_subscription_block: UpcomingSubscriptionBlock,\n  withdrawal_block: WithdrawalBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAsB1B,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,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACC,CAAA,EAAgB,8BAAA,GAAiC;AAAA,IAChD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAChB,EAAK,eAAe,oBAAoB,mCAAmC;AAAA,EAC/E;AAAA,EAGC,CAAA,EAAgB,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAgB,yBAAA,GAA4B;AAAA,IAC3C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;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;AAAA,EAGC,CAAA,EAAgB,+BAAA,GAAkC;AAAA,IACjD,WAAW;AAAA,IACX,cAAc;AAAA,IAEd,YAAY;AAAA,EACd;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,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,6BAA6B;AAAA,EAC7B,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  DebtsBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SavingsOpportunityBlock,\n  SVGImageBlock,\n  UpcomingBillBlock,\n  UpcomingSubscriptionBlock,\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 { FeedbackModalActionBlock } from '../actionBlocks/FeedbackModalActionBlock'\nimport { ConnectionDetailActionBlock } from '../actionBlocks/ConnectionDetailActionBlock'\nimport { ConnectWidgetActionBlock } from '../actionBlocks/ConnectWidgetActionBlock'\nimport { SurveyModalActionBlock } from '../actionBlocks/SurveyModalActionBlock'\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'\nimport { AmountInputModalBlock } from '../actionBlocks/AmountInputModalBlock'\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// Re-exported so existing `hasDrawerBlock` imports from this module keep working.\nexport { hasDrawerBlock } from './hasDrawerBlock'\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  // 'drawer' (default) or 'modal' (component renders its own dialog, no Drawer wrapper).\n  presentation?: 'drawer' | 'modal'\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.FEEDBACK_MODAL_ACTION_BLOCK]: {\n    Component: FeedbackModalActionBlock,\n    usePrepare: noop,\n    presentation: 'modal',\n  },\n  [actionBlocksKey.CONNECTION_DETAIL_ACTION_BLOCK]: {\n    Component: ConnectionDetailActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) =>\n      copy.insights_feed?.connection_details?.connection_details_drawer_title ?? '',\n  },\n  // Boots MX's Connect widget (web-widget-sdk iframe) inside the action\n  // drawer; the drawer title falls back to the CTA label.\n  [actionBlocksKey.CONNECT_WIDGET_ACTION_BLOCK]: {\n    Component: ConnectWidgetActionBlock,\n    usePrepare: noop,\n  },\n  [actionBlocksKey.SURVEY_MODAL_ACTION_BLOCK]: {\n    Component: SurveyModalActionBlock,\n    usePrepare: noop,\n    presentation: 'modal',\n  },\n  [actionBlocksKey.TRANSACTION_LIST_ACTION_BLOCK]: {\n    Component: TransactionListBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: (_variant, _copy, beat) => beat?.insights_payload?.title ?? '',\n  },\n  // One whole-dollar setting in a dialog; the CTA variant picks which (low-balance threshold or\n  // safety net). A modal: no drawer, so no drawer title.\n  [actionBlocksKey.AMOUNT_INPUT_MODAL_ACTION_BLOCK]: {\n    Component: AmountInputModalBlock,\n    presentation: 'modal',\n    // Loads inside the block: it mounts only while open, so mounting is the open-time load.\n    usePrepare: noop,\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  debts_block: DebtsBlock,\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  savings_opportunity_block: SavingsOpportunityBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  upcoming_bill_block: UpcomingBillBlock,\n  upcoming_subscription_block: UpcomingSubscriptionBlock,\n  withdrawal_block: WithdrawalBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAsB1B,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,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACC,CAAA,EAAgB,8BAAA,GAAiC;AAAA,IAChD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAChB,EAAK,eAAe,oBAAoB,mCAAmC;AAAA,EAC/E;AAAA,EAGC,CAAA,EAAgB,2BAAA,GAA8B;AAAA,IAC7C,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAgB,yBAAA,GAA4B;AAAA,IAC3C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;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;AAAA,EAGC,CAAA,EAAgB,+BAAA,GAAkC;AAAA,IACjD,WAAW;AAAA,IACX,cAAc;AAAA,IAEd,YAAY;AAAA,EACd;AACF,GAEa,KAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,2BAA2B;AAAA,EAC3B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,6BAA6B;AAAA,EAC7B,kBAAkB;AAAA,EAClB,mBAAmB;AACrB"}

package/package.json

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