@mx-cartographer/experiences 9.4.12-alpha.al0 → 9.4.12

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

@@ -1,24 +1,41 @@
-import { DrilldownPayload } from '../types';
 import { GlobalStore } from './GlobalStore';
 export type ActionDrawerTrigger = 'primaryCta' | 'secondaryCta' | 'chartBar';
 export interface ActionDrawerState {
     isDrawerOpen: boolean;
     trigger: ActionDrawerTrigger;
-    chartBarIndex: number;
-    tabIndex: number;
     guid: string;
+    /**
+     * Block-specific drilldown data, opaque to the store. Each action block defines
+     * and reads its own shape (via useActionContext<T>()), so adding a block never
+     * widens this envelope. Chart drilldowns put `{ chartBarIndex, tabIndex }` here;
+     * CTAs carry none.
+     */
+    context: unknown;
 }
 export declare const CLOSED_ACTION_DRAWER: ActionDrawerState;
+interface OpenActionDrawerArgs {
+    guid: string;
+    trigger: ActionDrawerTrigger;
+    context?: unknown;
+}
 /**
- * UI state shared across the insights-v2 widget tree. Owns the action drawer
- * so cards, charts, and action blocks coordinate through the store instead of
- * prop drilling.
+ * UI state shared across the insights-v2 widget tree. Owns the action drawer so
+ * cards, charts, and action blocks coordinate through the store instead of prop
+ * drilling. The drawer state is a fixed envelope (isDrawerOpen/guid/trigger) plus
+ * an opaque `context` bag, so per-block drilldown data never leaks into this shape.
  */
 export declare class InsightsV2Store {
     globalStore: GlobalStore;
     actionDrawer: ActionDrawerState;
     constructor(globalStore: GlobalStore);
+    /**
+     * Generic drawer opener — the only opener a new action block needs. Pass the
+     * beat guid, the CTA/source that triggered it, and (optionally) a block-specific
+     * context object the block reads back via useActionContext.
+     */
+    openActionDrawer: ({ guid, trigger, context }: OpenActionDrawerArgs) => void;
+    /** Convenience opener for CTA drawers (no drilldown context). */
     openCtaDrawer: (guid: string, trigger: "primaryCta" | "secondaryCta") => void;
-    openChartDrilldown: (guid: string, { chartBarIndex, tabIndex }: DrilldownPayload) => void;
     closeActionDrawer: () => void;
 }
+export {};

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

