@mx-cartographer/experiences 9.5.4 → 9.6.0

package/dist/core/index.es.js

@@ -1,138 +1,140 @@
 import { LOCALES as r, VALID_LOCALES as t, buildDynamicCopy as i, getLocale as m } from "./utils/Localization.es.js";
 import { Fetch as p } from "./utils/Fetch.es.js";
-import { AccountIcon as a, AccountIconVariants as f, AccountSubType as c, AccountType as s, AccountTypeName as S, ConnectionStatus as A, ConnectionStatusEnums as u, ErrorStatuses as y, MfaStatuses as T, NonConnectedStatuses as l, ProcessingStatuses as g, PropertyType as d, PropertyTypeName as C, StatusName as N } from "./types/Account.es.js";
+import { AccountIcon as f, AccountIconVariants as a, AccountSubType as c, AccountType as s, AccountTypeName as S, ConnectionStatus as A, ConnectionStatusEnums as u, ErrorStatuses as y, MfaStatuses as T, NonConnectedStatuses as l, ProcessingStatuses as g, PropertyType as d, PropertyTypeName as C, StatusName as N } from "./types/Account.es.js";
 import { UserVerification as b } from "./types/Beat.es.js";
 import { ExpenseStatus as B, ScheduledPaymentTypes as L } from "./types/Expense.es.js";
 import { GoalType as E, MetaType as I, TrackType as P } from "./types/Goal.es.js";
-import { AccountNotificationTypes as F, BudgetNotificationTypes as H, InsightNotificationTypes as M, NotificationTypes as U } from "./types/Notification.es.js";
-import { TransactionStatus as x, TransactionType as O } from "./types/Transaction.es.js";
-import { ScreenSize as k } from "./types/ScreenSize.es.js";
-import { Frequency as w, RecurrenceStatus as z, RecurrenceType as _, RepeatingType as j } from "./types/RepeatingTransaction.es.js";
-import { AccountApi as J } from "./api/AccountApi.es.js";
-import { AnalyticsApi as Q } from "./api/AnalyticsApi.es.js";
-import { AppDataApi as Y } from "./api/AppDataApi.es.js";
-import { BannerApi as $ } from "./api/BannerApi.es.js";
-import { BeatApi as ro } from "./api/BeatApi.es.js";
-import { BudgetsApi as io } from "./api/BudgetsApi.es.js";
-import { CategoryApi as eo } from "./api/CategoryApi.es.js";
-import { FinstrongApi as no } from "./api/FinstrongApi.es.js";
-import { GlobalCopyApi as fo } from "./api/GlobalCopyApi.es.js";
-import { GoalApi as so } from "./api/GoalApi.es.js";
-import { HelpApi as Ao } from "./api/HelpApi.es.js";
-import { HoldingApi as yo } from "./api/HoldingApi.es.js";
-import { MerchantApi as lo } from "./api/MerchantApi.es.js";
-import { NotificationApi as Co } from "./api/NotificationApi.es.js";
-import { RepeatingTransactionsApi as ho } from "./api/RepeatingTransactionsApi.es.js";
-import { ScheduledPaymentsApi as Go } from "./api/ScheduledPaymentsApi.es.js";
-import { SettingsApi as Lo } from "./api/SettingsApi.es.js";
-import { TransactionApi as Eo } from "./api/TransactionApi.es.js";
-import { UserApi as Po } from "./api/UserApi.es.js";
-import { WidgetApi as Fo } from "./api/WidgetApi.es.js";
-import { AccountStore as Mo } from "./stores/AccountStore.es.js";
-import { AppDataStore as Vo } from "./stores/AppDataStore.es.js";
-import { AnalyticsStore as Oo } from "./stores/AnalyticsStore.es.js";
-import { BeatStore as ko } from "./stores/BeatStore.es.js";
-import { BudgetsStore as wo } from "./stores/BudgetsStore.es.js";
-import { CashflowStore as _o } from "./stores/CashflowStore.es.js";
-import { CategoryStore as vo } from "./stores/CategoryStore.es.js";
-import { ConnectStore as Ko } from "./stores/ConnectStore.es.js";
-import { DebtsStore as Xo } from "./stores/DebtsStore.es.js";
-import { FinstrongStore as Zo } from "./stores/FinstrongStore.es.js";
-import { GlobalStore as or } from "./stores/GlobalStore.es.js";
-import { GlobalUiStore as tr } from "./stores/GlobalUiStore.es.js";
-import { GlobalCopyStore as mr } from "./stores/GlobalCopyStore.es.js";
-import { GoalStore as pr } from "./stores/GoalStore.es.js";
-import { HelpStore as ar } from "./stores/HelpStore.es.js";
-import { HoldingStore as cr } from "./stores/HoldingStore.es.js";
-import { InsightsV2Store as Sr } from "./stores/InsightsV2Store.es.js";
-import { MerchantStore as ur } from "./stores/MerchantStore.es.js";
-import { NetWorthStore as Tr } from "./stores/NetWorthStore.es.js";
-import { NotificationStore as gr } from "./stores/NotificationStore.es.js";
-import { RecurringTransactionsStore as Cr } from "./stores/RecurringTransactionsStore.es.js";
-import { SettingsStore as hr } from "./stores/SettingsStore.es.js";
-import { TransactionStore as Gr } from "./stores/TransactionStore.es.js";
-import { TrendsStore as Lr } from "./stores/TrendsStore.es.js";
-import { UserStore as Er } from "./stores/UserStore.es.js";
+import { slot as F } from "./types/Insights.es.js";
+import { AccountNotificationTypes as M, BudgetNotificationTypes as U, InsightNotificationTypes as V, NotificationTypes as x } from "./types/Notification.es.js";
+import { TransactionStatus as W, TransactionType as k } from "./types/Transaction.es.js";
+import { ScreenSize as w } from "./types/ScreenSize.es.js";
+import { Frequency as _, RecurrenceStatus as j, RecurrenceType as v, RepeatingType as J } from "./types/RepeatingTransaction.es.js";
+import { AccountApi as Q } from "./api/AccountApi.es.js";
+import { AnalyticsApi as Y } from "./api/AnalyticsApi.es.js";
+import { AppDataApi as $ } from "./api/AppDataApi.es.js";
+import { BannerApi as ro } from "./api/BannerApi.es.js";
+import { BeatApi as io } from "./api/BeatApi.es.js";
+import { BudgetsApi as eo } from "./api/BudgetsApi.es.js";
+import { CategoryApi as no } from "./api/CategoryApi.es.js";
+import { FinstrongApi as ao } from "./api/FinstrongApi.es.js";
+import { GlobalCopyApi as so } from "./api/GlobalCopyApi.es.js";
+import { GoalApi as Ao } from "./api/GoalApi.es.js";
+import { HelpApi as yo } from "./api/HelpApi.es.js";
+import { HoldingApi as lo } from "./api/HoldingApi.es.js";
+import { MerchantApi as Co } from "./api/MerchantApi.es.js";
+import { NotificationApi as ho } from "./api/NotificationApi.es.js";
+import { RepeatingTransactionsApi as Go } from "./api/RepeatingTransactionsApi.es.js";
+import { ScheduledPaymentsApi as Lo } from "./api/ScheduledPaymentsApi.es.js";
+import { SettingsApi as Eo } from "./api/SettingsApi.es.js";
+import { TransactionApi as Po } from "./api/TransactionApi.es.js";
+import { UserApi as Fo } from "./api/UserApi.es.js";
+import { WidgetApi as Mo } from "./api/WidgetApi.es.js";
+import { AccountStore as Vo } from "./stores/AccountStore.es.js";
+import { AppDataStore as Oo } from "./stores/AppDataStore.es.js";
+import { AnalyticsStore as ko } from "./stores/AnalyticsStore.es.js";
+import { BeatStore as wo } from "./stores/BeatStore.es.js";
+import { BudgetsStore as _o } from "./stores/BudgetsStore.es.js";
+import { CashflowStore as vo } from "./stores/CashflowStore.es.js";
+import { CategoryStore as Ko } from "./stores/CategoryStore.es.js";
+import { ConnectStore as Xo } from "./stores/ConnectStore.es.js";
+import { DebtsStore as Zo } from "./stores/DebtsStore.es.js";
+import { FinstrongStore as or } from "./stores/FinstrongStore.es.js";
+import { GlobalStore as tr } from "./stores/GlobalStore.es.js";
+import { GlobalUiStore as mr } from "./stores/GlobalUiStore.es.js";
+import { GlobalCopyStore as pr } from "./stores/GlobalCopyStore.es.js";
+import { GoalStore as fr } from "./stores/GoalStore.es.js";
+import { HelpStore as cr } from "./stores/HelpStore.es.js";
+import { HoldingStore as Sr } from "./stores/HoldingStore.es.js";
+import { InsightsV2Store as ur } from "./stores/InsightsV2Store.es.js";
+import { MerchantStore as Tr } from "./stores/MerchantStore.es.js";
+import { NetWorthStore as gr } from "./stores/NetWorthStore.es.js";
+import { NotificationStore as Cr } from "./stores/NotificationStore.es.js";
+import { RecurringTransactionsStore as hr } from "./stores/RecurringTransactionsStore.es.js";
+import { SettingsStore as Gr } from "./stores/SettingsStore.es.js";
+import { TransactionStore as Lr } from "./stores/TransactionStore.es.js";
+import { TrendsStore as Er } from "./stores/TrendsStore.es.js";
+import { UserStore as Pr } from "./stores/UserStore.es.js";
 export {
-  J as AccountApi,
-  a as AccountIcon,
-  f as AccountIconVariants,
-  F as AccountNotificationTypes,
-  Mo as AccountStore,
+  Q as AccountApi,
+  f as AccountIcon,
+  a as AccountIconVariants,
+  M as AccountNotificationTypes,
+  Vo as AccountStore,
   c as AccountSubType,
   s as AccountType,
   S as AccountTypeName,
-  Q as AnalyticsApi,
-  Oo as AnalyticsStore,
-  Y as AppDataApi,
-  Vo as AppDataStore,
-  $ as BannerApi,
-  ro as BeatApi,
-  ko as BeatStore,
-  H as BudgetNotificationTypes,
-  io as BudgetsApi,
-  wo as BudgetsStore,
-  _o as CashflowStore,
-  eo as CategoryApi,
-  vo as CategoryStore,
-  Ko as ConnectStore,
+  Y as AnalyticsApi,
+  ko as AnalyticsStore,
+  $ as AppDataApi,
+  Oo as AppDataStore,
+  ro as BannerApi,
+  io as BeatApi,
+  wo as BeatStore,
+  U as BudgetNotificationTypes,
+  eo as BudgetsApi,
+  _o as BudgetsStore,
+  vo as CashflowStore,
+  no as CategoryApi,
+  Ko as CategoryStore,
+  Xo as ConnectStore,
   A as ConnectionStatus,
   u as ConnectionStatusEnums,
-  Xo as DebtsStore,
+  Zo as DebtsStore,
   y as ErrorStatuses,
   B as ExpenseStatus,
   p as Fetch,
-  no as FinstrongApi,
-  Zo as FinstrongStore,
-  w as Frequency,
-  fo as GlobalCopyApi,
-  mr as GlobalCopyStore,
-  or as GlobalStore,
-  tr as GlobalUiStore,
-  so as GoalApi,
-  pr as GoalStore,
+  ao as FinstrongApi,
+  or as FinstrongStore,
+  _ as Frequency,
+  so as GlobalCopyApi,
+  pr as GlobalCopyStore,
+  tr as GlobalStore,
+  mr as GlobalUiStore,
+  Ao as GoalApi,
+  fr as GoalStore,
   E as GoalType,
-  Ao as HelpApi,
-  ar as HelpStore,
-  yo as HoldingApi,
-  cr as HoldingStore,
-  M as InsightNotificationTypes,
-  Sr as InsightsV2Store,
+  yo as HelpApi,
+  cr as HelpStore,
+  lo as HoldingApi,
+  Sr as HoldingStore,
+  V as InsightNotificationTypes,
+  ur as InsightsV2Store,
   r as LOCALES,
-  lo as MerchantApi,
-  ur as MerchantStore,
+  Co as MerchantApi,
+  Tr as MerchantStore,
   I as MetaType,
   T as MfaStatuses,
-  Tr as NetWorthStore,
+  gr as NetWorthStore,
   l as NonConnectedStatuses,
-  Co as NotificationApi,
-  gr as NotificationStore,
-  U as NotificationTypes,
+  ho as NotificationApi,
+  Cr as NotificationStore,
+  x as NotificationTypes,
   g as ProcessingStatuses,
   d as PropertyType,
   C as PropertyTypeName,
-  z as RecurrenceStatus,
-  _ as RecurrenceType,
-  Cr as RecurringTransactionsStore,
-  ho as RepeatingTransactionsApi,
-  j as RepeatingType,
+  j as RecurrenceStatus,
+  v as RecurrenceType,
+  hr as RecurringTransactionsStore,
+  Go as RepeatingTransactionsApi,
+  J as RepeatingType,
   L as ScheduledPaymentTypes,
-  Go as ScheduledPaymentsApi,
-  k as ScreenSize,
-  Lo as SettingsApi,
-  hr as SettingsStore,
+  Lo as ScheduledPaymentsApi,
+  w as ScreenSize,
+  Eo as SettingsApi,
+  Gr as SettingsStore,
   N as StatusName,
   P as TrackType,
-  Eo as TransactionApi,
-  x as TransactionStatus,
-  Gr as TransactionStore,
-  O as TransactionType,
-  Lr as TrendsStore,
-  Po as UserApi,
-  Er as UserStore,
+  Po as TransactionApi,
+  W as TransactionStatus,
+  Lr as TransactionStore,
+  k as TransactionType,
+  Er as TrendsStore,
+  Fo as UserApi,
+  Pr as UserStore,
   b as UserVerification,
   t as VALID_LOCALES,
-  Fo as WidgetApi,
+  Mo as WidgetApi,
   i as buildDynamicCopy,
-  m as getLocale
+  m as getLocale,
+  F as slot
 };

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

