@mx-cartographer/experiences 9.3.8-alpha.al1 → 9.4.0

package/CHANGELOG.md

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