@mx-cartographer/experiences 7.12.16 → 7.13.0

package/dist/budgets/index.es.js

@@ -10,9 +10,9 @@ import xe from "@mui/material/Snackbar";
 import v from "@mui/material/Stack";
 import ie from "@mui/material/styles/useTheme";
 import K from "@mui/material/Box";
-import X from "@mui/material/List";
+import Y from "@mui/material/List";
 import { Text as B, CategoryIcon as W, Icon as j, H3 as Re } from "@mxenabled/mxui";
-import { u as D, m as E, i as ce, l as Y, p as le, a as Le, g as Z, b as q, h as J, d as Ne } from "../hooks-BxkfR-Ff.mjs";
+import { u as D, m as E, i as ce, l as X, p as le, a as Le, g as Z, b as q, h as J, d as Ne } from "../hooks-BxkfR-Ff.mjs";
 import { f as T } from "../NumberFormatting-QCaNwbjv.mjs";
 import ke from "@mui/material/Button";
 import de from "@mui/material/Divider";
@@ -21,53 +21,53 @@ import ue from "@mui/material/ListItemAvatar";
 import ee from "@mui/material/ListItemButton";
 import te from "@mui/material/ListItemText";
 import { b as N } from "../Localization-CPkpIwIx.mjs";
-import { D as $ } from "../Drawer-DV4NTsFg.mjs";
-import Xe from "@mui/material/ListItemSecondaryAction";
-import { C as Ye } from "../CurrencyInput-DuMktPu3.mjs";
+import { D as $ } from "../Drawer-Bbe4AMB1.mjs";
+import Ye from "@mui/material/ListItemSecondaryAction";
+import { C as Xe } from "../CurrencyInput-DuMktPu3.mjs";
 import { D as U } from "../Dialog-Ck34yr-d.mjs";
-import { C as Ze } from "../ConnectionsDrawer-DqhSaMrJ.mjs";
+import { C as Ze } from "../ConnectionsDrawer-IA7vnv1J.mjs";
 import * as R from "d3";
 import qe from "@mui/material/Tooltip";
 import { useTheme as $e, alpha as Je } from "@mui/material/styles";
 import { u as me } from "../useScreenSize-B6JyS_Lj.mjs";
 import { L as ge } from "../Loader-D3rjKx72.mjs";
 import { E as ye } from "../EmptyState-DHAkGsjk.mjs";
-import { A as P } from "../Analytics-BYItVAe-.mjs";
+import { A as G } from "../Analytics-BYItVAe-.mjs";
 import De from "@mui/material/Tab";
 import Qe from "@mui/material/Tabs";
 import { e as et } from "../exportTransactionsToCSV-CdTF_RqL.mjs";
-import { T as Ae } from "../StatusIndicator-BV3oFzxo.mjs";
-import { T as tt, c as ot } from "../TransactionDetails-DYlTwSDt.mjs";
+import { T as Ae } from "../StatusIndicator-CIKUOoN_.mjs";
+import { T as tt, c as ot } from "../TransactionDetails-BpcWeXNU.mjs";
 import ve from "@mui/material/Card";
 import Te from "@mui/material/CardContent";
 import { S as Be } from "../StatusBar-BK_uYHAB.mjs";
-import { S as Pe } from "../SingleSegmentDonut-BgbLgwHi.mjs";
-import { u as nt, b as at } from "../CategorySelectorDrawer-wfUTIbLR.mjs";
-import Ge from "@mui/material/CardHeader";
+import { S as Ge } from "../SingleSegmentDonut-BgbLgwHi.mjs";
+import { u as nt, b as at } from "../CategorySelectorDrawer-DYHNBd2v.mjs";
+import Pe from "@mui/material/CardHeader";
 import { subDays as rt } from "date-fns/subDays";
 import st from "@mui/material/IconButton";
-import { M as it } from "../ManageIncome-BnWWjP2g.mjs";
+import { M as it } from "../ManageIncome-QvqN555q.mjs";
 import { u as je } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
-import { W as ct } from "../WidgetContainer-B0ncgABX.mjs";
-import { u as lt, g as dt, C as ut } from "../BudgetUtil--_QXyszn.mjs";
-import { M as mt } from "../MiniWidgetContainer-Cu72GNsE.mjs";
+import { W as ct } from "../WidgetContainer-D_iaToWJ.mjs";
+import { u as lt, g as dt, C as ut } from "../BudgetUtil-CLhRnCoX.mjs";
+import { M as mt } from "../MiniWidgetContainer-xLWSV6Wz.mjs";
 import { b as Ee } from "../CategoryUtil-BVixr0d5.mjs";
 const gt = w(() => {
   const { budgets: t } = D(), { totalBudgeted: n } = E(), { incomeTotal: i } = ce(), s = i - n;
   return /* @__PURE__ */ m(v, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
     /* @__PURE__ */ m(v, { alignItems: "center", children: [
-      /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: T(i, "0,0") }),
-      /* @__PURE__ */ e(B, { color: "secondary", variant: "Small", children: t.projected_income })
+      /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: T(i, "0,0") }),
+      /* @__PURE__ */ e(B, { color: "secondary", variant: "body2", children: t.projected_income })
     ] }),
-    /* @__PURE__ */ e(B, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
+    /* @__PURE__ */ e(B, { bold: !0, justifyContent: "center", variant: "body1", children: "-" }),
     /* @__PURE__ */ m(v, { alignItems: "center", children: [
-      /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: T(n, "0,0") }),
-      /* @__PURE__ */ e(B, { color: "secondary", variant: "Small", children: t.budgeted })
+      /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: T(n, "0,0") }),
+      /* @__PURE__ */ e(B, { color: "secondary", variant: "body2", children: t.budgeted })
     ] }),