@@ -39,7 +39,7 @@ export interface InsightsPayload {
     widget_type: WidgetType;
     instance_slot: InstanceSlot;
     /**
-     * V1 only. The v2 contract carries everything a block needs on `instance_slot.data_series` rows,
+     * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,
      * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it
      * get it as a required field through `BlockProps`, which re-declares it.
      */
@@ -237,22 +237,39 @@ export interface InstanceSlotRow {
     primary_text?: string;
     secondary_text?: string;
 }
+/**
+ * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any
+ * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the
+ * kind the caller expects.
+ */
+export interface InstanceSlotData {
+    [slot: string]: unknown;
+}
+/**
+ * Reads one slot off a block's `data`; undefined when ditto did not fill it.
+ *
+ * The caller names the kind, because the slot's kind lives in the block's ditto schema and not
+ * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold
+ * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).
+ */
+export declare const slot: <T = unknown>(data: InstanceSlotData | undefined, name: string) => T | undefined;
+/**
+ * V2: which block renders this beat's content, and what it renders.
+ *
+ * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the
+ * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface
+ * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs
+ * — that union left `block` reading as required and typed a promise it did not keep.
+ *
+ * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat
+ * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a
+ * nil variant rather than sending null, which is why the type is `string | null | undefined`.
+ */
 export interface InstanceSlot {
-    block: BlockType;
-    variant: string | null;
-    /**
-     * V2: the slot's pre-localized header, sent by tupac's `instance_slot_with_text` /
-     * `instance_slot_with_header` envelopes (e.g. `"July 26"`, the transaction date).
-     *
-     * This is *not* a row field: under `with_header` a row's `secondary_text` is the category, so
-     * the header has to come from here. Absent on the `logos_only` envelopes (micro/notification).
-     */
-    header_text?: string;
-    /**
-     * V2 (LargeTransactionV2 onward): rows carried inline on the slot. V1 blocks read their data
-     * from `InsightsPayload.instance_slot_data` instead and leave this absent.
-     */
-    data_series?: InstanceSlotRow[];
+    block?: BlockType;
+    variant?: string | null;
+    /** The slots this block's variant declares in ditto. */
+    data?: InstanceSlotData;
     /** Primary line on the hero card, e.g. "Epic Bank Checking, *1234". */
     account_name?: string;
     /** Secondary line beneath the name, e.g. "Checking Account" / "Credit Card". */

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

@@ -0,0 +1,6 @@
+var t = (o, r) => o?.[r];
+export {
+  t as slot
+};
+
+//# sourceMappingURL=Insights.es.js.map

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

@@ -0,0 +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  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_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}\n"],"mappings":"AA2RA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}

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

