@mx-cartographer/experiences 9.7.89 → 9.7.91

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [9.7.91] - 11-03-2026
+
+- **ADDED** - Switch Direct Deposit's embedded card (Figma `1941:167601`): a swap badge on `linked_logos`, and a "Switch Direct Deposit" link that posts tupac's op_1 to the host (no drawer, no Atomic) (WEC-2197)
+- **CHANGED** - Embedded cards follow Figma's embedded template: description 2px under the title and at most two lines, link 8px under it, visual centred (WEC-2197)
+
+## [9.7.90] - 11-03-2026
+
+- **FIXED** - Unexpected Subscription Payment design QA (WEC-2126), USP only: dark "Not subscribed" bar border and icon in `text.primary` (were black on black), status Undo 13/16, `warning_wash` row card at elevation/1 (`TransactionListCard elevated`, with the dark-mode tint), Subscription Status dialog at elevation/16 with 12/16 answer buttons and a 220px reasons dialog
+- **ADDED** - `StatusSnackbar` `variant: 'strong'` (opt-in; Figma `<Snackbar>`: 600 tone, white text, elevation/16, 24px message, 15/20 action, 20px / 16px close frame), used by the Subscription Status modal; `shared/elevation.ts` (`ELEVATION_SHADOW`); the elevated row's dark tint is the theme's `overlays[1]` variable; `tests/utils/emotionRuleText` for nested emotion rules
+
 ## [9.7.89] - 11-03-2026
 
 - **ADDED** - Weekly New Merchants V3 on Insights 2.0 (WEC-2189): a flat-`series` `with_footer` variant on `transaction_block` (rows plus the `data.footer_text` / `data.footer_amount` "Total" summary, no in-card header — the week date range is the card subtitle) for the multiple case; the single case reuses the existing `no_header` variant, which renders the same. The block already renders N rows and the footer generically, so this is `layout.ts` config only; tupac fills the row array and the money-bag "Others" row via `$facts.transactions_series`. An `ICO-` row logo (the money-bag "Others" overflow) now renders as a rounded `chart.chart2` accent tile - background at 15% opacity with a full-colour glyph, per the MX accent-icon pattern and Figma - instead of a bare icon. Block tests for both variants, a `TransactionBlock` Storybook page, and a `WeeklyNewMerchantsV3` insight story (`no_header` single, `with_footer` multiple with the "Others" overflow row)

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

