@mx-cartographer/experiences 7.0.52-alpha.mega1 → 7.0.52-alpha.mega3

package/dist/budgets/index.es.js

@@ -4,7 +4,7 @@ import { observer as E } from "mobx-react-lite";
 import { endOfMonth as le } from "date-fns/endOfMonth";
 import { startOfMonth as q } from "date-fns/startOfMonth";
 import F from "@mui/material/Box";
-import B from "@mui/material/Stack";
+import S from "@mui/material/Stack";
 import J from "@mui/material/styles/useTheme";
 import { Icon as P, Text as b, CategoryIcon as H, H1 as je, H3 as Be } from "@mxenabled/mxui";
 import { u as ze } from "../BudgetUtil-2EncZLBQ.mjs";
@@ -15,7 +15,7 @@ import { a as me, i as D, m as z, u as I, g as W, b as Q, p as He, j as ee, h as
 import { L as G } from "../Loader-DUaFpDGv.mjs";
 import { E as ie } from "../EmptyState-C0lr9E5T.mjs";
 import { u as ge } from "../useScreenSize-B6JyS_Lj.mjs";
-import { A as k, W as We } from "../WidgetContainer-hsbxZmZB.mjs";
+import { A as L, W as We } from "../WidgetContainer-hsbxZmZB.mjs";
 import X from "@mui/material/List";
 import { f as T } from "../NumberFormatting-CtWHhyBX.mjs";
 import ve from "@mui/material/Button";
@@ -24,8 +24,8 @@ import Y from "@mui/material/ListItem";
 import oe from "@mui/material/ListItemAvatar";
 import K from "@mui/material/ListItemButton";
 import V from "@mui/material/ListItemText";
-import { b as L } from "../Localization-2MODESHW.mjs";
-import { D as N } from "../Drawer-kEE73B87.mjs";
+import { b as R } from "../Localization-2MODESHW.mjs";
+import { D as k } from "../Drawer-kEE73B87.mjs";
 import Xe from "@mui/material/ListItemSecondaryAction";
 import { C as Ye } from "../CurrencyInput-CRtdzs3o.mjs";
 import { a as j } from "../Dialog-CWW597AF.mjs";
@@ -48,76 +48,76 @@ import { subDays as ot } from "date-fns/subDays";
 import at from "@mui/material/IconButton";
 import { M as rt } from "../ManageIncome-clecqBHm.mjs";
 const be = 5, De = 100, ue = 25, st = (t) => {
-  const o = (r) => {
-    r.active || t.alphaTarget(0.3).restart(), r.subject.fx = r.subject.x, r.subject.fy = r.subject.y;
-  }, i = (r) => {
-    r.subject.fx = r.x, r.subject.fy = r.y;
-  }, s = (r) => {
-    r.active || t.alphaTarget(0), r.subject.fx = null, r.subject.fy = null;
+  const o = (a) => {
+    a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
+  }, s = (a) => {
+    a.subject.fx = a.x, a.subject.fy = a.y;
+  }, i = (a) => {
+    a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
   };
-  return O.drag().on("start", o).on("drag", i).on("end", s);
+  return O.drag().on("start", o).on("drag", s).on("end", i);
 }, it = (t) => {
   let o = t.transaction_total / t.amount;
   o < 0 ? o = 0 : o > 1 && (o = 1);
-  const i = o * 2 * Math.PI, s = O.interpolate(0, i), r = O.arc().cornerRadius(5).innerRadius(t.radius - be * 2).outerRadius(t.radius - be).startAngle(0).endAngle(0);
-  return (n) => (r.endAngle(s(n)), r(t) || "");
+  const s = o * 2 * Math.PI, i = O.interpolate(0, s), a = O.arc().cornerRadius(5).innerRadius(t.radius - be * 2).outerRadius(t.radius - be).startAngle(0).endAngle(0);
+  return (n) => (a.endAngle(i(n)), a(t) || "");
 }, ct = (t) => {
   O.selectAll(".bubble").call(st(t));
-}, lt = (t, o, i) => {
-  const r = i / 2, n = o / 2, a = O.forceX(r).strength(0.01), l = O.forceY(n).strength(0.02);
-  t.alpha(1).restart().force("x", a).force("y", l).force("boundary", () => {
+}, lt = (t, o, s) => {
+  const a = s / 2, n = o / 2, r = O.forceX(a).strength(0.01), l = O.forceY(n).strength(0.02);
+  t.alpha(1).restart().force("x", r).force("y", l).force("boundary", () => {
     t.nodes().forEach((c) => {
       if (c.x === void 0 || c.y === void 0) return;
-      const u = c.radius + 10, m = i - c.radius - 10, y = c.radius + 10, _ = o - c.radius - 10;
-      c.x < u ? (c.x = u, c.vx = Math.abs(c.vx || 0) * 0.1) : c.x > m && (c.x = m, c.vx = -Math.abs(c.vx || 0) * 0.1), c.y < y ? (c.y = y, c.vy = Math.abs(c.vy || 0) * 0.1) : c.y > _ && (c.y = _, c.vy = -Math.abs(c.vy || 0) * 0.1);
+      const m = c.radius + 10, u = s - c.radius - 10, y = c.radius + 10, _ = o - c.radius - 10;
+      c.x < m ? (c.x = m, c.vx = Math.abs(c.vx || 0) * 0.1) : c.x > u && (c.x = u, c.vx = -Math.abs(c.vx || 0) * 0.1), c.y < y ? (c.y = y, c.vy = Math.abs(c.vy || 0) * 0.1) : c.y > _ && (c.y = _, c.vy = -Math.abs(c.vy || 0) * 0.1);
     });
   }).on("tick", () => {
     O.selectAll(".bubble").data(t.nodes()).attr("transform", (c) => `translate(${c.x},${c.y})`);
   });
 }, Ie = (t, o) => O.scaleLinear().domain([t, o]).range([ue, De]), dt = (t) => {
-  const o = t.reduce((n, a) => {
-    const l = Math.max(a.transaction_total, a.amount);
+  const o = t.reduce((n, r) => {
+    const l = Math.max(r.transaction_total, r.amount);
     return l > n ? l : n;
-  }, 0), i = t.reduce((n, a) => {
-    const l = Math.max(a.transaction_total, a.amount);
+  }, 0), s = t.reduce((n, r) => {
+    const l = Math.max(r.transaction_total, r.amount);
     return l < n ? l : n;
-  }, o), s = Ie(i, o), r = t.map((n) => {
-    const a = s(Math.max(n.transaction_total, n.amount)) || 25;
+  }, o), i = Ie(s, o), a = t.map((n) => {
+    const r = i(Math.max(n.transaction_total, n.amount)) || 25;
     return {
       ...n,
-      radius: a
+      radius: r
     };
   });
-  return O.forceSimulation(r).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.7));
-}, ut = (t, o, i) => {
-  const r = Math.PI * ue ** 2 * t, n = i < 400 || o < 300, a = n ? 40 : 20, l = Math.max(100, i - a), c = Math.max(100, o - a), u = l * c;
-  let m = ue;
-  if (r < u) {
-    const _ = Math.sqrt(u / (t * Math.PI)), p = Math.min(l, c) / 4;
-    m = Math.min(De, _, p);
+  return O.forceSimulation(a).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.7));
+}, ut = (t, o, s) => {
+  const a = Math.PI * ue ** 2 * t, n = s < 400 || o < 300, r = n ? 40 : 20, l = Math.max(100, s - r), c = Math.max(100, o - r), m = l * c;
+  let u = ue;
+  if (a < m) {
+    const _ = Math.sqrt(m / (t * Math.PI)), h = Math.min(l, c) / 4;
+    u = Math.min(De, _, h);
   }
-  return n && t <= 3 && (m = Math.min(m, 45)), { minRadius: Math.max(20, m * 0.6), maxRadius: m };
-}, mt = (t, o, i, s, r) => {
-  const { maxRadius: n, minRadius: a } = ut(t, o, r);
-  return O.scaleLinear().domain([s, i]).range([a, n]);
-}, gt = (t, o, i = !1, s, r) => {
-  const n = o.map((u) => Math.max(u.transaction_total, u.amount)), a = Math.min(...n), l = Math.max(...n), c = i ? mt(t.length, s, l, a, r) : Ie(a, l);
-  return t.map((u) => ({
-    ...u,
-    radius: c(Math.max(u.transaction_total, u.amount))
+  return n && t <= 3 && (u = Math.min(u, 45)), { minRadius: Math.max(20, u * 0.6), maxRadius: u };
+}, mt = (t, o, s, i, a) => {
+  const { maxRadius: n, minRadius: r } = ut(t, o, a);
+  return O.scaleLinear().domain([i, s]).range([r, n]);
+}, gt = (t, o, s = !1, i, a) => {
+  const n = o.map((m) => Math.max(m.transaction_total, m.amount)), r = Math.min(...n), l = Math.max(...n), c = s ? mt(t.length, i, l, r, a) : Ie(r, l);
+  return t.map((m) => ({
+    ...m,
+    radius: c(Math.max(m.transaction_total, m.amount))
   }));
 }, Ce = 5, pt = 2e3, ht = ({ bubble: t }) => {
   const o = J(), {
-    amount: i,
-    guid: s,
-    budgetColors: { mercury: r },
+    amount: s,
+    guid: i,
+    budgetColors: { mercury: a },
     radius: n,
-    transaction_total: a
-  } = t, l = `mercury-${s}`;
+    transaction_total: r
+  } = t, l = `mercury-${i}`;
   d.useEffect(() => {
-    O.select(`.${l}`).selectAll(".status").remove(), O.select(`.${l}`).append("path").transition().duration(pt).delay(0).attr("class", "status").attr("style", `fill: ${r}; fill-opacity: 1;`).attrTween("d", () => it(t));
-  }, [i, n, a]);
-  const c = O.arc().innerRadius((u) => u - 2 * Ce).outerRadius((u) => u - Ce).startAngle(0).endAngle(2 * Math.PI);
+    O.select(`.${l}`).selectAll(".status").remove(), O.select(`.${l}`).append("path").transition().duration(pt).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => it(t));
+  }, [s, n, r]);
+  const c = O.arc().innerRadius((m) => m - 2 * Ce).outerRadius((m) => m - Ce).startAngle(0).endAngle(2 * Math.PI);
   return /* @__PURE__ */ e("g", { className: l, children: /* @__PURE__ */ e(
     "path",
     {
@@ -126,9 +126,9 @@ const be = 5, De = 100, ue = 25, st = (t) => {
     }
   ) });
 }, ft = d.memo(ht), $ = 75, ce = 50;
-function _t({ bubble: t, isDraggable: o, isMiniWidget: i, onClick: s = () => {
+function _t({ bubble: t, isDraggable: o, isMiniWidget: s, onClick: i = () => {
 } }) {
-  const [r, n] = d.useState(!1), { clientConfig: a } = me(), l = a?.is_mx_mobile && i, c = d.useMemo(() => {
+  const [a, n] = d.useState(!1), { is_mobile_webview: r } = me(), l = r && s, c = d.useMemo(() => {
     if (t)
       return {
         amount: t.amount,
@@ -140,19 +140,19 @@ function _t({ bubble: t, isDraggable: o, isMiniWidget: i, onClick: s = () => {
   }, [t.amount, t.budgetColors, t.guid, t.radius, t.transaction_total]);
   if (!t) return;
   const {
-    budgetColors: { background: u, text: m },
+    budgetColors: { background: m, text: u },
     category: { icon: y, name: _ },
-    guid: p,
-    description: h,
+    guid: h,
+    description: p,
     radius: f,
-    x: S,
+    x: B,
     y: A
   } = t, v = l ? -8 : -12;
   let x = v, C = v;
   f > $ ? (x = -14, C = -45) : f > ce && (C = -32);
   let w = 32;
   f <= $ && (w = l ? 16 : 24);
-  const M = `${t.category.name}: ${h}`, R = {
+  const M = `${t.category.name}: ${p}`, N = {
     modifiers: [
       {
         name: "offset",
@@ -164,33 +164,33 @@ function _t({ bubble: t, isDraggable: o, isMiniWidget: i, onClick: s = () => {
     "g",
     {
       className: "bubble",
-      id: `bubble-${p}`,
-      onClick: () => s(t),
+      id: `bubble-${h}`,
+      onClick: () => i(t),
       onMouseEnter: () => n(!0),
       onMouseLeave: () => n(!1),
       style: { cursor: o ? "pointer" : "default" },
       textAnchor: "middle",
-      x: S,
+      x: B,
       y: A,
       children: [
         /* @__PURE__ */ e(
           Fe,
           {
             followCursor: !0,
-            open: r,
-            slotProps: { popper: R },
+            open: a,
+            slotProps: { popper: N },
             title: M,
-            children: /* @__PURE__ */ e("circle", { fill: u, id: `circle-${p}`, r: f })
+            children: /* @__PURE__ */ e("circle", { fill: m, id: `circle-${h}`, r: f })
           }
         ),
-        /* @__PURE__ */ e("svg", { x, y: C, children: /* @__PURE__ */ e(P, { name: y, size: w, sx: { fill: m } }) }),
+        /* @__PURE__ */ e("svg", { x, y: C, children: /* @__PURE__ */ e(P, { name: y, size: w, sx: { fill: u } }) }),
         f > $ && /* @__PURE__ */ e(
           b,
           {
             bold: !0,
             component: "text",
-            id: `budget-category-${p}`,
-            sx: { fill: m },
+            id: `budget-category-${h}`,
+            sx: { fill: u },
             variant: "Small",
             y: 4,
             children: _
@@ -201,91 +201,91 @@ function _t({ bubble: t, isDraggable: o, isMiniWidget: i, onClick: s = () => {
           {
             bold: !0,
             component: "text",
-            id: `budget-description-${p}-1`,
-            sx: { fill: m },
+            id: `budget-description-${h}-1`,
+            sx: { fill: u },
             variant: "Body",
             y: f <= $ ? 12 : 24,
-            children: f <= $ ? h.split(" ")[0] : h
+            children: f <= $ ? p.split(" ")[0] : p
           }
         ),
         f <= $ && f > ce && /* @__PURE__ */ e(
           b,
           {
             component: "text",
-            id: `budget-description-${p}-2`,
-            sx: { fill: m },
+            id: `budget-description-${h}-2`,
+            sx: { fill: u },
             variant: "XSmall",
             y: 28,
-            children: h.split(" ")[1]
+            children: p.split(" ")[1]
           }
         ),
         /* @__PURE__ */ e(ft, { bubble: c })
       ]
     },
-    p
+    h
   );
 }
 const yt = ({
   height: t,
   width: o,
-  isDraggable: i = !1,
-  isMiniWidget: s = !1,
-  onClick: r = () => {
+  isDraggable: s = !1,
+  isMiniWidget: i = !1,
+  onClick: a = () => {
   }
 }) => {
-  const [n, a] = d.useState([]), l = d.useRef(null), { detailedBudgets: c } = D(), u = d.useCallback(() => {
-    const m = l.current, y = dt(c), _ = y.nodes();
-    if (m) {
-      const p = m.nodes(), h = new Map(p.map((f) => [f.guid, f]));
+  const [n, r] = d.useState([]), l = d.useRef(null), { detailedBudgets: c } = D(), m = d.useCallback(() => {
+    const u = l.current, y = dt(c), _ = y.nodes();
+    if (u) {
+      const h = u.nodes(), p = new Map(h.map((f) => [f.guid, f]));
       _.forEach((f) => {
-        const S = h.get(f.guid);
-        S && Object.assign(f, {
-          vx: S.vx,
-          vy: S.vy,
-          x: S.x,
-          y: S.y
+        const B = p.get(f.guid);
+        B && Object.assign(f, {
+          vx: B.vx,
+          vy: B.vy,
+          x: B.x,
+          y: B.y
         });
       });
     }
-    l.current = y, a(_);
+    l.current = y, r(_);
   }, [c]);
   return d.useEffect(() => {
-    u();
-  }, [u]), d.useEffect(() => () => {
+    m();
+  }, [m]), d.useEffect(() => () => {
     l.current && (l.current.stop(), l.current = null);
   }, []), d.useEffect(() => {
-    const m = l.current;
-    if (!m) return;
-    const y = m.nodes(), _ = o > 0 && o < 450, p = gt(y, c, _, t, o);
-    m.nodes(p), lt(m, t, o), i && ct(m), a([...p]);
-  }, [t, o, i, c]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: n.map((m) => /* @__PURE__ */ e(
+    const u = l.current;
+    if (!u) return;
+    const y = u.nodes(), _ = o > 0 && o < 450, h = gt(y, c, _, t, o);
+    u.nodes(h), lt(u, t, o), s && ct(u), r([...h]);
+  }, [t, o, s, c]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: n.map((u) => /* @__PURE__ */ e(
     _t,
     {
-      bubble: m,
-      isDraggable: i,
-      isMiniWidget: s,
-      onClick: r
+      bubble: u,
+      isDraggable: s,
+      isMiniWidget: i,
+      onClick: a
     },
-    m.guid
+    u.guid
   )) });
 }, bt = E(yt), Ct = ({
   isMiniWidget: t = !1,
   onConnectAccountsClick: o,
-  createBudgetOnClick: i
+  createBudgetOnClick: s
 }) => {
-  const { recalculateBudgets: s } = D(), { spendCategories: r } = z(), { budgets: n } = I(), [a, l] = d.useState(!1), [c, u] = d.useState(!1), [m, y] = d.useState(!1), _ = d.useMemo(() => [...r.filter((h) => h.totalAverageAmount > 0)], [r]), p = async () => {
+  const { recalculateBudgets: i } = D(), { spendCategories: a } = z(), { budgets: n } = I(), [r, l] = d.useState(!1), [c, m] = d.useState(!1), [u, y] = d.useState(!1), _ = d.useMemo(() => [...a.filter((p) => p.totalAverageAmount > 0)], [a]), h = async () => {
     y(!0);
-    const { data: h, isSuccess: f } = await s(_);
-    y(!1), f ? (h.length === 0 && l(!0), u(!1)) : u(!0);
+    const { data: p, isSuccess: f } = await i(_);
+    y(!1), f ? (p.length === 0 && l(!0), m(!1)) : m(!0);
   };
-  return m ? /* @__PURE__ */ e(G, {}) : c ? /* @__PURE__ */ e(
+  return u ? /* @__PURE__ */ e(G, {}) : c ? /* @__PURE__ */ e(
     ie,
     {
       header: n.autogenerate_budgets_error_header,
       icon: "error",
       iconColor: "#4D4D4D",
-      onClick: (h) => {
-        h === "primary" ? p() : i();
+      onClick: (p) => {
+        p === "primary" ? h() : s();
       },
       primaryButton: n.autogenerate_budgets_error_primary_button,
       secondaryButton: n.zero_state_generate_budgets_secondary_button,
@@ -297,14 +297,14 @@ const yt = ({
         }
       }
     }
-  ) : /* @__PURE__ */ e(Ge, { children: a ? /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ e(Ge, { children: r ? /* @__PURE__ */ e(
     ie,
     {
       header: n.zero_state_generate_budgets_header,
       icon: "error",
       iconColor: "#4D4D4D",
-      onClick: (h) => {
-        h === "primary" ? o() : i();
+      onClick: (p) => {
+        p === "primary" ? o() : s();
       },
       primaryButton: n.zero_state_generate_budgets_primary_button,
       secondaryButton: n.zero_state_generate_budgets_secondary_button,
@@ -326,8 +326,8 @@ const yt = ({
       header: n.create_budgets_title,
       icon: "bubble_chart",
       iconColor: "#1A1A1A",
-      onClick: (h) => {
-        h === "primary" ? p() : i();
+      onClick: (p) => {
+        p === "primary" ? h() : s();
       },
       primaryButton: n.empty_state_primary_button,
       secondaryButton: t ? void 0 : n.empty_state_secondary_button,
@@ -349,100 +349,100 @@ const yt = ({
     createBudgetOnClick: t = () => {
     },
     height: o,
-    isDraggable: i = !1,
-    isMiniWidget: s = !1,
-    shouldShowZeroState: r,
+    isDraggable: s = !1,
+    isMiniWidget: i = !1,
+    shouldShowZeroState: a,
     unavailableWidth: n = 24
   }) => {
-    const { onEvent: a } = W(), { setSelectedBudget: l } = D(), { isLoadingCategoryTotals: c } = z(), { isInitialized: u } = Q(), { accounts: m } = I(), { availableWidth: y } = He(), { isMobile: _ } = ge(), [p, h] = d.useState(!1), f = d.useMemo(() => y - n, [y]), S = (v) => {
-      l(v), a(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
+    const { onEvent: r } = W(), { setSelectedBudget: l } = D(), { isLoadingCategoryTotals: c } = z(), { isInitialized: m } = Q(), { accounts: u } = I(), { availableWidth: y } = He(), { isMobile: _ } = ge(), [h, p] = d.useState(!1), f = d.useMemo(() => y - n, [y]), B = (v) => {
+      l(v), r(L.BUDGETS_CLICK_BUDGET_CATEGORY, {
         budget_category: v.category.name,
         click_type: "bubble"
       });
     }, A = () => {
-      h(!0), a(k.ACCOUNTS_CLICK_CONNECT);
+      p(!0), r(L.ACCOUNTS_CLICK_CONNECT);
     };
-    return c ? /* @__PURE__ */ e(B, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(f), children: /* @__PURE__ */ e(G, {}) }) : /* @__PURE__ */ g(F, { ml: r || _ ? 0 : 24, sx: { alignSelf: "center" }, children: [
-      r || !u ? /* @__PURE__ */ e(
+    return c ? /* @__PURE__ */ e(S, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(f), children: /* @__PURE__ */ e(G, {}) }) : /* @__PURE__ */ g(F, { ml: a || _ ? 0 : 24, sx: { alignSelf: "center" }, children: [
+      a || !m ? /* @__PURE__ */ e(
         Ct,
         {
           createBudgetOnClick: t,
-          isMiniWidget: s,
+          isMiniWidget: i,
           onConnectAccountsClick: A
         }
       ) : /* @__PURE__ */ e(
         bt,
         {
           height: o,
-          isDraggable: i,
-          isMiniWidget: s,
-          onClick: S,
+          isDraggable: s,
+          isMiniWidget: i,
+          onClick: B,
           width: f
         }
       ),
       /* @__PURE__ */ e(
         Ue,
         {
-          onClose: () => h(!1),
-          showConnectionsWidget: p,
-          title: m.manage_connections
+          onClose: () => p(!1),
+          showConnectionsWidget: h,
+          title: u.manage_connections
         }
       )
     ] });
   }
 ), St = E(() => {
-  const { budgets: t } = I(), { totalBudgeted: o } = D(), { incomeTotal: i } = ee(), s = i - o;
-  return /* @__PURE__ */ g(B, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
-    /* @__PURE__ */ g(B, { alignItems: "center", children: [
-      /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: T(i, "0,0") }),
+  const { budgets: t } = I(), { totalBudgeted: o } = D(), { incomeTotal: s } = ee(), i = s - o;
+  return /* @__PURE__ */ g(S, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
+    /* @__PURE__ */ g(S, { alignItems: "center", children: [
+      /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: T(s, "0,0") }),
       /* @__PURE__ */ e(b, { color: "secondary", variant: "Small", children: t.projected_income })
     ] }),
     /* @__PURE__ */ e(b, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
-    /* @__PURE__ */ g(B, { alignItems: "center", children: [
+    /* @__PURE__ */ g(S, { alignItems: "center", children: [
       /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: T(o, "0,0") }),
       /* @__PURE__ */ e(b, { color: "secondary", variant: "Small", children: t.budgeted })
     ] }),
     /* @__PURE__ */ e(b, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
-    /* @__PURE__ */ g(B, { alignItems: "center", children: [
-      /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: T(s, "0,0") }),
+    /* @__PURE__ */ g(S, { alignItems: "center", children: [
+      /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: T(i, "0,0") }),
       /* @__PURE__ */ e(b, { color: "secondary", variant: "Small", children: t.remaining })
     ] })
   ] });
 }), Bt = E(
   ({ category: t }) => {
-    const { budgets: o } = I(), { budgets: i } = D(), s = d.useMemo(() => {
-      const r = i.find((l) => l.category_guid === t.guid), n = T(t.totalAverageAmount, "0,0"), a = r ? L(o.recalculate_previous_budget, T(r.amount, "0,0")) : o.recalculate_new_budget;
-      return `${n} - ${a}`;
-    }, [o, i]);
+    const { budgets: o } = I(), { budgets: s } = D(), i = d.useMemo(() => {
+      const a = s.find((l) => l.category_guid === t.guid), n = T(t.totalAverageAmount, "0,0"), r = a ? R(o.recalculate_previous_budget, T(a.amount, "0,0")) : o.recalculate_new_budget;
+      return `${n} - ${r}`;
+    }, [o, s]);
     return /* @__PURE__ */ g(d.Fragment, { children: [
       /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ g(K, { children: [
         /* @__PURE__ */ e(oe, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
-        /* @__PURE__ */ e(V, { primary: t.name, secondary: s })
+        /* @__PURE__ */ e(V, { primary: t.name, secondary: i })
       ] }) }),
       /* @__PURE__ */ e(ne, {})
     ] }, t.guid);
   }
 ), xt = ({ onRecalculateBudgets: t }) => {
-  const { budgets: o, common: i } = I(), { spendCategories: s } = z(), { recalculateBudgets: r, setAlert: n } = D(), [a, l] = d.useState(!1), c = s.filter((m) => m.totalAverageAmount > 0), u = async () => {
-    await r(c), l(!1), n(o.alert_recalculated_budgets), t?.();
+  const { budgets: o, common: s } = I(), { spendCategories: i } = z(), { recalculateBudgets: a, setAlert: n } = D(), [r, l] = d.useState(!1), c = i.filter((u) => u.totalAverageAmount > 0), m = async () => {
+    await a(c), l(!1), n(o.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ g(d.Fragment, { children: [
     /* @__PURE__ */ e(ve, { onClick: () => l(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
     /* @__PURE__ */ e(b, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
     /* @__PURE__ */ e(
-      N,
+      k,
       {
-        ariaLabelClose: i.close_aria,
-        isOpen: a,
+        ariaLabelClose: s.close_aria,
+        isOpen: r,
         onClose: () => l(!1),
-        onPrimaryAction: u,
+        onPrimaryAction: m,
         title: o.recalculate_title,
-        children: /* @__PURE__ */ g(B, { children: [
-          /* @__PURE__ */ g(B, { mx: 24, my: 16, children: [
+        children: /* @__PURE__ */ g(S, { children: [
+          /* @__PURE__ */ g(S, { mx: 24, my: 16, children: [
             /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
             /* @__PURE__ */ e(b, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
           ] }),
-          /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: c.map((m) => /* @__PURE__ */ e(Bt, { category: m }, m.guid)) }) })
+          /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: c.map((u) => /* @__PURE__ */ e(Bt, { category: u }, u.guid)) }) })
         ] })
       }
     )
@@ -450,31 +450,31 @@ const yt = ({
 }, ae = ({
   amount: t,
   categoryName: o,
-  onAmountChanged: i
+  onAmountChanged: s
 }) => {
-  const { budgets: s } = I(), { totalBudgeted: r } = D(), { incomeTotal: n } = ee(), a = n - r;
-  return /* @__PURE__ */ g(B, { gap: 16, children: [
-    /* @__PURE__ */ g(B, { children: [
-      /* @__PURE__ */ e(b, { children: L(
-        s.add_description_top,
-        T(a, "0,0")
+  const { budgets: i } = I(), { totalBudgeted: a } = D(), { incomeTotal: n } = ee(), r = n - a;
+  return /* @__PURE__ */ g(S, { gap: 16, children: [
+    /* @__PURE__ */ g(S, { children: [
+      /* @__PURE__ */ e(b, { children: R(
+        i.add_description_top,
+        T(r, "0,0")
       ) }),
-      /* @__PURE__ */ e(b, { children: L(s.add_description_bottom, o) })
+      /* @__PURE__ */ e(b, { children: R(i.add_description_bottom, o) })
     ] }),
     /* @__PURE__ */ e(
       Ye,
       {
         amount: t,
         autoFocus: !0,
-        label: s.add_label,
+        label: i.add_label,
         minAmount: 0,
-        setAmount: i,
+        setAmount: s,
         sx: { ".MuiTypography-Body": { p: 0 } }
       }
     )
   ] });
 }, vt = E(({ category: t, onAddBudget: o }) => {
-  const { budgets: i, common: s } = I(), [r, n] = d.useState(!1), [a, l] = d.useState(
+  const { budgets: s, common: i } = I(), [a, n] = d.useState(!1), [r, l] = d.useState(
     `${t.totalAmount === 0 ? "" : t.totalAmount}`
   );
   return /* @__PURE__ */ g(d.Fragment, { children: [
@@ -492,90 +492,92 @@ const yt = ({
     /* @__PURE__ */ e(
       j,
       {
-        copy: { close_aria: s.close_aria, title: i.add_title },
-        disablePrimaryButton: Number(a) <= 0,
-        isOpen: r,
+        copy: { close_aria: i.close_aria, title: s.add_title },
+        disablePrimaryButton: Number(r) <= 0,
+        isOpen: a,
         onClose: () => n(!1),
-        onPrimaryAction: () => o(t, Number(a)),
-        primaryText: i.add_save_button,
-        children: /* @__PURE__ */ e(ae, { amount: a, categoryName: t.name, onAmountChanged: l })
+        onPrimaryAction: () => o(t, Number(r)),
+        primaryText: s.add_save_button,
+        children: /* @__PURE__ */ e(ae, { amount: r, categoryName: t.name, onAmountChanged: l })
       }
     )
   ] });
 }), Oe = E(({ onRecalculateBudgets: t }) => {
-  const { budgets: o } = I(), { addBudget: i, setAlert: s, unbudgetedCategories: r } = D(), n = async (a, l) => {
-    await i(a, l), s(L(o.alert_budget_created, a.name));
+  const { budgets: o } = I(), { addBudget: s, setAlert: i, unbudgetedCategories: a } = D(), n = async (r, l) => {
+    await s(r, l), i(R(o.alert_budget_created, r.name));
   };
-  return /* @__PURE__ */ g(B, { children: [
+  return /* @__PURE__ */ g(S, { children: [
     /* @__PURE__ */ e(St, {}),
-    /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: r.map((a) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(X, { children: a.map((r) => /* @__PURE__ */ e(
       vt,
       {
-        category: a,
+        category: r,
         onAddBudget: n
       },
-      a.guid
+      r.guid
     )) }) }),
     /* @__PURE__ */ e(xt, { onRecalculateBudgets: t })
   ] });
 }), At = (t) => {
-  const o = J(), { clientConfig: i } = me(), s = i?.is_mx_mobile, { onEvent: r } = W(), { detailedBudgets: n, isDataLoaded: a, loadBudgetData: l, setTheme: c } = D(), { budgets: u, common: m } = I(), { isCopyLoaded: y, isInitialized: _, selectedAccounts: p } = Q(), { reloadCategoryTotals: h } = z(), f = ze(), S = n.length === 0, v = d.useCallback(() => {
+  const o = J(), { is_mobile_webview: s } = me(), { onEvent: i } = W(), { detailedBudgets: a, isDataLoaded: n, loadBudgetData: r, setTheme: l } = D(), { budgets: c, common: m } = I(), { isCopyLoaded: u, isInitialized: y, selectedAccounts: _ } = Q(), { reloadCategoryTotals: h } = z(), p = ze(), f = a.length === 0, A = d.useCallback(() => {
     if (s) {
-      const R = n.length;
-      return R === 0 ? 75 : Math.min(75 + 10 * R, 175);
+      const M = a.length;
+      return M === 0 ? 75 : Math.min(75 + 10 * M, 175);
     }
     return 370;
-  }, [s, n.length])(), [x, C] = d.useState(!1), w = () => {
-    C(!0), r(k.BUDGETS_CLICK_ADD);
-  }, M = () => {
-    C(!1);
+  }, [s, a.length])(), [v, x] = d.useState(!1), C = () => {
+    x(!0), i(L.BUDGETS_CLICK_ADD);
+  }, w = () => {
+    x(!1);
   };
   return d.useEffect(() => {
-    c(o);
+    l(o);
   }, [o]), d.useEffect(() => {
-    _ && !a && h(p, q(/* @__PURE__ */ new Date()), le(/* @__PURE__ */ new Date())).then(
+    y && !n && h(_, q(/* @__PURE__ */ new Date()), le(/* @__PURE__ */ new Date())).then(
       () => {
-        l().finally();
+        r().finally();
       }
     );
-  }, [_, p]), y ? /* @__PURE__ */ g(
+  }, [y, _]), u ? /* @__PURE__ */ g(
     Ke,
     {
-      primaryCtaLabel: S ? u.get_started_cta : u.details_cta,
-      title: u.budgets_title,
+      primaryCtaLabel: f ? c.get_started_cta : c.details_cta,
+      title: c.budgets_title,
       ...t,
       children: [
-        a ? /* @__PURE__ */ g(
-          B,
+        n ? /* @__PURE__ */ g(
+          S,
           {
             sx: {
-              ...!s && { height: 450, mt: 32 }
+              ...!s && { mt: 32 },
+              height: s ? 325 : 450,
+              justifyContent: "space-between"
             },
             children: [
               /* @__PURE__ */ e(
                 Ee,
                 {
-                  createBudgetOnClick: w,
-                  height: v,
+                  createBudgetOnClick: C,
+                  height: A,
                   isMiniWidget: !0,
-                  shouldShowZeroState: S
+                  shouldShowZeroState: f
                 }
               ),
-              !S && /* @__PURE__ */ g(F, { ml: 16, children: [
-                /* @__PURE__ */ e(b, { bold: !0, color: f < 0 ? "error.main" : "success.main", children: T(Math.abs(f), "0,0") }),
-                /* @__PURE__ */ e(b, { children: f < 0 ? u.overspent_in_budgets : u.left_in_budgets })
+              !f && /* @__PURE__ */ g(F, { ml: 16, children: [
+                /* @__PURE__ */ e(b, { bold: !0, color: p < 0 ? "error.main" : "success.main", children: T(Math.abs(p), "0,0") }),
+                /* @__PURE__ */ e(b, { children: p < 0 ? c.overspent_in_budgets : c.left_in_budgets })
               ] })
             ]
           }
         ) : /* @__PURE__ */ e(G, {}),
         /* @__PURE__ */ e(
-          N,
+          k,
           {
             ariaLabelClose: m.close_aria,
-            isOpen: x,
-            onClose: () => C(!1),
-            title: u.add_new_title,
-            children: /* @__PURE__ */ e(Oe, { onRecalculateBudgets: M })
+            isOpen: v,
+            onClose: () => x(!1),
+            title: c.add_new_title,
+            children: /* @__PURE__ */ e(Oe, { onRecalculateBudgets: w })
           }
         )
       ]
@@ -584,26 +586,26 @@ const yt = ({
 }, En = E(At), Me = ({ budget: t }) => {
   const {
     amount: o,
-    budgetColors: { background: i },
-    category: { name: s },
-    category_guid: r,
+    budgetColors: { background: s },
+    category: { name: i },
+    category_guid: a,
     percentage: n,
-    transaction_total: a
+    transaction_total: r
   } = t, l = [
     {
-      color: i,
+      color: s,
       percentage: `${n}%`
     }
   ];
-  return /* @__PURE__ */ e(pe, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(he, { children: /* @__PURE__ */ g(B, { alignItems: "center", gap: 16, children: [
-    /* @__PURE__ */ e(H, { categoryGuid: r, size: 56 }),
-    /* @__PURE__ */ e(je, { children: `${T(a, "0,0")} / ${T(o, "0,0")}` }),
-    /* @__PURE__ */ e(b, { bold: !0, variant: "XSmall", children: s }),
+  return /* @__PURE__ */ e(pe, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(he, { children: /* @__PURE__ */ g(S, { alignItems: "center", gap: 16, children: [
+    /* @__PURE__ */ e(H, { categoryGuid: a, size: 56 }),
+    /* @__PURE__ */ e(je, { children: `${T(r, "0,0")} / ${T(o, "0,0")}` }),
+    /* @__PURE__ */ e(b, { bold: !0, variant: "XSmall", children: i }),
     /* @__PURE__ */ e(de, { data: l, height: 10 })
   ] }) }) });
 }, Tt = E(() => {
   const { budgets: t } = I();
-  return /* @__PURE__ */ g(B, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+  return /* @__PURE__ */ g(S, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     /* @__PURE__ */ e(P, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
     /* @__PURE__ */ e(b, { bold: !0, color: "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 })
@@ -611,18 +613,18 @@ const yt = ({
 }), wt = E(({ budget: t }) => {
   const {
     amount: o,
-    budgetColors: { background: i },
-    category: s,
-    percentage: r,
+    budgetColors: { background: s },
+    category: i,
+    percentage: a,
     transaction_total: n
-  } = t, { setSelectedSubBudget: a } = D();
-  return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ g(K, { onClick: () => a(t), children: [
-    /* @__PURE__ */ e(oe, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Te, { color: i, percent: r, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
+  } = t, { setSelectedSubBudget: r } = D();
+  return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ g(K, { onClick: () => r(t), children: [
+    /* @__PURE__ */ e(oe, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Te, { color: s, percent: a, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: i.parent_guid, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       V,
       {
-        primary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: t.category.name }) }),
-        secondary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(b, { fontWeight: 400, variant: "Body", children: `
+        primary: /* @__PURE__ */ e(S, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(S, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(b, { fontWeight: 400, variant: "Body", children: `
                   ${T(n, "0,0")} / 
                   ${T(o, "0,0")}
                 ` }) })
@@ -630,51 +632,51 @@ const yt = ({
     )
   ] }) });
 }), Dt = E(({ category: t, parentBudget: o }) => {
-  const { budgets: i, common: s } = I(), { setExpandedGuid: r, setOnSelect: n } = tt(), { addBudget: a } = D(), [l, c] = d.useState(!1), [u, m] = d.useState(!1), [y, _] = d.useState(""), [p, h] = d.useState(void 0);
+  const { budgets: s, common: i } = I(), { setExpandedGuid: a, setOnSelect: n } = tt(), { addBudget: r } = D(), [l, c] = d.useState(!1), [m, u] = d.useState(!1), [y, _] = d.useState(""), [h, p] = d.useState(void 0);
   d.useEffect(() => {
     n((A) => {
       const v = t.subCategories.find((x) => x.guid === A);
-      v && (h(v), _(`${v.currentAmount === 0 ? "" : v.currentAmount}`), m(!0));
+      v && (p(v), _(`${v.currentAmount === 0 ? "" : v.currentAmount}`), u(!0));
     });
   }, []);
   const f = () => {
-    r(t.guid), c(!0);
-  }, S = async () => {
-    p && Number(y) > 0 && (await a(p, Number(y), o.guid), m(!1), c(!1), h(void 0));
+    a(t.guid), c(!0);
+  }, B = async () => {
+    h && Number(y) > 0 && (await r(h, Number(y), o.guid), u(!1), c(!1), p(void 0));
   };
   return /* @__PURE__ */ g(F, { children: [
-    /* @__PURE__ */ e(Y, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(K, { onClick: f, children: /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", gap: 8, children: [
+    /* @__PURE__ */ e(Y, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(K, { onClick: f, children: /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(S, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ g(S, { alignItems: "center", direction: "row", gap: 8, children: [
         /* @__PURE__ */ e(P, { 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: "Body", children: s.add_sub_budget_button })
       ] }),
       /* @__PURE__ */ e(P, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
     ] }) }) }) }),
     /* @__PURE__ */ e(ne, {}),
     /* @__PURE__ */ e(
-      N,
+      k,
       {
-        ariaLabelClose: s.close_aria,
+        ariaLabelClose: i.close_aria,
         isOpen: l,
         onClose: () => c(!1),
-        title: i.add_sub_budget_title,
+        title: s.add_sub_budget_title,
         children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(nt, { category: t, subCategories: t.subCategories }) })
       }
     ),
     /* @__PURE__ */ e(
       j,
       {
-        copy: { close_aria: s.close_aria, title: i.add_title },
+        copy: { close_aria: i.close_aria, title: s.add_title },
         disablePrimaryButton: Number(y) <= 0,
-        isOpen: u,
-        onClose: () => m(!1),
-        onPrimaryAction: S,
-        primaryText: i.add_save_button,
+        isOpen: m,
+        onClose: () => u(!1),
+        onPrimaryAction: B,
+        primaryText: s.add_save_button,
         children: /* @__PURE__ */ e(
           ae,
           {
             amount: y,
-            categoryName: p?.name || "",
+            categoryName: h?.name || "",
             onAmountChanged: _
           }
         )
@@ -682,67 +684,67 @@ const yt = ({
     )
   ] });
 }), It = E(({ budget: t }) => {
-  const { category: o, subBudgets: i } = t, { budgets: s, common: r } = I(), { deleteBudget: n, selectedSubBudget: a, setSelectedSubBudget: l, updateBudget: c } = D(), { filter: u, setFilter: m } = te(), [y, _] = d.useState(!1), [p, h] = d.useState(!1), [f, S] = d.useState("");
+  const { category: o, subBudgets: s } = t, { budgets: i, common: a } = I(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: l, updateBudget: c } = D(), { filter: m, setFilter: u } = te(), [y, _] = d.useState(!1), [h, p] = d.useState(!1), [f, B] = d.useState("");
   d.useEffect(() => {
-    a && (S(`${a.amount}`), m({
-      ...u,
-      custom: (C) => C.category_guid === a.category_guid
+    r && (B(`${r.amount}`), u({
+      ...m,
+      custom: (C) => C.category_guid === r.category_guid
     }));
-  }, [a]);
+  }, [r]);
   const A = async () => {
-    a && await c({
-      ...a,
+    r && await c({
+      ...r,
       amount: Number(f)
     });
   }, v = async () => {
-    a && await n(a.guid), h(!1), x();
+    r && await n(r.guid), p(!1), x();
   }, x = () => {
-    m({
-      ...u,
+    u({
+      ...m,
       custom: (C) => C.category_guid === t.category_guid || C.top_level_category_guid === t.category_guid
     }), l(void 0);
   };
   return /* @__PURE__ */ g(d.Fragment, { children: [
     /* @__PURE__ */ g(X, { sx: { bgcolor: "background.paper" }, children: [
-      i.length === 0 ? /* @__PURE__ */ e(Tt, {}) : i.map((C) => /* @__PURE__ */ g(d.Fragment, { children: [
+      s.length === 0 ? /* @__PURE__ */ e(Tt, {}) : s.map((C) => /* @__PURE__ */ g(d.Fragment, { children: [
         /* @__PURE__ */ e(wt, { budget: C }),
         /* @__PURE__ */ e(ne, {})
       ] }, C.guid)),
       /* @__PURE__ */ e(Dt, { category: o, parentBudget: t })
     ] }),
     /* @__PURE__ */ e(
-      N,
+      k,
       {
-        ariaLabelClose: r.close_aria,
-        isOpen: !!a,
+        ariaLabelClose: a.close_aria,
+        isOpen: !!r,
         onClose: x,
         onPrimaryAction: () => _(!0),
-        onSecondaryAction: () => h(!0),
-        primaryText: s.details_edit_button,
-        secondaryText: s.details_delete_button,
-        title: s.details_title,
-        children: a && /* @__PURE__ */ g(B, { gap: 24, children: [
-          /* @__PURE__ */ e(Me, { budget: a }),
+        onSecondaryAction: () => p(!0),
+        primaryText: i.details_edit_button,
+        secondaryText: i.details_delete_button,
+        title: i.details_title,
+        children: r && /* @__PURE__ */ g(S, { gap: 24, children: [
+          /* @__PURE__ */ e(Me, { budget: r }),
           /* @__PURE__ */ e(Ae, { height: "100%" })
         ] })
       }
     ),
-    a && /* @__PURE__ */ g(d.Fragment, { children: [
+    r && /* @__PURE__ */ g(d.Fragment, { children: [
       /* @__PURE__ */ e(
         j,
         {
-          copy: { close_aria: r.close_aria, title: s.details_edit_title },
+          copy: { close_aria: a.close_aria, title: i.details_edit_title },
           disablePrimaryButton: Number(f) <= 0,
           isOpen: y,
           onClose: () => _(!1),
           onPrimaryAction: A,
-          primaryText: s.edit_save_button,
+          primaryText: i.edit_save_button,
           children: /* @__PURE__ */ e(
             ae,
             {
               amount: f,
-              categoryName: a.category.name,
-              onAmountChanged: S
+              categoryName: r.category.name,
+              onAmountChanged: B
             }
           )
         }
@@ -750,34 +752,34 @@ const yt = ({
       /* @__PURE__ */ e(
         j,
         {
-          copy: { close_aria: r.close_aria, title: s.delete_title },
-          isOpen: p,
-          onClose: () => h(!1),
+          copy: { close_aria: a.close_aria, title: i.delete_title },
+          isOpen: h,
+          onClose: () => p(!1),
           onPrimaryAction: v,
           primaryColor: "error",
           primaryText: "Delete",
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(b, { variant: "Paragraph", children: L(s.delete_description, a.category.name) })
+          children: /* @__PURE__ */ e(b, { variant: "Paragraph", children: R(i.delete_description, r.category.name) })
         }
       )
     ] })
   ] });
 }), Et = E(({ budget: t }) => {
-  const { is_mobile_webview: o } = me(), { setAlert: i } = D(), { budgets: s, common: r, transactions: n } = I(), { isDesktop: a, isSmallTablet: l, isTablet: c } = ge(), {
-    sortedTransactions: u,
-    sortedTransactionsWithSplits: m,
+  const { is_mobile_webview: o } = me(), { setAlert: s } = D(), { budgets: i, common: a, transactions: n } = I(), { isDesktop: r, isSmallTablet: l, isTablet: c } = ge(), {
+    sortedTransactions: m,
+    sortedTransactionsWithSplits: u,
     tags: y
-  } = te(), [_, p] = d.useState(0), [h, f] = d.useState(""), S = d.useMemo(
-    () => u.find((C) => C.guid === h),
-    [h, u]
+  } = te(), [_, h] = d.useState(0), [p, f] = d.useState(""), B = d.useMemo(
+    () => m.find((C) => C.guid === p),
+    [p, m]
   ), A = (C, w) => {
-    p(w);
+    h(w);
   }, v = () => {
-    Qe(m, y), i(s.alert_csv_downloaded);
-  }, x = u.length > 0 && !o && (a || c && !l);
-  return /* @__PURE__ */ g(B, { gap: 24, children: [
+    Qe(u, y), s(i.alert_csv_downloaded);
+  }, x = m.length > 0 && !o && (r || c && !l);
+  return /* @__PURE__ */ g(S, { gap: 24, children: [
     /* @__PURE__ */ e(Me, { budget: t }),
-    /* @__PURE__ */ g(B, { children: [
+    /* @__PURE__ */ g(S, { children: [
       /* @__PURE__ */ g(
         Je,
         {
@@ -787,13 +789,13 @@ const yt = ({
           value: _,
           variant: "fullWidth",
           children: [
-            /* @__PURE__ */ e(ye, { label: s.details_transactions_tab }),
-            /* @__PURE__ */ e(ye, { label: s.details_subbudgets_tab })
+            /* @__PURE__ */ e(ye, { label: i.details_transactions_tab }),
+            /* @__PURE__ */ e(ye, { label: i.details_subbudgets_tab })
           ]
         }
       ),
-      _ === 0 && /* @__PURE__ */ g(B, { children: [
-        x && /* @__PURE__ */ e(B, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+      _ === 0 && /* @__PURE__ */ g(S, { children: [
+        x && /* @__PURE__ */ e(S, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
           ve,
           {
             onClick: v,
@@ -806,43 +808,43 @@ const yt = ({
       ] }),
       _ === 1 && /* @__PURE__ */ e(It, { budget: t }),
       /* @__PURE__ */ e(
-        N,
+        k,
         {
-          ariaLabelClose: r.close_aria,
-          isOpen: !!S,
+          ariaLabelClose: a.close_aria,
+          isOpen: !!B,
           onClose: () => f(""),
-          title: s.details_transaction_drawer,
-          children: S && /* @__PURE__ */ e(et, { transaction: S })
+          title: i.details_transaction_drawer,
+          children: B && /* @__PURE__ */ e(et, { transaction: B })
         }
       )
     ] })
   ] });
 }), Ot = E(() => {
-  const { selectedAccountGuids: t } = Q(), { budgets: o, common: i } = I(), {
-    dateRange: s,
-    deleteBudget: r,
+  const { selectedAccountGuids: t } = Q(), { budgets: o, common: s } = I(), {
+    dateRange: i,
+    deleteBudget: a,
     selectedBudget: n,
-    selectedSubBudget: a,
+    selectedSubBudget: r,
     setAlert: l,
     setSelectedBudget: c,
-    updateBudget: u
-  } = D(), { setFilter: m } = te(), [y, _] = d.useState(!1), [p, h] = d.useState(!1), [f, S] = d.useState(!1), [A, v] = d.useState("");
+    updateBudget: m
+  } = D(), { setFilter: u } = te(), [y, _] = d.useState(!1), [h, p] = d.useState(!1), [f, B] = d.useState(!1), [A, v] = d.useState("");
   d.useEffect(() => {
-    n && !a && (v(`${n.amount}`), _(!0), m({
+    n && !r && (v(`${n.amount}`), _(!0), u({
       accounts: t,
-      dateRange: s,
+      dateRange: i,
       custom: (M) => M.category_guid === n.category_guid || M.top_level_category_guid === n.category_guid,
       showSplits: !0
     }));
   }, [n]);
   const x = async () => {
-    n && (await u({
+    n && (await m({
       ...n,
       amount: Number(A),
       percentage: n.category.totalAmount / Number(A) * 100
-    }), l(L(o.alert_budget_updated, n.category.name)));
+    }), l(R(o.alert_budget_updated, n.category.name)));
   }, C = async () => {
-    n && (await r(n.guid), l(L(o.alert_budget_deleted, n.category.name))), S(!1), w();
+    n && (await a(n.guid), l(R(o.alert_budget_deleted, n.category.name))), B(!1), w();
   }, w = () => {
     _(!1), setTimeout(() => {
       c(void 0);
@@ -851,13 +853,13 @@ const yt = ({
   if (n)
     return /* @__PURE__ */ g(d.Fragment, { children: [
       /* @__PURE__ */ e(
-        N,
+        k,
         {
-          ariaLabelClose: i.close_aria,
+          ariaLabelClose: s.close_aria,
           isOpen: y,
           onClose: w,
-          onPrimaryAction: () => h(!0),
-          onSecondaryAction: () => S(!0),
+          onPrimaryAction: () => p(!0),
+          onSecondaryAction: () => B(!0),
           primaryText: o.details_edit_button,
           secondaryColor: "error",
           secondaryText: o.details_delete_button,
@@ -868,10 +870,10 @@ const yt = ({
       /* @__PURE__ */ e(
         j,
         {
-          copy: { close_aria: i.close_aria, title: o.details_edit_title },
+          copy: { close_aria: s.close_aria, title: o.details_edit_title },
           disablePrimaryButton: Number(A) <= 0,
-          isOpen: p,
-          onClose: () => h(!1),
+          isOpen: h,
+          onClose: () => p(!1),
           onPrimaryAction: x,
           primaryText: o.edit_save_button,
           children: /* @__PURE__ */ e(
@@ -887,64 +889,64 @@ const yt = ({
       /* @__PURE__ */ e(
         j,
         {
-          copy: { close_aria: i.close_aria, title: o.delete_title },
+          copy: { close_aria: s.close_aria, title: o.delete_title },
           isOpen: f,
-          onClose: () => S(!1),
+          onClose: () => B(!1),
           onPrimaryAction: C,
           primaryColor: "error",
           primaryText: o.details_delete_button,
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(b, { variant: "Paragraph", children: L(o.delete_description, n.category.name) })
+          children: /* @__PURE__ */ e(b, { variant: "Paragraph", children: R(o.delete_description, n.category.name) })
         }
       )
     ] });
 }), Mt = ({ budget: t, onClick: o }) => {
   const {
-    amount: i,
-    budgetColors: { background: s, description: r },
+    amount: s,
+    budgetColors: { background: i, description: a },
     category_guid: n,
-    description: a,
+    description: r,
     percentage: l,
     subBudgets: c,
-    transaction_total: u
+    transaction_total: m
   } = t;
   return /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ g(K, { onClick: () => o?.(t), children: [
-    /* @__PURE__ */ e(oe, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Te, { color: s, percent: l, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(oe, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Te, { color: i, percent: l, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       V,
       {
-        primary: /* @__PURE__ */ g(B, { component: "span", direction: "row", justifyContent: "space-between", children: [
+        primary: /* @__PURE__ */ g(S, { 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: `
-                  ${T(u, "0,0")} / 
-                  ${T(i, "0,0")}
+                  ${T(m, "0,0")} / 
+                  ${T(s, "0,0")}
                 ` })
         ] }),
-        secondary: /* @__PURE__ */ g(B, { component: "span", direction: "row", justifyContent: "space-between", children: [
+        secondary: /* @__PURE__ */ g(S, { component: "span", direction: "row", justifyContent: "space-between", children: [
           /* @__PURE__ */ e(b, { variant: "XSmall", children: `${c.length} Sub-budgets` }),
-          /* @__PURE__ */ e(b, { bold: l > 100, color: r, variant: "XSmall", children: a })
+          /* @__PURE__ */ e(b, { bold: l > 100, color: a, variant: "XSmall", children: r })
         ] })
       }
     )
   ] }) });
 }, Rt = E(() => {
-  const { onEvent: t } = W(), { budgets: o } = I(), { detailedBudgets: i, setSelectedBudget: s } = D(), r = (n) => {
-    s(n), t(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
+  const { onEvent: t } = W(), { budgets: o } = I(), { detailedBudgets: s, setSelectedBudget: i } = D(), a = (n) => {
+    i(n), t(L.BUDGETS_CLICK_BUDGET_CATEGORY, {
       budget_category: n.category.name,
       click_type: "list"
     });
   };
   return /* @__PURE__ */ g(pe, { elevation: 2, children: [
     /* @__PURE__ */ e(we, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Be, { children: o.budget_categories_title }) }),
-    /* @__PURE__ */ e(he, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(X, { children: i.map((n) => /* @__PURE__ */ g(d.Fragment, { children: [
-      /* @__PURE__ */ e(Mt, { budget: n, onClick: r }),
+    /* @__PURE__ */ e(he, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(X, { children: s.map((n) => /* @__PURE__ */ g(d.Fragment, { children: [
+      /* @__PURE__ */ e(Mt, { budget: n, onClick: a }),
       /* @__PURE__ */ e(ne, {})
     ] }, n.guid)) }) })
   ] });
 }), Lt = E(() => {
-  const t = J(), { onEvent: o } = W(), { visibleAccounts: i } = xe(), { budgets: s, common: r, recurring: n } = I(), { incomeCategories: a, spendCategories: l } = z(), { detailedBudgets: c, totalBudgeted: u } = D(), { incomeTotal: m } = ee(), { setFilter: y } = te(), [_, p] = d.useState(!1), [h, f] = d.useMemo(() => {
-    const x = l.reduce((R, re) => R + re.totalAmount, 0);
-    let C = x / u;
+  const t = J(), { onEvent: o } = W(), { visibleAccounts: s } = xe(), { budgets: i, common: a, recurring: n } = I(), { incomeCategories: r, spendCategories: l } = z(), { detailedBudgets: c, totalBudgeted: m } = D(), { incomeTotal: u } = ee(), { setFilter: y } = te(), [_, h] = d.useState(!1), [p, f] = d.useMemo(() => {
+    const x = l.reduce((N, re) => N + re.totalAmount, 0);
+    let C = x / m;
     C > 1 && (C = 1);
     let w = t.palette.success.main;
     C > 0.8 && C < 1 ? w = t.palette.warning.main : C >= 1 && (w = t.palette.error.main);
@@ -955,11 +957,11 @@ const yt = ({
       }
     ];
     return [x, M];
-  }, [c, l]), [S, A] = d.useMemo(() => {
+  }, [c, l]), [B, A] = d.useMemo(() => {
     const x = Math.abs(
-      a.reduce((M, R) => M + R.totalAmount, 0)
+      r.reduce((M, N) => M + N.totalAmount, 0)
     );
-    let C = x / m;
+    let C = x / u;
     C > 1 && (C = 1);
     const w = [
       {
@@ -968,30 +970,30 @@ const yt = ({
       }
     ];
     return [x, w];
-  }, [a, m]), v = () => {
+  }, [r, u]), v = () => {
     y({
-      accounts: i.map((x) => x.guid),
+      accounts: s.map((x) => x.guid),
       dateRange: {
         start: ot(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
       }
-    }), p(!0), o(k.BUDGETS_CLICK_EDIT_INCOME);
+    }), h(!0), o(L.BUDGETS_CLICK_EDIT_INCOME);
   };
   return /* @__PURE__ */ g(pe, { elevation: 2, sx: { overflow: "visible" }, children: [
-    /* @__PURE__ */ e(we, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Be, { children: s.overview_title }) }),
-    /* @__PURE__ */ e(he, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ g(B, { gap: 24, children: [
-      /* @__PURE__ */ g(B, { gap: 8, children: [
-        /* @__PURE__ */ e(b, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
+    /* @__PURE__ */ e(we, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Be, { children: i.overview_title }) }),
+    /* @__PURE__ */ e(he, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ g(S, { gap: 24, children: [
+      /* @__PURE__ */ g(S, { gap: 8, children: [
+        /* @__PURE__ */ e(b, { bold: !0, sx: { mb: 8 }, variant: "Body", children: i.spending_title }),
         /* @__PURE__ */ e(de, { data: f, height: 16 }),
-        /* @__PURE__ */ e(b, { variant: "Small", children: L(
-          s.spending_description,
-          T(h, "0,0"),
-          T(u, "0,0")
+        /* @__PURE__ */ e(b, { variant: "Small", children: R(
+          i.spending_description,
+          T(p, "0,0"),
+          T(m, "0,0")
         ) })
       ] }),
-      /* @__PURE__ */ g(B, { gap: 8, children: [
-        /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
-          /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: s.income_title }),
+      /* @__PURE__ */ g(S, { gap: 8, children: [
+        /* @__PURE__ */ g(S, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
+          /* @__PURE__ */ e(b, { bold: !0, variant: "Body", children: i.income_title }),
           /* @__PURE__ */ e(
             at,
             {
@@ -1003,55 +1005,55 @@ const yt = ({
           )
         ] }),
         /* @__PURE__ */ e(de, { data: A, height: 16 }),
-        /* @__PURE__ */ e(b, { variant: "Small", children: L(
-          s.income_description,
-          T(S, "0,0"),
-          T(m, "0,0")
+        /* @__PURE__ */ e(b, { variant: "Small", children: R(
+          i.income_description,
+          T(B, "0,0"),
+          T(u, "0,0")
         ) })
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      N,
+      k,
       {
-        ariaLabelClose: r.close_aria,
+        ariaLabelClose: a.close_aria,
         isOpen: _,
-        onClose: () => p(!1),
+        onClose: () => h(!1),
         title: n.manage_income,
         children: /* @__PURE__ */ e(rt, { forOverview: !0 })
       }
     )
   ] });
 }), Se = 480, On = E(({ onBackClick: t, sx: o }) => {
-  const i = J(), { onEvent: s } = W(), { visibleAccounts: r } = xe(), { budgets: n, common: a } = I(), { isCopyLoaded: l, isInitialized: c, selectedAccounts: u, setDisplayedDate: m, setSelectedAccounts: y } = Q(), {
+  const s = J(), { onEvent: i } = W(), { visibleAccounts: a } = xe(), { budgets: n, common: r } = I(), { isCopyLoaded: l, isInitialized: c, selectedAccounts: m, setDisplayedDate: u, setSelectedAccounts: y } = Q(), {
     alert: _,
-    dateRange: p,
-    isDataLoaded: h,
+    dateRange: h,
+    isDataLoaded: p,
     loadBudgetData: f,
-    setDateRange: S,
+    setDateRange: B,
     setAlert: A,
     setTheme: v,
     detailedBudgets: x
-  } = D(), { loadRepeatingTransactions: C, setDateRange: w } = ee(), { reloadCategoryTotals: M } = z(), { isSmallTablet: R, isMobile: re, isSmallMobile: Re } = ge(), U = R || re || Re, [Le, se] = d.useState(!1);
-  d.useEffect(() => (v(i), y(r), S({ start: q(Z()), end: le(Z()) }), s(k.BUDGETS_VIEW), () => {
-    S({ start: q(Z()), end: le(Z()) });
+  } = D(), { loadRepeatingTransactions: C, setDateRange: w } = ee(), { reloadCategoryTotals: M } = z(), { isSmallTablet: N, isMobile: re, isSmallMobile: Re } = ge(), U = N || re || Re, [Le, se] = d.useState(!1);
+  d.useEffect(() => (v(s), y(a), B({ start: q(Z()), end: le(Z()) }), i(L.BUDGETS_VIEW), () => {
+    B({ start: q(Z()), end: le(Z()) });
   }), []), d.useEffect(() => {
-    y(r);
-  }, [r]), d.useEffect(() => {
-    c && (m(p.start, p.end), M(u, p.start, p.end).finally(), w(p), h || (C().finally(), f().finally()));
-  }, [c, u, p]);
+    y(a);
+  }, [a]), d.useEffect(() => {
+    c && (u(h.start, h.end), M(m, h.start, h.end).finally(), w(h), p || (C().finally(), f().finally()));
+  }, [c, m, h]);
   const ke = (_e) => {
-    S({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
+    B({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
   }, Ne = () => {
-    s(k.BUDGETS_CLICK_FILTER);
+    i(L.BUDGETS_CLICK_FILTER);
   }, fe = () => {
-    se(!0), s(k.BUDGETS_CLICK_ADD);
+    se(!0), i(L.BUDGETS_CLICK_ADD);
   }, Pe = () => {
     se(!1);
-  }, $e = Ve(p.end, q(/* @__PURE__ */ new Date()));
-  return !l || !c || !h ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ g(
+  }, $e = Ve(h.end, q(/* @__PURE__ */ new Date()));
+  return !l || !c || !p ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ g(
     We,
     {
-      accountOptions: r,
+      accountOptions: a,
       actions: [
         {
           iconName: "add",
@@ -1069,16 +1071,16 @@ const yt = ({
       sx: o,
       title: n.budgets_title,
       children: [
-        (!c || !h) && /* @__PURE__ */ e(G, {}),
-        c && h && /* @__PURE__ */ g(
-          B,
+        (!c || !p) && /* @__PURE__ */ e(G, {}),
+        c && p && /* @__PURE__ */ g(
+          S,
           {
             direction: U ? "column" : "row",
             height: "100%",
             sx: { justifyContent: "center" },
             width: "100%",
             children: [
-              /* @__PURE__ */ e(B, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e(S, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
                 Ee,
                 {
                   createBudgetOnClick: fe,
@@ -1089,7 +1091,7 @@ const yt = ({
                 }
               ) }),
               x.length !== 0 && /* @__PURE__ */ g(
-                B,
+                S,
                 {
                   gap: 24,
                   height: "100%",
@@ -1106,9 +1108,9 @@ const yt = ({
         ),
         /* @__PURE__ */ e(Ot, {}),
         /* @__PURE__ */ e(
-          N,
+          k,
           {
-            ariaLabelClose: a.close_aria,
+            ariaLabelClose: r.close_aria,
             isOpen: Le,
             onClose: () => se(!1),
             title: n.add_new_title,