@mx-cartographer/experiences 9.4.61 → 9.4.63

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.4.63] - 10-07-2026
+
+- **FIXED** - Trends Tabular View child category rows now open the filtered transaction drawer, matching the chart view MEW-4020
+
+## [9.4.62] - 10-07-2026
+
+- **ADDED** - `withdrawal_block` (Highlight Withdrawal) component block and `WithdrawalCard`: the amount (shown with a leading minus unless it is zero), an `"{amount_label} {withdrawal_date}"` date line and a grey balance footer, read from one `instance_slot.data_series` row (`amount`, `amount_label`, `withdrawal_date`, `balance`, `balance_label`). Text arrives localized from the backend; only `amount` and `balance` are formatted. (WEC-1871)
+
 ## [9.4.61] - 10-07-2026
 
 - **ADDED** - `ObservedUpdate` type exported from `GlobalStore` with an optional `staleBeatGuid`, so an in-app action that outdates a beat can tell the host to refetch it over the existing `onStoreUpdate` bridge; `transactions` is now optional on that payload (WEC-1852)

package/dist/core/stores/TrendsStore.d.ts

@@ -7,6 +7,20 @@ export declare class TrendsStore {
     visibleListLength: number;
     constructor(globalStore: GlobalStore);
     setSelectedCategoryData: (data: DetailedCategoryWithTransactions | null) => void;
+    /**
+     * Resolve a category guid — top level or sub-category — to the data the
+     * category details drawer renders.
+     *
+     * `detailedCategoriesWithTransactions` only holds top-level categories, and a
+     * sub-category carries `totalAmount: 0` / `totalMonthlyAmounts: []` so it is
+     * not double counted inside its parent. The drawer reads both fields, so a
+     * sub-category is rebuilt from its own range total and monthly series.
+     *
+     * The tabular view only routes sub-category guids here today; the top-level
+     * branch keeps this a complete resolver for any guid the drawer is given.
+     * @param guid - Guid of the category to resolve
+     */
+    getCategoryWithTransactions: (guid: string) => DetailedCategoryWithTransactions | undefined;
     setSelectedDateRange: (dateRange: DateRange) => void;
     setVisibleListLength: (length: number) => void;
     get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[];

package/dist/core/stores/TrendsStore.es.js

@@ -1,47 +1,60 @@
-import { DATE_FORMATS_INTL as a, formatDate as s } from "../constants/DateFormats.es.js";
-import { buildCategoryDetailsChartData as i, filterAndSortCategoriesWithTransactions as o } from "../utils/TrendsUtil.es.js";
-import { endOfMonth as r } from "date-fns/endOfMonth";
-import { isBefore as n } from "date-fns/isBefore";
-import { subMonths as l } from "date-fns/subMonths";
-import { differenceInCalendarMonths as d } from "date-fns/differenceInCalendarMonths";
-import { makeAutoObservable as g } from "mobx";
-import { addSeconds as c } from "date-fns/addSeconds";
-var R = class {
+import { DATE_FORMATS_INTL as o, formatDate as r } from "../constants/DateFormats.es.js";
+import { findDetailedSubCategory as d, getDetailedCategoryTransactions as c } from "../utils/CategoryUtil.es.js";
+import { buildCategoryDetailsChartData as h, filterAndSortCategoriesWithTransactions as D } from "../utils/TrendsUtil.es.js";
+import { endOfMonth as i } from "date-fns/endOfMonth";
+import { isBefore as u } from "date-fns/isBefore";
+import { subMonths as m } from "date-fns/subMonths";
+import { differenceInCalendarMonths as C } from "date-fns/differenceInCalendarMonths";
+import { makeAutoObservable as S } from "mobx";
+import { addSeconds as b } from "date-fns/addSeconds";
+var W = class {
   globalStore;
   selectedCategoryData = null;
   selectedDateRange;
   visibleListLength = 5;
-  constructor(e) {
-    this.globalStore = e, this.selectedDateRange = {
-      start: c(r(l(/* @__PURE__ */ new Date(), 6)), 1),
-      end: r(/* @__PURE__ */ new Date())
-    }, g(this);
-  }
-  setSelectedCategoryData = (e) => {
-    this.selectedCategoryData = e;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: b(i(m(/* @__PURE__ */ new Date(), 6)), 1),
+      end: i(/* @__PURE__ */ new Date())
+    }, S(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  getCategoryWithTransactions = (t) => {
+    const { detailedCategories: e, detailedCategoriesWithTransactions: n } = this.globalStore.categoryStore, s = n.find((g) => g.guid === t);
+    if (s) return s;
+    const a = d(e, t);
+    if (!a) return;
+    const [l] = c([{
+      ...a,
+      totalAmount: a.currentAmount,
+      totalMonthlyAmounts: a.monthlyAmounts
+    }], this.globalStore.transactionStore.sortedTransactions);
+    return l;
   };
-  setSelectedDateRange = (e) => {
-    this.selectedDateRange = e;
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
   };
-  setVisibleListLength = (e) => {
-    this.visibleListLength = e;
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
   };
   get sortedDetailedCategoriesWithTransactions() {
-    return o(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
+    return D(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
   }
   get isTransactionStoreIdle() {
-    const { isTransactionDataLoaded: e, transactionsLoading: t } = this.globalStore.transactionStore;
-    return e && !t;
+    const { isTransactionDataLoaded: t, transactionsLoading: e } = this.globalStore.transactionStore;
+    return t && !e;
   }
   get isSelectedRangeLoaded() {
-    const { isTransactionDataLoaded: e, cachedStartDate: t } = this.globalStore.transactionStore;
-    return e && !n(this.selectedDateRange.start, t);
+    const { isTransactionDataLoaded: t, cachedStartDate: e } = this.globalStore.transactionStore;
+    return t && !u(this.selectedDateRange.start, e);
   }
   get selectedDateRangeMonthCount() {
-    return d(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+    return C(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
   }
   get selectedDateRangeMonthRange() {
-    return `${s(this.selectedDateRange.start, a.MONTH_LONG)} - ${s(this.selectedDateRange.end, a.MONTH_LONG)}`;
+    return `${r(this.selectedDateRange.start, o.MONTH_LONG)} - ${r(this.selectedDateRange.end, o.MONTH_LONG)}`;
   }
   get visibleCategories() {
     return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
@@ -50,11 +63,11 @@ var R = class {
     return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
   }
   get categoryDetailsChartData() {
-    return i(this.selectedCategoryData, this.selectedDateRangeMonthCount);
+    return h(this.selectedCategoryData, this.selectedDateRangeMonthCount);
   }
 };
 export {
-  R as TrendsStore
+  W as TrendsStore
 };
 
 //# sourceMappingURL=TrendsStore.es.js.map

package/dist/core/stores/TrendsStore.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get isTransactionStoreIdle(): boolean {\n    const { isTransactionDataLoaded, transactionsLoading } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !transactionsLoading\n  }\n\n  get isSelectedRangeLoaded(): boolean {\n    const { isTransactionDataLoaded, cachedStartDate } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !isBefore(this.selectedDateRange.start, cachedStartDate)\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,yBAAkC;AACpC,UAAM,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,KAAK,YAAY;AAC1E,WAAO,KAA2B,CAAC;AAAA,EACrC;AAAA,EAEA,IAAI,wBAAiC;AACnC,UAAM,EAAE,yBAAA,GAAyB,iBAAA,EAAA,IAAoB,KAAK,YAAY;AACtE,WAAO,KAA2B,CAAC,EAAS,KAAK,kBAAkB,OAAO,CAAe;AAAA,EAC3F;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}
+{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\nimport { findDetailedSubCategory, getDetailedCategoryTransactions } from '../utils/CategoryUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  /**\n   * Resolve a category guid — top level or sub-category — to the data the\n   * category details drawer renders.\n   *\n   * `detailedCategoriesWithTransactions` only holds top-level categories, and a\n   * sub-category carries `totalAmount: 0` / `totalMonthlyAmounts: []` so it is\n   * not double counted inside its parent. The drawer reads both fields, so a\n   * sub-category is rebuilt from its own range total and monthly series.\n   *\n   * The tabular view only routes sub-category guids here today; the top-level\n   * branch keeps this a complete resolver for any guid the drawer is given.\n   * @param guid - Guid of the category to resolve\n   */\n  getCategoryWithTransactions = (guid: string): DetailedCategoryWithTransactions | undefined => {\n    const { detailedCategories, detailedCategoriesWithTransactions } =\n      this.globalStore.categoryStore\n\n    const topLevelCategory = detailedCategoriesWithTransactions.find(\n      (category) => category.guid === guid,\n    )\n    if (topLevelCategory) return topLevelCategory\n\n    const subCategory = findDetailedSubCategory(detailedCategories, guid)\n    if (!subCategory) return undefined\n\n    const [subCategoryWithTransactions] = getDetailedCategoryTransactions(\n      [\n        {\n          ...subCategory,\n          totalAmount: subCategory.currentAmount,\n          totalMonthlyAmounts: subCategory.monthlyAmounts,\n        },\n      ],\n      this.globalStore.transactionStore.sortedTransactions,\n    )\n\n    return subCategoryWithTransactions\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get isTransactionStoreIdle(): boolean {\n    const { isTransactionDataLoaded, transactionsLoading } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !transactionsLoading\n  }\n\n  get isSelectedRangeLoaded(): boolean {\n    const { isTransactionDataLoaded, cachedStartDate } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !isBefore(this.selectedDateRange.start, cachedStartDate)\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAeA,8BAAA,CAA+B,MAA+D;AAC5F,UAAM,EAAE,oBAAA,GAAoB,oCAAA,EAAA,IAC1B,KAAK,YAAY,eAEb,IAAmB,EAAmC,KAAA,CACzD,MAAa,EAAS,SAAS,CAClC;AACA,QAAI,EAAkB,QAAO;AAE7B,UAAM,IAAc,EAAwB,GAAoB,CAAI;AACpE,QAAI,CAAC,EAAa;AAElB,UAAM,CAAC,CAAA,IAA+B,EACpC,CACE;AAAA,MACE,GAAG;AAAA,MACH,aAAa,EAAY;AAAA,MACzB,qBAAqB,EAAY;AAAA,IACnC,CACF,GACA,KAAK,YAAY,iBAAiB,kBACpC;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,yBAAkC;AACpC,UAAM,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,KAAK,YAAY;AAC1E,WAAO,KAA2B,CAAC;AAAA,EACrC;AAAA,EAEA,IAAI,wBAAiC;AACnC,UAAM,EAAE,yBAAA,GAAyB,iBAAA,EAAA,IAAoB,KAAK,YAAY;AACtE,WAAO,KAA2B,CAAC,EAAS,KAAK,kBAAkB,OAAO,CAAe;AAAA,EAC3F;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}

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

@@ -191,6 +191,7 @@ export declare const BlockType: {
     readonly DoubleProgressBarBlock: "double_progress_bar_block";
     readonly StepChartBlock: "step_chart_block";
     readonly SVGImageBlock: "svg_image_block";
+    readonly WithdrawalBlock: "withdrawal_block";
 };
 export type BlockType = (typeof BlockType)[keyof typeof BlockType];
 /**

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

@@ -0,0 +1,17 @@
+import { BlockProps } from '../../types';
+/** The Withdrawal row on `instance_slot.data_series`. */
+export interface WithdrawalRow {
+    amount?: number;
+    amount_label?: string;
+    balance?: number;
+    balance_label?: string;
+    withdrawal_date?: string;
+}
+/**
+ * The `withdrawal_block` (Highlight Withdrawal), reading one row on
+ * `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.
+ */
+declare const WithdrawalBlock: ({ payload }: BlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export default WithdrawalBlock;

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

@@ -0,0 +1,21 @@
+import l 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 : [];
+  return !Number.isFinite(a?.amount) || !Number.isFinite(a?.balance) ? null : /* @__PURE__ */ t(n, {
+    sx: { px: 16 },
+    children: /* @__PURE__ */ t(l, {
+      amount: a.amount,
+      amountLabel: a.amount_label,
+      balance: a.balance,
+      balanceLabel: a.balance_label,
+      withdrawalDate: a.withdrawal_date
+    })
+  });
+};
+export {
+  s as default
+};
+
+//# sourceMappingURL=WithdrawalBlock.es.js.map

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

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

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

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

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

@@ -3,3 +3,4 @@ export * from './AccountSwitchBlock';
 export * from './BudgetBlock';
 export * from './SaveExtraBlock';
 export * from './TransactionBlock';
+export * from './WithdrawalBlock';

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

@@ -0,0 +1,25 @@
+import { SxProps } from '@mui/material/styles';
+interface WithdrawalCardProps {
+    /** Withdrawn amount as a plain number (e.g. `100`); the card adds the minus sign. */
+    amount: number;
+    /** Pre-localized lead-in for the date line (e.g. "Withdrawn on"). */
+    amountLabel?: string;
+    /** Account balance after the withdrawal, shown in the grey footer row. */
+    balance: number;
+    /** Pre-localized footer label for the balance (e.g. "Balance"). */
+    balanceLabel?: string;
+    /** Pre-localized withdrawal date (e.g. "October 5, 2026"). */
+    withdrawalDate?: string;
+    sx?: SxProps;
+}
+/**
+ * A centered withdrawal highlight: the amount as a headline with a date line beneath it
+ * ("{amountLabel} {withdrawalDate}"), over a grey footer row showing the balance. All text arrives
+ * localized from the backend; only the two numbers are formatted here (the amount gets a leading
+ * minus unless it is zero). The date line is hidden when both `amountLabel` and `withdrawalDate`
+ * are empty.
+ *
+ * Figma: Withdrawal component block (Highlight Withdrawal). Scope is the Content section only.
+ */
+declare const WithdrawalCard: ({ amount, amountLabel, balance, balanceLabel, withdrawalDate, sx, }: WithdrawalCardProps) => import("react/jsx-runtime").JSX.Element;
+export default WithdrawalCard;

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

@@ -0,0 +1,63 @@
+import { formatCurrency as n } from "../../core/utils/NumberFormatting.es.js";
+import t from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import m from "@mui/material/Divider";
+var x = (o) => o === 0 ? n(0, "0,0.00") : `-${n(Math.abs(o), "0,0.00")}`, y = ({ amount: o, amountLabel: l, balance: s, balanceLabel: d, withdrawalDate: a, sx: p }) => {
+  const c = a ? [l, a].filter(Boolean).join(" ") : "";
+  return /* @__PURE__ */ i(t, {
+    sx: {
+      border: "1px solid",
+      borderColor: "divider",
+      borderRadius: "4px",
+      overflow: "hidden",
+      width: "100%",
+      ...p
+    },
+    children: [
+      /* @__PURE__ */ i(t, {
+        sx: {
+          alignItems: "center",
+          gap: 4,
+          px: 16,
+          py: 20
+        },
+        children: [/* @__PURE__ */ r(e, {
+          bold: !0,
+          variant: "h1",
+          children: x(o)
+        }), c && /* @__PURE__ */ r(e, {
+          color: "text.secondary",
+          variant: "caption",
+          children: c
+        })]
+      }),
+      /* @__PURE__ */ r(m, {}),
+      /* @__PURE__ */ i(t, {
+        sx: {
+          alignItems: "center",
+          bgcolor: "background.default",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          minHeight: 40,
+          px: 16,
+          py: 2
+        },
+        children: [d && /* @__PURE__ */ r(e, {
+          color: "text.secondary",
+          variant: "caption",
+          children: d
+        }), /* @__PURE__ */ r(e, {
+          bold: !0,
+          variant: "body2",
+          children: n(s, "0,0.00")
+        })]
+      })
+    ]
+  });
+};
+export {
+  y as default
+};
+
+//# sourceMappingURL=WithdrawalCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithdrawalCard.es.js","names":[],"sources":["../../../src/insights-v2/components/WithdrawalCard.tsx"],"sourcesContent":["import Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\n// A withdrawal is a debit, so a non-zero amount is shown with a leading minus (\"-$100.00\"); zero is\n// shown unsigned (\"$0.00\"). The sign comes from the magnitude, so an amount that already arrives\n// negative does not render a double minus.\nconst formatWithdrawalAmount = (amount: number) =>\n  amount === 0 ? formatCurrency(0, '0,0.00') : `-${formatCurrency(Math.abs(amount), '0,0.00')}`\n\ninterface WithdrawalCardProps {\n  /** Withdrawn amount as a plain number (e.g. `100`); the card adds the minus sign. */\n  amount: number\n  /** Pre-localized lead-in for the date line (e.g. \"Withdrawn on\"). */\n  amountLabel?: string\n  /** Account balance after the withdrawal, shown in the grey footer row. */\n  balance: number\n  /** Pre-localized footer label for the balance (e.g. \"Balance\"). */\n  balanceLabel?: string\n  /** Pre-localized withdrawal date (e.g. \"October 5, 2026\"). */\n  withdrawalDate?: string\n  sx?: SxProps\n}\n\n/**\n * A centered withdrawal highlight: the amount as a headline with a date line beneath it\n * (\"{amountLabel} {withdrawalDate}\"), over a grey footer row showing the balance. All text arrives\n * localized from the backend; only the two numbers are formatted here (the amount gets a leading\n * minus unless it is zero). The date line is hidden when both `amountLabel` and `withdrawalDate`\n * are empty.\n *\n * Figma: Withdrawal component block (Highlight Withdrawal). Scope is the Content section only.\n */\nconst WithdrawalCard = ({\n  amount,\n  amountLabel,\n  balance,\n  balanceLabel,\n  withdrawalDate,\n  sx,\n}: WithdrawalCardProps) => {\n  const dateLine = withdrawalDate ? [amountLabel, withdrawalDate].filter(Boolean).join(' ') : ''\n\n  return (\n    <Stack\n      sx={{\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: '4px',\n        overflow: 'hidden',\n        width: '100%',\n        ...sx,\n      }}\n    >\n      <Stack sx={{ alignItems: 'center', gap: 4, px: 16, py: 20 }}>\n        <Text bold={true} variant=\"h1\">\n          {formatWithdrawalAmount(amount)}\n        </Text>\n        {dateLine && (\n          <Text color=\"text.secondary\" variant=\"caption\">\n            {dateLine}\n          </Text>\n        )}\n      </Stack>\n      <Divider />\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.default',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          minHeight: 40,\n          px: 16,\n          py: 2,\n        }}\n      >\n        {balanceLabel && (\n          <Text color=\"text.secondary\" variant=\"caption\">\n            {balanceLabel}\n          </Text>\n        )}\n        <Text bold={true} variant=\"body2\">\n          {formatCurrency(balance, '0,0.00')}\n        </Text>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default WithdrawalCard\n"],"mappings":";;;;;AAWA,IAAM,IAAA,CAA0B,MAC9B,MAAW,IAAI,EAAe,GAAG,QAAQ,IAAI,IAAI,EAAe,KAAK,IAAI,CAAM,GAAG,QAAQ,CAAA,IAyBtF,IAAA,CAAkB,EACtB,QAAA,GACA,aAAA,GACA,SAAA,GACA,cAAA,GACA,gBAAA,GACA,IAAA,EAAA,MACyB;AACzB,QAAM,IAAW,IAAiB,CAAC,GAAa,CAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,IAAI;AAE5F,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,UAAU;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IARF,UAAA;AAAA,MAUE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,KAAK;AAAA,UAAG,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,QAA1D,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAuB,CAAM;AAAA,QAC1B,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,SAAQ;AAAA,UAClC,UAAA;AAAA,QACG,CAAA,CAEH;AAAA;MACP,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,MACV,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,SAAQ;AAAA,UAClC,UAAA;AAAA,QACG,CAAA,GAER,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAe,GAAS,QAAQ;AAAA,QAC7B,CAAA,CACD;AAAA;IACF;AAAA;AAEX"}

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

@@ -31,4 +31,5 @@ export { default as SavingsOpportunityCard } from './components/SavingsOpportuni
 export { default as StatusPill } from './components/StatusPill';
 export { default as SubscriptionHeroCard } from './components/SubscriptionHeroCard';
 export { default as TransferLogoCard } from './components/TransferLogoCard';
+export { default as WithdrawalCard } from './components/WithdrawalCard';
 export { default as UpcomingBillCard, type UpcomingBillCardProps, type UpcomingBillDay, } from './components/UpcomingBillCard';

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

@@ -10,84 +10,88 @@ import h from "./components/CompactInsightCard.es.js";
 import S from "./components/InsightErrorCard.es.js";
 import { BAR_CHART_VARIANTS as b, barChartVariant as D, buildChartData as L, buildDataSeries as T } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as v } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as H } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import R from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
-import O from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
-import w from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
+import { DoubleBarChartBlock as E } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
+import P from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import M from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import V from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import y from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import G from "./components/TransferLogoCard.es.js";
-import N from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
-import { BudgetBlock as j } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import z from "./components/SaveAnExtraCard.es.js";
-import K from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import W from "./components/InsightTransactionRow.es.js";
+import _ from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
+import { BudgetBlock as U } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import q from "./components/SaveAnExtraCard.es.js";
+import J from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import Q from "./components/InsightTransactionRow.es.js";
 import Y from "./components/TransactionListCard.es.js";
 import { TransactionBlock as $, TransactionBlockVariant as rr } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import { SVGImageBlock as mr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import ir from "./components/AccountHeroCard.es.js";
-import pr from "./components/AmountPill.es.js";
-import er from "./components/DesignateEmergencySavingsCard.es.js";
-import { FeedbackBar as sr } from "./components/FeedbackBar.es.js";
-import lr from "./components/FeedbackDialog.es.js";
-import { DismissInsightDialog as gr } from "./components/DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as Br } from "./components/HiddenConfirmationCard.es.js";
-import { ErrorCard as hr } from "./components/ErrorCard.es.js";
-import { LoadingCard as Sr } from "./components/LoadingCard.es.js";
-import { ObsolesceBanner as br } from "./components/ObsolesceBanner.es.js";
-import Lr from "./components/BaseLayout.es.js";
-import Ir from "./components/StatusMessageCard.es.js";
-import Er from "./components/LogoTile.es.js";
-import Pr from "./components/LogoClusterCard.es.js";
-import Mr from "./components/MerchantHighlightCard.es.js";
-import Vr from "./components/P2PLogoStack.es.js";
-import xr from "./components/SavingsOpportunityCard.es.js";
-import Fr from "./components/SubscriptionHeroCard.es.js";
-import _r from "./components/UpcomingBillCard.es.js";
+import mr from "./components/WithdrawalCard.es.js";
+import ir from "./blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import { SVGImageBlock as pr } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import er from "./components/AccountHeroCard.es.js";
+import sr from "./components/AmountPill.es.js";
+import lr from "./components/DesignateEmergencySavingsCard.es.js";
+import { FeedbackBar as gr } from "./components/FeedbackBar.es.js";
+import Br from "./components/FeedbackDialog.es.js";
+import { DismissInsightDialog as hr } from "./components/DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as Sr } from "./components/HiddenConfirmationCard.es.js";
+import { ErrorCard as br } from "./components/ErrorCard.es.js";
+import { LoadingCard as Lr } from "./components/LoadingCard.es.js";
+import { ObsolesceBanner as Ir } from "./components/ObsolesceBanner.es.js";
+import wr from "./components/BaseLayout.es.js";
+import Hr from "./components/StatusMessageCard.es.js";
+import Rr from "./components/LogoTile.es.js";
+import Or from "./components/LogoClusterCard.es.js";
+import xr from "./components/MerchantHighlightCard.es.js";
+import Fr from "./components/P2PLogoStack.es.js";
+import Wr from "./components/SavingsOpportunityCard.es.js";
+import Nr from "./components/SubscriptionHeroCard.es.js";
+import jr from "./components/UpcomingBillCard.es.js";
 export {
   y as AccountBlock,
-  ir as AccountHeroCard,
-  N as AccountSwitchBlock,
-  pr as AmountPill,
+  er as AccountHeroCard,
+  _ as AccountSwitchBlock,
+  sr as AmountPill,
   b as BAR_CHART_VARIANTS,
   f as BadgedTile,
   v as BarchartBlock,
-  Lr as BaseLayout,
-  j as BudgetBlock,
+  wr as BaseLayout,
+  U as BudgetBlock,
   h as CompactInsightCard,
-  er as DesignateEmergencySavingsCard,
-  gr as DismissInsightDialog,
-  O as DonutChartBlock,
-  H as DoubleBarChartBlock,
-  w as DoubleProgressBarBlock,
-  hr as ErrorCard,
-  sr as FeedbackBar,
-  lr as FeedbackDialog,
-  Br as HiddenConfirmationCard,
+  lr as DesignateEmergencySavingsCard,
+  hr as DismissInsightDialog,
+  M as DonutChartBlock,
+  E as DoubleBarChartBlock,
+  V as DoubleProgressBarBlock,
+  br as ErrorCard,
+  gr as FeedbackBar,
+  Br as FeedbackDialog,
+  Sr as HiddenConfirmationCard,
   S as InsightErrorCard,
   c as InsightOptionsMenu,
-  W as InsightTransactionRow,
-  Sr as LoadingCard,
-  Pr as LogoClusterCard,
+  Q as InsightTransactionRow,
+  Lr as LoadingCard,
+  Or as LogoClusterCard,
   d as LogoFromGuid,
-  Er as LogoTile,
-  Mr as MerchantHighlightCard,
-  br as ObsolesceBanner,
+  Rr as LogoTile,
+  xr as MerchantHighlightCard,
+  Ir as ObsolesceBanner,
   n as OverflowMenu,
-  Vr as P2PLogoStack,
-  mr as SVGImageBlock,
-  z as SaveAnExtraCard,
-  K as SaveExtraBlock,
-  xr as SavingsOpportunityCard,
+  Fr as P2PLogoStack,
+  pr as SVGImageBlock,
+  q as SaveAnExtraCard,
+  J as SaveExtraBlock,
+  Wr as SavingsOpportunityCard,
   B as StatusBadge,
-  Ir as StatusMessageCard,
+  Hr as StatusMessageCard,
   o as StatusPill,
-  R as StepChartBlock,
-  Fr as SubscriptionHeroCard,
+  P as StepChartBlock,
+  Nr as SubscriptionHeroCard,
   $ as TransactionBlock,
   rr as TransactionBlockVariant,
   Y as TransactionListCard,
   G as TransferLogoCard,
-  _r as UpcomingBillCard,
+  jr as UpcomingBillCard,
+  ir as WithdrawalBlock,
+  mr as WithdrawalCard,
   D as barChartVariant,
   L as buildChartData,
   T as buildDataSeries,

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

@@ -10,42 +10,43 @@ import _ from "../blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.e
 import { BudgetBlock as k } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
 import s from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
 import { TransactionBlock as B } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import C from "../blocks/ImageBlocks/ImageBlock.es.js";
-import { SVGImageBlock as f } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import { PlaceholderActionBlock as u } from "../actionBlocks/PlaceholderActionBlock.es.js";
-import { getMakeTransferDrawerTitle as T } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
-import { MakeTransferActionBlockLayer as b } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
-import { getDrawerHeaderTitle as A } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
-import { TransactionDetailsBlock as O } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
-import { useTransactionDetailsPrepare as h } from "../actionBlocks/TransactionDetailsBlock/useTransactionDetailsPrepare.es.js";
+import C from "../blocks/ComponentBlocks/WithdrawalBlock/WithdrawalBlock.es.js";
+import f from "../blocks/ImageBlocks/ImageBlock.es.js";
+import { SVGImageBlock as u } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import { PlaceholderActionBlock as T } from "../actionBlocks/PlaceholderActionBlock.es.js";
+import { getMakeTransferDrawerTitle as b } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
+import { MakeTransferActionBlockLayer as A } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
+import { getDrawerHeaderTitle as O } from "../actionBlocks/TransactionHistoryBlock/utils.es.js";
+import { TransactionDetailsBlock as h } from "../actionBlocks/TransactionDetailsBlock/TransactionDetailsBlock.es.js";
+import { useTransactionDetailsPrepare as d } from "../actionBlocks/TransactionDetailsBlock/useTransactionDetailsPrepare.es.js";
 import { TransactionHistoryBlock as L } from "../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js";
 var t = (e) => {
 }, N = /* @__PURE__ */ new Set([
   "",
   "null",
   "undefined"
-]), Y = (e) => {
+]), j = (e) => {
   const r = e?.trim().toLowerCase();
   return !!r && !N.has(r);
-}, j = {
+}, J = {
   [o.PLACEHOLDER_ACTION_BLOCK]: {
-    Component: u,
+    Component: T,
     usePrepare: t,
     title: () => "Action Block Layer Drilldown"
   },
   [o.MAKE_TRANSFER_ACTION_BLOCK]: {
-    Component: b,
+    Component: A,
     usePrepare: t,
-    title: T
+    title: b
   },
   [o.TRANSCATION_HISTORY_ACTION_BLOCK]: {
     Component: L,
     usePrepare: t,
-    title: A
+    title: O
   },
   [o.TRANSACTION_DETAILS_ACTION_BLOCK]: {
-    Component: O,
-    usePrepare: h,
+    Component: h,
+    usePrepare: d,
     title: () => "Transaction Details"
   },
   [o.CONTACT_SUPPORT_ACTION_BLOCK]: {
@@ -53,7 +54,7 @@ var t = (e) => {
     usePrepare: t,
     title: (e, r) => r.help?.request_support ?? ""
   }
-}, J = {
+}, Q = {
   account_block: p,
   account_switch_block: _,
   bar_chart_block: c,
@@ -61,16 +62,17 @@ var t = (e) => {
   donut_chart_block: m,
   double_bar_chart_block: l,
   double_progress_bar_block: n,
-  image_block: C,
+  image_block: f,
   save_extra_block: s,
   step_chart_block: i,
-  svg_image_block: f,
+  svg_image_block: u,
+  withdrawal_block: C,
   transaction_block: B
 };
 export {
-  j as actionBlocks,
-  J as blocks,
-  Y as hasDrawerBlock
+  J as actionBlocks,
+  Q as blocks,
+  j as hasDrawerBlock
 };
 
 //# sourceMappingURL=blocks.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  AccountSwitchBlock,\n  BarchartBlock,\n  BudgetBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n  TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n  TransactionDetailsBlock,\n  useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n  const normalized = block?.trim().toLowerCase()\n  return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  // Resolves the drawer title from the clicked CTA's variant + copy (e.g.\n  // MakeTransfer reads its variant title from layout.ts). Falls back to the CTA label.\n  title?: (variant: string | null | undefined, copy: GlobalCopy) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\n\nexport const actionBlocks = {\n  [actionBlocksKey.PLACEHOLDER_ACTION_BLOCK]: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  [actionBlocksKey.MAKE_TRANSFER_ACTION_BLOCK]: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n  [actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK]: {\n    Component: TransactionHistoryBlock,\n    usePrepare: noop,\n    title: getDrawerHeaderTitle,\n  },\n  [actionBlocksKey.TRANSACTION_DETAILS_ACTION_BLOCK]: {\n    Component: TransactionDetailsBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: () => 'Transaction Details',\n  },\n  // The block renders its own drawer (the help module's RequestSupport) on top of the action\n  // drawer, so the action drawer's title is the CTA label.\n  [actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK]: {\n    Component: ContactSupportActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) => copy.help?.request_support ?? '',\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  account_block: AccountBlock,\n  account_switch_block: AccountSwitchBlock,\n  bar_chart_block: BarchartBlock,\n  budget_block: BudgetBlock,\n  donut_chart_block: DonutChartBlock,\n  double_bar_chart_block: DoubleBarChartBlock,\n  double_progress_bar_block: DoubleProgressBarBlock,\n  image_block: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,IAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAgBa,IAAe;AAAA,EACzB,CAAA,EAAgB,wBAAA,GAA2B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAgB,0BAAA,GAA6B;AAAA,IAC5C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EAGC,CAAA,EAAgB,4BAAA,GAA+B;AAAA,IAC9C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,MAAM,mBAAmB;AAAA,EAC3D;AACF,GAEa,IAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AACrB"}
+{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  AccountSwitchBlock,\n  BarchartBlock,\n  BudgetBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n  WithdrawalBlock,\n  TransactionBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { ContactSupportActionBlock } from '../actionBlocks/ContactSupportActionBlock'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\nimport { TransactionHistoryBlock } from '../actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock'\nimport { getDrawerHeaderTitle } from '../actionBlocks/TransactionHistoryBlock/utils'\nimport {\n  TransactionDetailsBlock,\n  useTransactionDetailsPrepare,\n} from '../actionBlocks/TransactionDetailsBlock'\n// Keys live in ./actionBlocksKey (imported directly by chart blocks/tests too) to avoid a\n// circular import between this module and the chart blocks — see that file for details.\nimport { actionBlocksKey } from './actionBlocksKey'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n  const normalized = block?.trim().toLowerCase()\n  return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  // Resolves the drawer title from the clicked CTA's variant + copy (e.g.\n  // MakeTransfer reads its variant title from layout.ts). Falls back to the CTA label.\n  title?: (variant: string | null | undefined, copy: GlobalCopy) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\n\nexport const actionBlocks = {\n  [actionBlocksKey.PLACEHOLDER_ACTION_BLOCK]: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  [actionBlocksKey.MAKE_TRANSFER_ACTION_BLOCK]: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n  [actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK]: {\n    Component: TransactionHistoryBlock,\n    usePrepare: noop,\n    title: getDrawerHeaderTitle,\n  },\n  [actionBlocksKey.TRANSACTION_DETAILS_ACTION_BLOCK]: {\n    Component: TransactionDetailsBlock,\n    usePrepare: useTransactionDetailsPrepare,\n    title: () => 'Transaction Details',\n  },\n  // The block renders its own drawer (the help module's RequestSupport) on top of the action\n  // drawer, so the action drawer's title is the CTA label.\n  [actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK]: {\n    Component: ContactSupportActionBlock,\n    usePrepare: noop,\n    title: (_variant, copy) => copy.help?.request_support ?? '',\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  account_block: AccountBlock,\n  account_switch_block: AccountSwitchBlock,\n  bar_chart_block: BarchartBlock,\n  budget_block: BudgetBlock,\n  donut_chart_block: DonutChartBlock,\n  double_bar_chart_block: DoubleBarChartBlock,\n  double_progress_bar_block: DoubleProgressBarBlock,\n  image_block: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  step_chart_block: StepChartBlock,\n  svg_image_block: SVGImageBlock,\n  withdrawal_block: WithdrawalBlock,\n  transaction_block: TransactionBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqCA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,IAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAgBa,IAAe;AAAA,EACzB,CAAA,EAAgB,wBAAA,GAA2B;AAAA,IAC1C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACC,CAAA,EAAgB,0BAAA,GAA6B;AAAA,IAC5C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACC,CAAA,EAAgB,gCAAA,GAAmC;AAAA,IAClD,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EAGC,CAAA,EAAgB,4BAAA,GAA+B;AAAA,IAC9C,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,CAAQ,GAAU,MAAS,EAAK,MAAM,mBAAmB;AAAA,EAC3D;AACF,GAEa,IAAS;AAAA,EACpB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB"}