@@ -229,6 +229,10 @@ export interface InDescriptionCTA {
     block?: string;
     variant?: string | null;
     action_key?: string | null;
+    /** tupac's flat host message for the link (`action` plus fields), e.g. Switch's op_1. */
+    post_message_metadata?: ({
+        action?: string | null;
+    } & Record<string, unknown>) | null;
     /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */
     drilldown_data?: DrilldownData;
 }

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. On the payload: what every CTA of the card\n * shares (e.g. the account number for the Transaction Details drawer, or the guid list a list drawer\n * shows, `transaction_guids`). On a CTA: the figures that CTA's own drilldown renders (the Transaction\n * List summary header's `amount`, `start_date` / `end_date` and `count`, see `readSummary`). Scalars\n * or string lists, omitted when the insight has none. Never carries copy or user actions (memo,\n * tags, hide, flag come from the transaction store). Values come from the server, so a reader still\n * checks each value's runtime shape.\n */\nexport type DrilldownData = Record<string, string | number | boolean | null | string[]>\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  /**\n   * V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`, or the guid list a list\n   * drawer shows (`{ transaction_guids: [...] }`).\n   */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  /**\n   * V2: the link inside the description: on the full card a drawer of its own (Low Account\n   * Balance's \"Transactions ›\"); on mini and micro the card's action, sent instead of `primary_cta`.\n   * Absent when the beat has no link.\n   */\n  in_description_cta?: InDescriptionCTA\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  /** Draw the `logo_name` icon filled (V2 `ICO-` logos). */\n  logo_fill?: boolean\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  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface SecondaryCTA {\n  label: string\n  /**\n   * Drawer block to open. `null` when the CTA opens nothing (ditto `secondary_cta_block: null`,\n   * e.g. Fee Detected's \"Contact Support\"): the press posts its message to the host instead.\n   */\n  block: string | null\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\n/**\n * The description link: its label, the action block it opens and, like a CTA's, the variant that\n * tells that block what to show (ditto's `in_description_cta_variant`, e.g. `low_balance`). On mini\n * and micro it words the card's action; `block` is empty when that action opens no drawer.\n */\nexport interface InDescriptionCTA {\n  label: string\n  block?: string\n  variant?: string | null\n  action_key?: string | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\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   * `null` (tupac's `footer_account_label` returns nil for a beat with no accounts, as Payday Cash\n   * Left Over Status does). There is deliberately no separate `accounts` key.\n   */\n  account?: string | null\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  DirectDepositBlock: 'direct_deposit_block',\n  ImageBlock: 'image_block',\n  MerchantBlock: 'merchant_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  GoalsBlock: 'goals_block',\n  NoSpendDaysBlock: 'no_spend_days_block',\n  RepeatingTransactionBlock: 'repeating_transaction_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsAmountBlock: 'savings_amount_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), UpcomingSubscriptionBlock (price per cadence).\n  //              (SavingsOpportunityBlock now reads `amount` off `instance_slot.data`, not this flat field.)\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  // Withdrawal block (Emergency Fund Withdrawal): one row flat on the slot - `amount` above is the\n  // withdrawal, shown with its date line \"{amount_label} {withdrawal_date}\" over the balance row.\n  /** Pre-localized lead-in for the date line, e.g. \"Withdrawn on\". */\n  amount_label?: string\n  /** The withdrawal's calendar day, `YYYY-MM-DD` (e.g. `2026-10-20`); the card formats it. */\n  withdrawal_date?: string\n  /** Account balance after the withdrawal (unformatted); the card formats it as currency. */\n  balance?: number\n  /** Pre-localized label for the balance row, e.g. \"Balance\". */\n  balance_label?: string\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  // Account block (confetti tile): V1 flat fallback for the label line when `instance_slot.data` is\n  // absent — `AccountBlock` reads `data.sub_text` first, then this. (The Savings Opportunity coupon\n  // now reads `primary_text`/`amount` off `data`, so it no longer reads this flat field.)\n  /** Caption/label line for the confetti tile (V1 fallback). */\n  label?: string\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  start_date?: string\n  no_spend_days?: string[]\n}\n"],"mappings":"AAyUA,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. On the payload: what every CTA of the card\n * shares (e.g. the account number for the Transaction Details drawer, or the guid list a list drawer\n * shows, `transaction_guids`). On a CTA: the figures that CTA's own drilldown renders (the Transaction\n * List summary header's `amount`, `start_date` / `end_date` and `count`, see `readSummary`). Scalars\n * or string lists, omitted when the insight has none. Never carries copy or user actions (memo,\n * tags, hide, flag come from the transaction store). Values come from the server, so a reader still\n * checks each value's runtime shape.\n */\nexport type DrilldownData = Record<string, string | number | boolean | null | string[]>\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  /**\n   * V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`, or the guid list a list\n   * drawer shows (`{ transaction_guids: [...] }`).\n   */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  /**\n   * V2: the link inside the description: on the full card a drawer of its own (Low Account\n   * Balance's \"Transactions ›\"); on mini and micro the card's action, sent instead of `primary_cta`.\n   * Absent when the beat has no link.\n   */\n  in_description_cta?: InDescriptionCTA\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  /** Draw the `logo_name` icon filled (V2 `ICO-` logos). */\n  logo_fill?: boolean\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  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface SecondaryCTA {\n  label: string\n  /**\n   * Drawer block to open. `null` when the CTA opens nothing (ditto `secondary_cta_block: null`,\n   * e.g. Fee Detected's \"Contact Support\"): the press posts its message to the host instead.\n   */\n  block: string | null\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\n/**\n * The description link: its label, the action block it opens and, like a CTA's, the variant that\n * tells that block what to show (ditto's `in_description_cta_variant`, e.g. `low_balance`). On mini\n * and micro it words the card's action; `block` is empty when that action opens no drawer.\n */\nexport interface InDescriptionCTA {\n  label: string\n  block?: string\n  variant?: string | null\n  action_key?: string | null\n  /** tupac's flat host message for the link (`action` plus fields), e.g. Switch's op_1. */\n  post_message_metadata?: ({ action?: string | null } & Record<string, unknown>) | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\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   * `null` (tupac's `footer_account_label` returns nil for a beat with no accounts, as Payday Cash\n   * Left Over Status does). There is deliberately no separate `accounts` key.\n   */\n  account?: string | null\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  DirectDepositBlock: 'direct_deposit_block',\n  ImageBlock: 'image_block',\n  MerchantBlock: 'merchant_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  GoalsBlock: 'goals_block',\n  NoSpendDaysBlock: 'no_spend_days_block',\n  RepeatingTransactionBlock: 'repeating_transaction_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsAmountBlock: 'savings_amount_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), UpcomingSubscriptionBlock (price per cadence).\n  //              (SavingsOpportunityBlock now reads `amount` off `instance_slot.data`, not this flat field.)\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  // Withdrawal block (Emergency Fund Withdrawal): one row flat on the slot - `amount` above is the\n  // withdrawal, shown with its date line \"{amount_label} {withdrawal_date}\" over the balance row.\n  /** Pre-localized lead-in for the date line, e.g. \"Withdrawn on\". */\n  amount_label?: string\n  /** The withdrawal's calendar day, `YYYY-MM-DD` (e.g. `2026-10-20`); the card formats it. */\n  withdrawal_date?: string\n  /** Account balance after the withdrawal (unformatted); the card formats it as currency. */\n  balance?: number\n  /** Pre-localized label for the balance row, e.g. \"Balance\". */\n  balance_label?: string\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  // Account block (confetti tile): V1 flat fallback for the label line when `instance_slot.data` is\n  // absent — `AccountBlock` reads `data.sub_text` first, then this. (The Savings Opportunity coupon\n  // now reads `primary_text`/`amount` off `data`, so it no longer reads this flat field.)\n  /** Caption/label line for the confetti tile (V1 fallback). */\n  label?: string\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  start_date?: string\n  no_spend_days?: string[]\n}\n"],"mappings":"AA2UA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}

package/dist/insights-v2/actionBlocks/SubscriptionStatusModalBlock.es.js

@@ -1,113 +1,119 @@
-import { useGlobalCopyStore as V, useGlobalStore as X, useInsightsV2Store as $ } from "../../common/context/hooks.es.js";
+import { useGlobalCopyStore as z, useGlobalStore as X, useInsightsV2Store as $ } from "../../common/context/hooks.es.js";
 import { slot as d } from "../../core/types/Insights.es.js";
 import { formatCurrency as q } from "../../core/utils/NumberFormatting.es.js";
-import R from "../../common/components/dialog/Dialog.es.js";
+import N from "../../common/components/dialog/Dialog.es.js";
 import { useBeatActions as Z } from "../beatActions.es.js";
 import { USER_RESPONSE as f, answerSubscription as J, repeatingTransactionOf as K, reportSubscriptionMarkedIncorrect as Q } from "../ctaActions/subscriptionAnswer.es.js";
 import Y from "../components/LogoFromGuid.es.js";
 import "../components/celebrationGradients.es.js";
-import rr from "../components/TransactionListCard.es.js";
-import { subscriptionFrequency as tr } from "../components/SubscriptionStatus/subscriptionFrequency.es.js";
-import er from "../components/shared/StatusSnackbar.es.js";
-import { getDynamicCtaBasedOnTriggers as or } from "./util.es.js";
-import { useEffect as sr, useRef as M, useState as T } from "react";
-import { observer as nr } from "mobx-react-lite";
+import { ELEVATION_SHADOW as tt } from "../components/shared/elevation.es.js";
+import rt from "../components/TransactionListCard.es.js";
+import { subscriptionFrequency as ot } from "../components/SubscriptionStatus/subscriptionFrequency.es.js";
+import et from "../components/shared/StatusSnackbar.es.js";
+import { getDynamicCtaBasedOnTriggers as st } from "./util.es.js";
+import { useEffect as it, useRef as R, useState as T } from "react";
+import { observer as nt } from "mobx-react-lite";
 import B from "@mui/material/Stack";
