@mx-cartographer/experiences 9.3.8-alpha.al1 → 9.4.1-alpha.al0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
-## [9.3.8] - 08-24-2026
 
-- **FIXED** - Sub-budget budgeted totals now roll up to parent budget budgeted total
+## [9.4.1] - 08-25-2026
+
+- **UPDATED** - Sub budget totals now roll up to parent budget total
+
+## [9.4.0] - 08-25-2026
+
+- **ADDED** - insights-v2.0 module: comprehensive reusable component library for insights UI
+- **ADDED** - Chart blocks: BarChart, DoubleBarChart, DonutChart, StepChart, DoubleProgressBar (WEC-1256, WEC-1257, WEC-1258, WEC-1259, WEC-1260)
+- **ADDED** - Content blocks: AccountBlock (with/without confetti variants), BudgetBlock (category/merchant), ActionBlock foundation (WEC-1309, WEC-1312, WEC-1315, WEC-1704)
+- **ADDED** - Image blocks: SVG Block (with CIBC support), Image Block (WEC-1295, WEC-1296, WEC-1335)
+- **ADDED** - Reusable components: AccountHeroCard, TransferLogoCard, MerchantHighlightCard, MerchantLogo, LogoClusterCard, LogoTile, MerchantLogoCard, P2PLogoStack, RankBadge, InsightTransactionRow, TransactionListCard, TransactionRow, DesignateEmergencySavingsCard, SaveAnExtraCard, SavingsOpportunityCard, UpcomingBillCard (WEC-1303, WEC-1305, WEC-1313, WEC-1714, WEC-1750)
+- **ADDED** - Support components: StatusMessageCard, StatusPill, AmountPill, celebrationGradients module with confetti animations
+- **ADDED** - Block type system: standardized block structure (BlockType, BlockConfig, BlockData), moved to `src/core/types/blocks/`, renamed `block_data` to `instance_slot_data` (WEC-1344)
+- **ADDED** - Insight template system and mini layout support (WEC-1253, WEC-1254)
+- **ADDED** - Storybook stories for all 40+ new components and blocks with interactive examples
+- **ADDED** - RTL tests for all components with 85%+ code coverage across the insights-v2.0 module
+- **CHANGED** - Block type definitions now centralized in `src/core/types/blocks/` with proper TypeScript exports
+- **NOTE** - All insights-v2.0 components are presentational (stateless); data provided by consumers; ready for integration into blocks and containers
 
 ## [9.3.7] - 08-20-2026
 

package/dist/accounts/components/AccountListItem.es.js

@@ -11,8 +11,8 @@ import { Fragment as d, jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useTheme as j } from "@mui/material/styles";
 import c from "@mui/material/Box";
 import T from "@mui/material/ListItem";