@@ -1,33 +1,28 @@
-import { makeAutoObservable as t } from "mobx";
-var i = {
-  chartBarIndex: 0,
-  tabIndex: 0,
+import { makeAutoObservable as a } from "mobx";
+var o = {
   isDrawerOpen: !1,
   trigger: "primaryCta",
-  guid: ""
-}, n = class {
+  guid: "",
+  context: void 0
+}, s = class {
   globalStore;
-  actionDrawer = i;
+  actionDrawer = o;
   constructor(r) {
-    this.globalStore = r, t(this);
+    this.globalStore = r, a(this);
   }
-  openCtaDrawer = (r, a) => {
+  openActionDrawer = ({ guid: r, trigger: e, context: t }) => {
     this.actionDrawer = {
-      chartBarIndex: 0,
-      tabIndex: 0,
       isDrawerOpen: !0,
-      trigger: a,
-      guid: r
+      trigger: e,
+      guid: r,
+      context: t
     };
   };
-  openChartDrilldown = (r, { chartBarIndex: a, tabIndex: e }) => {
-    this.actionDrawer = {
-      chartBarIndex: a,
-      tabIndex: e ?? 0,
-      isDrawerOpen: !0,
-      trigger: "chartBar",
-      guid: r
-    };
+  openCtaDrawer = (r, e) => {
+    this.openActionDrawer({
+      guid: r,
+      trigger: e
+    });
   };
   closeActionDrawer = () => {
     this.actionDrawer = {
@@ -38,8 +33,8 @@ var i = {
   };
 };
 export {
-  i as CLOSED_ACTION_DRAWER,
-  n as InsightsV2Store
+  o as CLOSED_ACTION_DRAWER,
+  s as InsightsV2Store
 };
 
 //# sourceMappingURL=InsightsV2Store.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InsightsV2Store.es.js","names":[],"sources":["../../../src/core/stores/InsightsV2Store.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\n\nimport type { DrilldownPayload } from '../types'\n\nimport type { GlobalStore } from './GlobalStore'\n\nexport type ActionDrawerTrigger = 'primaryCta' | 'secondaryCta' | 'chartBar'\n\nexport interface ActionDrawerState {\n  isDrawerOpen: boolean\n  trigger: ActionDrawerTrigger\n  chartBarIndex: number\n  tabIndex: number\n  guid: string\n}\n\nexport const CLOSED_ACTION_DRAWER: ActionDrawerState = {\n  chartBarIndex: 0,\n  tabIndex: 0,\n  isDrawerOpen: false,\n  trigger: 'primaryCta',\n  guid: '',\n}\n\n/**\n * UI state shared across the insights-v2 widget tree. Owns the action drawer\n * so cards, charts, and action blocks coordinate through the store instead of\n * prop drilling.\n */\nexport class InsightsV2Store {\n  globalStore: GlobalStore\n\n  actionDrawer: ActionDrawerState = CLOSED_ACTION_DRAWER\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  openCtaDrawer = (guid: string, trigger: 'primaryCta' | 'secondaryCta') => {\n    this.actionDrawer = {\n      chartBarIndex: 0,\n      tabIndex: 0,\n      isDrawerOpen: true,\n      trigger,\n      guid,\n    }\n  }\n\n  openChartDrilldown = (guid: string, { chartBarIndex, tabIndex }: DrilldownPayload) => {\n    this.actionDrawer = {\n      chartBarIndex,\n      tabIndex: tabIndex ?? 0,\n      isDrawerOpen: true,\n      trigger: 'chartBar',\n      guid,\n    }\n  }\n\n  closeActionDrawer = () => {\n    // Preserve `trigger` so the drawer keeps its variant-specific title/content\n    // through the slide-out animation (ActionBlockLayer stays mounted while\n    // closing). Only flip isDrawerOpen off and clear the beat guid.\n    this.actionDrawer = { ...this.actionDrawer, isDrawerOpen: false, guid: '' }\n  }\n}\n"],"mappings":";AAgBA,IAAa,IAA0C;AAAA,EACrD,eAAe;AAAA,EACf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AACR,GAOa,IAAb,MAA6B;AAAA,EAC3B;AAAA,EAEA,eAAkC;AAAA,EAElC,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,gBAAA,CAAiB,GAAc,MAA2C;AACxE,SAAK,eAAe;AAAA,MAClB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,cAAc;AAAA,MACd,SAAA;AAAA,MACA,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,qBAAA,CAAsB,GAAc,EAAE,eAAA,GAAe,UAAA,EAAA,MAAiC;AACpF,SAAK,eAAe;AAAA,MAClB,eAAA;AAAA,MACA,UAAU,KAAY;AAAA,MACtB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,MAAA;AAAA,IACF;AAAA,EACF;AAAA,EAEA,oBAAA,MAA0B;AAIxB,SAAK,eAAe;AAAA,MAAE,GAAG,KAAK;AAAA,MAAc,cAAc;AAAA,MAAO,MAAM;AAAA,IAAG;AAAA,EAC5E;AACF"}
+{"version":3,"file":"InsightsV2Store.es.js","names":[],"sources":["../../../src/core/stores/InsightsV2Store.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\n\nimport type { GlobalStore } from './GlobalStore'\n\nexport type ActionDrawerTrigger = 'primaryCta' | 'secondaryCta' | 'chartBar'\n\nexport interface ActionDrawerState {\n  isDrawerOpen: boolean\n  trigger: ActionDrawerTrigger\n  guid: string\n  /**\n   * Block-specific drilldown data, opaque to the store. Each action block defines\n   * and reads its own shape (via useActionContext<T>()), so adding a block never\n   * widens this envelope. Chart drilldowns put `{ chartBarIndex, tabIndex }` here;\n   * CTAs carry none.\n   */\n  context: unknown\n}\n\nexport const CLOSED_ACTION_DRAWER: ActionDrawerState = {\n  isDrawerOpen: false,\n  trigger: 'primaryCta',\n  guid: '',\n  context: undefined,\n}\n\ninterface OpenActionDrawerArgs {\n  guid: string\n  trigger: ActionDrawerTrigger\n  context?: unknown\n}\n\n/**\n * UI state shared across the insights-v2 widget tree. Owns the action drawer so\n * cards, charts, and action blocks coordinate through the store instead of prop\n * drilling. The drawer state is a fixed envelope (isDrawerOpen/guid/trigger) plus\n * an opaque `context` bag, so per-block drilldown data never leaks into this shape.\n */\nexport class InsightsV2Store {\n  globalStore: GlobalStore\n\n  actionDrawer: ActionDrawerState = CLOSED_ACTION_DRAWER\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n\n    makeAutoObservable(this)\n  }\n\n  /**\n   * Generic drawer opener — the only opener a new action block needs. Pass the\n   * beat guid, the CTA/source that triggered it, and (optionally) a block-specific\n   * context object the block reads back via useActionContext.\n   */\n  openActionDrawer = ({ guid, trigger, context }: OpenActionDrawerArgs) => {\n    this.actionDrawer = { isDrawerOpen: true, trigger, guid, context }\n  }\n\n  /** Convenience opener for CTA drawers (no drilldown context). */\n  openCtaDrawer = (guid: string, trigger: 'primaryCta' | 'secondaryCta') => {\n    this.openActionDrawer({ guid, trigger })\n  }\n\n  closeActionDrawer = () => {\n    // Preserve `trigger` + `context` so the drawer keeps its variant-specific\n    // title/content through the slide-out animation (ActionBlockLayer stays\n    // mounted while closing). Only flip isDrawerOpen off and clear the beat guid.\n    this.actionDrawer = { ...this.actionDrawer, isDrawerOpen: false, guid: '' }\n  }\n}\n"],"mappings":";AAmBA,IAAa,IAA0C;AAAA,EACrD,cAAc;AAAA,EACd,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX,GAca,IAAb,MAA6B;AAAA,EAC3B;AAAA,EAEA,eAAkC;AAAA,EAElC,YAAY,GAA0B;AACpC,SAAK,cAAc,GAEnB,EAAmB,IAAI;AAAA,EACzB;AAAA,EAOA,mBAAA,CAAoB,EAAE,MAAA,GAAM,SAAA,GAAS,SAAA,EAAA,MAAoC;AACvE,SAAK,eAAe;AAAA,MAAE,cAAc;AAAA,MAAM,SAAA;AAAA,MAAS,MAAA;AAAA,MAAM,SAAA;AAAA,IAAQ;AAAA,EACnE;AAAA,EAGA,gBAAA,CAAiB,GAAc,MAA2C;AACxE,SAAK,iBAAiB;AAAA,MAAE,MAAA;AAAA,MAAM,SAAA;AAAA,IAAQ,CAAC;AAAA,EACzC;AAAA,EAEA,oBAAA,MAA0B;AAIxB,SAAK,eAAe;AAAA,MAAE,GAAG,KAAK;AAAA,MAAc,cAAc;AAAA,MAAO,MAAM;AAAA,IAAG;AAAA,EAC5E;AACF"}

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlock.d.ts

@@ -1,27 +1,4 @@
-import { variants } from './layout';
-export { variants };
-interface CopyContent {
-    header_content?: string;
-    description?: string;
-    body_content?: string;
-    body_description?: string;
-    available_text?: string;
-    total_remaining_text?: string;
-    increment_aria_label?: string;
-    decrement_aria_label?: string;
-    expenses_text?: string;
-    available_balances_text?: string;
-    average_monthly_spend_text?: string;
-    your_available_balances_text?: string;
-}
-interface MakeTransferActionBlockProps {
-    date?: string;
-    variant: (typeof variants)[keyof typeof variants];
-    svgDateContent?: string;
-    availableBalances?: number;
-    copy: CopyContent;
-    averageMonthlySpend?: number;
-    /** SAVE_AN_EXTRA_100: total remaining from the payload; falls back to available − expenses. */
-    totalRemaining?: number;
-}
-export declare const MakeTransferActionBlock: ({ variant, svgDateContent, date, copy, availableBalances, averageMonthlySpend, totalRemaining, }: MakeTransferActionBlockProps) => import("react/jsx-runtime").JSX.Element;
+import { MakeTransferVariant, MakeTransferVariantProps } from './layout';
+export declare const MakeTransferActionBlock: ({ variant, slotData, copy, }: MakeTransferVariantProps & {
+    variant: MakeTransferVariant;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,228 +1,275 @@
-import { buildDynamicCopy as A } from "../../../core/utils/Localization.es.js";
-import { formatCurrency as l } from "../../../core/utils/NumberFormatting.es.js";
-import { BalanceStepper as C } from "./BalanceStepper.es.js";
-import I from "./SaveEnoughToLiveOnBottomSection.es.js";
-import { getMakeTransferLayout as y, variants as T } from "./layout.es.js";
-import x from "react";
-import { Text as e } from "@mxenabled/mxui";
-import { Icon as L } from "@mxenabled/mx-icons";
-import { Fragment as k, jsx as t, jsxs as r } from "react/jsx-runtime";
-import { Card as W, Divider as j, List as D, ListItem as E, Stack as n } from "@mui/material";
-var P = ({ variant: p = T.SAVE_ENOUGH_TO_LIVE_ON, svgDateContent: m, date: h, copy: i, availableBalances: c, averageMonthlySpend: o, totalRemaining: g }) => {
-  const a = y(p), { monthsTable: _, deltaAmount: u } = a, [f, d] = x.useState(a.initialAmount ?? o ?? 0);
-  return x.useEffect(() => {
-    a.initialAmount == null && o != null && d(o);
-  }, [o, a.initialAmount]), /* @__PURE__ */ r(k, { children: [
-    /* @__PURE__ */ r(n, {
+import { buildDynamicCopy as y } from "../../../core/utils/Localization.es.js";
+import { formatCurrency as d } from "../../../core/utils/NumberFormatting.es.js";
+import { BalanceStepper as S } from "./BalanceStepper.es.js";
+import w from "./SaveEnoughToLiveOnBottomSection.es.js";
+import { toNumber as p, variants as C } from "./layout.es.js";
+import v from "react";
+import { Text as i } from "@mxenabled/mxui";
+import { Icon as E } from "@mxenabled/mx-icons";
+import { Fragment as f, jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Card as I, Divider as A, List as T, ListItem as H, Stack as l } from "@mui/material";
+var N = [
+  {
+    label: "3 months",
+    value: 3
+  },
+  {
+    label: "6 months",
+    value: 6
+  },
+  {
+    label: "9 months",
+    value: 9
+  }
+], O = [
+  {
+    label: "1 month",
+    value: 1
+  },
+  {
+    label: "3 months",
+    value: 3
+  },
+  {
+    label: "6 months",
+    value: 6
+  },
+  {
+    label: "9 months",
+    value: 9
+  }
+], W = ({ copy: o, leading: r }) => /* @__PURE__ */ a(l, {
+  sx: {
+    bgcolor: "background.paper",
+    p: 24,
+    borderBottom: "1px solid",
+    borderColor: "divider"
+  },
+  children: [r, /* @__PURE__ */ a(l, {
+    sx: { gap: 8 },
+    children: [/* @__PURE__ */ e(i, {
+      variant: "h3",
+      children: o.header_content
+    }), /* @__PURE__ */ e(i, {
+      sx: { lineHeight: "24px" },
+      truncate: !1,
+      variant: "body1",
+      children: o.description
+    })]
+  })]
+}), j = ({ availableBalances: o, expenses: r, totalRemaining: t, copy: n }) => /* @__PURE__ */ e(l, {
+  sx: {
+    pt: 24,
+    px: 24
+  },
+  children: /* @__PURE__ */ a(I, {
+    sx: {
+      px: 16,
+      pt: 16,
+      pb: 12
+    },
+    children: [/* @__PURE__ */ a(l, {
       sx: {
-        bgcolor: "background.paper",
-        p: 24,
-        borderBottom: "1px solid",
-        borderColor: "divider"
+        border: 1,
+        borderColor: "divider",
+        borderRadius: "4px",
+        gap: 12,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        p: 8,
+        mb: 12
       },
-      children: [a.showBalancesSection && c != null && o != null && m && /* @__PURE__ */ t(I, {
-        content: m || "",
-        leftLabel: i.available_balances_text,
-        leftValue: l(c, "0,0.00"),
-        rightLabel: i.average_monthly_spend_text,
-        rightValue: l(o, "0,0.00"),
-        sx: {
-          width: "100%",
-          mb: 24
-        }
-      }), /* @__PURE__ */ r(n, {
-        sx: { gap: 8 },
-        children: [/* @__PURE__ */ t(e, {
-          variant: "h3",
-          children: i.header_content
-        }), /* @__PURE__ */ t(e, {
-          sx: { lineHeight: "24px" },
-          truncate: !1,
-          variant: "body1",
-          children: i.description
-        })]
-      })]
-    }),
-    a.showRemainingCard && c != null && o != null && /* @__PURE__ */ t(n, {
-      sx: {
-        pt: 24,
-        px: 24
-      },
-      children: /* @__PURE__ */ r(W, {
-        sx: {
-          px: 16,
-          pt: 16,
-          pb: 12
-        },
-        children: [/* @__PURE__ */ r(n, {
+      children: [
+        /* @__PURE__ */ a(l, {
           sx: {
-            border: 1,
-            borderColor: "divider",
-            borderRadius: "4px",
-            gap: 12,
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
-            p: 8,
-            mb: 12
+            width: 155,
+            textAlign: "center"
           },
-          children: [
-            /* @__PURE__ */ r(n, {
-              sx: {
-                width: 155,
-                textAlign: "center"
-              },
-              children: [/* @__PURE__ */ t(e, {
-                sx: { fontWeight: 600 },
-                variant: "body1",
-                children: l(c, "0,0.00")
-              }), /* @__PURE__ */ t(e, {
-                sx: { color: "text.secondary" },
-                variant: "caption",
-                children: i.available_text
-              })]
-            }),
-            /* @__PURE__ */ t(L, {
-              name: "remove",
-              size: 20
-            }),
-            /* @__PURE__ */ r(n, {
-              sx: {
-                width: 155,
-                textAlign: "center"
-              },
-              children: [/* @__PURE__ */ t(e, {
-                sx: { fontWeight: 600 },
-                variant: "body1",
-                children: l(o, "0,0.00")
-              }), /* @__PURE__ */ t(e, {
-                sx: { color: "text.secondary" },
-                variant: "caption",
-                children: i.expenses_text
-              })]
-            })
-          ]
-        }), /* @__PURE__ */ r(n, {
+          children: [/* @__PURE__ */ e(i, {
+            sx: { fontWeight: 600 },
+            variant: "body1",
+            children: d(o, "0,0.00")
+          }), /* @__PURE__ */ e(i, {
+            sx: { color: "text.secondary" },
+            variant: "caption",
+            children: n.available_text
+          })]
+        }),
+        /* @__PURE__ */ e(E, {
+          name: "remove",
+          size: 20
+        }),
+        /* @__PURE__ */ a(l, {
           sx: {
-            textAlign: "center",
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: 4
+            width: 155,
+            textAlign: "center"
           },
-          children: [/* @__PURE__ */ r(e, {
-            sx: { color: "text.secondary" },
-            variant: "body2",
-            children: [i.total_remaining_text, ":"]
-          }), /* @__PURE__ */ t(e, {
+          children: [/* @__PURE__ */ e(i, {
             sx: { fontWeight: 600 },
-            variant: "body2",
-            children: l(g, "0,0.00")
+            variant: "body1",
+            children: d(r, "0,0.00")
+          }), /* @__PURE__ */ e(i, {
+            sx: { color: "text.secondary" },
+            variant: "caption",
+            children: n.expenses_text
           })]
-        })]
-      })
-    }),
-    /* @__PURE__ */ r(n, {
+        })
+      ]
+    }), /* @__PURE__ */ a(l, {
       sx: {
-        p: 24,
-        gap: 8
+        textAlign: "center",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 4
       },
-      children: [/* @__PURE__ */ t(e, {
+      children: [/* @__PURE__ */ a(i, {
+        sx: { color: "text.secondary" },
+        variant: "body2",
+        children: [n.total_remaining_text, ":"]
+      }), /* @__PURE__ */ e(i, {
         sx: { fontWeight: 600 },
-        truncate: !1,
-        variant: "body1",
-        children: i.body_content
-      }), /* @__PURE__ */ t(C, {
-        amount: l(f, "0,0.00"),
-        copy: i,
-        onDecrement: () => d((s) => Math.max(0, s - u)),
-        onIncrement: () => d((s) => s + u)
+        variant: "body2",
+        children: d(t, "0,0.00")
       })]
-    }),
-    /* @__PURE__ */ r(n, {
-      sx: { gap: 8 },
-      children: [
-        /* @__PURE__ */ t(e, {
-          sx: {
-            fontWeight: 600,
-            mx: 24
-          },
-          truncate: !1,
-          variant: "body1",
-          children: i.body_description
-        }),
-        /* @__PURE__ */ t(D, {
-          sx: {
-            bgcolor: "background.paper",
-            width: "100%"
-          },
-          children: _.map(({ label: s, value: b }, w) => {
-            const v = a.lastRowIndex;
-            return /* @__PURE__ */ r(x.Fragment, { children: [/* @__PURE__ */ t(E, {
-              disableGutters: !0,
-              disablePadding: !0,
-              sx: {
-                minHeight: 52,
-                bgcolor: "background.paper"
-              },
-              children: /* @__PURE__ */ t(n, {
-                sx: { width: "100%" },
-                children: /* @__PURE__ */ r(n, {
-                  sx: {
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    width: "100%",
-                    px: 24,
-                    py: 8
-                  },
-                  children: [/* @__PURE__ */ t(e, {
-                    truncate: !1,
-                    variant: "body1",
-                    children: s
-                  }), /* @__PURE__ */ t(e, {
-                    sx: { fontWeight: 600 },
-                    truncate: !1,
-                    variant: "body1",
-                    children: l(b * f, "0,0")
-                  })]
-                })
-              })
-            }), /* @__PURE__ */ t(j, {
-              component: "li",
-              sx: { ml: w === v ? 0 : 24 }
-            })] }, b);
-          })
-        }),
-        a.showTotalBalances && c != null && /* @__PURE__ */ r(n, {
-          sx: {
-            pt: 6,
-            pb: 14,
-            px: 24,
-            textAlign: "right",
-            gap: 4
-          },
-          children: [/* @__PURE__ */ t(e, {
-            truncate: !1,
-            variant: "h3",
-            children: l(c, "0,0.00")
-          }), h && /* @__PURE__ */ t(e, {
+    })]
+  })
+}), k = ({ availableBalances: o, date: r, copy: t }) => /* @__PURE__ */ a(l, {
+  sx: {
+    pt: 6,
+    pb: 14,
+    px: 24,
+    textAlign: "right",
+    gap: 4
+  },
+  children: [/* @__PURE__ */ e(i, {
+    truncate: !1,
+    variant: "h3",
+    children: d(o, "0,0.00")
+  }), r && /* @__PURE__ */ e(i, {
+    sx: {
+      color: "text.secondary",
+      fontWeight: 400
+    },
+    truncate: !1,
+    variant: "subtitle2",
+    children: y(t.your_available_balances_text, r)
+  })]
+}), L = ({ bodyContent: o, bodyDescription: r, monthsTable: t, deltaAmount: n, initialAmount: s, seedAmount: c, copy: m }) => {
+  const [b, h] = v.useState(s ?? c ?? 0);
+  v.useEffect(() => {
+    s == null && c != null && h(c);
+  }, [s, c]);
+  const g = t.length - 1;
+  return /* @__PURE__ */ a(f, { children: [/* @__PURE__ */ a(l, {
+    sx: {
+      p: 24,
+      gap: 8
+    },
+    children: [/* @__PURE__ */ e(i, {
+      sx: { fontWeight: 600 },
+      truncate: !1,
+      variant: "body1",
+      children: o
+    }), /* @__PURE__ */ e(S, {
+      amount: d(b, "0,0.00"),
+      copy: m,
+      onDecrement: () => h((x) => Math.max(0, x - n)),
+      onIncrement: () => h((x) => x + n)
+    })]
+  }), /* @__PURE__ */ a(l, {
+    sx: { gap: 8 },
+    children: [/* @__PURE__ */ e(i, {
+      sx: {
+        fontWeight: 600,
+        mx: 24
+      },
+      truncate: !1,
+      variant: "body1",
+      children: r
+    }), /* @__PURE__ */ e(T, {
+      sx: {
+        bgcolor: "background.paper",
+        width: "100%"
+      },
+      children: t.map(({ label: x, value: u }, _) => /* @__PURE__ */ a(v.Fragment, { children: [/* @__PURE__ */ e(H, {
+        disableGutters: !0,
+        disablePadding: !0,
+        sx: {
+          minHeight: 52,
+          bgcolor: "background.paper"
+        },
+        children: /* @__PURE__ */ e(l, {
+          sx: { width: "100%" },
+          children: /* @__PURE__ */ a(l, {
             sx: {
-              color: "text.secondary",
-              fontWeight: 400
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              width: "100%",
+              px: 24,
+              py: 8
             },
-            truncate: !1,
-            variant: "subtitle2",
-            children: A(i.your_available_balances_text, h)
-          })]
+            children: [/* @__PURE__ */ e(i, {
+              truncate: !1,
+              variant: "body1",
+              children: x
+            }), /* @__PURE__ */ e(i, {
+              sx: { fontWeight: 600 },
+              truncate: !1,
+              variant: "body1",
+              children: d(u * b, "0,0")
+            })]
+          })
         })
-      ]
+      }), /* @__PURE__ */ e(A, {
+        component: "li",
+        sx: { ml: _ === g ? 0 : 24 }
+      })] }, u))
+    })]
+  })] });
+}, z = ({ variant: o, slotData: r, copy: t }) => {
+  const n = o === C.SAVE_ENOUGH_TO_LIVE_ON, s = r?.available_balance, c = p(r?.avg_monthly_spend), m = p(r?.upcoming_expenses), b = p(r?.total_remaining), h = r?.time_period, g = r?.date;
+  return /* @__PURE__ */ a(f, { children: [
+    /* @__PURE__ */ e(W, {
+      copy: t,
+      leading: n && s != null && c != null && h ? /* @__PURE__ */ e(w, {
+        content: h,
+        leftLabel: t.available_balances_text,
+        leftValue: d(s, "0,0.00"),
+        rightLabel: t.average_monthly_spend_text,
+        rightValue: d(c, "0,0.00"),
+        sx: {
+          width: "100%",
+          mb: 24
+        }
+      }) : null
+    }),
+    !n && s != null && m != null && /* @__PURE__ */ e(j, {
+      availableBalances: s,
+      copy: t,
+      expenses: m,
+      totalRemaining: b
+    }),
+    /* @__PURE__ */ e(L, {
+      bodyContent: n ? t.body_spending_content : t.body_saving_content,
+      bodyDescription: n ? t.body_spending_description : t.body_saving_description,
+      copy: t,
+      deltaAmount: n ? 50 : 5,
+      initialAmount: n ? null : 100,
+      monthsTable: n ? O : N,
+      seedAmount: n ? c : void 0
+    }),
+    n && s != null && /* @__PURE__ */ e(k, {
+      availableBalances: s,
+      copy: t,
+      date: g
     })
   ] });
 };
 export {
-  P as MakeTransferActionBlock,
-  T as variants
+  z as MakeTransferActionBlock
 };
 
 //# sourceMappingURL=MakeTransferActionBlock.es.js.map