-import { Text as ir } from "@mxenabled/mxui";
-import { Icon as ar } from "@mxenabled/mx-icons";
-import { Fragment as cr, jsx as e, jsxs as C } from "react/jsx-runtime";
-import lr from "@mui/material/Divider";
-import ur from "@mui/material/ButtonBase";
-var mr = 32, G = {
+import { Text as at } from "@mxenabled/mxui";
+import { Icon as ct } from "@mxenabled/mx-icons";
+import { Fragment as lt, jsx as o, jsxs as x } from "react/jsx-runtime";
+import ut from "@mui/material/Divider";
+import mt from "@mui/material/ButtonBase";
+var pt = 32, G = {
   backgroundColor: "background.paper",
-  borderRadius: 1
+  borderRadius: 1,
+  boxShadow: tt[16]
 }, L = {
   "& .MuiDialog-paper": G,
-  "& .MuiDialogContent-root": { p: 0 }
-}, pr = [
+  "& .MuiDialogContent-root": { p: 0 },
+  "& .MuiDialogContent-root ~ .MuiStack-root .MuiButton-root": {
+    px: 16,
+    py: 12
+  }
+}, dt = [
   ["never_subscribed", f.NEVER_SUBSCRIBED],
   ["cancelled", f.CANCELLED],
   ["one_time_purchase", f.ONE_TIME_PURCHASE]
-], t = (i) => typeof i == "string" && i.trim() ? i : void 0, Tr = nr(function({ beat: x }) {
-  const P = X(), { insights_feed: _, recurring: F } = V(), { actionDrawer: W, closeActionDrawer: g } = $(), U = Z(), [E, b] = T("answers"), [o, a] = T(null), c = M(!1), y = M(!1), r = _?.subscription_status_modal, l = x.insights_payload, S = pr.flatMap(([s, m]) => {
-    const p = t(r?.[s]);
+], r = (n) => typeof n == "string" && n.trim() ? n : void 0, Lt = nt(function({ beat: C }) {
+  const P = X(), { insights_feed: _, recurring: W } = z(), { actionDrawer: F, closeActionDrawer: g } = $(), H = Z(), [E, b] = T("answers"), [e, a] = T(null), c = R(!1), y = R(!1), t = _?.subscription_status_modal, l = C.insights_payload, S = dt.flatMap(([s, m]) => {
+    const p = r(t?.[s]);
     return p ? [{
       label: p,
       userResponse: m
     }] : [];
-  }), D = !!t(r?.title) && !!t(r?.subscribed_answer) && !!t(r?.not_subscribed_answer) && S.length > 0, I = !!_ && !D;
-  if (sr(() => {
-    I && (console.warn("[SubscriptionStatusModalBlock] subscription_status_modal is missing its title, answers or reasons; closing."), g());
-  }, [I, g]), !l || !r || !D) return null;
-  const h = t(r.close_aria) ?? t(r.toast_close_aria) ?? t(_?.settings_menu?.close) ?? "", O = o && t(o.severity === "success" ? r.success_message : r.error_message), v = {
-    beat: x,
+  }), D = !!r(t?.title) && !!r(t?.subscribed_answer) && !!r(t?.not_subscribed_answer) && S.length > 0, O = !!_ && !D;
+  if (it(() => {
+    O && (console.warn("[SubscriptionStatusModalBlock] subscription_status_modal is missing its title, answers or reasons; closing."), g());
+  }, [O, g]), !l || !t || !D) return null;
+  const h = r(t.close_aria) ?? r(t.toast_close_aria) ?? r(_?.settings_menu?.close) ?? "", I = e && r(e.severity === "success" ? t.success_message : t.error_message), v = {
+    beat: C,
     stores: P,
-    hostActions: U
-  }, u = or(W, l.primary_cta, l.secondary_cta, l.in_description_cta)?.drilldown_data ?? {}, k = d(u, "logo"), w = d(u, "primary_text"), N = d(u, "amount"), A = async (s) => {
+    hostActions: H
+  }, u = st(F, l.primary_cta, l.secondary_cta, l.in_description_cta)?.drilldown_data ?? {}, M = d(u, "logo"), A = d(u, "primary_text"), k = d(u, "amount"), w = async (s) => {
     if (!y.current) {
       y.current = !0, a(null), b("saving");
       try {
-        await J(v, s), t(r.success_message) ? a({ severity: "success" }) : n();
+        await J(v, s), r(t.success_message) ? a({ severity: "success" }) : i();
       } catch {
-        t(r.error_message) ? a({
+        r(t.error_message) ? a({
           severity: "error",
           retry: s
-        }) : n();
+        }) : i();
       } finally {
         y.current = !1;
       }
       b("done");
     }
-  }, n = () => {
+  }, i = () => {
     a(null), g();
-  }, j = () => {
+  }, U = () => {
     c.current = !0, Q(v), b("reasons");
-  }, H = () => {
-    c.current = !0, A(f.CONFIRMED);
-  }, z = () => {
+  }, j = () => {
+    c.current = !0, w(f.CONFIRMED);
+  }, V = () => {
     if (c.current) {
       c.current = !1;
       return;
     }
-    n();
+    i();
   };
-  return /* @__PURE__ */ C(cr, { children: [
-    /* @__PURE__ */ e(R, {
+  return /* @__PURE__ */ x(lt, { children: [
+    /* @__PURE__ */ o(N, {
       copy: {
-        title: r.title,
+        title: t.title,
         close_aria: h
       },
       fullWidth: !0,
       isOpen: E === "answers",
-      onClose: z,
-      onPrimaryAction: H,
-      onSecondaryAction: j,
-      primaryText: r.subscribed_answer,
-      secondaryText: r.not_subscribed_answer,
+      onClose: V,
+      onPrimaryAction: j,
+      onSecondaryAction: U,
+      primaryText: t.subscribed_answer,
+      secondaryText: t.not_subscribed_answer,
       sx: L,
-      children: typeof w == "string" && w && /* @__PURE__ */ e(rr, {
+      children: typeof A == "string" && A && /* @__PURE__ */ o(rt, {
         background: "linear-gradient(201deg, rgba(255, 170, 0, 0.25) 1.86%, rgba(255, 68, 0, 0.25) 101.54%)",
         elevated: !0,
         rows: [{
-          amount: typeof N == "number" ? q(N, "0,0.00") : "",
-          amountCaption: tr(F, K(v)),
-          leading: k ? /* @__PURE__ */ e(Y, {
-            logo: k,
-            size: mr
+          amount: typeof k == "number" ? q(k, "0,0.00") : "",
+          amountCaption: ot(W, K(v)),
+          leading: M ? /* @__PURE__ */ o(Y, {
+            logo: M,
+            size: pt
           }) : void 0,
           subtitle: d(u, "secondary_text") ?? "",
-          title: w
+          title: A
         }]
       })
     }),
-    /* @__PURE__ */ e(R, {
+    /* @__PURE__ */ o(N, {
       copy: {
-        title: r.title,
+        title: t.title,
         close_aria: h
       },
       fullWidth: !0,
       isOpen: E === "reasons",
-      onClose: n,
+      onClose: i,
       showActions: !1,
       sx: {
         ...L,
@@ -116,9 +122,9 @@ var mr = 32, G = {
           pb: 16
         }
       },
-      children: /* @__PURE__ */ e(B, { children: S.map(({ label: s, userResponse: m }, p) => /* @__PURE__ */ C(B, { children: [/* @__PURE__ */ C(ur, {
+      children: /* @__PURE__ */ o(B, { children: S.map(({ label: s, userResponse: m }, p) => /* @__PURE__ */ x(B, { children: [/* @__PURE__ */ x(mt, {
         onClick: () => {
-          A(m);
+          w(m);
         },
         sx: {
           gap: 12,
@@ -129,33 +135,37 @@ var mr = 32, G = {
           textAlign: "left",
           width: "100%"
         },
-        children: [/* @__PURE__ */ e(ir, {
+        children: [/* @__PURE__ */ o(at, {
           variant: "body1",
           children: s
-        }), /* @__PURE__ */ e(ar, {
+        }), /* @__PURE__ */ o(ct, {
           "aria-hidden": !0,
           name: "chevron_right",
           size: 24,
           sx: { color: "action.active" }
         })]
-      }), p < S.length - 1 && /* @__PURE__ */ e(lr, { sx: { ml: 24 } })] }, m)) })
+      }), p < S.length - 1 && /* @__PURE__ */ o(ut, { sx: {
+        ml: 24,
+        mt: "-1px"
+      } })] }, m)) })
     }),
-    o && O && /* @__PURE__ */ e(er, {
-      actionText: o.retry ? t(r.try_again) : void 0,
-      closeAriaLabel: t(r.toast_close_aria) ?? h,
-      message: O,
-      onActionClick: o.retry ? () => {
-        A(o.retry);
+    e && I && /* @__PURE__ */ o(et, {
+      actionText: e.retry ? r(t.try_again) : void 0,
+      closeAriaLabel: r(t.toast_close_aria) ?? h,
+      message: I,
+      onActionClick: e.retry ? () => {
+        w(e.retry);
       } : void 0,
-      onClose: n,
+      onClose: i,
       open: !0,
-      severity: o.severity
+      severity: e.severity,
+      variant: "strong"
     })
   ] });
 });
 export {
-  Tr as SubscriptionStatusModalBlock,
-  Tr as default
+  Lt as SubscriptionStatusModalBlock,
+  Lt as default
 };
 
 //# sourceMappingURL=SubscriptionStatusModalBlock.es.js.map

package/dist/insights-v2/actionBlocks/SubscriptionStatusModalBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionStatusModalBlock.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/SubscriptionStatusModalBlock.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ButtonBase from '@mui/material/ButtonBase'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore, useGlobalStore, useInsightsV2Store } from '../../common'\nimport { slot } from '../../core'\nimport type { LogoRef } from '../../core'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { useBeatActions } from '../beatActions'\nimport { WARNING_WASH_GRADIENT } from '../components/celebrationGradients'\nimport LogoFromGuid from '../components/LogoFromGuid'\nimport StatusSnackbar from '../components/shared/StatusSnackbar'\nimport { subscriptionFrequency } from '../components/SubscriptionStatus/subscriptionFrequency'\nimport TransactionListCard from '../components/TransactionListCard'\nimport {\n  answerSubscription,\n  repeatingTransactionOf,\n  reportSubscriptionMarkedIncorrect,\n  USER_RESPONSE,\n} from '../ctaActions/subscriptionAnswer'\nimport type { ActionBlockProps } from '../mappings/blocks'\nimport { getDynamicCtaBasedOnTriggers } from './util'\n\nconst ROW_LOGO_SIZE = 32\n\n// White paper, full-bleed content, 4px radius.\nconst DIALOG_PAPER_SX = { backgroundColor: 'background.paper', borderRadius: 1 }\nconst SUBSCRIPTION_DIALOG_SX = {\n  '& .MuiDialog-paper': DIALOG_PAPER_SX,\n  '& .MuiDialogContent-root': { p: 0 },\n}\n\n// The reasons in Figma order; a reason with no word drops its row.\nconst REASONS = [\n  ['never_subscribed', USER_RESPONSE.NEVER_SUBSCRIBED],\n  ['cancelled', USER_RESPONSE.CANCELLED],\n  ['one_time_purchase', USER_RESPONSE.ONE_TIME_PURCHASE],\n] as const\n\n/** A non-empty word, or undefined. */\nconst word = (value?: string): string | undefined =>\n  typeof value === 'string' && value.trim() ? value : undefined\n\ntype Phase = 'answers' | 'reasons' | 'saving' | 'done'\ninterface Notice {\n  severity: 'success' | 'error'\n  retry?: string\n}\n\n/** Unexpected Subscription Payment's Subscription Status modal. */\nexport const SubscriptionStatusModalBlock = observer(function SubscriptionStatusModalBlock({\n  beat,\n}: ActionBlockProps) {\n  const stores = useGlobalStore()\n  const { insights_feed, recurring } = useGlobalCopyStore()\n  const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n  const beatActions = useBeatActions()\n  const [phase, setPhase] = useState<Phase>('answers')\n  const [notice, setNotice] = useState<Notice | null>(null)\n  // The Dialog calls onClose after its actions; keep the flow open.\n  const actionTaken = useRef(false)\n  // One save at a time: a double tap (a closing dialog is still clickable) or Try Again sends one PUT.\n  const saving = useRef(false)\n\n  const copy = insights_feed?.subscription_status_modal\n  const payload = beat.insights_payload\n  // Only the words needed to answer: the title, both answers and at least one reason. The rest\n  // (snackbar words, close labels, reviewed_title, a key added later) never block the modal.\n  const reasons = REASONS.flatMap(([key, userResponse]) => {\n    const label = word(copy?.[key])\n\n    return label ? [{ label, userResponse }] : []\n  })\n  const ready =\n    !!word(copy?.title) &&\n    !!word(copy?.subscribed_answer) &&\n    !!word(copy?.not_subscribed_answer) &&\n    reasons.length > 0\n  // Copy loaded (insights_feed is there) but incomplete: say so and close, not a silent open drawer.\n  const incomplete = !!insights_feed && !ready\n\n  useEffect(() => {\n    if (!incomplete) return\n    console.warn(\n      '[SubscriptionStatusModalBlock] subscription_status_modal is missing its title, answers or reasons; closing.',\n    )\n    closeActionDrawer()\n  }, [incomplete, closeActionDrawer])\n\n  if (!payload || !copy || !ready) return null\n\n  const closeLabel =\n    word(copy.close_aria) ??\n    word(copy.toast_close_aria) ??\n    word(insights_feed?.settings_menu?.close) ??\n    ''\n  const noticeMessage =\n    notice && word(notice.severity === 'success' ? copy.success_message : copy.error_message)\n\n  const ctx = { beat, stores, hostActions: beatActions }\n  const cta = getDynamicCtaBasedOnTriggers(\n    actionDrawer,\n    payload.primary_cta,\n    payload.secondary_cta,\n    payload.in_description_cta,\n  )\n  const row = cta?.drilldown_data ?? {}\n  const logo = slot<LogoRef>(row, 'logo')\n  const title = slot<string>(row, 'primary_text')\n  const amount = slot<number>(row, 'amount')\n\n  const save = async (userResponse: string) => {\n    if (saving.current) return\n    saving.current = true\n    setNotice(null)\n    setPhase('saving')\n    try {\n      await answerSubscription(ctx, userResponse)\n      // No snackbar word: the save stands, the flow just ends without the snackbar.\n      if (word(copy.success_message)) setNotice({ severity: 'success' })\n      else finish()\n    } catch {\n      if (word(copy.error_message)) setNotice({ severity: 'error', retry: userResponse })\n      else finish()\n    } finally {\n      saving.current = false\n    }\n    setPhase('done')\n  }\n\n  const finish = () => {\n    setNotice(null)\n    closeActionDrawer()\n  }\n\n  const chooseNotSubscribed = () => {\n    actionTaken.current = true\n    reportSubscriptionMarkedIncorrect(ctx)\n    setPhase('reasons')\n  }\n\n  const chooseSubscribed = () => {\n    actionTaken.current = true\n    void save(USER_RESPONSE.CONFIRMED)\n  }\n\n  const closeAnswers = () => {\n    if (actionTaken.current) {\n      actionTaken.current = false\n      return\n    }\n    finish()\n  }\n\n  return (\n    <>\n      <Dialog\n        copy={{ title: copy.title, close_aria: closeLabel }}\n        fullWidth={true}\n        isOpen={phase === 'answers'}\n        onClose={closeAnswers}\n        onPrimaryAction={chooseSubscribed}\n        onSecondaryAction={chooseNotSubscribed}\n        primaryText={copy.subscribed_answer}\n        secondaryText={copy.not_subscribed_answer}\n        // Full-bleed wash between title and actions.\n        sx={SUBSCRIPTION_DIALOG_SX}\n      >\n        {typeof title === 'string' && title && (\n          <TransactionListCard\n            background={WARNING_WASH_GRADIENT}\n            elevated={true}\n            rows={[\n              {\n                amount: typeof amount === 'number' ? formatCurrency(amount, '0,0.00') : '',\n                amountCaption: subscriptionFrequency(recurring, repeatingTransactionOf(ctx)),\n                leading: logo ? <LogoFromGuid logo={logo} size={ROW_LOGO_SIZE} /> : undefined,\n                subtitle: slot<string>(row, 'secondary_text') ?? '',\n                title,\n              },\n            ]}\n          />\n        )}\n      </Dialog>\n\n      <Dialog\n        copy={{ title: copy.title, close_aria: closeLabel }}\n        fullWidth={true}\n        isOpen={phase === 'reasons'}\n        onClose={finish}\n        showActions={false}\n        // Space under the list.\n        sx={{ ...SUBSCRIPTION_DIALOG_SX, '& .MuiDialog-paper': { ...DIALOG_PAPER_SX, pb: 16 } }}\n      >\n        <Stack>\n          {reasons.map(({ label, userResponse }, index) => (\n            <Stack key={userResponse}>\n              <ButtonBase\n                onClick={() => void save(userResponse)}\n                sx={{\n                  gap: 12,\n                  justifyContent: 'space-between',\n                  minHeight: 44,\n                  px: 24,\n                  py: 8,\n                  textAlign: 'left',\n                  width: '100%',\n                }}\n              >\n                <Text variant=\"body1\">{label}</Text>\n                <Icon\n                  aria-hidden={true}\n                  name=\"chevron_right\"\n                  size={24}\n                  sx={{ color: 'action.active' }}\n                />\n              </ButtonBase>\n              {/* Between rows only. */}\n              {index < reasons.length - 1 && <Divider sx={{ ml: 24 }} />}\n            </Stack>\n          ))}\n        </Stack>\n      </Dialog>\n\n      {notice && noticeMessage && (\n        <StatusSnackbar\n          actionText={notice.retry ? word(copy.try_again) : undefined}\n          closeAriaLabel={word(copy.toast_close_aria) ?? closeLabel}\n          message={noticeMessage}\n          onActionClick={notice.retry ? () => void save(notice.retry as string) : undefined}\n          onClose={finish}\n          open={true}\n          severity={notice.severity}\n        />\n      )}\n    </>\n  )\n})\n\nexport default SubscriptionStatusModalBlock\n"],"mappings":"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"}
+{"version":3,"file":"SubscriptionStatusModalBlock.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/SubscriptionStatusModalBlock.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ButtonBase from '@mui/material/ButtonBase'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore, useGlobalStore, useInsightsV2Store } from '../../common'\nimport { slot } from '../../core'\nimport type { LogoRef } from '../../core'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { useBeatActions } from '../beatActions'\nimport { WARNING_WASH_GRADIENT } from '../components/celebrationGradients'\nimport LogoFromGuid from '../components/LogoFromGuid'\nimport { ELEVATION_SHADOW } from '../components/shared/elevation'\nimport StatusSnackbar from '../components/shared/StatusSnackbar'\nimport { subscriptionFrequency } from '../components/SubscriptionStatus/subscriptionFrequency'\nimport TransactionListCard from '../components/TransactionListCard'\nimport {\n  answerSubscription,\n  repeatingTransactionOf,\n  reportSubscriptionMarkedIncorrect,\n  USER_RESPONSE,\n} from '../ctaActions/subscriptionAnswer'\nimport type { ActionBlockProps } from '../mappings/blocks'\nimport { getDynamicCtaBasedOnTriggers } from './util'\n\nconst ROW_LOGO_SIZE = 32\n\n// Figma dialog: paper, 4px radius, elevation/16.\nconst DIALOG_PAPER_SX = {\n  backgroundColor: 'background.paper',\n  borderRadius: 1,\n  boxShadow: ELEVATION_SHADOW[16],\n}\nconst SUBSCRIPTION_DIALOG_SX = {\n  '& .MuiDialog-paper': DIALOG_PAPER_SX,\n  '& .MuiDialogContent-root': { p: 0 },\n  '& .MuiDialogContent-root ~ .MuiStack-root .MuiButton-root': { px: 16, py: 12 },\n}\n\n// The reasons in Figma order; a reason with no word drops its row.\nconst REASONS = [\n  ['never_subscribed', USER_RESPONSE.NEVER_SUBSCRIBED],\n  ['cancelled', USER_RESPONSE.CANCELLED],\n  ['one_time_purchase', USER_RESPONSE.ONE_TIME_PURCHASE],\n] as const\n\n/** A non-empty word, or undefined. */\nconst word = (value?: string): string | undefined =>\n  typeof value === 'string' && value.trim() ? value : undefined\n\ntype Phase = 'answers' | 'reasons' | 'saving' | 'done'\ninterface Notice {\n  severity: 'success' | 'error'\n  retry?: string\n}\n\n/** Unexpected Subscription Payment's Subscription Status modal. */\nexport const SubscriptionStatusModalBlock = observer(function SubscriptionStatusModalBlock({\n  beat,\n}: ActionBlockProps) {\n  const stores = useGlobalStore()\n  const { insights_feed, recurring } = useGlobalCopyStore()\n  const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n  const beatActions = useBeatActions()\n  const [phase, setPhase] = useState<Phase>('answers')\n  const [notice, setNotice] = useState<Notice | null>(null)\n  // The Dialog calls onClose after its actions; keep the flow open.\n  const actionTaken = useRef(false)\n  // One save at a time: a double tap (a closing dialog is still clickable) or Try Again sends one PUT.\n  const saving = useRef(false)\n\n  const copy = insights_feed?.subscription_status_modal\n  const payload = beat.insights_payload\n  // Only the words needed to answer: the title, both answers and at least one reason. The rest\n  // (snackbar words, close labels, reviewed_title, a key added later) never block the modal.\n  const reasons = REASONS.flatMap(([key, userResponse]) => {\n    const label = word(copy?.[key])\n\n    return label ? [{ label, userResponse }] : []\n  })\n  const ready =\n    !!word(copy?.title) &&\n    !!word(copy?.subscribed_answer) &&\n    !!word(copy?.not_subscribed_answer) &&\n    reasons.length > 0\n  // Copy loaded (insights_feed is there) but incomplete: say so and close, not a silent open drawer.\n  const incomplete = !!insights_feed && !ready\n\n  useEffect(() => {\n    if (!incomplete) return\n    console.warn(\n      '[SubscriptionStatusModalBlock] subscription_status_modal is missing its title, answers or reasons; closing.',\n    )\n    closeActionDrawer()\n  }, [incomplete, closeActionDrawer])\n\n  if (!payload || !copy || !ready) return null\n\n  const closeLabel =\n    word(copy.close_aria) ??\n    word(copy.toast_close_aria) ??\n    word(insights_feed?.settings_menu?.close) ??\n    ''\n  const noticeMessage =\n    notice && word(notice.severity === 'success' ? copy.success_message : copy.error_message)\n\n  const ctx = { beat, stores, hostActions: beatActions }\n  const cta = getDynamicCtaBasedOnTriggers(\n    actionDrawer,\n    payload.primary_cta,\n    payload.secondary_cta,\n    payload.in_description_cta,\n  )\n  const row = cta?.drilldown_data ?? {}\n  const logo = slot<LogoRef>(row, 'logo')\n  const title = slot<string>(row, 'primary_text')\n  const amount = slot<number>(row, 'amount')\n\n  const save = async (userResponse: string) => {\n    if (saving.current) return\n    saving.current = true\n    setNotice(null)\n    setPhase('saving')\n    try {\n      await answerSubscription(ctx, userResponse)\n      // No snackbar word: the save stands, the flow just ends without the snackbar.\n      if (word(copy.success_message)) setNotice({ severity: 'success' })\n      else finish()\n    } catch {\n      if (word(copy.error_message)) setNotice({ severity: 'error', retry: userResponse })\n      else finish()\n    } finally {\n      saving.current = false\n    }\n    setPhase('done')\n  }\n\n  const finish = () => {\n    setNotice(null)\n    closeActionDrawer()\n  }\n\n  const chooseNotSubscribed = () => {\n    actionTaken.current = true\n    reportSubscriptionMarkedIncorrect(ctx)\n    setPhase('reasons')\n  }\n\n  const chooseSubscribed = () => {\n    actionTaken.current = true\n    void save(USER_RESPONSE.CONFIRMED)\n  }\n\n  const closeAnswers = () => {\n    if (actionTaken.current) {\n      actionTaken.current = false\n      return\n    }\n    finish()\n  }\n\n  return (\n    <>\n      <Dialog\n        copy={{ title: copy.title, close_aria: closeLabel }}\n        fullWidth={true}\n        isOpen={phase === 'answers'}\n        onClose={closeAnswers}\n        onPrimaryAction={chooseSubscribed}\n        onSecondaryAction={chooseNotSubscribed}\n        primaryText={copy.subscribed_answer}\n        secondaryText={copy.not_subscribed_answer}\n        // Full-bleed wash between title and actions.\n        sx={SUBSCRIPTION_DIALOG_SX}\n      >\n        {typeof title === 'string' && title && (\n          <TransactionListCard\n            background={WARNING_WASH_GRADIENT}\n            elevated={true}\n            rows={[\n              {\n                amount: typeof amount === 'number' ? formatCurrency(amount, '0,0.00') : '',\n                amountCaption: subscriptionFrequency(recurring, repeatingTransactionOf(ctx)),\n                leading: logo ? <LogoFromGuid logo={logo} size={ROW_LOGO_SIZE} /> : undefined,\n                subtitle: slot<string>(row, 'secondary_text') ?? '',\n                title,\n              },\n            ]}\n          />\n        )}\n      </Dialog>\n\n      <Dialog\n        copy={{ title: copy.title, close_aria: closeLabel }}\n        fullWidth={true}\n        isOpen={phase === 'reasons'}\n        onClose={finish}\n        showActions={false}\n        // Space under the list.\n        sx={{ ...SUBSCRIPTION_DIALOG_SX, '& .MuiDialog-paper': { ...DIALOG_PAPER_SX, pb: 16 } }}\n      >\n        <Stack>\n          {reasons.map(({ label, userResponse }, index) => (\n            <Stack key={userResponse}>\n              <ButtonBase\n                onClick={() => void save(userResponse)}\n                sx={{\n                  gap: 12,\n                  justifyContent: 'space-between',\n                  minHeight: 44,\n                  px: 24,\n                  py: 8,\n                  textAlign: 'left',\n                  width: '100%',\n                }}\n              >\n                <Text variant=\"body1\">{label}</Text>\n                <Icon\n                  aria-hidden={true}\n                  name=\"chevron_right\"\n                  size={24}\n                  sx={{ color: 'action.active' }}\n                />\n              </ButtonBase>\n              {/* Between rows only, drawn over the row edge (as Figma) so rows stay 44px apart. */}\n              {index < reasons.length - 1 && <Divider sx={{ ml: 24, mt: '-1px' }} />}\n            </Stack>\n          ))}\n        </Stack>\n      </Dialog>\n\n      {notice && noticeMessage && (\n        <StatusSnackbar\n          actionText={notice.retry ? word(copy.try_again) : undefined}\n          closeAriaLabel={word(copy.toast_close_aria) ?? closeLabel}\n          message={noticeMessage}\n          onActionClick={notice.retry ? () => void save(notice.retry as string) : undefined}\n          onClose={finish}\n          open={true}\n          severity={notice.severity}\n          variant=\"strong\"\n        />\n      )}\n    </>\n  )\n})\n\nexport default SubscriptionStatusModalBlock\n"],"mappings":"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"}

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

@@ -1,25 +1,25 @@
-import { useCategoryStore as $, useGlobalCopyStore as j, useGlobalStore as q } from "../../../../common/context/hooks.es.js";
+import { useCategoryStore as j, useGlobalCopyStore as q, useGlobalStore as D } from "../../../../common/context/hooks.es.js";
 import { slot as s } from "../../../../core/types/Insights.es.js";
 import { formatCurrency as v } from "../../../../core/utils/NumberFormatting.es.js";
 import { getCategoryColor as C } from "../../../../core/utils/CategoryUtil.es.js";
-import { useBeatActions as D } from "../../../beatActions.es.js";
-import { USER_RESPONSE as H, repeatingTransactionOf as P } from "../../../ctaActions/subscriptionAnswer.es.js";
-import { logoFromRef as V } from "../../../components/shared/EntityLogo.es.js";
-import U from "../../../components/LogoFromGuid.es.js";
-import { statusIconName as W, statusIconPalette as I } from "../../../components/statusIcon.es.js";
-import { resolveVariantConfig as Y } from "../../resolveVariantConfig.es.js";
-import J from "../../../components/TransactionListCard.es.js";
-import K from "../../../components/StatusMessageCard.es.js";
-import { subscriptionFrequency as Q } from "../../../components/SubscriptionStatus/subscriptionFrequency.es.js";
-import { getLayoutConfig as X, transactionBlockVariant as oo } from "./layout.es.js";
-import { observer as to } from "mobx-react-lite";
-import { CategoryIcon as ro, InstitutionLogo as eo, MerchantLogo as io } from "@mxenabled/mxui";
+import { useBeatActions as H } from "../../../beatActions.es.js";
+import { USER_RESPONSE as P, repeatingTransactionOf as V } from "../../../ctaActions/subscriptionAnswer.es.js";
+import { logoFromRef as U } from "../../../components/shared/EntityLogo.es.js";
+import W from "../../../components/LogoFromGuid.es.js";
+import { statusIconName as Y, statusIconPalette as I } from "../../../components/statusIcon.es.js";
+import { resolveVariantConfig as J } from "../../resolveVariantConfig.es.js";
+import K from "../../../components/TransactionListCard.es.js";
+import Q from "../../../components/StatusMessageCard.es.js";
+import { subscriptionFrequency as X } from "../../../components/SubscriptionStatus/subscriptionFrequency.es.js";
+import { getLayoutConfig as oo, transactionBlockVariant as to } from "./layout.es.js";
+import { observer as ro } from "mobx-react-lite";
+import { CategoryIcon as eo, InstitutionLogo as io, MerchantLogo as no } from "@mxenabled/mxui";
 import { Icon as T } from "@mxenabled/mx-icons";
 import { jsx as t } from "react/jsx-runtime";
-import { alpha as S, useTheme as no } from "@mui/material/styles";
+import { alpha as S, useTheme as ao } from "@mui/material/styles";
 import d from "@mui/material/Box";
-var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon: a }) => {
-  const i = W(a?.guid);
+var u = 32, so = Math.round(u * 0.625), co = 24, G = 32, uo = 20, lo = ({ icon: a }) => {
+  const i = Y(a?.guid);
   return i ? /* @__PURE__ */ t(d, {
     "aria-hidden": !0,
     "data-icon": i,
@@ -36,12 +36,12 @@ var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon:
     children: /* @__PURE__ */ t(T, {
       fill: !0,
       name: i,
-      size: co,
+      size: uo,
       sx: { color: `${I(a?.color)}.contrastText` }
     })
   }) : null;
-}, lo = (a, i, c, l) => {
-  const o = V(a.logo, a.primary_text);
+}, mo = (a, i, c, l) => {
+  const o = U(a.logo, a.primary_text);
   if (o) {
     if (o.logo_name) {
       const e = !!o.logo_fill, r = o.logo_color ?? c.palette.chart.chart2 ?? c.palette.primary.main;
@@ -59,18 +59,18 @@ var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon:
         },
         children: /* @__PURE__ */ t(T, {
           name: o.logo_name,
-          size: ao,
+          size: so,
           sx: { color: e ? r : o.logo_color }
         })
       });
     }
-    if (o.merchant_guid) return /* @__PURE__ */ t(io, {
+    if (o.merchant_guid) return /* @__PURE__ */ t(no, {
       alt: o.merchant_name ?? "",
       categoryGuid: o.category_guid ? i(o.category_guid) : "",
       merchantGuid: o.merchant_guid,
       size: u
     });
-    if (o.institution_guid) return /* @__PURE__ */ t(eo, {
+    if (o.institution_guid) return /* @__PURE__ */ t(io, {
       alt: o.institution_name ?? "",
       institutionGuid: o.institution_guid,
       size: u
@@ -84,7 +84,7 @@ var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon:
       return /* @__PURE__ */ t(d, {
         "data-testid": `category-icon-${e}`,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(ro, {
+        children: /* @__PURE__ */ t(eo, {
           categoryGuid: e,
           size: u,
           sx: r
@@ -92,20 +92,20 @@ var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon:
       });
     }
   }
-}, Ro = to(({ payload: a }) => {
-  const i = no(), { getTopLevelCategoryGuid: c } = $(), l = q(), { recurring: o } = j(), { beat: e } = D(), { data: r, variant: E } = a.instance_slot, { answeredBackground: p, background: m, cardVariant: B, followsSubscription: g, raised: L, showFooter: k, showFrequency: y, showHeader: O, statusMessage: R, sx: A, tintedCategoryLogo: w } = Y(X(i), E, oo.NoHeader, "TransactionBlock"), _ = (y || g) && e ? P({
+}, Ao = ro(({ payload: a }) => {
+  const i = ao(), { getTopLevelCategoryGuid: c } = j(), l = D(), { recurring: o } = q(), { beat: e } = H(), { data: r, variant: E } = a.instance_slot, { answeredBackground: p, background: m, cardVariant: B, elevated: L, followsSubscription: g, raised: k, showFooter: O, showFrequency: y, showHeader: R, statusMessage: A, sx: w, tintedCategoryLogo: z } = J(oo(i), E, to.NoHeader, "TransactionBlock"), _ = (y || g) && e ? V({
     beat: e,
     stores: l
-  }) : void 0, h = !!g && _?.user_response === H.CONFIRMED;
-  if (R) {
+  }) : void 0, h = !!g && _?.user_response === P.CONFIRMED;
+  if (A) {
     const n = s(r, "message");
-    return typeof n != "string" || !n.trim() ? (console.warn("[TransactionBlock] status_message has no message — rendering nothing."), null) : /* @__PURE__ */ t(K, {
+    return typeof n != "string" || !n.trim() ? (console.warn("[TransactionBlock] status_message has no message — rendering nothing."), null) : /* @__PURE__ */ t(Q, {
       icon: /* @__PURE__ */ t(d, {
         "aria-hidden": "true",
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(U, {
+        children: /* @__PURE__ */ t(W, {
           logo: s(r, "icon"),
-          size: so
+          size: co
         })
       }),
       message: n,
@@ -117,29 +117,30 @@ var u = 32, ao = Math.round(u * 0.625), so = 24, G = 32, co = 20, uo = ({ icon:
   }
   const f = s(r, "series"), x = s(r, "header_text");
   if (!Array.isArray(f) || !f.length) return null;
-  const z = O && typeof x == "string" ? x : void 0, b = s(r, "footer_text"), F = s(r, "footer_amount"), N = k && typeof b == "string" ? {
+  const F = R && typeof x == "string" ? x : void 0, b = s(r, "footer_text"), N = s(r, "footer_amount"), M = O && typeof b == "string" ? {
     label: b,
-    amount: v(F, "0,0.00")
-  } : void 0, M = y ? Q(o, _) : void 0, Z = g ? /* @__PURE__ */ t(uo, { icon: s(r, h ? "reviewed_icon" : "icon") }) : void 0;
-  return /* @__PURE__ */ t(J, {
+    amount: v(N, "0,0.00")
+  } : void 0, Z = y ? X(o, _) : void 0, $ = g ? /* @__PURE__ */ t(lo, { icon: s(r, h ? "reviewed_icon" : "icon") }) : void 0;
+  return /* @__PURE__ */ t(K, {
     background: h && p ? p : m,
-    badge: Z,
-    footer: N,
-    header: z,
-    raised: L,
-    sx: A,
+    badge: $,
+    elevated: L,
+    footer: M,
+    header: F,
+    raised: k,
+    sx: w,
     variant: B,
     rows: f.map((n) => ({
       amount: typeof n.amount == "number" ? v(n.amount, "0,0.00") : "",
-      amountCaption: M,
-      leading: lo(n, c, i, w ?? !1),
+      amountCaption: Z,
+      leading: mo(n, c, i, z ?? !1),
       subtitle: n.secondary_text ?? "",
       title: n.primary_text ?? ""
     }))
   });
 });
 export {
-  Ro as TransactionBlock
+  Ao as TransactionBlock
 };
 
 //# sourceMappingURL=TransactionBlock.es.js.map