@@ -13,7 +13,8 @@ export type { Expense } from './Expense';
 export { ExpenseStatus, ScheduledPaymentTypes } from './Expense';
 export type { DynamicCopyElement, GlobalCopy } from './GlobalCopy';
 export { GoalType, MetaType, TrackType } from './Goal';
-export type { ThemedSVGImageProps, DrilldownData, DrilldownPayload, InsightsPayload, InstanceSlot, Pill, WidgetType, InstanceSlotRow, BlockType, Description, PrimaryCTA, CtaPostMessageMetadata, SecondaryCTA, Subtitle, Footer, Logo, LogoRef, CategoryLogo, MerchantLogo, InstitutionLogo, Legends, } from './Insights';
+export type { ThemedSVGImageProps, DrilldownData, DrilldownPayload, InsightsPayload, InstanceSlot, InstanceSlotData, Pill, WidgetType, InstanceSlotRow, BlockType, Description, PrimaryCTA, CtaPostMessageMetadata, SecondaryCTA, Subtitle, Footer, Logo, LogoRef, CategoryLogo, MerchantLogo, InstitutionLogo, Legends, } from './Insights';
+export { slot } from './Insights';
 export type { Goal, MonthlyCashFlowProfile, RetirementGoalAccount } from './Goal';
 export type { Debt } from './Debt';
 export type { GlobalCaptureException, GlobalErrorHandler, GlobalEventHandler } from './Handlers';

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@mui/material/styles';
 import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