-    /* @__PURE__ */ e(B, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
+    /* @__PURE__ */ e(B, { bold: !0, justifyContent: "center", variant: "body1", children: "=" }),
     /* @__PURE__ */ m(v, { alignItems: "center", children: [
-      /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: T(s, "0,0") }),
-      /* @__PURE__ */ e(B, { color: "secondary", variant: "Small", children: t.remaining })
+      /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: T(s, "0,0") }),
+      /* @__PURE__ */ e(B, { color: "secondary", variant: "body2", children: t.remaining })
     ] })
   ] });
 }), pt = w(
@@ -85,12 +85,12 @@ const gt = w(() => {
     ] }, t.guid);
   }
 ), ht = ({ onRecalculateBudgets: t }) => {
-  const { budgets: n, common: i } = D(), { spendCategories: s } = Y(), { recalculateBudgets: a, setAlert: r } = E(), [o, c] = l.useState(!1), g = s.filter((u) => u.totalAverageAmount > 0), d = async () => {
+  const { budgets: n, common: i } = D(), { spendCategories: s } = X(), { recalculateBudgets: a, setAlert: r } = E(), [o, c] = l.useState(!1), g = s.filter((u) => u.totalAverageAmount > 0), d = async () => {
     await a(g), c(!1), r(n.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ m(l.Fragment, { children: [
     /* @__PURE__ */ e(ke, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: n.recalculate_button }),
-    /* @__PURE__ */ e(B, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: n.recalculate_help }),
+    /* @__PURE__ */ e(B, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "subtitle1", children: n.recalculate_help }),
     /* @__PURE__ */ e(
       $,
       {
@@ -101,10 +101,10 @@ const gt = w(() => {
         title: n.recalculate_title,
         children: /* @__PURE__ */ m(v, { children: [
           /* @__PURE__ */ m(v, { mx: 24, my: 16, children: [
-            /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: n.recalculate_description_top }),
-            /* @__PURE__ */ e(B, { variant: "ParagraphSmall", children: n.recalculate_description_bottom })
+            /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: n.recalculate_description_top }),
+            /* @__PURE__ */ e(B, { variant: "subtitle2", children: n.recalculate_description_bottom })
           ] }),
-          /* @__PURE__ */ e(K, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: g.map((u) => /* @__PURE__ */ e(pt, { category: u }, u.guid)) }) })
+          /* @__PURE__ */ e(K, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Y, { children: g.map((u) => /* @__PURE__ */ e(pt, { category: u }, u.guid)) }) })
         ] })
       }
     )
@@ -124,18 +124,18 @@ const gt = w(() => {
       /* @__PURE__ */ e(B, { children: N(s.add_description_bottom, n) })
     ] }),
     /* @__PURE__ */ e(
-      Ye,
+      Xe,
       {
         amount: t,
         autoFocus: !0,
         label: s.add_label,
         minAmount: 0,
         setAmount: i,
-        sx: { ".MuiTypography-Body": { p: 0 } }
+        sx: { ".MuiTypography-body1": { p: 0 } }
       }
     )
   ] });