-import M from "@mui/material/ListItemButton";
-import $ from "@mui/material/ListItemText";
+import $ from "@mui/material/ListItemButton";
+import M from "@mui/material/ListItemText";
 import k from "@mui/material/ListItemAvatar";
 import D from "@mui/material/Badge";
 var E = ({ account: t, onRowClick: n, listItemProps: s, shouldShowConnectionStatus: p = !1 }) => {
@@ -26,7 +26,7 @@ var E = ({ account: t, onRowClick: n, listItemProps: s, shouldShowConnectionStat
       alt: "MX",
       institutionGuid: t.institution_guid || ""
     })
-  }) }), /* @__PURE__ */ e($, {
+  }) }), /* @__PURE__ */ e(M, {
     disableTypography: !0,
     primary: /* @__PURE__ */ r(i, {
       bold: !0,
@@ -76,7 +76,7 @@ var E = ({ account: t, onRowClick: n, listItemProps: s, shouldShowConnectionStat
       color: t.is_closed ? "grey.700" : "",
       ...s?.sx
     },
-    children: n ? /* @__PURE__ */ e(M, {
+    children: n ? /* @__PURE__ */ e($, {
       alignItems: "flex-start",
       onClick: n,
       sx: { px: 24 },

package/dist/accounts/components/AccountsListCompact.es.js

@@ -9,17 +9,17 @@ import { InstitutionLogo as D, P as k, Text as b } from "@mxenabled/mxui";
 import { Fragment as w, jsx as t, jsxs as s } from "react/jsx-runtime";
 import y from "@mui/material/Divider";
 import S from "@mui/material/List";
-import j from "@mui/material/ListItem";
-import G from "@mui/material/ListItemButton";
-import N from "@mui/material/ListItemText";
-import $ from "@mui/material/ListItemAvatar";
+import $ from "@mui/material/ListItem";
+import j from "@mui/material/ListItemButton";
+import G from "@mui/material/ListItemText";
+import N from "@mui/material/ListItemAvatar";
 import M from "@mui/material/ListSubheader";
-var P = ({ onClick: i, shouldShowBalance: m = !0, loadAccounts: c }) => {
+var P = ({ onClick: i, shouldShowBalance: c = !0, loadAccounts: m }) => {
   const { config: p } = L(), { accounts: l } = A(), { selectedAccounts: n } = C(), h = a.useCallback((e) => {
     i?.(e);
-  }, [i]), _ = a.useMemo(() => Array.from(new Set(n.map((e) => e.account_type))).filter((e) => c ? c.includes(e) : !0), [n, c]);
-  return n.length ? /* @__PURE__ */ t(a.Fragment, { children: _.map((e) => {
-    const { accountsForType: u, totalBalanceForType: g } = n.reduce((r, o) => (o.account_type === e && (r.accountsForType.push(o), r.totalBalanceForType += o.balance || 0), r), {
+  }, [i]), g = a.useMemo(() => Array.from(new Set(n.map((e) => e.account_type))).filter((e) => m ? m.includes(e) : !0), [n, m]);
+  return n.length ? /* @__PURE__ */ t(a.Fragment, { children: g.map((e) => {
+    const { accountsForType: u, totalBalanceForType: _ } = n.reduce((r, o) => (o.account_type === e && (r.accountsForType.push(o), r.totalBalanceForType += o.balance || 0), r), {
       accountsForType: [],
       totalBalanceForType: 0
     });
@@ -40,21 +40,21 @@ var P = ({ onClick: i, shouldShowBalance: m = !0, loadAccounts: c }) => {
             bold: !0,
             variant: "caption",
             children: l.account_types[e]
-          }), m && /* @__PURE__ */ t(b, {
+          }), c && /* @__PURE__ */ t(b, {
             bold: !0,
             variant: "caption",
-            children: f(g, "0,0.00")
+            children: f(_, "0,0.00")
           })]
         })
       }),
       sx: { bgcolor: "background.paper" },
       children: [u.map((r, o) => {
         const { firstValue: x } = T(r, l, p.display_available_balance_in_accounts), v = F(r, { allowNickname: p?.show_account_nicknames_in_master }), d = /* @__PURE__ */ s(w, { children: [
-          /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(D, {
+          /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(D, {
             alt: "MX",
             institutionGuid: r.institution_guid ?? ""
           }) }),
-          /* @__PURE__ */ t(N, {
+          /* @__PURE__ */ t(G, {
             primary: `${v}${r.account_number ? ` *${r.account_number}` : ""}`,
             slotProps: { primary: {
               noWrap: !0,
@@ -62,15 +62,15 @@ var P = ({ onClick: i, shouldShowBalance: m = !0, loadAccounts: c }) => {
               variant: "body1"
             } }
           }),
-          m && /* @__PURE__ */ t(k, {
+          c && /* @__PURE__ */ t(k, {
             bold: !0,
             variant: "body2",
             children: f(x ?? 0, "0,0.00")
           })
         ] });
-        return /* @__PURE__ */ s(a.Fragment, { children: [/* @__PURE__ */ t(j, {
+        return /* @__PURE__ */ s(a.Fragment, { children: [/* @__PURE__ */ t($, {
           sx: { px: i ? 0 : 24 },
-          children: i ? /* @__PURE__ */ t(G, {
+          children: i ? /* @__PURE__ */ t(j, {
             onClick: () => h(r),
             children: d
           }) : d

package/dist/accounts/components/detailsdrawer/Accounts/AccountActions.es.js

@@ -1,6 +1,6 @@
 import { buildDynamicCopy as A } from "../../../../core/utils/Localization.es.js";
 import { useAccountStore as M, useEvent as k, useGlobalCopyStore as v, useTransactionStore as D } from "../../../../common/context/hooks.es.js";
-import C from "../../../../common/components/dialog/Dialog.es.js";
+import g from "../../../../common/components/dialog/Dialog.es.js";
 import E from "../../../../common/components/drawer/Drawer.es.js";
 import { ANALYTICS_EVENTS as _ } from "../../../../common/constants/Analytics.es.js";
 import { useAccountUiStore as O } from "../../../hooks/useUiStore.es.js";
@@ -9,7 +9,7 @@ import { useGetMergeableAccounts as P } from "../../../hooks/useGetMergeableAcco
 import U from "../../AccountListItem.es.js";
 import n from "react";
 import { observer as K } from "mobx-react-lite";
-import { Icon as g, Text as r } from "@mxenabled/mxui";
+import { Icon as C, Text as r } from "@mxenabled/mxui";
 import { Fragment as N, jsx as t, jsxs as s } from "react/jsx-runtime";
 import R from "@mui/material/List";
 import G from "@mui/material/Switch";
@@ -57,9 +57,9 @@ var B = () => {
       },
       primaryText: e.is_closed ? o.mark_as_open : o.mark_as_closed,
       secondaryText: e.is_closed ? o.this_will_set_the_closed_account : o.this_will_set_the_account_balance_to_0,
-      children: [/* @__PURE__ */ t(g, { name: "chevron_right" }), /* @__PURE__ */ t("div", {
+      children: [/* @__PURE__ */ t(C, { name: "chevron_right" }), /* @__PURE__ */ t("div", {
         onClick: (c) => c.stopPropagation(),
-        children: /* @__PURE__ */ t(C, {
+        children: /* @__PURE__ */ t(g, {
           copy: {
             close_aria: o.close_modal,
             title: e.is_closed ? o.confirm_mark_as_open : o.confirm_mark_closed
@@ -83,7 +83,7 @@ var B = () => {
       },
       primaryText: o.mark_as_duplicate,
       secondaryText: o.if_a_connected_account_is_showing_up_twice,
-      children: /* @__PURE__ */ t(g, { name: "chevron_right" })
+      children: /* @__PURE__ */ t(C, { name: "chevron_right" })
     }),
     /* @__PURE__ */ s(E, {
       ariaLabelClose: o.close_drawer,
@@ -110,7 +110,7 @@ var B = () => {
             h(!0), b(c);
           }
         }, c.guid);
-      }) }), m && /* @__PURE__ */ s(C, {
+      }) }), m && /* @__PURE__ */ s(g, {
         copy: {
           close_aria: o.close_modal,
           title: o.confirm_merge

package/dist/accounts/components/detailsdrawer/Accounts/AccountConnection.es.js

@@ -7,7 +7,7 @@ import { getConnectionMessages as S } from "../../../utils/getConnectionMessages
 import v from "react";
 import { observer as M } from "mobx-react-lite";
 import w from "@mui/material/Stack";
-import { Icon as g, Text as h } from "@mxenabled/mxui";
+import { Icon as p, Text as h } from "@mxenabled/mxui";
 import { CheckCircle as I, Error as L, Language as z } from "@mxenabled/mx-icons";
 import { Fragment as a, jsx as o, jsxs as n } from "react/jsx-runtime";
 import { useTheme as R } from "@mui/material/styles";
@@ -23,7 +23,7 @@ var m = {
   gridColumn: 1,
   zIndex: 2
 }, B = () => {
-  const [l, d] = v.useState(!1), { palette: { mode: u } } = R(), { selectedMember: e } = _(), { accounts: p, connect: C } = y(), t = S(e, C), r = x.includes(e.connection_status) ? {
+  const [l, d] = v.useState(!1), { palette: { mode: u } } = R(), { selectedMember: e } = _(), { accounts: g, connect: C } = y(), t = S(e, C), r = x.includes(e.connection_status) ? {
     color: "error.main",
     ctaCopy: t.cta ?? "",
     icon: /* @__PURE__ */ o(L, {
@@ -52,7 +52,7 @@ var m = {
         bold: !0,
         component: "h2",
         variant: "caption",
-        children: p.connection_status
+        children: g.connection_status
       })
     }),
     /* @__PURE__ */ o(b, {
@@ -109,7 +109,7 @@ var m = {
               })
             ] })
           }),
-          /* @__PURE__ */ o(g, { name: "chevron_right" })
+          /* @__PURE__ */ o(p, { name: "chevron_right" })
         ]
       })
     }),
@@ -139,7 +139,7 @@ var m = {
             primary: e.name,
             secondary: e.institution_url
           }),
-          /* @__PURE__ */ o(g, { name: "launch" })
+          /* @__PURE__ */ o(p, { name: "launch" })
         ]
       })
     }) }),
@@ -147,7 +147,7 @@ var m = {
       loadWidgetProps: { current_member_guid: e.guid },
       onClose: () => d(!1),
       showConnectWidget: l,
-      title: p.manage_connection
+      title: g.manage_connection
     })
   ] });
 }, X = M(B);

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetails.es.js

@@ -1,17 +1,17 @@
 import { useEvent as v, useGlobalCopyStore as y } from "../../../../common/context/hooks.es.js";
 import { useAccountUiStore as C } from "../../../hooks/useUiStore.es.js";
 import { getAccountDetailFields as E } from "../../../utils/AccountFields.es.js";
-import S from "./AccountDetailEdit.es.js";
+import F from "./AccountDetailEdit.es.js";
 import n from "react";
-import { observer as A } from "mobx-react-lite";
-import { Icon as D, Text as p } from "@mxenabled/mxui";
-import { Fragment as F, jsx as e, jsxs as b } from "react/jsx-runtime";
+import { observer as S } from "mobx-react-lite";
+import { Icon as A, Text as p } from "@mxenabled/mxui";
+import { Fragment as D, jsx as e, jsxs as b } from "react/jsx-runtime";
 import g from "@mui/material/ListItem";
 import k from "@mui/material/ListItemButton";
 import w from "@mui/material/ListItemText";
 var T = () => {
-  const f = window.app?.config, { onEvent: h } = v(), { selectedAccount: o } = C(), { accounts: _ } = y(), i = E(o, _), a = o.member_is_managed_by_user || !o.member_is_managed_by_user && f.enable_renaming_home_accounts, [s, c] = n.useState(!1), [m, x] = n.useState(i[0]), r = i.filter((t) => a || o[t.name] || o[t.name] === 0);
-  return /* @__PURE__ */ b(F, { children: [r.map((t) => {
+  const f = window.app?.config, { onEvent: h } = v(), { selectedAccount: o } = C(), { accounts: _ } = y(), a = E(o, _), i = o.member_is_managed_by_user || !o.member_is_managed_by_user && f.enable_renaming_home_accounts, [s, c] = n.useState(!1), [m, x] = n.useState(a[0]), r = a.filter((t) => i || o[t.name] || o[t.name] === 0);
+  return /* @__PURE__ */ b(D, { children: [r.map((t) => {
     const l = o[t.name] || o[t.name] === 0, d = r.indexOf(t) === r.length - 1, u = /* @__PURE__ */ e(w, {
       disableTypography: !0,
       primary: /* @__PURE__ */ e(p, {
@@ -24,7 +24,7 @@ var T = () => {
         children: l ? t.valueFormatter(o[t.name]) : t.placeholder
       })
     });
-    return /* @__PURE__ */ e(n.Fragment, { children: a ? /* @__PURE__ */ e(g, {
+    return /* @__PURE__ */ e(n.Fragment, { children: i ? /* @__PURE__ */ e(g, {
       sx: {
         backgroundColor: "background.paper",
         px: 0,
@@ -43,7 +43,7 @@ var T = () => {
         onClick: () => {
           x(t), c(!0), t?.event && h(t.event, { account_guid: o.guid });
         },
-        children: [u, /* @__PURE__ */ e(D, { name: "chevron_right" })]
+        children: [u, /* @__PURE__ */ e(A, { name: "chevron_right" })]
       })
     }) : l && /* @__PURE__ */ e(g, {
       sx: {
@@ -62,14 +62,14 @@ var T = () => {
       },
       children: u
     }) }, t.name);
-  }), s && m && /* @__PURE__ */ e(S, {
+  }), s && m && /* @__PURE__ */ e(F, {
     field: m,
     isOpen: s,
     onClose: () => c(!1)
   })] });
-}, q = A(T);
+}, $ = S(T);
 export {
-  q as default
+  $ as default
 };
 
 //# sourceMappingURL=AccountDetails.es.js.map

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailsContent.es.js

@@ -1,8 +1,8 @@
 import { useGlobalCopyStore as s } from "../../../../common/context/hooks.es.js";
 import r from "../../../../common/components/TabContentContainer.es.js";
 import c from "./AccountDetailsTab.es.js";
-import d from "./ConnectionErrorMessage.es.js";
-import m from "../Transactions/TransactionsTab.es.js";
+import m from "./ConnectionErrorMessage.es.js";
+import d from "../Transactions/TransactionsTab.es.js";
 import u from "react";
 import { observer as b } from "mobx-react-lite";
 import { Fragment as f, jsx as a, jsxs as n } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import p from "@mui/material/Tabs";
 var C = () => {
   const [t, o] = u.useState(0), { accounts: e } = s();
   return /* @__PURE__ */ n(f, { children: [
-    /* @__PURE__ */ a(d, { setTabValue: o }),
+    /* @__PURE__ */ a(m, { setTabValue: o }),
     /* @__PURE__ */ n(p, {
       "aria-label": e.transactions_and_details_aria,
       centered: !0,
@@ -33,7 +33,7 @@ var C = () => {
       index: 0,
       name: "transaction-details",
       value: t,
-      children: /* @__PURE__ */ a(m, {})
+      children: /* @__PURE__ */ a(d, {})
     }),
     /* @__PURE__ */ a(r, {
       index: 1,
@@ -42,9 +42,9 @@ var C = () => {
       children: /* @__PURE__ */ a(c, {})
     })
   ] });
-}, V = b(C);
+}, S = b(C);
 export {
-  V as default
+  S as default
 };
 
 //# sourceMappingURL=AccountDetailsContent.es.js.map

package/dist/accounts/components/detailsdrawer/Accounts/ConnectionErrorMessage.es.js

@@ -8,23 +8,23 @@ import { observer as C } from "mobx-react-lite";
 import { Text as b } from "@mxenabled/mxui";
 import h from "@mui/material/Paper";
 import { Error as x } from "@mxenabled/mx-icons";
-import { Fragment as S, jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Fragment as S, jsx as o, jsxs as a } from "react/jsx-runtime";
 import _ from "@mui/material/Alert";
 import v from "@mui/material/AlertTitle";
 import w from "@mui/material/Link";
-var y = ({ setTabValue: a }) => {
+var y = ({ setTabValue: c }) => {
   const [n, i] = s.useState(!1), { selectedMember: e } = p(), { accounts: m, connect: l } = f(), t = e.connection_status && u.includes(e.connection_status);
   if (s.useEffect(() => {
-    t && a(1);
+    t && c(1);
   }, [t]), !t) return;
   const r = g(e, l);
-  return /* @__PURE__ */ c(S, { children: [/* @__PURE__ */ o(h, {
+  return /* @__PURE__ */ a(S, { children: [/* @__PURE__ */ o(h, {
     sx: {
       mb: 16,
       mt: 24,
       mx: 24
     },
-    children: /* @__PURE__ */ c(_, {
+    children: /* @__PURE__ */ a(_, {
       icon: /* @__PURE__ */ o(x, { filled: !0 }),
       role: "none",
       severity: "error",
@@ -67,9 +67,9 @@ var y = ({ setTabValue: a }) => {
     showConnectWidget: n,
     title: m.manage_connection
   })] });
-}, G = C(y);
+}, B = C(y);
 export {
-  G as default
+  B as default
 };
 
 //# sourceMappingURL=ConnectionErrorMessage.es.js.map

package/dist/accounts/components/detailsdrawer/Transactions/TransactionsTab.es.js

@@ -6,8 +6,8 @@ import S from "../../../../transactions/components/shared/TransactionList.es.js"
 import A from "../../../../transactions/components/shared/TransactionDetails.es.js";
 import t from "react";
 import { observer as b } from "mobx-react-lite";
-import { Fragment as y, jsx as a, jsxs as D } from "react/jsx-runtime";
-import { endOfToday as g, startOfToday as v, subDays as L } from "date-fns";
+import { Fragment as g, jsx as a, jsxs as y } from "react/jsx-runtime";
+import { endOfToday as D, startOfToday as v, subDays as L } from "date-fns";
 var N = () => {
   const [o, e] = t.useState(""), { onEvent: c } = l(), { selectedAccount: r } = E(), { accounts: s } = T(), { isTransactionDataLoaded: f, loadTransactionData: u, setFilter: d, sortedTransactions: n } = p();
   t.useEffect(() => {
@@ -18,11 +18,11 @@ var N = () => {
     d({
       dateRange: {
         start: L(v(), 90),
-        end: g()
+        end: D()
       },
       accounts: [r.guid]
     });
-  }, [r]), t.useEffect(() => c(C.ACCOUNT_DETAILS_VIEW_TRANSACTIONS), []), /* @__PURE__ */ D(y, { children: [/* @__PURE__ */ a(S, { onClick: e }), i && /* @__PURE__ */ a(_, {
+  }, [r]), t.useEffect(() => c(C.ACCOUNT_DETAILS_VIEW_TRANSACTIONS), []), /* @__PURE__ */ y(g, { children: [/* @__PURE__ */ a(S, { onClick: e }), i && /* @__PURE__ */ a(_, {
     ariaLabelClose: s.close_drawer,
     isOpen: !!o,
     onClose: () => e(""),

package/dist/budgets/components/BudgetDetailsDrawer.es.js

@@ -1,145 +1,144 @@
-import { buildDynamicCopy as p } from "../../core/utils/Localization.es.js";
-import { useBudgetsStore as L, useGlobalCopyStore as q, useGlobalUiStore as J, useTransactionStore as K } from "../../common/context/hooks.es.js";
+import { buildDynamicCopy as b } from "../../core/utils/Localization.es.js";
+import { useBudgetsStore as H, useGlobalCopyStore as L, useGlobalUiStore as M, useTransactionStore as q } from "../../common/context/hooks.es.js";
 import C from "../../common/components/dialog/Dialog.es.js";
-import M from "../../common/components/drawer/Drawer.es.js";
-import { BudgetAmount as Q } from "./shared/BudgetAmount.es.js";
-import { BudgetDetails as V } from "./budgetdetails/BudgetDetails.es.js";
-import a from "react";
+import J from "../../common/components/drawer/Drawer.es.js";
+import { BudgetAmount as K } from "./shared/BudgetAmount.es.js";
+import { BudgetDetails as Q } from "./budgetdetails/BudgetDetails.es.js";
+import { SubBudgetAmounts as V } from "./budgetdetails/SubBudgetAmounts.es.js";
+import s from "react";
 import { observer as W } from "mobx-react-lite";
 import { Text as X } from "@mxenabled/mxui";
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
 import Y from "@mui/material/Alert";
 import Z from "@mui/material/Snackbar";
-var me = W(() => {
-  const { selectedAccountGuids: N } = J(), { budgets: r, common: l } = q(), { alert: b, dateRange: D, deleteBudget: x, selectedBudget: e, selectedSubBudget: O, setAlert: i, setSelectedBudget: T, updateBudget: y } = L(), { setFilter: w } = K(), [P, f] = a.useState(!1), [E, c] = a.useState(!1), [$, _] = a.useState(!1), [s, u] = a.useState(""), [m, g] = a.useState({});
-  a.useEffect(() => {
-    if (e && !O) {
-      u(`${e.amount}`);
+var ge = W(() => {
+  const { selectedAccountGuids: v } = M(), { budgets: r, common: m } = L(), { alert: f, dateRange: N, deleteBudget: x, selectedBudget: e, selectedSubBudget: D, setAlert: u, setSelectedBudget: O, updateBudget: _ } = H(), { setFilter: T } = q(), [w, S] = s.useState(!1), [E, g] = s.useState(!1), [P, B] = s.useState(!1), [a, d] = s.useState(""), [c, p] = s.useState({});
+  s.useEffect(() => {
+    if (e && !D) {
+      d(`${e.amount}`);
       const o = {};
       e.subBudgets.forEach((t) => {
         o[t.guid] = `${t.amount}`;
-      }), g(o), f(!0), w({
-        accounts: N,
-        dateRange: D,
+      }), p(o), S(!0), T({
+        accounts: v,
+        dateRange: N,
         custom: (t) => t.category_guid === e.category_guid || t.top_level_category_guid === e.category_guid,
         showSplits: !0
       });
     }
   }, [e]);
-  const I = (o, t) => {
-    g((d) => {
-      const A = {
-        ...d,
-        [o]: t
-      }, k = e?.subBudgets.reduce((z, H) => z + (Number(A[H.guid]) || 0), 0);
-      return u(`${k ?? 0}`), A;
-    });
-  }, G = async () => {
+  const $ = (o, t) => {
+    const i = {
+      ...c,
+      [o]: t
+    }, R = e?.subBudgets.reduce((U, z) => U + (Number(i[z.guid]) || 0), 0);
+    p(i), d(`${R ?? 0}`);
+  }, I = async () => {
     if (e) {
-      if (e.subBudgets.length > 0) {
-        const o = e.subBudgets.map((t) => {
-          const d = Number(m[t.guid] ?? t.amount);
-          return y({
-            ...t,
-            amount: d,
-            percentage: t.category.currentAmount / (d || 1) * 100
-          });
+      let o = !0;
+      e.subBudgets.length > 0 ? o = (await Promise.all(e.subBudgets.map((t) => {
+        const i = Number(c[t.guid] ?? t.amount);
+        return _({
+          ...t,
+          amount: i,
+          percentage: t.category.currentAmount / (i || 1) * 100
         });
-        await Promise.all(o);
-      } else await y({
+      }))).every((t) => t.isSuccess) : o = (await _({
         ...e,
-        amount: Number(s),
-        percentage: e.category.totalAmount / (Number(s) || 1) * 100
-      });
-      c(!1), i(p(r.alert_budget_updated, e.category.name));
+        amount: Number(a),
+        percentage: e.category.totalAmount / (Number(a) || 1) * 100
+      })).isSuccess, o && (g(!1), u(b(r.alert_budget_updated, e.category.name)));
     }
-  }, j = async () => {
-    e && (await x(e.guid), i(p(r.alert_budget_deleted, e.category.name))), B();
-  }, B = () => {
-    f(!1), setTimeout(() => {
-      T(void 0);
-    }, 250);
+  }, G = async () => {
+    e && (await x(e.guid), u(b(r.alert_budget_deleted, e.category.name))), h();
   }, h = () => {
-    c(!1), u(`${e?.amount}`);
+    S(!1), setTimeout(() => {
+      O(void 0);
+    }, 250);
+  }, A = () => {
+    g(!1), d(`${e?.amount}`);
     const o = {};
     e?.subBudgets.forEach((t) => {
       o[t.guid] = `${t.amount}`;
-    }), g(o);
+    }), p(o);
   };
   if (!e) return;
-  const S = e.subBudgets.length > 0, F = s === "" || Number(s) < 0 || isNaN(Number(s)), R = S && e.subBudgets.some((o) => {
-    const t = m[o.guid];
+  const l = e.subBudgets.length > 0, j = a === "" || Number(a) < 0 || isNaN(Number(a)), k = l && e.subBudgets.some((o) => {
+    const t = c[o.guid];
     return t === void 0 || t === "" || Number(t) < 0 || isNaN(Number(t));
-  }), U = S ? R : F;
-  return /* @__PURE__ */ v(a.Fragment, { children: [
-    /* @__PURE__ */ v(M, {
-      ariaLabelClose: l.close_aria,
-      isOpen: P,
-      onClose: B,
-      onPrimaryAction: () => c(!0),
-      onSecondaryAction: () => _(!0),
+  }), F = l ? k : j;
+  return /* @__PURE__ */ y(s.Fragment, { children: [
+    /* @__PURE__ */ y(J, {
+      ariaLabelClose: m.close_aria,
+      isOpen: w,
+      onClose: h,
+      onPrimaryAction: () => g(!0),
+      onSecondaryAction: () => B(!0),
       primaryText: r.details_edit_button,
       secondaryColor: "error",
       secondaryText: r.details_delete_button,
       title: r.details_title,
-      children: [/* @__PURE__ */ n(V, { budget: e }), /* @__PURE__ */ n(Z, {
+      children: [/* @__PURE__ */ n(Q, { budget: e }), /* @__PURE__ */ n(Z, {
         anchorOrigin: {
           vertical: "bottom",
           horizontal: "right"
         },
         autoHideDuration: 3500,
-        onClose: () => i(""),
-        open: !!b,
+        onClose: () => u(""),
+        open: !!f,
         children: /* @__PURE__ */ n(Y, {
           closeText: "",
-          onClose: () => i(""),
+          onClose: () => u(""),
           severity: "success",
           variant: "filled",
-          children: b
+          children: f
         })
       })]
     }),
-    /* @__PURE__ */ n(C, {
+    /* @__PURE__ */ y(C, {
       copy: {
-        close_aria: l.close_aria,
+        close_aria: m.close_aria,
         title: r.details_edit_title
       },
-      disablePrimaryButton: U,
+      disablePrimaryButton: F,
       isOpen: E,
-      onClose: h,
-      onPrimaryAction: G,
-      onSecondaryAction: h,
+      onClose: A,
+      onPrimaryAction: I,
+      onSecondaryAction: A,
       primaryText: r.edit_save_button,
-      children: /* @__PURE__ */ n(Q, {
-        amount: s,
+      sx: { "& .MuiStack-root:first-child": { pb: 8 } },
+      children: [!l && /* @__PURE__ */ n(K, {
+        amount: a,
         categoryName: e.category.name,
-        onAmountChanged: u,
-        onSubBudgetAmountChanged: I,
-        originalAmount: e.amount,
-        subBudgetAmounts: m,
+        onAmountChanged: d
+      }), l && /* @__PURE__ */ n(V, {
+        amount: a,
+        categoryName: e.category.name,
+        onSubBudgetAmountChanged: $,
+        subBudgetAmounts: c,
         subBudgets: e.subBudgets
-      })
+      })]
     }),
     /* @__PURE__ */ n(C, {
       copy: {
-        close_aria: l.close_aria,
+        close_aria: m.close_aria,
         title: r.delete_title
       },
-      isOpen: $,
-      onClose: () => _(!1),
-      onPrimaryAction: j,
+      isOpen: P,
+      onClose: () => B(!1),
+      onPrimaryAction: G,
       primaryColor: "error",
       primaryText: r.details_delete_button,
       secondaryColor: "secondary",
       children: /* @__PURE__ */ n(X, {
         variant: "subtitle1",
-        children: p(r.delete_description, e.category.name)
+        children: b(r.delete_description, e.category.name)
       })
     })
   ] });
 });
 export {
-  me as BudgetDetailsDrawer
+  ge as BudgetDetailsDrawer
 };
 
 //# sourceMappingURL=BudgetDetailsDrawer.es.js.map