-export declare const getDonutChartColors: (variant: string | null, blockData: InsightsInstanceSlotData, theme: Theme) => [string, string];
+export declare const getDonutChartColors: (variant: string | null | undefined, blockData: InsightsInstanceSlotData, theme: Theme) => [string, string];

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { getLayoutConfig } from './layout'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\nexport const getDonutChartColors = (\n  variant: string | null,\n  blockData: InsightsInstanceSlotData,\n  theme: Theme,\n): [string, string] => {\n  const layouts = getLayoutConfig(theme)\n  const variantConfig = layouts[variant as keyof ReturnType<typeof getLayoutConfig>] as\n    | { dynamicPrimary: string; secondaryColor: string }\n    | { secondaryColor: string }\n    | { colors: [string, string] }\n\n  if ('dynamicPrimary' in variantConfig && variantConfig.dynamicPrimary === 'creditUtilization') {\n    const utilization = Number(blockData.main?.value ?? 0)\n    const primaryColor = utilization > 30 ? theme.palette.error.main : theme.palette.warning.main\n    return [primaryColor, variantConfig.secondaryColor]\n  }\n\n  if ('secondaryColor' in variantConfig) {\n    const categoryColor = getCategoryColor(blockData.category_guid ?? '', theme)\n    return [categoryColor, variantConfig.secondaryColor]\n  }\n\n  return variantConfig.colors\n}\n"],"mappings":";;AAKA,IAAa,IAAA,CACX,GACA,GACA,MACqB;AAErB,QAAM,IADU,EAAgB,CACV,EAAQ,CAAA;AAK9B,SAAI,oBAAoB,KAAiB,EAAc,mBAAmB,sBAGjE,CAFa,OAAO,EAAU,MAAM,SAAS,CAC/B,IAAc,KAAK,EAAM,QAAQ,MAAM,OAAO,EAAM,QAAQ,QAAQ,MACnE,EAAc,cAAc,IAGhD,oBAAoB,IAEf,CADe,EAAiB,EAAU,iBAAiB,IAAI,CAC9D,GAAe,EAAc,cAAc,IAG9C,EAAc;AACvB"}
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { getLayoutConfig } from './layout'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\nexport const getDonutChartColors = (\n  variant: string | null | undefined,\n  blockData: InsightsInstanceSlotData,\n  theme: Theme,\n): [string, string] => {\n  const layouts = getLayoutConfig(theme)\n  const variantConfig = layouts[variant as keyof ReturnType<typeof getLayoutConfig>] as\n    | { dynamicPrimary: string; secondaryColor: string }\n    | { secondaryColor: string }\n    | { colors: [string, string] }\n\n  if ('dynamicPrimary' in variantConfig && variantConfig.dynamicPrimary === 'creditUtilization') {\n    const utilization = Number(blockData.main?.value ?? 0)\n    const primaryColor = utilization > 30 ? theme.palette.error.main : theme.palette.warning.main\n    return [primaryColor, variantConfig.secondaryColor]\n  }\n\n  if ('secondaryColor' in variantConfig) {\n    const categoryColor = getCategoryColor(blockData.category_guid ?? '', theme)\n    return [categoryColor, variantConfig.secondaryColor]\n  }\n\n  return variantConfig.colors\n}\n"],"mappings":";;AAKA,IAAa,IAAA,CACX,GACA,GACA,MACqB;AAErB,QAAM,IADU,EAAgB,CACV,EAAQ,CAAA;AAK9B,SAAI,oBAAoB,KAAiB,EAAc,mBAAmB,sBAGjE,CAFa,OAAO,EAAU,MAAM,SAAS,CAC/B,IAAc,KAAK,EAAM,QAAQ,MAAM,OAAO,EAAM,QAAQ,QAAQ,MACnE,EAAc,cAAc,IAGhD,oBAAoB,IAEf,CADe,EAAiB,EAAU,iBAAiB,IAAI,CAC9D,GAAe,EAAc,cAAc,IAG9C,EAAc;AACvB"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@mui/material/styles';
-export declare const getLayoutConfig: (theme: Theme, variant: string | null) => {
+export declare const getLayoutConfig: (theme: Theme, variant?: string | null) => {
     color: string[];
 } | {
     color: string[];

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nexport const getLayoutConfig = (theme: Theme, variant: string | null) => {\n  const config = {\n    SpendToIncome: {\n      color: [theme.palette.categories.billsUtilities, theme.palette.chart.chart1] as string[],\n    },\n    DebtToIncome: {\n      color: [theme.palette.chart.chart5, theme.palette.chart.chart1] as string[],\n    },\n    SavingsToIncome: {\n      color: [theme.palette.chartMono.chartMono5, theme.palette.chartMono.chartMono3] as string[],\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":"AAEA,IAAa,IAAA,CAAmB,GAAc,OAYrC;AAAA,EAVL,eAAe,EACb,OAAO,CAAC,EAAM,QAAQ,WAAW,gBAAgB,EAAM,QAAQ,MAAM,MAAM,EAC7E;AAAA,EACA,cAAc,EACZ,OAAO,CAAC,EAAM,QAAQ,MAAM,QAAQ,EAAM,QAAQ,MAAM,MAAM,EAChE;AAAA,EACA,iBAAiB,EACf,OAAO,CAAC,EAAM,QAAQ,UAAU,YAAY,EAAM,QAAQ,UAAU,UAAU,EAChF;AAEK,GAAO,CAAA"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nexport const getLayoutConfig = (theme: Theme, variant?: string | null) => {\n  const config = {\n    SpendToIncome: {\n      color: [theme.palette.categories.billsUtilities, theme.palette.chart.chart1] as string[],\n    },\n    DebtToIncome: {\n      color: [theme.palette.chart.chart5, theme.palette.chart.chart1] as string[],\n    },\n    SavingsToIncome: {\n      color: [theme.palette.chartMono.chartMono5, theme.palette.chartMono.chartMono3] as string[],\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":"AAEA,IAAa,IAAA,CAAmB,GAAc,OAYrC;AAAA,EAVL,eAAe,EACb,OAAO,CAAC,EAAM,QAAQ,WAAW,gBAAgB,EAAM,QAAQ,MAAM,MAAM,EAC7E;AAAA,EACA,cAAc,EACZ,OAAO,CAAC,EAAM,QAAQ,MAAM,QAAQ,EAAM,QAAQ,MAAM,MAAM,EAChE;AAAA,EACA,iBAAiB,EACf,OAAO,CAAC,EAAM,QAAQ,UAAU,YAAY,EAAM,QAAQ,UAAU,UAAU,EAChF;AAEK,GAAO,CAAA"}

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.d.ts

@@ -1,7 +1,7 @@
 import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
 interface IconComponentProps {
     blockData: InsightsInstanceSlotData;
-    variant: string | null;
+    variant?: string | null;
 }
 export declare const IconComponent: ({ blockData, variant }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { IconBacking } from '../../../../common'\nimport { getLayoutConfig } from './layout'\nimport { useTheme } from '@mui/material/styles'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\ninterface IconComponentProps {\n  blockData: InsightsInstanceSlotData\n  variant: string | null\n}\n\nexport const IconComponent = ({ blockData, variant }: IconComponentProps) => {\n  const theme = useTheme()\n  const layoutConfig = getLayoutConfig(theme)[variant as keyof ReturnType<typeof getLayoutConfig>]\n\n  if (blockData.institution_guid) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <InstitutionLogo\n          alt={`${blockData.institution_name}`}\n          institutionGuid={`${blockData.institution_guid}`}\n          size={48}\n        />\n        <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n          <Icon\n            color=\"error\"\n            fill={true}\n            name=\"error\"\n            size={20}\n            sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n          />\n        </IconBacking>\n      </Stack>\n    )\n  }\n\n  if (blockData.icon_name) {\n    return (\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: layoutConfig.logo_bGcolor,\n          borderRadius: '6px',\n          height: 48,\n          justifyContent: 'center',\n          width: 48,\n          ...(layoutConfig.logo_border_color && {\n            borderColor: layoutConfig.logo_border_color,\n            borderStyle: 'solid',\n            borderWidth: 1.5,\n          }),\n        }}\n      >\n        <Icon\n          name={blockData.icon_name}\n          size={24}\n          sx={{\n            color: layoutConfig.logo_color,\n          }}\n        />\n      </Stack>\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;AAaA,IAAa,IAAA,CAAiB,EAAE,WAAA,GAAW,SAAA,EAAA,MAAkC;AAC3E,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAgB,CAAK,EAAE,CAAA;AAE5C,SAAI,EAAU,mBAEV,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAG,EAAU,gBAAA;AAAA,MAClB,iBAAiB,GAAG,EAAU,gBAAA;AAAA,MAC9B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CACR;AAAA,OAIP,EAAU,YAEV,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS,EAAa;AAAA,MACtB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,GAAI,EAAa,qBAAqB;AAAA,QACpC,aAAa,EAAa;AAAA,QAC1B,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAU;AAAA,MAChB,MAAM;AAAA,MACN,IAAI,EACF,OAAO,EAAa,WACtB;AAAA,IACD,CAAA;AAAA,EACI,CAAA,IAIJ;AACT"}
+{"version":3,"file":"IconComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { IconBacking } from '../../../../common'\nimport { getLayoutConfig } from './layout'\nimport { useTheme } from '@mui/material/styles'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\ninterface IconComponentProps {\n  blockData: InsightsInstanceSlotData\n  variant?: string | null\n}\n\nexport const IconComponent = ({ blockData, variant }: IconComponentProps) => {\n  const theme = useTheme()\n  const layoutConfig = getLayoutConfig(theme)[variant as keyof ReturnType<typeof getLayoutConfig>]\n\n  if (blockData.institution_guid) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <InstitutionLogo\n          alt={`${blockData.institution_name}`}\n          institutionGuid={`${blockData.institution_guid}`}\n          size={48}\n        />\n        <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n          <Icon\n            color=\"error\"\n            fill={true}\n            name=\"error\"\n            size={20}\n            sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n          />\n        </IconBacking>\n      </Stack>\n    )\n  }\n\n  if (blockData.icon_name) {\n    return (\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: layoutConfig.logo_bGcolor,\n          borderRadius: '6px',\n          height: 48,\n          justifyContent: 'center',\n          width: 48,\n          ...(layoutConfig.logo_border_color && {\n            borderColor: layoutConfig.logo_border_color,\n            borderStyle: 'solid',\n            borderWidth: 1.5,\n          }),\n        }}\n      >\n        <Icon\n          name={blockData.icon_name}\n          size={24}\n          sx={{\n            color: layoutConfig.logo_color,\n          }}\n        />\n      </Stack>\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;AAaA,IAAa,IAAA,CAAiB,EAAE,WAAA,GAAW,SAAA,EAAA,MAAkC;AAC3E,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAgB,CAAK,EAAE,CAAA;AAE5C,SAAI,EAAU,mBAEV,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAG,EAAU,gBAAA;AAAA,MAClB,iBAAiB,GAAG,EAAU,gBAAA;AAAA,MAC9B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CACR;AAAA,OAIP,EAAU,YAEV,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS,EAAa;AAAA,MACtB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,GAAI,EAAa,qBAAqB;AAAA,QACpC,aAAa,EAAa;AAAA,QAC1B,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAU;AAAA,MAChB,MAAM;AAAA,MACN,IAAI,EACF,OAAO,EAAa,WACtB;AAAA,IACD,CAAA;AAAA,EACI,CAAA,IAIJ;AACT"}

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

@@ -15,11 +15,14 @@ export declare const TransactionBlockVariant: {
 /**
  * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).
  *
- * Renders rows the backend already localized and carried inline on `instance_slot.data_series`
+ * Renders rows the backend already localized and carried inline on `instance_slot.data.series`
  * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,
  * because the contract sends it as a number.
  *
- * Under `with_header` the card header comes from `instance_slot.header_text`, which tupac sends
+ * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo
+ * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.
+ *
+ * Under `with_header` the card header comes from `instance_slot.data.header_text`, which tupac sends
  * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`
  * card a row's `secondary_text` is the category, so reading it here rendered the category twice
  * and dropped the date entirely.

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { BlockProps } from '../../types';
-/** The Withdrawal row on `instance_slot.data_series`. */
+/** The Withdrawal row on `instance_slot.data.series`. */
 export interface WithdrawalRow {
     amount?: number;
     amount_label?: string;
@@ -9,7 +9,7 @@ export interface WithdrawalRow {
 }
 /**
  * The `withdrawal_block` (Highlight Withdrawal), reading one row on
- * `instance_slot.data_series`. Text (`amount_label`, `withdrawal_date`,
+ * `instance_slot.data.series`. Text (`amount_label`, `withdrawal_date`,
  * `balance_label`) renders as sent; `amount` and `balance` are numbers and are formatted by the
  * card. Renders nothing unless the row carries both numbers.
  */

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

@@ -1,11 +1,12 @@
-import l from "../../../components/WithdrawalCard.es.js";
+import { slot as l } from "../../../../core/types/Insights.es.js";
+import o from "../../../components/WithdrawalCard.es.js";
 import n from "@mui/material/Stack";
 import { jsx as t } from "react/jsx-runtime";
-var s = ({ payload: e }) => {
-  const r = e.instance_slot.data_series, [a] = Array.isArray(r) ? r : [];
+var c = ({ payload: e }) => {
+  const r = l(e.instance_slot.data, "series"), [a] = Array.isArray(r) ? r : [];
   return !Number.isFinite(a?.amount) || !Number.isFinite(a?.balance) ? null : /* @__PURE__ */ t(n, {
     sx: { px: 16 },
-    children: /* @__PURE__ */ t(l, {
+    children: /* @__PURE__ */ t(o, {
       amount: a.amount,
       amountLabel: a.amount_label,
       balance: a.balance,
@@ -15,7 +16,7 @@ var s = ({ payload: e }) => {
   });
 };
 export {
-  s as default
+  c as default
 };
 
 //# sourceMappingURL=WithdrawalBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WithdrawalBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport WithdrawalCard from '../../../components/WithdrawalCard'\nimport type { BlockProps } from '../../types'\n\n/** The Withdrawal row on `instance_slot.data_series`. */\nexport interface WithdrawalRow {\n  amount?: number\n  amount_label?: string\n  balance?: number\n  balance_label?: string\n  withdrawal_date?: string\n}\n\n/**\n * The `withdrawal_block` (Highlight Withdrawal), reading one row on\n * `instance_slot.data_series`. Text (`amount_label`, `withdrawal_date`,\n * `balance_label`) renders as sent; `amount` and `balance` are numbers and are formatted by the\n * card. Renders nothing unless the row carries both numbers.\n */\nconst WithdrawalBlock = ({ payload }: BlockProps) => {\n  const rows = payload.instance_slot.data_series\n  const [row] = (Array.isArray(rows) ? rows : []) as WithdrawalRow[]\n\n  if (!Number.isFinite(row?.amount) || !Number.isFinite(row?.balance)) return null\n\n  return (\n    <Stack sx={{ px: 16 }}>\n      <WithdrawalCard\n        amount={row.amount as number}\n        amountLabel={row.amount_label}\n        balance={row.balance as number}\n        balanceLabel={row.balance_label}\n        withdrawalDate={row.withdrawal_date}\n      />\n    </Stack>\n  )\n}\n\nexport default WithdrawalBlock\n"],"mappings":";;;AAoBA,IAAM,IAAA,CAAmB,EAAE,SAAA,EAAA,MAA0B;AACnD,QAAM,IAAO,EAAQ,cAAc,aAC7B,CAAC,CAAA,IAAQ,MAAM,QAAQ,CAAI,IAAI,IAAO,CAAC;AAE7C,SAAI,CAAC,OAAO,SAAS,GAAK,MAAM,KAAK,CAAC,OAAO,SAAS,GAAK,OAAO,IAAU,OAG1E,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,GAAG;AAAA,IAClB,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAI;AAAA,MACZ,aAAa,EAAI;AAAA,MACjB,SAAS,EAAI;AAAA,MACb,cAAc,EAAI;AAAA,MAClB,gBAAgB,EAAI;AAAA,IACrB,CAAA;AAAA,EACI,CAAA;AAEX"}
+{"version":3,"file":"WithdrawalBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { slot } from '../../../../core'\nimport WithdrawalCard from '../../../components/WithdrawalCard'\nimport type { BlockProps } from '../../types'\n\n/** The Withdrawal row on `instance_slot.data.series`. */\nexport interface WithdrawalRow {\n  amount?: number\n  amount_label?: string\n  balance?: number\n  balance_label?: string\n  withdrawal_date?: string\n}\n\n/**\n * The `withdrawal_block` (Highlight Withdrawal), reading one row on\n * `instance_slot.data.series`. Text (`amount_label`, `withdrawal_date`,\n * `balance_label`) renders as sent; `amount` and `balance` are numbers and are formatted by the\n * card. Renders nothing unless the row carries both numbers.\n */\nconst WithdrawalBlock = ({ payload }: BlockProps) => {\n  const rows = slot<WithdrawalRow[]>(payload.instance_slot.data, 'series')\n  const [row] = Array.isArray(rows) ? rows : []\n\n  if (!Number.isFinite(row?.amount) || !Number.isFinite(row?.balance)) return null\n\n  return (\n    <Stack sx={{ px: 16 }}>\n      <WithdrawalCard\n        amount={row.amount as number}\n        amountLabel={row.amount_label}\n        balance={row.balance as number}\n        balanceLabel={row.balance_label}\n        withdrawalDate={row.withdrawal_date}\n      />\n    </Stack>\n  )\n}\n\nexport default WithdrawalBlock\n"],"mappings":";;;;AAqBA,IAAM,IAAA,CAAmB,EAAE,SAAA,EAAA,MAA0B;AACnD,QAAM,IAAO,EAAsB,EAAQ,cAAc,MAAM,QAAQ,GACjE,CAAC,CAAA,IAAO,MAAM,QAAQ,CAAI,IAAI,IAAO,CAAC;AAE5C,SAAI,CAAC,OAAO,SAAS,GAAK,MAAM,KAAK,CAAC,OAAO,SAAS,GAAK,OAAO,IAAU,OAG1E,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,GAAG;AAAA,IAClB,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAI;AAAA,MACZ,aAAa,EAAI;AAAA,MACjB,SAAS,EAAI;AAAA,MACb,cAAc,EAAI;AAAA,MAClB,gBAAgB,EAAI;AAAA,IACrB,CAAA;AAAA,EACI,CAAA;AAEX"}

package/dist/insights-v2/blocks/ImageBlocks/SVGImageBlock/layout.d.ts

@@ -1,4 +1,4 @@
-export declare const getLayoutConfig: (variant: string | null, isCibc?: boolean) => {
+export declare const getLayoutConfig: (variant?: string | null, isCibc?: boolean) => {
     image: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
 } | {
     image: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;

package/dist/insights-v2/blocks/ImageBlocks/SVGImageBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ImageBlocks/SVGImageBlock/layout.ts"],"sourcesContent":["// SVGs to be moved to S3 and imported from there.\nimport { ReactComponent as UpcomingTaxDeadline } from './images/UpcomingTaxDeadlineAlert.svg'\nimport { ReactComponent as UpcomingTaxDeadlineCIBC } from './images/UpcomingTaxDeadlineAlertCIBC.svg'\n\nimport { ReactComponent as FederalBankHoliday } from './images/FederalBankHoliday.svg'\nimport { ReactComponent as FederalBankHolidayCIBC } from './images/FederalBankHolidayCibc.svg'\n\nimport { ReactComponent as DesignateEmergencySavingsAccount } from './images/DesignateEmergencySavingsAccount.svg'\n\nexport const getLayoutConfig = (variant: string | null, isCibc: boolean = false) => {\n  const config = {\n    Holiday: {\n      image: isCibc ? FederalBankHolidayCIBC : FederalBankHoliday,\n    },\n    Reminder: {\n      image: isCibc ? UpcomingTaxDeadlineCIBC : UpcomingTaxDeadline,\n    },\n    Savings: {\n      image: DesignateEmergencySavingsAccount,\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":";;;;;AASA,IAAa,IAAA,CAAmB,GAAwB,IAAkB,QAYjE;AAAA,EAVL,SAAS,EACP,OAAO,IAAS,IAAyB,EAC3C;AAAA,EACA,UAAU,EACR,OAAO,IAAS,IAA0B,EAC5C;AAAA,EACA,SAAS,EACP,OAAO,EACT;AAEK,GAAO,CAAA"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ImageBlocks/SVGImageBlock/layout.ts"],"sourcesContent":["// SVGs to be moved to S3 and imported from there.\nimport { ReactComponent as UpcomingTaxDeadline } from './images/UpcomingTaxDeadlineAlert.svg'\nimport { ReactComponent as UpcomingTaxDeadlineCIBC } from './images/UpcomingTaxDeadlineAlertCIBC.svg'\n\nimport { ReactComponent as FederalBankHoliday } from './images/FederalBankHoliday.svg'\nimport { ReactComponent as FederalBankHolidayCIBC } from './images/FederalBankHolidayCibc.svg'\n\nimport { ReactComponent as DesignateEmergencySavingsAccount } from './images/DesignateEmergencySavingsAccount.svg'\n\nexport const getLayoutConfig = (variant?: string | null, isCibc: boolean = false) => {\n  const config = {\n    Holiday: {\n      image: isCibc ? FederalBankHolidayCIBC : FederalBankHoliday,\n    },\n    Reminder: {\n      image: isCibc ? UpcomingTaxDeadlineCIBC : UpcomingTaxDeadline,\n    },\n    Savings: {\n      image: DesignateEmergencySavingsAccount,\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":";;;;;AASA,IAAa,IAAA,CAAmB,GAAyB,IAAkB,QAYlE;AAAA,EAVL,SAAS,EACP,OAAO,IAAS,IAAyB,EAC3C;AAAA,EACA,UAAU,EACR,OAAO,IAAS,IAA0B,EAC5C;AAAA,EACA,SAAS,EACP,OAAO,EACT;AAEK,GAAO,CAAA"}

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

@@ -19,13 +19,13 @@ export interface CompactInsightCardProps {
  * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).
  *
  * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML
- * description with the primary CTA under it, and on the right the first slot row's logo in a
- * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no
- * variant and draws the logo alone. The card lays out from the envelope alone and never reads
+ * description with the primary CTA under it, and on the right the slot's `logo` in a
+ * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under
+ * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads
  * `widget_type`.
  *
  * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot
- * has no row. The `pill` on the same envelope is the transaction row's, not the card's.
+ * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.
  */
 declare const CompactInsightCard: ({ isCtaDisabled, onCtaClick, onTap, payload, }: CompactInsightCardProps) => import("react/jsx-runtime").JSX.Element;
 export default CompactInsightCard;

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

@@ -1,57 +1,61 @@
-import { createVariantBlock as b } from "../blocks/createVariantBlock.es.js";
-import c from "./BadgedTile.es.js";
-import { InsightOptionsMenu as y } from "./InsightOptionsMenu.es.js";
-import k from "./LogoFromGuid.es.js";
-import I from "./StatusBadge.es.js";
+import { slot as y } from "../../core/types/Insights.es.js";
+import { createVariantBlock as k } from "../blocks/createVariantBlock.es.js";
+import m from "./BadgedTile.es.js";
+import { InsightOptionsMenu as I } from "./InsightOptionsMenu.es.js";
+import w from "./LogoFromGuid.es.js";
+import v from "./StatusBadge.es.js";
 import l from "@mui/material/Stack";
-import { P as v, Text as w } from "@mxenabled/mxui";
-import C from "@mui/material/Button";
-import { Icon as S } from "@mxenabled/mx-icons";
+import { P as C, Text as _ } from "@mxenabled/mxui";
+import S from "@mui/material/Button";
+import { Icon as B } from "@mxenabled/mx-icons";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import d from "@mui/material/Box";
-import _ from "@mui/material/Card";
-var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
+import p from "@mui/material/Box";
+import z from "@mui/material/Card";
+var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
   logo: r,
-  size: e
-}) : /* @__PURE__ */ t(d, {
+  size: a
+}) : /* @__PURE__ */ t(p, {
   "data-testid": "compact-insight-card-fallback-icon",
   sx: {
     alignItems: "center",
     bgcolor: "primary.lighter",
     display: "flex",
-    height: e,
+    height: a,
     justifyContent: "center",
-    width: e
+    width: a
   },
-  children: /* @__PURE__ */ t(S, {
+  children: /* @__PURE__ */ t(B, {
     color: "primary",
     fill: !0,
     name: "lightbulb",
     size: 24
   })
-}), z = ({ logo: r }) => /* @__PURE__ */ t(c, {
-  center: /* @__PURE__ */ t(m, { logo: r }),
-  size: e,
+}), c = ({ logo: r }) => /* @__PURE__ */ t(m, {
+  center: /* @__PURE__ */ t(d, { logo: r }),
+  size: a,
   sx: { flexShrink: 0 }
-}), B = ({ logo: r }) => /* @__PURE__ */ t(c, {
-  center: /* @__PURE__ */ t(m, { logo: r }),
-  size: e,
+}), P = ({ logo: r }) => /* @__PURE__ */ t(m, {
+  center: /* @__PURE__ */ t(d, { logo: r }),
+  size: a,
   sx: { flexShrink: 0 },
-  topRight: /* @__PURE__ */ t(I, { tone: "warning" })
-}), P = b({
-  variants: { embedded: B },
-  fallback: z,
+  topRight: /* @__PURE__ */ t(v, { tone: "warning" })
+}), V = k({
+  variants: {
+    minimal: c,
+    with_warning_badge: P
+  },
+  fallback: c,
   name: "InsightVisual"
-}), V = (r) => r.stopPropagation(), T = ({ isCtaDisabled: r = !1, onCtaClick: p, onTap: a, payload: f }) => {
-  const { description: g, instance_slot: s, primary_cta: o, title: h } = f, x = s.data_series?.[0]?.logo, u = (i) => {
-    i.stopPropagation(), !(r || !o) && p?.(o);
+}), j = (r) => r.stopPropagation(), $ = ({ isCtaDisabled: r = !1, onCtaClick: g, onTap: e, payload: f }) => {
+  const { description: h, instance_slot: s, primary_cta: o, title: x } = f, u = y(s.data, "logo"), b = (i) => {
+    i.stopPropagation(), !(r || !o) && g?.(o);
   };
-  return /* @__PURE__ */ n(_, {
+  return /* @__PURE__ */ n(z, {
     "data-testid": "compact-insight-card",
-    ...a ? {
-      onClick: a,
+    ...e ? {
+      onClick: e,
       onKeyDown: (i) => {
-        i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), a?.());
+        i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e?.());
       },
       role: "button",
       tabIndex: 0
@@ -62,7 +66,7 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
       pl: 8,
       pr: 16,
       pt: 8,
-      ...a && { cursor: "pointer" }
+      ...e && { cursor: "pointer" }
     },
     children: [/* @__PURE__ */ n(l, {
       sx: {
@@ -73,14 +77,14 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
         pl: 8,
         pt: 4
       },
-      children: [/* @__PURE__ */ t(w, {
+      children: [/* @__PURE__ */ t(_, {
         bold: !0,
         variant: "body1",
-        children: h ?? ""
-      }), /* @__PURE__ */ t(d, {
-        onClick: V,
+        children: x ?? ""
+      }), /* @__PURE__ */ t(p, {
+        onClick: j,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(y, {})
+        children: /* @__PURE__ */ t(I, {})
       })]
     }), /* @__PURE__ */ n(l, {
       sx: {
@@ -95,13 +99,13 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
           gap: 8,
           minWidth: 0
         },
-        children: [/* @__PURE__ */ t(v, {
-          dangerouslySetInnerHTML: { __html: g.html_text },
+        children: [/* @__PURE__ */ t(C, {
+          dangerouslySetInnerHTML: { __html: h.html_text },
           "data-testid": "compact-insight-card-description",
           variant: "subtitle2"
-        }), o?.label && /* @__PURE__ */ t(C, {
+        }), o?.label && /* @__PURE__ */ t(S, {
           "aria-disabled": r,
-          onClick: u,
+          onClick: b,
           size: "small",
           sx: {
             alignSelf: "flex-start",
@@ -115,15 +119,15 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
           variant: "text",
           children: o.label
         })]
-      }), /* @__PURE__ */ t(P, {
-        logo: x,
+      }), /* @__PURE__ */ t(V, {
+        logo: u,
         variant: s.variant
       })]
     })]
   });
 };
 export {
-  T as default
+  $ as default
 };
 
 //# sourceMappingURL=CompactInsightCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The first slot row's logo, when the envelope carries a row. */\n  logo?: LogoRef | null\n}\n\n/** The row's logo, or the neutral insight glyph when the slot has no row. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `embedded`: the logo badged with a status glyph (Figma 1941:111897). */\nconst EmbeddedVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight — `with_header` already serves both Large\n * Transaction and Fee Detected — so an insight wanting the badged logo reuses `embedded`. Only a\n * genuinely different visual registers a new entry, and existing ones are never touched.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { embedded: EmbeddedVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the first slot row's logo in a\n * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no\n * variant and draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * has no row. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  const rowLogo = instance_slot.data_series?.[0]?.logo\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{ minWidth: 288, pb: 12, pl: 8, pr: 16, pt: 8, ...(onTap && { cursor: 'pointer' }) }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && { color: 'text.disabled', cursor: 'default' }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}
+{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { slot } from '../../core'\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The slot's `logo`, when ditto's variant declares and fills one. */\n  logo?: LogoRef | null\n}\n\n/** The slot's logo, or the neutral insight glyph when the slot carries none. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `with_warning_badge`: the logo badged with a status glyph (Figma 1941:111897). */\nconst WarningBadgeVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight or a surface — `with_header` already serves\n * both Large Transaction and Fee Detected — so an insight wanting the badged logo reuses\n * `with_warning_badge`. Only a genuinely different visual registers a new entry, and existing ones\n * are never touched.\n *\n * `minimal` draws the plain logo and is registered explicitly even though it matches the fallback:\n * micro and notification resolve it on every render, and an unregistered variant warns. The\n * fallback is for variants we genuinely do not know.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { minimal: PlainVisual, with_warning_badge: WarningBadgeVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the slot's `logo` in a\n * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under\n * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  // Reduced variants (`minimal`, `with_warning_badge`) declare a bare `logo` slot.\n  const rowLogo = slot<LogoRef>(instance_slot.data, 'logo')\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{\n        minWidth: 288,\n        pb: 12,\n        pl: 8,\n        pr: 16,\n        pt: 8,\n        ...(onTap && { cursor: 'pointer' }),\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && {\n                  color: 'text.disabled',\n                  cursor: 'default',\n                }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}

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

@@ -21,10 +21,13 @@ export type InsightRender = 'legacy' | 'v2' | 'error';
  * no block, no logo and no footer, and the failure would never surface. An absent flag (older firefly,
  * cortex) renders the legacy path unchanged.
  *
- * An envelope counts as present only when it carries both an `instance_slot` and a `description`: a
- * bare `{}` is a half-built envelope, every V2 renderer reads `instance_slot.block` first, and all
- * three — `BaseLayout`, `CompactInsightCard` and the micro `InsightCard` — paint
- * `description.html_text` unguarded, so a half-built envelope has to resolve to `error` rather than
- * throw inside the renderer.
+ * The gate checks only that `instance_slot` is an object and `description` is present. It does not
+ * look inside the slot: an empty `{}` is a valid envelope and resolves to `v2`, because a beat
+ * whose template has no ditto config names no block, and the card renders its copy and CTAs alone.
+ * So `block` is optional on `InstanceSlot` and a renderer must not dereference it unguarded.
+ *
+ * A payload missing `description` resolves to `error` instead: all three renderers — `BaseLayout`,
+ * `CompactInsightCard` and the micro `InsightCard` — paint `description.html_text` unguarded, so
+ * that one would throw.
  */
 export declare const resolveInsightRender: (beat?: Beat | null) => InsightRender;

package/dist/insights-v2/resolveInsightRender.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveInsightRender.es.js","names":[],"sources":["../../src/insights-v2/resolveInsightRender.ts"],"sourcesContent":["import type { Beat } from '../core'\n\n/**\n * Which renderer draws a beat:\n * - `legacy` — the per-template legacy component (feed, mini, micro) or the legacy caption / embedded\n *   `switch` (transaction row, details drawer).\n * - `v2`     — `BaseLayout` (full, mini) or `CompactInsightCard` (micro, embedded) from `insights_payload`.\n * - `error`  — `InsightErrorCard`: the beat is flagged but its envelope is missing.\n */\nexport type InsightRender = 'legacy' | 'v2' | 'error'\n\n/**\n * The single gate every surface calls. Two facts decide: `beat.is_insights_v2` (written by firefly\n * when the insight's Insights 2.0 flag is on) and whether the envelope is present.\n *\n * | `is_insights_v2` | envelope  | result   |\n * | false / absent   | any       | `legacy` |\n * | true             | non-empty | `v2`     |\n * | true             | empty     | `error`  |\n *\n * `error` is never downgraded to `legacy`: a flagged insight's legacy copy fields are filled from the\n * same V2 copy block, so a failed envelope would otherwise render a plausible legacy-looking card with\n * no block, no logo and no footer, and the failure would never surface. An absent flag (older firefly,\n * cortex) renders the legacy path unchanged.\n *\n * An envelope counts as present only when it carries both an `instance_slot` and a `description`: a\n * bare `{}` is a half-built envelope, every V2 renderer reads `instance_slot.block` first, and all\n * three — `BaseLayout`, `CompactInsightCard` and the micro `InsightCard` — paint\n * `description.html_text` unguarded, so a half-built envelope has to resolve to `error` rather than\n * throw inside the renderer.\n */\nexport const resolveInsightRender = (beat?: Beat | null): InsightRender => {\n  if (!beat?.is_insights_v2) return 'legacy'\n\n  const payload = beat.insights_payload\n\n  return payload?.instance_slot && payload.description ? 'v2' : 'error'\n}\n"],"mappings":"AA+BA,IAAa,IAAA,CAAwB,MAAsC;AACzE,MAAI,CAAC,GAAM,eAAgB,QAAO;AAElC,QAAM,IAAU,EAAK;AAErB,SAAO,GAAS,iBAAiB,EAAQ,cAAc,OAAO;AAChE"}
+{"version":3,"file":"resolveInsightRender.es.js","names":[],"sources":["../../src/insights-v2/resolveInsightRender.ts"],"sourcesContent":["import type { Beat } from '../core'\n\n/**\n * Which renderer draws a beat:\n * - `legacy` — the per-template legacy component (feed, mini, micro) or the legacy caption / embedded\n *   `switch` (transaction row, details drawer).\n * - `v2`     — `BaseLayout` (full, mini) or `CompactInsightCard` (micro, embedded) from `insights_payload`.\n * - `error`  — `InsightErrorCard`: the beat is flagged but its envelope is missing.\n */\nexport type InsightRender = 'legacy' | 'v2' | 'error'\n\n/**\n * The single gate every surface calls. Two facts decide: `beat.is_insights_v2` (written by firefly\n * when the insight's Insights 2.0 flag is on) and whether the envelope is present.\n *\n * | `is_insights_v2` | envelope  | result   |\n * | false / absent   | any       | `legacy` |\n * | true             | non-empty | `v2`     |\n * | true             | empty     | `error`  |\n *\n * `error` is never downgraded to `legacy`: a flagged insight's legacy copy fields are filled from the\n * same V2 copy block, so a failed envelope would otherwise render a plausible legacy-looking card with\n * no block, no logo and no footer, and the failure would never surface. An absent flag (older firefly,\n * cortex) renders the legacy path unchanged.\n *\n * The gate checks only that `instance_slot` is an object and `description` is present. It does not\n * look inside the slot: an empty `{}` is a valid envelope and resolves to `v2`, because a beat\n * whose template has no ditto config names no block, and the card renders its copy and CTAs alone.\n * So `block` is optional on `InstanceSlot` and a renderer must not dereference it unguarded.\n *\n * A payload missing `description` resolves to `error` instead: all three renderers — `BaseLayout`,\n * `CompactInsightCard` and the micro `InsightCard` — paint `description.html_text` unguarded, so\n * that one would throw.\n */\nexport const resolveInsightRender = (beat?: Beat | null): InsightRender => {\n  if (!beat?.is_insights_v2) return 'legacy'\n\n  const payload = beat.insights_payload\n\n  return payload?.instance_slot && payload.description ? 'v2' : 'error'\n}\n"],"mappings":"AAkCA,IAAa,IAAA,CAAwB,MAAsC;AACzE,MAAI,CAAC,GAAM,eAAgB,QAAO;AAElC,QAAM,IAAU,EAAK;AAErB,SAAO,GAAS,iBAAiB,EAAQ,cAAc,OAAO;AAChE"}

package/dist/microinsights/cards/InsightCard.es.js

@@ -1,26 +1,27 @@
-import { resolveInsightRender as k } from "../../insights-v2/resolveInsightRender.es.js";
-import x from "../../insights-v2/components/LogoFromGuid.es.js";
-import B from "../../insights-v2/components/InsightErrorCard.es.js";
-import { ON_CLICK_EVENT as M, ON_VIEW_EVENT as R, ON_VIEW_FIRST_TIME_EVENT as W } from "../constants/Analytics.es.js";
-import S from "../beaticons/BeatMaterialIcon.es.js";
-import { BeatIcon as F } from "../beaticons/BeatIcon.es.js";
-import { useCopyStore as O, useEvent as P, useInsightsMicroWidgetStore as A } from "../context/hooks.es.js";
+import { slot as k } from "../../core/types/Insights.es.js";
+import { resolveInsightRender as x } from "../../insights-v2/resolveInsightRender.es.js";
+import B from "../../insights-v2/components/LogoFromGuid.es.js";
+import M from "../../insights-v2/components/InsightErrorCard.es.js";
+import { ON_CLICK_EVENT as R, ON_VIEW_EVENT as W, ON_VIEW_FIRST_TIME_EVENT as S } from "../constants/Analytics.es.js";
+import F from "../beaticons/BeatMaterialIcon.es.js";
+import { BeatIcon as O } from "../beaticons/BeatIcon.es.js";
+import { useCopyStore as P, useEvent as A, useInsightsMicroWidgetStore as j } from "../context/hooks.es.js";
 import E from "../MicroCardTemplate.es.js";
 import { useEffect as I } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { alpha as j, useTheme as v } from "@mui/material/styles";
-import w from "@mui/material/Box";
-import { useInView as z } from "react-intersection-observer";
-var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard: c, onCardClick: u, posthog: o, widthOverrides: m, variant: f, showIcon: h, heightOverrides: a }) => {
-  const { ref: _, inView: n } = z({ threshold: 1 }), C = v(), { cardsCopy: T } = O(), { onEvent: d } = P(), { updateBeat: N, updateOffer: V } = A();
+import { alpha as v, useTheme as w } from "@mui/material/styles";
+import z from "@mui/material/Box";
+import { useInView as G } from "react-intersection-observer";
+var K = 32, ti = ({ ariaLabel: l, beat: i, elevation: g, index: c, isActiveCard: s, onCardClick: u, posthog: o, widthOverrides: m, variant: f, showIcon: h, heightOverrides: a }) => {
+  const { ref: _, inView: n } = G({ threshold: 1 }), C = w(), { cardsCopy: T } = P(), { onEvent: d } = A(), { updateBeat: N, updateOffer: V } = j();
   I(() => {
-    n && (i.has_been_displayed ? d(R(i.template)) : (i.guid.startsWith("OFR") ? V({
+    n && (i.has_been_displayed ? d(W(i.template)) : (i.guid.startsWith("OFR") ? V({
       ...i,
       has_been_displayed: !0
     }) : N({
       ...i,
       has_been_displayed: !0
-    }), d(W(i.template))));
+    }), d(S(i.template))));
   }, [n]), I(() => {
     if (n && i) if (i.template === "MarketingOffer") {
       const e = i;
@@ -34,15 +35,15 @@ var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard:
     } else o?.capture("viewed_insight", {
       beat_guid: i.guid,
       template: i.template,
-      position: s
+      position: c
     });
   }, [
     i,
-    s,
+    c,
     n
   ]);
   const p = () => {
-    if (u && u(i), d(M(i.template)), i.template === "MarketingOffer") {
+    if (u && u(i), d(R(i.template)), i.template === "MarketingOffer") {
       const e = i;
       o?.capture("clicked_messaging_insight", {
         template: i.template,
@@ -54,11 +55,11 @@ var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard:
     } else o?.capture("clicked_insight", {
       beat_guid: i.guid,
       template: i.template,
-      position: s
+      position: c
     });
-  }, y = k(i), t = y === "v2" ? i.insights_payload : void 0;
-  if (y === "error") return /* @__PURE__ */ r(w, {
-    "aria-hidden": !c,
+  }, y = x(i), t = y === "v2" ? i.insights_payload : void 0;
+  if (y === "error") return /* @__PURE__ */ r(z, {
+    "aria-hidden": !s,
     "aria-label": l,
     "aria-roledescription": "slide",
     ref: _,
@@ -68,24 +69,24 @@ var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard:
       minWidth: m ? `${m}px` : "100%",
       my: 1
     },
-    children: /* @__PURE__ */ r(B, { beat: i })
+    children: /* @__PURE__ */ r(M, { beat: i })
   });
   if (t) {
-    const e = t.instance_slot.data_series?.[0]?.logo;
+    const e = k(t.instance_slot.data, "logo");
     return /* @__PURE__ */ r(E, {
       "aria-roledescription": "slide",
       ariaLabel: l,
       description: t.description.html_text,
       elevation: g,
       heightOverrides: a,
-      icon: h && (e ? /* @__PURE__ */ r(x, {
+      icon: h && (e ? /* @__PURE__ */ r(B, {
         logo: e,
-        size: G
-      }) : /* @__PURE__ */ r(S, {
-        bgColor: j(C.palette.primary.main, 0.15),
+        size: K
+      }) : /* @__PURE__ */ r(F, {
+        bgColor: v(C.palette.primary.main, 0.15),
         name: "lightbulb"
       })),
-      isActiveCard: c,
+      isActiveCard: s,
       onCardClick: p,
       onPrimaryAction: p,
       primaryActionText: t.primary_cta?.label,
@@ -101,8 +102,8 @@ var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard:
     description: i?.html_micro_description && i?.html_micro_description.length > 0 ? i.html_micro_description : i.html_description || "",
     elevation: g,
     heightOverrides: a,
-    icon: h && /* @__PURE__ */ r(F, { beat: i }),
-    isActiveCard: c,
+    icon: h && /* @__PURE__ */ r(O, { beat: i }),
+    isActiveCard: s,
     onCardClick: p,
     onPrimaryAction: p,
     primaryActionText: i.micro_call_to_action || T?.micro_card_cta,
@@ -113,7 +114,7 @@ var G = 32, ei = ({ ariaLabel: l, beat: i, elevation: g, index: s, isActiveCard:
   });
 };
 export {
-  ei as InsightCard
+  ti as InsightCard
 };
 
 //# sourceMappingURL=InsightCard.es.js.map

package/dist/microinsights/cards/InsightCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { BeatIcon } from '../beaticons'\nimport BeatMaterialIcon from '../beaticons/BeatMaterialIcon'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\nimport MicroCardTemplate from '../MicroCardTemplate'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its charts.\nimport InsightErrorCard from '../../insights-v2/components/InsightErrorCard'\nimport LogoFromGuid from '../../insights-v2/components/LogoFromGuid'\nimport { resolveInsightRender } from '../../insights-v2/resolveInsightRender'\n\n/** The legacy micro card's icon tile size (BeatMaterialIcon). */\nconst ICON_SIZE = 32\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  const theme = useTheme()\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  const insightRender = resolveInsightRender(beat as Beat)\n  const v2Payload = insightRender === 'v2' ? beat.insights_payload : undefined\n\n  if (insightRender === 'error') {\n    // Keeps the carousel's slot sizing; the error card does not know about it.\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-roledescription=\"slide\"\n        ref={ref}\n        role=\"group\"\n        sx={{\n          height: heightOverrides ? '100%' : 120,\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n          my: 1,\n        }}\n      >\n        <InsightErrorCard beat={beat} />\n      </Box>\n    )\n  }\n\n  if (v2Payload) {\n    // Figma (Micro Widget | Large Transaction) is the legacy micro card's layout fed from the envelope:\n    // the first slot row's logo on the left (merchant, or the category without one), title, description,\n    // and the primary CTA as a link. The logo falls back to the insight glyph when the slot has no row.\n    const rowLogo = v2Payload.instance_slot.data_series?.[0]?.logo\n\n    return (\n      <MicroCardTemplate\n        aria-roledescription=\"slide\"\n        ariaLabel={ariaLabel}\n        description={v2Payload.description.html_text}\n        elevation={elevation}\n        heightOverrides={heightOverrides}\n        icon={\n          showIcon &&\n          (rowLogo ? (\n            <LogoFromGuid logo={rowLogo} size={ICON_SIZE} />\n          ) : (\n            <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name=\"lightbulb\" />\n          ))\n        }\n        isActiveCard={isActiveCard}\n        onCardClick={handleClick}\n        onPrimaryAction={handleClick}\n        primaryActionText={v2Payload.primary_cta?.label}\n        ref={ref}\n        title={v2Payload.title ?? ''}\n        variant={variant}\n        widthOverrides={widthOverrides}\n      />\n    )\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { BeatIcon } from '../beaticons'\nimport BeatMaterialIcon from '../beaticons/BeatMaterialIcon'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\n// Leaf imports, not the `core` barrel: that pulls GlobalStore and every feature store into the\n// micro bundle, and through `core/stores` it reintroduces a circular path this module avoids.\nimport { slot } from '../../core/types/Insights'\nimport type { LogoRef } from '../../core/types/Insights'\nimport MicroCardTemplate from '../MicroCardTemplate'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its charts.\nimport InsightErrorCard from '../../insights-v2/components/InsightErrorCard'\nimport LogoFromGuid from '../../insights-v2/components/LogoFromGuid'\nimport { resolveInsightRender } from '../../insights-v2/resolveInsightRender'\n\n/** The legacy micro card's icon tile size (BeatMaterialIcon). */\nconst ICON_SIZE = 32\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  const theme = useTheme()\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  const insightRender = resolveInsightRender(beat as Beat)\n  const v2Payload = insightRender === 'v2' ? beat.insights_payload : undefined\n\n  if (insightRender === 'error') {\n    // Keeps the carousel's slot sizing; the error card does not know about it.\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-roledescription=\"slide\"\n        ref={ref}\n        role=\"group\"\n        sx={{\n          height: heightOverrides ? '100%' : 120,\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n          my: 1,\n        }}\n      >\n        <InsightErrorCard beat={beat} />\n      </Box>\n    )\n  }\n\n  if (v2Payload) {\n    // Figma (Micro Widget | Large Transaction) is the legacy micro card's layout fed from the envelope:\n    // the slot's logo on the left (merchant, or the category without one), title, description, and the\n    // primary CTA as a link. The logo falls back to the insight glyph when the slot carries none.\n    const rowLogo = slot<LogoRef>(v2Payload.instance_slot.data, 'logo')\n\n    return (\n      <MicroCardTemplate\n        aria-roledescription=\"slide\"\n        ariaLabel={ariaLabel}\n        description={v2Payload.description.html_text}\n        elevation={elevation}\n        heightOverrides={heightOverrides}\n        icon={\n          showIcon &&\n          (rowLogo ? (\n            <LogoFromGuid logo={rowLogo} size={ICON_SIZE} />\n          ) : (\n            <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name=\"lightbulb\" />\n          ))\n        }\n        isActiveCard={isActiveCard}\n        onCardClick={handleClick}\n        onPrimaryAction={handleClick}\n        primaryActionText={v2Payload.primary_cta?.label}\n        ref={ref}\n        title={v2Payload.title ?? ''}\n        variant={variant}\n        widthOverrides={widthOverrides}\n      />\n    )\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":"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"}

package/package.json

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