-}, ft = w(({ category: t, onAddBudget: n }) => {
+}, bt = w(({ category: t, onAddBudget: n }) => {
   const { budgets: i, common: s } = D(), [a, r] = l.useState(!1), [o, c] = l.useState(
     `${t.totalAmount === 0 ? "" : t.totalAmount}`
   );
@@ -149,7 +149,7 @@ const gt = w(() => {
           secondary: T(t.totalAmount, "0,0")
         }
       ),
-      /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ e(j, { name: "add", size: 20 }) })
+      /* @__PURE__ */ e(Ye, { children: /* @__PURE__ */ e(j, { name: "add", size: 20 }) })
     ] }) }, t.guid),
     /* @__PURE__ */ e(
       U,
@@ -170,8 +170,8 @@ const gt = w(() => {
   };
   return /* @__PURE__ */ m(v, { children: [
     /* @__PURE__ */ e(gt, {}),
-    /* @__PURE__ */ e(K, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: r.map((c) => /* @__PURE__ */ e(
-      ft,
+    /* @__PURE__ */ e(K, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Y, { children: r.map((c) => /* @__PURE__ */ e(
+      bt,
       {
         category: c,
         onAddBudget: o
@@ -180,7 +180,7 @@ const gt = w(() => {
     )) }) }),
     /* @__PURE__ */ e(ht, { onRecalculateBudgets: n })
   ] });
-}), we = 5, Fe = 100, se = 25, _t = (t) => {
+}), we = 5, Fe = 100, se = 25, ft = (t) => {
   const n = (a) => {
     a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
   }, i = (a) => {
@@ -194,8 +194,8 @@ const gt = w(() => {
   n < 0 ? n = 0 : n > 1 && (n = 1);
   const i = n * 2 * Math.PI, s = R.interpolate(0, i), a = R.arc().cornerRadius(5).innerRadius(t.radius - we * 2).outerRadius(t.radius - we).startAngle(0).endAngle(0);
   return (r) => (a.endAngle(s(r)), a(t) || "");
-}, bt = (t) => {
-  R.selectAll(".bubble").call(_t(t));
+}, _t = (t) => {
+  R.selectAll(".bubble").call(ft(t));
 }, Ie = (t, n, i) => Math.min(Math.max(t, n), i), Ct = (t, n, i) => {
   t.alpha(1).restart().force(
     "x",
@@ -229,8 +229,8 @@ const gt = w(() => {
   const a = Math.PI * se ** 2 * t, r = i < 400 || n < 300, o = r ? 40 : 20, c = Math.max(100, i - o), g = Math.max(100, n - o), d = c * g;
   let u = se;
   if (a < d) {
-    const h = Math.sqrt(d / (t * Math.PI)), b = Math.min(c, g) / 4;
-    u = Math.min(Fe, h, b);
+    const h = Math.sqrt(d / (t * Math.PI)), _ = Math.min(c, g) / 4;
+    u = Math.min(Fe, h, _);
   }
   return r && t <= 3 && (u = Math.min(u, 45)), { minRadius: Math.max(20, u * 0.6), maxRadius: u };
 }, xt = (t, n, i, s, a) => {
@@ -261,7 +261,7 @@ const gt = w(() => {
       style: { fill: n.palette.common.white, fillOpacity: 0.35 }
     }
   ) });
-}, Dt = l.memo(Tt), F = 75, be = 50;
+}, Dt = l.memo(Tt), F = 75, _e = 50;
 function Et({ bubble: t, isDraggable: n, onClick: i = () => {
 } }) {
   const [s, a] = l.useState(!1), r = $e(), { availableWidth: o } = le(), c = l.useMemo(() => {
@@ -279,16 +279,16 @@ function Et({ bubble: t, isDraggable: n, onClick: i = () => {
     budgetColors: { background: g, text: d },
     category: { icon: u, name: p },
     guid: h,
-    description: b,
-    radius: _,
+    description: _,
+    radius: f,
     x: y,
     y: A
   } = t, x = o < 400 ? -8 : -12;
-  let C = x, f = x;
-  _ > F ? (C = -14, f = -45) : _ > be && (f = -32);
+  let C = x, b = x;
+  f > F ? (C = -14, b = -45) : f > _e && (b = -32);
   let S = 32;
-  _ <= F && (S = o < 400 ? 16 : 24);
-  const I = `${t.category.name}: ${b}`, L = {
+  f <= F && (S = o < 400 ? 16 : 24);
+  const I = `${t.category.name}: ${_}`, L = {
     modifiers: [
       {
         name: "offset",
@@ -305,7 +305,7 @@ function Et({ bubble: t, isDraggable: n, onClick: i = () => {
   return /* @__PURE__ */ m(
     "g",
     {
-      "aria-label": `${p} - ${b}`,
+      "aria-label": `${p} - ${_}`,
       className: "bubble",
       id: `bubble-${h}`,
       onBlur: z,
@@ -333,41 +333,41 @@ function Et({ bubble: t, isDraggable: n, onClick: i = () => {
             stroke-opacity: 0.8;
           }
         ` }),
-        /* @__PURE__ */ e(qe, { open: s, slotProps: { popper: L }, title: I, children: /* @__PURE__ */ e("circle", { fill: g, id: `circle-${h}`, r: _ }) }),
-        /* @__PURE__ */ e("svg", { x: C, y: f, children: /* @__PURE__ */ e(j, { name: u, size: S, sx: { fill: d } }) }),
-        _ > F && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(qe, { open: s, slotProps: { popper: L }, title: I, children: /* @__PURE__ */ e("circle", { fill: g, id: `circle-${h}`, r: f }) }),
+        /* @__PURE__ */ e("svg", { x: C, y: b, children: /* @__PURE__ */ e(j, { name: u, size: S, sx: { fill: d } }) }),
+        f > F && /* @__PURE__ */ e(
           B,
           {
             bold: !0,
             component: "text",
             id: `budget-category-${h}`,
             sx: { fill: d },
-            variant: "Small",
+            variant: "body2",
             y: 4,
             children: p
           }
         ),
-        _ > be && /* @__PURE__ */ e(
+        f > _e && /* @__PURE__ */ e(
           B,
           {
             bold: !0,
             component: "text",
             id: `budget-description-${h}-1`,
             sx: { fill: d },
-            variant: "Body",
-            y: _ <= F ? 12 : 24,
-            children: _ <= F ? b.split(" ")[0] : b
+            variant: "body1",
+            y: f <= F ? 12 : 24,
+            children: f <= F ? _.split(" ")[0] : _
           }
         ),
-        _ <= F && _ > be && /* @__PURE__ */ e(
+        f <= F && f > _e && /* @__PURE__ */ e(
           B,
           {
             component: "text",
             id: `budget-description-${h}-2`,
             sx: { fill: d },
-            variant: "XSmall",
+            variant: "caption",
             y: 28,
-            children: b.split(" ")[1]
+            children: _.split(" ")[1]
           }
         ),
         /* @__PURE__ */ e(Dt, { bubble: c })
@@ -386,9 +386,9 @@ const wt = ({
   const [a, r] = l.useState([]), o = l.useRef(null), c = l.useRef(!1), { detailedBudgets: g } = E(), d = l.useCallback(() => {
     const u = o.current, p = Bt(g), h = p.nodes();
     if (u) {
-      const b = u.nodes(), _ = new Map(b.map((y) => [y.guid, y]));
+      const _ = u.nodes(), f = new Map(_.map((y) => [y.guid, y]));
       h.forEach((y) => {
-        const A = _.get(y.guid);
+        const A = f.get(y.guid);
         A && Object.assign(y, {
           vx: A.vx,
           vy: A.vy,
@@ -406,22 +406,22 @@ const wt = ({
   }, []), l.useEffect(() => {
     const u = o.current;
     if (!u) return;
-    const p = u.nodes(), h = n > 0 && n < 450 || t > 0 && t < 300, b = At(p, g, h, t, n);
-    u.nodes(b), Ct(u, t, n), i && setTimeout(() => {
-      bt(u);
-    }, 0), r([...b]);
+    const p = u.nodes(), h = n > 0 && n < 450 || t > 0 && t < 300, _ = At(p, g, h, t, n);
+    u.nodes(_), Ct(u, t, n), i && setTimeout(() => {
+      _t(u);
+    }, 0), r([..._]);
   }, [t, n, i, g]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(n), children: a.map((u) => /* @__PURE__ */ e(Et, { bubble: u, isDraggable: i, onClick: s }, u.guid)) });
 }, It = w(wt), Ot = ({
   isMiniWidget: t = !1,
   onConnectAccountsClick: n,
   createBudgetOnClick: i
 }) => {
-  const { config: s } = Le(), { recalculateBudgets: a } = E(), { spendCategories: r } = Y(), { budgets: o } = D(), { availableWidth: c } = le(), { isMobile: g } = me(c), d = t && g, [u, p] = l.useState(!1), [h, b] = l.useState(!1), [_, y] = l.useState(!1), A = l.useMemo(() => [...r.filter((C) => C.totalAverageAmount > 0)], [r]), x = async () => {
+  const { config: s } = Le(), { recalculateBudgets: a } = E(), { spendCategories: r } = X(), { budgets: o } = D(), { availableWidth: c } = le(), { isMobile: g } = me(c), d = t && g, [u, p] = l.useState(!1), [h, _] = l.useState(!1), [f, y] = l.useState(!1), A = l.useMemo(() => [...r.filter((C) => C.totalAverageAmount > 0)], [r]), x = async () => {
     y(!0);
-    const { data: C, isSuccess: f } = await a(A);
-    y(!1), f ? (C.length === 0 && b(!0), p(!1)) : p(!0);
+    const { data: C, isSuccess: b } = await a(A);
+    y(!1), b ? (C.length === 0 && _(!0), p(!1)) : p(!0);
   };
-  return _ ? /* @__PURE__ */ e(ge, {}) : u ? /* @__PURE__ */ e(
+  return f ? /* @__PURE__ */ e(ge, {}) : u ? /* @__PURE__ */ e(
     ye,
     {
       header: o.autogenerate_budgets_error_header,
@@ -503,13 +503,13 @@ const wt = ({
     shouldShowZeroState: a,
     unavailableWidth: r = 24
   }) => {
-    const { onEvent: o } = Z(), { setSelectedBudget: c } = E(), { isInitialized: g } = q(), { accounts: d } = D(), { availableWidth: u } = le(), { isMobile: p } = me(), [h, b] = l.useState(!1), _ = l.useMemo(() => u - r, [u]), y = (x) => {
-      c(x), o(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
+    const { onEvent: o } = Z(), { setSelectedBudget: c } = E(), { isInitialized: g } = q(), { accounts: d } = D(), { availableWidth: u } = le(), { isMobile: p } = me(), [h, _] = l.useState(!1), f = l.useMemo(() => u - r, [u]), y = (x) => {
+      c(x), o(G.BUDGETS_CLICK_BUDGET_CATEGORY, {
         budget_category: x.category.name,
         click_type: "bubble"
       });
     }, A = () => {
-      b(!0), o(P.ACCOUNTS_CLICK_CONNECT);
+      _(!0), o(G.ACCOUNTS_CLICK_CONNECT);
     };
     return /* @__PURE__ */ m(
       K,
@@ -530,13 +530,13 @@ const wt = ({
               height: n,
               isDraggable: i,
               onClick: y,
-              width: _
+              width: f
             }
           ),
           /* @__PURE__ */ e(
             Ze,
             {
-              onClose: () => b(!1),
+              onClose: () => _(!1),
               showConnectionsWidget: h,
               title: d.manage_connections
             }
@@ -561,16 +561,16 @@ const wt = ({
   ];
   return /* @__PURE__ */ e(ve, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ m(v, { alignItems: "center", gap: 16, children: [
     /* @__PURE__ */ e(W, { categoryGuid: a, size: 56 }),
-    /* @__PURE__ */ e(B, { variant: "H1", children: `${T(o, "0,0")} / ${T(n, "0,0")}` }),
-    /* @__PURE__ */ e(B, { bold: !0, variant: "XSmall", children: s }),
+    /* @__PURE__ */ e(B, { variant: "h1", children: `${T(o, "0,0")} / ${T(n, "0,0")}` }),
+    /* @__PURE__ */ e(B, { bold: !0, variant: "caption", children: s }),
     /* @__PURE__ */ e(Be, { data: c, height: 10 })
   ] }) }) });
 }, Mt = w(() => {
   const { budgets: t } = D();
   return /* @__PURE__ */ m(v, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     /* @__PURE__ */ e(j, { color: "action", name: "bubble_chart", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ e(B, { bold: !0, color: "text.secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
-    /* @__PURE__ */ e(B, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
+    /* @__PURE__ */ e(B, { bold: !0, color: "text.secondary", variant: "body2", children: t.zero_state_no_sub_budgets }),
+    /* @__PURE__ */ e(B, { color: "text.secondary", variant: "caption", children: t.zero_state_no_sub_budgets_description })
   ] });
 }), Rt = w(({ budget: t }) => {
   const {
@@ -581,12 +581,12 @@ const wt = ({
     transaction_total: r
   } = t, { setSelectedSubBudget: o } = E();
   return /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ m(ee, { onClick: () => o(t), children: [
-    /* @__PURE__ */ e(ue, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Pe, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(ue, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ge, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       te,
       {
-        primary: /* @__PURE__ */ e(v, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: t.category.name }) }),
-        secondary: /* @__PURE__ */ e(v, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(B, { fontWeight: 400, variant: "Body", children: `
+        primary: /* @__PURE__ */ e(v, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(v, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(B, { fontWeight: 400, variant: "body1", children: `
                   ${T(r, "0,0")} / 
                   ${T(n, "0,0")}
                 ` }) })
@@ -594,23 +594,23 @@ const wt = ({
     )
   ] }) });
 }), Lt = w(({ category: t, parentBudget: n }) => {
-  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: r } = nt(), { addBudget: o } = E(), [c, g] = l.useState(!1), [d, u] = l.useState(!1), [p, h] = l.useState(""), [b, _] = l.useState(void 0);
+  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: r } = nt(), { addBudget: o } = E(), [c, g] = l.useState(!1), [d, u] = l.useState(!1), [p, h] = l.useState(""), [_, f] = l.useState(void 0);
   l.useEffect(() => {
     r((x) => {
-      const C = t.subCategories.find((f) => f.guid === x);
-      C && (_(C), h(`${C.currentAmount === 0 ? "" : C.currentAmount}`), u(!0));
+      const C = t.subCategories.find((b) => b.guid === x);
+      C && (f(C), h(`${C.currentAmount === 0 ? "" : C.currentAmount}`), u(!0));
     });
   }, []);
   const y = () => {
     a(t.guid), g(!0);
   }, A = async () => {
-    b && Number(p) > 0 && (await o(b, Number(p), n.guid), u(!1), g(!1), _(void 0));
+    _ && Number(p) > 0 && (await o(_, Number(p), n.guid), u(!1), g(!1), f(void 0));
   };
   return /* @__PURE__ */ m(K, { children: [
     /* @__PURE__ */ e(Q, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(ee, { onClick: y, children: /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(v, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ m(v, { alignItems: "center", direction: "row", gap: 8, children: [
         /* @__PURE__ */ e(j, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
-        /* @__PURE__ */ e(B, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
+        /* @__PURE__ */ e(B, { bold: !0, sx: { color: "primary.light" }, variant: "body1", children: i.add_sub_budget_button })
       ] }),
       /* @__PURE__ */ e(j, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
     ] }) }) }) }),
@@ -622,7 +622,7 @@ const wt = ({
         isOpen: c,
         onClose: () => g(!1),
         title: i.add_sub_budget_title,
-        children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(at, { category: t, subCategories: t.subCategories }) })
+        children: /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(at, { category: t, subCategories: t.subCategories }) })
       }
     ),
     /* @__PURE__ */ e(
@@ -638,7 +638,7 @@ const wt = ({
           pe,
           {
             amount: p,
-            categoryName: b?.name || "",
+            categoryName: _?.name || "",
             onAmountChanged: h
           }
         )
@@ -646,7 +646,7 @@ const wt = ({
     )
   ] });
 }), Nt = w(({ budget: t }) => {
-  const { category: n, subBudgets: i } = t, { budgets: s, common: a } = D(), { deleteBudget: r, selectedSubBudget: o, setSelectedSubBudget: c, updateBudget: g } = E(), { filter: d, setFilter: u } = J(), [p, h] = l.useState(!1), [b, _] = l.useState(!1), [y, A] = l.useState("");
+  const { category: n, subBudgets: i } = t, { budgets: s, common: a } = D(), { deleteBudget: r, selectedSubBudget: o, setSelectedSubBudget: c, updateBudget: g } = E(), { filter: d, setFilter: u } = J(), [p, h] = l.useState(!1), [_, f] = l.useState(!1), [y, A] = l.useState("");
   l.useEffect(() => {
     o && (A(`${o.amount}`), u({
       ...d,
@@ -659,15 +659,15 @@ const wt = ({
       amount: Number(y)
     });
   }, C = async () => {
-    o && await r(o.guid), _(!1), f();
-  }, f = () => {
+    o && await r(o.guid), f(!1), b();
+  }, b = () => {
     u({
       ...d,
       custom: (S) => S.category_guid === t.category_guid || S.top_level_category_guid === t.category_guid
     }), c(void 0);
   };
   return /* @__PURE__ */ m(l.Fragment, { children: [
-    /* @__PURE__ */ m(X, { sx: { bgcolor: "background.paper" }, children: [
+    /* @__PURE__ */ m(Y, { sx: { bgcolor: "background.paper" }, children: [
       i.length === 0 ? /* @__PURE__ */ e(Mt, {}) : i.map((S) => /* @__PURE__ */ m(l.Fragment, { children: [
         /* @__PURE__ */ e(Rt, { budget: S }),
         /* @__PURE__ */ e(de, {})
@@ -679,9 +679,9 @@ const wt = ({
       {
         ariaLabelClose: a.close_aria,
         isOpen: !!o,
-        onClose: f,
+        onClose: b,
         onPrimaryAction: () => h(!0),
-        onSecondaryAction: () => _(!0),
+        onSecondaryAction: () => f(!0),
         primaryText: s.details_edit_button,
         secondaryText: s.details_delete_button,
         title: s.details_title,
@@ -715,13 +715,13 @@ const wt = ({
         U,
         {
           copy: { close_aria: a.close_aria, title: s.delete_title },
-          isOpen: b,
-          onClose: () => _(!1),
+          isOpen: _,
+          onClose: () => f(!1),
           onPrimaryAction: C,
           primaryColor: "error",
           primaryText: "Delete",
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(B, { variant: "Paragraph", children: N(s.delete_description, o.category.name) })
+          children: /* @__PURE__ */ e(B, { variant: "subtitle1", children: N(s.delete_description, o.category.name) })
         }
       )
     ] })
@@ -731,14 +731,14 @@ const wt = ({
     sortedTransactions: d,
     sortedTransactionsWithSplits: u,
     tags: p
-  } = J(), [h, b] = l.useState(0), [_, y] = l.useState(""), A = l.useMemo(
-    () => d.find((S) => S.guid === _),
-    [_, d]
+  } = J(), [h, _] = l.useState(0), [f, y] = l.useState(""), A = l.useMemo(
+    () => d.find((S) => S.guid === f),
+    [f, d]
   ), x = (S, I) => {
-    b(I);
+    _(I);
   }, C = () => {
     et(u, p), i(s.alert_csv_downloaded);
-  }, f = d.length > 0 && !n && (o || g && !c);
+  }, b = d.length > 0 && !n && (o || g && !c);
   return /* @__PURE__ */ m(v, { gap: 24, children: [
     /* @__PURE__ */ e(He, { budget: t }),
     /* @__PURE__ */ m(v, { children: [
@@ -757,7 +757,7 @@ const wt = ({
         }
       ),
       h === 0 && /* @__PURE__ */ m(v, { children: [
-        f && /* @__PURE__ */ e(v, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+        b && /* @__PURE__ */ e(v, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
           ke,
           {
             onClick: C,
@@ -791,9 +791,9 @@ const wt = ({
     setAlert: g,
     setSelectedBudget: d,
     updateBudget: u
-  } = E(), { setFilter: p } = J(), [h, b] = l.useState(!1), [_, y] = l.useState(!1), [A, x] = l.useState(!1), [C, f] = l.useState("");
+  } = E(), { setFilter: p } = J(), [h, _] = l.useState(!1), [f, y] = l.useState(!1), [A, x] = l.useState(!1), [C, b] = l.useState("");
   l.useEffect(() => {
-    o && !c && (f(`${o.amount}`), b(!0), p({
+    o && !c && (b(`${o.amount}`), _(!0), p({
       accounts: t,
       dateRange: a,
       custom: (O) => O.category_guid === o.category_guid || O.top_level_category_guid === o.category_guid,
@@ -809,11 +809,11 @@ const wt = ({
   }, I = async () => {
     o && (await r(o.guid), g(N(n.alert_budget_deleted, o.category.name))), L();
   }, L = () => {
-    b(!1), setTimeout(() => {
+    _(!1), setTimeout(() => {
       d(void 0);
     }, 250);
   }, M = () => {
-    y(!1), f(`${o?.amount}`);
+    y(!1), b(`${o?.amount}`);
   };
   if (o)
     return /* @__PURE__ */ m(l.Fragment, { children: [
@@ -849,7 +849,7 @@ const wt = ({
         {
           copy: { close_aria: i.close_aria, title: n.details_edit_title },
           disablePrimaryButton: Number(C) <= 0,
-          isOpen: _,
+          isOpen: f,
           onClose: M,
           onPrimaryAction: S,
           onSecondaryAction: M,
@@ -859,7 +859,7 @@ const wt = ({
             {
               amount: C,
               categoryName: o.category.name,
-              onAmountChanged: f
+              onAmountChanged: b
             }
           )
         }
@@ -874,11 +874,11 @@ const wt = ({
           primaryColor: "error",
           primaryText: n.details_delete_button,
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(B, { variant: "Paragraph", children: N(n.delete_description, o.category.name) })
+          children: /* @__PURE__ */ e(B, { variant: "subtitle1", children: N(n.delete_description, o.category.name) })
         }
       )
     ] });
-}), Pt = ({ budget: t, onClick: n }) => {
+}), Gt = ({ budget: t, onClick: n }) => {
   const {
     amount: i,
     budgetColors: { background: s, description: a },
@@ -889,19 +889,19 @@ const wt = ({
     transaction_total: d
   } = t, u = c > 100;
   return /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ m(ee, { onClick: () => n?.(t), children: [
-    /* @__PURE__ */ e(ue, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Pe, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: r, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(ue, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ge, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: r, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       te,
       {
         primary: /* @__PURE__ */ m(v, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: t.category.name }),
-          /* @__PURE__ */ e(B, { fontWeight: 400, variant: "Body", children: `
+          /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: t.category.name }),
+          /* @__PURE__ */ e(B, { fontWeight: 400, variant: "body1", children: `
                   ${T(d, "0,0")} /
                   ${T(i, "0,0")}
                 ` })
         ] }),
         secondary: /* @__PURE__ */ m(v, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(B, { variant: "XSmall", children: `${g.length} Sub-budgets` }),
+          /* @__PURE__ */ e(B, { variant: "caption", children: `${g.length} Sub-budgets` }),
           /* @__PURE__ */ e(
             B,
             {
@@ -914,7 +914,7 @@ const wt = ({
                   }
                 }
               },
-              variant: "XSmall",
+              variant: "caption",
               children: o
             }
           )
@@ -922,24 +922,24 @@ const wt = ({
       }
     )
   ] }) });
-}, Gt = w(() => {
+}, Pt = w(() => {
   const { onEvent: t } = Z(), { budgets: n } = D(), { detailedBudgets: i, setSelectedBudget: s } = E(), a = (r) => {
-    s(r), t(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
+    s(r), t(G.BUDGETS_CLICK_BUDGET_CATEGORY, {
       budget_category: r.category.name,
       click_type: "list"
     });
   };
   return /* @__PURE__ */ m(ve, { elevation: 2, children: [
-    /* @__PURE__ */ e(Ge, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Re, { children: n.budget_categories_title }) }),
-    /* @__PURE__ */ e(Te, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(X, { children: i.map((r) => /* @__PURE__ */ m(l.Fragment, { children: [
-      /* @__PURE__ */ e(Pt, { budget: r, onClick: a }),
+    /* @__PURE__ */ e(Pe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Re, { children: n.budget_categories_title }) }),
+    /* @__PURE__ */ e(Te, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(Y, { children: i.map((r) => /* @__PURE__ */ m(l.Fragment, { children: [
+      /* @__PURE__ */ e(Gt, { budget: r, onClick: a }),
       /* @__PURE__ */ e(de, {})
     ] }, r.guid)) }) })
   ] });
 }), jt = w(() => {
-  const t = ie(), { onEvent: n } = Z(), { visibleAccounts: i } = Ne(), { budgets: s, common: a, recurring: r } = D(), { incomeCategories: o, spendCategories: c } = Y(), { detailedBudgets: g, totalBudgeted: d } = E(), { incomeTotal: u } = ce(), { setFilter: p } = J(), [h, b] = l.useState(!1), [_, y] = l.useMemo(() => {
-    const f = c.reduce((M, O) => M + O.totalAmount, 0);
-    let S = f / d;
+  const t = ie(), { onEvent: n } = Z(), { visibleAccounts: i } = Ne(), { budgets: s, common: a, recurring: r } = D(), { incomeCategories: o, spendCategories: c } = X(), { detailedBudgets: g, totalBudgeted: d } = E(), { incomeTotal: u } = ce(), { setFilter: p } = J(), [h, _] = l.useState(!1), [f, y] = l.useMemo(() => {
+    const b = c.reduce((M, O) => M + O.totalAmount, 0);
+    let S = b / d;
     S > 1 && (S = 1);
     let I = t.palette.success.main;
     S > 0.8 && S < 1 ? I = t.palette.warning.main : S >= 1 && (I = t.palette.error.main);
@@ -949,12 +949,12 @@ const wt = ({
         percentage: `${S}`
       }
     ];
-    return [f, L];
+    return [b, L];
   }, [g, c]), [A, x] = l.useMemo(() => {
-    const f = Math.abs(
+    const b = Math.abs(
       o.reduce((L, M) => L + M.totalAmount, 0)
     );
-    let S = f / u;
+    let S = b / u;
     S > 1 && (S = 1);
     const I = [
       {
@@ -962,31 +962,31 @@ const wt = ({
         percentage: `${S}`
       }
     ];
-    return [f, I];
+    return [b, I];
   }, [o, u]), C = () => {
     p({
-      accounts: i.map((f) => f.guid),
+      accounts: i.map((b) => b.guid),
       dateRange: {
         start: rt(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
       }
-    }), b(!0), n(P.BUDGETS_CLICK_EDIT_INCOME);
+    }), _(!0), n(G.BUDGETS_CLICK_EDIT_INCOME);
   };
   return /* @__PURE__ */ m(ve, { elevation: 2, sx: { overflow: "visible" }, children: [
-    /* @__PURE__ */ e(Ge, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Re, { children: s.overview_title }) }),
+    /* @__PURE__ */ e(Pe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Re, { children: s.overview_title }) }),
     /* @__PURE__ */ e(Te, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ m(v, { gap: 24, children: [
       /* @__PURE__ */ m(v, { gap: 8, children: [
-        /* @__PURE__ */ e(B, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
+        /* @__PURE__ */ e(B, { bold: !0, sx: { mb: 8 }, variant: "body1", children: s.spending_title }),
         /* @__PURE__ */ e(Be, { data: y, height: 16 }),
-        /* @__PURE__ */ e(B, { variant: "Small", children: N(
+        /* @__PURE__ */ e(B, { variant: "body2", children: N(
           s.spending_description,
-          T(_, "0,0"),
+          T(f, "0,0"),
           T(d, "0,0")
         ) })
       ] }),
       /* @__PURE__ */ m(v, { gap: 8, children: [
         /* @__PURE__ */ m(v, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
-          /* @__PURE__ */ e(B, { bold: !0, variant: "Body", children: s.income_title }),
+          /* @__PURE__ */ e(B, { bold: !0, variant: "body1", children: s.income_title }),
           /* @__PURE__ */ e(
             st,
             {
@@ -998,7 +998,7 @@ const wt = ({
           )
         ] }),
         /* @__PURE__ */ e(Be, { data: x, height: 16 }),
-        /* @__PURE__ */ e(B, { variant: "Small", children: N(
+        /* @__PURE__ */ e(B, { variant: "body2", children: N(
           s.income_description,
           T(A, "0,0"),
           T(u, "0,0")
@@ -1010,7 +1010,7 @@ const wt = ({
       {
         ariaLabelClose: a.close_aria,
         isOpen: h,
-        onClose: () => b(!1),
+        onClose: () => _(!1),
         title: r.manage_income,
         children: /* @__PURE__ */ e(it, { forOverview: !0 })
       }
@@ -1021,33 +1021,33 @@ const wt = ({
     alert: u,
     dateRange: p,
     isDataLoaded: h,
-    loadBudgetData: b,
-    setDateRange: _,
+    loadBudgetData: _,
+    setDateRange: f,
     setAlert: y,
     setTheme: A,
     detailedBudgets: x
-  } = E(), { setDateRange: C } = ce(), { loadDateRangeCategoryTotals: f, loadMonthlyCategoryTotals: S } = Y(), { isSmallTablet: I, isMobile: L, isSmallMobile: M } = me(), O = I || L || M, [z, k] = l.useState(!1);
+  } = E(), { setDateRange: C } = ce(), { loadDateRangeCategoryTotals: b, loadMonthlyCategoryTotals: S } = X(), { isSmallTablet: I, isMobile: L, isSmallMobile: M } = me(), O = I || L || M, [z, k] = l.useState(!1);
   je({
     widgetName: "BubbleBudgetsWidget",
     isLoaded: h
   }), l.useEffect(() => {
-    A(i), h || b().finally(() => {
-      s(P.BUDGETS_VIEW);
+    A(i), h || _().finally(() => {
+      s(G.BUDGETS_VIEW);
     });
-  }, []), l.useEffect(() => (_({ start: re(ne()), end: Ce(ne()) }), () => {
-    _({ start: re(ne()), end: Ce(ne()) });
+  }, []), l.useEffect(() => (f({ start: re(ne()), end: Ce(ne()) }), () => {
+    f({ start: re(ne()), end: Ce(ne()) });
   }), [a]), l.useEffect(() => {
-    c && (d(p.start, p.end), f(g, p.start, p.end).finally(), S(g).finally(), C(p));
+    c && (d(p.start, p.end), b(g, p.start, p.end).finally(), S(g).finally(), C(p));
   }, [c, g, p]);
   const he = (V) => {
-    _({ start: V[0] || /* @__PURE__ */ new Date(), end: V[1] || /* @__PURE__ */ new Date() });
-  }, fe = () => {
-    s(P.BUDGETS_CLICK_FILTER);
+    f({ start: V[0] || /* @__PURE__ */ new Date(), end: V[1] || /* @__PURE__ */ new Date() });
+  }, be = () => {
+    s(G.BUDGETS_CLICK_FILTER);
   }, oe = () => {
-    k(!0), s(P.BUDGETS_CLICK_ADD);
-  }, _e = () => {
+    k(!0), s(G.BUDGETS_CLICK_ADD);
+  }, fe = () => {
     k(!1);
-  }, G = () => {
+  }, P = () => {
     k(!1);
   }, H = Ke(p.end, re(/* @__PURE__ */ new Date()));
   return !c || !h ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ m(
@@ -1065,7 +1065,7 @@ const wt = ({
         shouldDisableNext: H,
         shouldDisablePicker: !0
       },
-      onAccountsFilterClick: fe,
+      onAccountsFilterClick: be,
       onBackClick: t,
       sx: n,
       title: r.budgets_title,
@@ -1097,7 +1097,7 @@ const wt = ({
                   width: O ? "100%" : Me,
                   children: [
                     /* @__PURE__ */ e(jt, {}),
-                    /* @__PURE__ */ e(Gt, {})
+                    /* @__PURE__ */ e(Pt, {})
                   ]
                 }
               )
@@ -1115,8 +1115,8 @@ const wt = ({
             children: /* @__PURE__ */ e(
               ze,
               {
-                onAddBudget: _e,
-                onRecalculateBudgets: G
+                onAddBudget: fe,
+                onRecalculateBudgets: P
               }
             )
           }
@@ -1177,7 +1177,7 @@ const wt = ({
     ] })
   ] });
 }, Ft = (t) => {
-  const n = ie(), { onEvent: i } = Z(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: r, setTheme: o } = E(), { budgets: c, common: g } = D(), { isInitialized: d, selectedAccounts: u } = q(), { loadDateRangeCategoryTotals: p, loadMonthlyCategoryTotals: h } = Y(), b = lt(), [_, y] = l.useState(!1);
+  const n = ie(), { onEvent: i } = Z(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: r, setTheme: o } = E(), { budgets: c, common: g } = D(), { isInitialized: d, selectedAccounts: u } = q(), { loadDateRangeCategoryTotals: p, loadMonthlyCategoryTotals: h } = X(), _ = lt(), [f, y] = l.useState(!1);
   l.useEffect(() => {
     a || r().finally();
   }, []), l.useEffect(() => {
@@ -1190,7 +1190,7 @@ const wt = ({
     ).finally(), h(u).finally());
   }, [d, u, a]);
   const A = () => {
-    y(!0), i(P.BUDGETS_CLICK_ADD);
+    y(!0), i(G.BUDGETS_CLICK_ADD);
   }, x = () => {
     y(!1);
   }, C = () => y(!1);
@@ -1198,12 +1198,12 @@ const wt = ({
     widgetName: "BubbleBudgetsMiniWidget",
     isLoaded: a
   }), !d || !a) return /* @__PURE__ */ e(ge, {});
-  const f = s.length === 0;
+  const b = s.length === 0;
   return /* @__PURE__ */ m(
     mt,
     {
       contentStyles: { height: "calc(100% - 66px)", ":last-child": { pb: 0 } },
-      primaryCtaLabel: f ? c.get_started_cta : c.details_cta,
+      primaryCtaLabel: b ? c.get_started_cta : c.details_cta,
       sx: { height: "100%" },
       title: c.budgets_title,
       ...t,
@@ -1212,16 +1212,16 @@ const wt = ({
           zt,
           {
             budgetsCopy: c,
-            difference: b,
+            difference: _,
             handleAddClick: A,
-            shouldShowZeroState: f
+            shouldShowZeroState: b
           }
         ),
         /* @__PURE__ */ e(
           $,
           {
             ariaLabelClose: g.close_aria,
-            isOpen: _,
+            isOpen: f,
             onClose: () => y(!1),
             title: c.add_new_title,
             children: /* @__PURE__ */ e(
@@ -1251,27 +1251,27 @@ const wt = ({
     setAlert: g,
     setSelectedBudget: d,
     updateBudget: u
-  } = E(), { budgets: p, common: h } = D(), { isCopyLoaded: b, selectedAccountGuids: _ } = q(), y = $e(), { setFilter: A } = J(), [x, C] = l.useState(""), [f, S] = l.useState(null), [I, L] = l.useState(!1), M = l.useRef(!1);
+  } = E(), { budgets: p, common: h } = D(), { isCopyLoaded: _, selectedAccountGuids: f } = q(), y = $e(), { setFilter: A } = J(), [x, C] = l.useState(""), [b, S] = l.useState(null), [I, L] = l.useState(!1), M = l.useRef(!1);
   if (l.useEffect(() => {
     !o || c || (C(`${o.amount}`), A({
-      accounts: _,
+      accounts: f,
       dateRange: a,
-      custom: ({ category_guid: G, top_level_category_guid: H }) => {
+      custom: ({ category_guid: P, top_level_category_guid: H }) => {
         const { category_guid: V } = o;
-        return G === V || H === V;
+        return P === V || H === V;
       },
       showSplits: !0
     }), L(!0));
-  }, [o]), !b) return /* @__PURE__ */ e(ge, {});
+  }, [o]), !_) return /* @__PURE__ */ e(ge, {});
   if (!o) return null;
   const O = () => {
     C(""), S(null), L(!1), setTimeout(() => {
       d(void 0), t?.();
     }, 250);
   }, z = () => {
-    f === "delete" && n?.(ae.CANCEL_DELETE, x), C(o.amount ? `${o.amount}` : ""), S(null);
+    b === "delete" && n?.(ae.CANCEL_DELETE, x), C(o.amount ? `${o.amount}` : ""), S(null);
   }, k = async () => {
-    if (f === "edit") {
+    if (b === "edit") {
       if (M.current) return;
       M.current = !0, await u({
         ...o,
@@ -1280,11 +1280,11 @@ const wt = ({
         N(p.alert_budget_updated, o.category.name)
       ), S(null), M.current = !1;
     }
-    f === "delete" && (await r(o.guid), n?.(ae.END_DELETE, x), O());
-  }, { remainingAmount: he, spentPercentage: fe, iconColor: oe } = dt(
+    b === "delete" && (await r(o.guid), n?.(ae.END_DELETE, x), O());
+  }, { remainingAmount: he, spentPercentage: be, iconColor: oe } = dt(
     o.transaction_total ?? 0,
     o.amount ?? 0
-  ), _e = (G, H) => N(G, /* @__PURE__ */ e("b", { children: H }));
+  ), fe = (P, H) => N(P, /* @__PURE__ */ e("b", { children: H }));
   return /* @__PURE__ */ m(l.Fragment, { children: [
     /* @__PURE__ */ m(
       $,
@@ -1335,7 +1335,7 @@ const wt = ({
               iconColor: oe,
               onViewHistory: i,
               remainingAmount: he,
-              spentPercentage: fe,
+              spentPercentage: be,
               startDate: o.start_date,
               totalTransaction: o.transaction_total
             }
@@ -1354,26 +1354,26 @@ const wt = ({
         ]
       }
     ),
-    f && /* @__PURE__ */ e(
+    b && /* @__PURE__ */ e(
       ut,
       {
         closeAriaLabel: h.close_aria,
-        content: _e(
-          p[f === "edit" ? "edit_budget_content" : "delete_description"],
+        content: fe(
+          p[b === "edit" ? "edit_budget_content" : "delete_description"],
           o.category.name
         ),
-        handleInputChange: (G) => C(G.toString()),
+        handleInputChange: (P) => C(P.toString()),
         handleModalClose: z,
         handlePrimaryAction: k,
         handleSecondaryAction: z,
-        inputLabel: f === "edit" ? p.details_edit_title : "",
+        inputLabel: b === "edit" ? p.details_edit_title : "",
         inputValue: x,
         isOpen: !0,
-        primaryColor: f === "edit" ? "primary" : "error",
-        primaryText: p[f === "edit" ? "add_save_button" : "details_delete_button"],
-        secondaryColor: f === "edit" ? "primary" : "inherit",
+        primaryColor: b === "edit" ? "primary" : "error",
+        primaryText: p[b === "edit" ? "add_save_button" : "details_delete_button"],
+        secondaryColor: b === "edit" ? "primary" : "inherit",
         secondaryText: h.cancel_button,
-        title: p[f === "edit" ? "details_edit_title" : "delete_title"]
+        title: p[b === "edit" ? "details_edit_title" : "delete_title"]
       }
     )
   ] });