@mx-cartographer/experiences 7.11.13 → 7.11.14-alpha.bb1

package/dist/budgets/index.es.js

@@ -1,64 +1,64 @@
 import { jsxs as u, jsx as e, Fragment as Je } from "react/jsx-runtime";
 import l from "react";
-import { observer as I } from "mobx-react-lite";
-import { endOfMonth as Be } from "date-fns/endOfMonth";
+import { observer as w } from "mobx-react-lite";
+import { endOfMonth as xe } from "date-fns/endOfMonth";
 import { isAfter as Qe } from "date-fns/isAfter";
-import { startOfMonth as ie } from "date-fns/startOfMonth";
-import { startOfToday as re } from "date-fns/startOfToday";
-import Ae from "@mui/material/Alert";
-import ve from "@mui/material/Snackbar";
+import { startOfMonth as le } from "date-fns/startOfMonth";
+import { startOfToday as ie } from "date-fns/startOfToday";
+import ve from "@mui/material/Alert";
+import Te from "@mui/material/Snackbar";
 import x from "@mui/material/Stack";
-import le from "@mui/material/styles/useTheme";
-import V from "@mui/material/Box";
+import ue from "@mui/material/styles/useTheme";
+import W from "@mui/material/Box";
 import Z from "@mui/material/List";
-import { Text as S, CategoryIcon as K, Icon as j, H2 as Pe, H3 as Ge, P as ye } from "@mxenabled/mxui";
-import { u as E, i as w, j as de, m as q, p as ue, a as je, g as J, b as Q, h as ee, d as Fe } from "../hooks-zu7yblbi.mjs";
+import { Text as S, CategoryIcon as H, Icon as G, H2 as Ge, H3 as je, P as Ce } from "@mxenabled/mxui";
+import { u as D, i as E, j as me, m as q, p as ge, a as Fe, g as J, b as Q, h as ee, d as ze } from "../hooks-zu7yblbi.mjs";
 import { f as T } from "../NumberFormatting-DjTD0t3W.mjs";
-import Te from "@mui/material/Button";
-import me from "@mui/material/Divider";
+import De from "@mui/material/Button";
+import pe from "@mui/material/Divider";
 import te from "@mui/material/ListItem";
-import ge from "@mui/material/ListItemAvatar";
+import he from "@mui/material/ListItemAvatar";
 import oe from "@mui/material/ListItemButton";
 import ne from "@mui/material/ListItemText";
-import { b as R } from "../Localization-2MODESHW.mjs";
+import { b as M } from "../Localization-2MODESHW.mjs";
 import { D as $ } from "../Drawer-DV4NTsFg.mjs";
 import et from "@mui/material/ListItemSecondaryAction";
 import { C as tt } from "../CurrencyInput-CDY0awYV.mjs";
-import { D as H } from "../Dialog-DdCwLgrl.mjs";
+import { D as U } from "../Dialog-DdCwLgrl.mjs";
 import { C as ot } from "../ConnectionsDrawer-c7HaKeRj.mjs";
-import * as M from "d3";
+import * as L from "d3";
 import nt from "@mui/material/Tooltip";
-import { useTheme as ze, alpha as at } from "@mui/material/styles";
-import { u as pe } from "../useScreenSize-B6JyS_Lj.mjs";
-import { L as he } from "../Loader-D3rjKx72.mjs";
-import { E as Ce } from "../EmptyState-DHAkGsjk.mjs";
+import { useTheme as Ue, alpha as at } from "@mui/material/styles";
+import { u as fe } from "../useScreenSize-B6JyS_Lj.mjs";
+import { L as be } from "../Loader-D3rjKx72.mjs";
+import { E as Se } from "../EmptyState-DHAkGsjk.mjs";
 import { A as P } from "../Analytics-i5h6BxR1.mjs";
 import Re from "@mui/material/Tab";
 import rt from "@mui/material/Tabs";
 import { e as st } from "../exportTransactionsToCSV-YXwmzmUp.mjs";
-import { T as De } from "../TransactionList-BibbhhS9.mjs";
+import { T as Ee } from "../TransactionList-BibbhhS9.mjs";
 import { T as it } from "../TransactionDetails-CCLMsk_N.mjs";
-import Ee from "@mui/material/Card";
-import we from "@mui/material/CardContent";
-import { S as xe } from "../StatusBar-BK_uYHAB.mjs";
-import { S as Ue } from "../SingleSegmentDonut-BgbLgwHi.mjs";
+import we from "@mui/material/Card";
+import Ie from "@mui/material/CardContent";
+import { S as Ae } from "../StatusBar-BK_uYHAB.mjs";
+import { S as We } from "../SingleSegmentDonut-BgbLgwHi.mjs";
 import { u as ct, b as lt } from "../CategorySelectorDrawer-BMmxw2oY.mjs";
-import We from "@mui/material/CardHeader";
+import He from "@mui/material/CardHeader";
 import { subDays as dt } from "date-fns/subDays";
 import ut from "@mui/material/IconButton";
 import { M as mt } from "../ManageIncome-LQhY19hv.mjs";
-import { u as He } from "../useWidgetLoadTimer-Bmgv_UeH.mjs";
+import { u as Ve } from "../useWidgetLoadTimer-Bmgv_UeH.mjs";
 import { W as gt } from "../WidgetContainer-sC5KLXHI.mjs";
 import { u as pt } from "../BudgetUtil-CTpLz9lw.mjs";
 import { M as ht } from "../MiniWidgetContainer-DhEx4qKi.mjs";
 import { ChevronRight as ft } from "@mxenabled/mx-icons";
-import { b as Me } from "../CategoryUtil-Cufq3fxg.mjs";
+import { b as Le } from "../CategoryUtil-Cufq3fxg.mjs";
 import { S as bt } from "../StatusIndicator-0iX3Gnnu.mjs";
 import { b as _t } from "../User-CoANIQIA.mjs";
 import { i as yt } from "../DateUtil-CVXVMbjf.mjs";
 import { f as Ct } from "../DateFormats-Cs-NbEZ7.mjs";
-const St = I(() => {
-  const { budgets: t } = E(), { totalBudgeted: n } = w(), { incomeTotal: i } = de(), s = i - n;
+const St = w(() => {
+  const { budgets: t } = D(), { totalBudgeted: n } = E(), { incomeTotal: i } = me(), s = i - n;
   return /* @__PURE__ */ u(x, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
     /* @__PURE__ */ u(x, { alignItems: "center", children: [
       /* @__PURE__ */ e(S, { bold: !0, variant: "Body", children: T(i, "0,0") }),
@@ -75,26 +75,26 @@ const St = I(() => {
       /* @__PURE__ */ e(S, { color: "secondary", variant: "Small", children: t.remaining })
     ] })
   ] });
-}), Bt = I(
+}), Bt = w(
   ({ category: t }) => {
-    const { budgets: n } = E(), { budgets: i } = w(), s = l.useMemo(() => {
-      const a = i.find((c) => c.category_guid === t.guid), r = T(t.totalAverageAmount, "0,0"), o = a ? R(n.recalculate_previous_budget, T(a.amount, "0,0")) : n.recalculate_new_budget;
+    const { budgets: n } = D(), { budgets: i } = E(), s = l.useMemo(() => {
+      const a = i.find((c) => c.category_guid === t.guid), r = T(t.totalAverageAmount, "0,0"), o = a ? M(n.recalculate_previous_budget, T(a.amount, "0,0")) : n.recalculate_new_budget;
       return `${r} - ${o}`;
     }, [n, i]);
     return /* @__PURE__ */ u(l.Fragment, { children: [
       /* @__PURE__ */ e(te, { children: /* @__PURE__ */ u(oe, { children: [
-        /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(K, { categoryGuid: t.guid, variant: "filled" }) }),
+        /* @__PURE__ */ e(he, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
         /* @__PURE__ */ e(ne, { primary: t.name, secondary: s })
       ] }) }),
-      /* @__PURE__ */ e(me, {})
+      /* @__PURE__ */ e(pe, {})
     ] }, t.guid);
   }
 ), xt = ({ onRecalculateBudgets: t }) => {
-  const { budgets: n, common: i } = E(), { spendCategories: s } = q(), { recalculateBudgets: a, setAlert: r } = w(), [o, c] = l.useState(!1), g = s.filter((m) => m.totalAverageAmount > 0), d = async () => {
+  const { budgets: n, common: i } = D(), { spendCategories: s } = q(), { recalculateBudgets: a, setAlert: r } = E(), [o, c] = l.useState(!1), g = s.filter((m) => m.totalAverageAmount > 0), d = async () => {
     await a(g), c(!1), r(n.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ u(l.Fragment, { children: [
-    /* @__PURE__ */ e(Te, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: n.recalculate_button }),
+    /* @__PURE__ */ e(De, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: n.recalculate_button }),
     /* @__PURE__ */ e(S, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: n.recalculate_help }),
     /* @__PURE__ */ e(
       $,
@@ -109,24 +109,24 @@ const St = I(() => {
             /* @__PURE__ */ e(S, { bold: !0, variant: "Body", children: n.recalculate_description_top }),
             /* @__PURE__ */ e(S, { variant: "ParagraphSmall", children: n.recalculate_description_bottom })
           ] }),
-          /* @__PURE__ */ e(V, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: g.map((m) => /* @__PURE__ */ e(Bt, { category: m }, m.guid)) }) })
+          /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: g.map((m) => /* @__PURE__ */ e(Bt, { category: m }, m.guid)) }) })
         ] })
       }
     )
   ] });
-}, fe = ({
+}, _e = ({
   amount: t,
   categoryName: n,
   onAmountChanged: i
 }) => {
-  const { budgets: s } = E(), { totalBudgeted: a } = w(), { incomeTotal: r } = de(), o = r - a;
+  const { budgets: s } = D(), { totalBudgeted: a } = E(), { incomeTotal: r } = me(), o = r - a;
   return /* @__PURE__ */ u(x, { gap: 16, children: [
     /* @__PURE__ */ u(x, { children: [
-      /* @__PURE__ */ e(S, { children: R(
+      /* @__PURE__ */ e(S, { children: M(
         s.add_description_top,
         T(o, "0,0")
       ) }),
-      /* @__PURE__ */ e(S, { children: R(s.add_description_bottom, n) })
+      /* @__PURE__ */ e(S, { children: M(s.add_description_bottom, n) })
     ] }),
     /* @__PURE__ */ e(
       tt,
@@ -140,13 +140,13 @@ const St = I(() => {
       }
     )
   ] });
-}, At = I(({ category: t, onAddBudget: n }) => {
-  const { budgets: i, common: s } = E(), [a, r] = l.useState(!1), [o, c] = l.useState(
+}, At = 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}`
   );
   return /* @__PURE__ */ u(l.Fragment, { children: [
     /* @__PURE__ */ e(te, { children: /* @__PURE__ */ u(oe, { onClick: () => r(!0), children: [
-      /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(K, { categoryGuid: t.guid }) }),
+      /* @__PURE__ */ e(he, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
       /* @__PURE__ */ e(
         ne,
         {
@@ -154,10 +154,10 @@ const St = I(() => {
           secondary: T(t.totalAmount, "0,0")
         }
       ),
-      /* @__PURE__ */ e(et, { children: /* @__PURE__ */ e(j, { name: "add", size: 20 }) })
+      /* @__PURE__ */ e(et, { children: /* @__PURE__ */ e(G, { name: "add", size: 20 }) })
     ] }) }, t.guid),
     /* @__PURE__ */ e(
-      H,
+      U,
       {
         copy: { close_aria: s.close_aria, title: i.add_title },
         disablePrimaryButton: Number(o) <= 0,
@@ -165,17 +165,17 @@ const St = I(() => {
         onClose: () => r(!1),
         onPrimaryAction: () => n(t, Number(o)),
         primaryText: i.add_save_button,
-        children: /* @__PURE__ */ e(fe, { amount: o, categoryName: t.name, onAmountChanged: c })
+        children: /* @__PURE__ */ e(_e, { amount: o, categoryName: t.name, onAmountChanged: c })
       }
     )
   ] });
-}), Ve = I(({ onAddBudget: t, onRecalculateBudgets: n }) => {
-  const { budgets: i } = E(), { addBudget: s, setAlert: a, unbudgetedCategories: r } = w(), o = async (c, g) => {
-    await s(c, g), t?.(), a(R(i.alert_budget_created, c.name));
+}), Ke = w(({ onAddBudget: t, onRecalculateBudgets: n }) => {
+  const { budgets: i } = D(), { addBudget: s, setAlert: a, unbudgetedCategories: r } = E(), o = async (c, g) => {
+    await s(c, g), t?.(), a(M(i.alert_budget_created, c.name));
   };
   return /* @__PURE__ */ u(x, { children: [
     /* @__PURE__ */ e(St, {}),
-    /* @__PURE__ */ e(V, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: r.map((c) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: r.map((c) => /* @__PURE__ */ e(
       At,
       {
         category: c,
@@ -185,7 +185,7 @@ const St = I(() => {
     )) }) }),
     /* @__PURE__ */ e(xt, { onRecalculateBudgets: n })
   ] });
-}), Le = 5, Ke = 100, ce = 25, vt = (t) => {
+}), Ne = 5, Xe = 100, de = 25, vt = (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) => {
@@ -193,62 +193,62 @@ const St = I(() => {
   }, s = (a) => {
     a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
   };
-  return M.drag().on("start", n).on("drag", i).on("end", s);
+  return L.drag().on("start", n).on("drag", i).on("end", s);
 }, Tt = (t) => {
   let n = t.transaction_total / t.amount;
   n < 0 ? n = 0 : n > 1 && (n = 1);
-  const i = n * 2 * Math.PI, s = M.interpolate(0, i), a = M.arc().cornerRadius(5).innerRadius(t.radius - Le * 2).outerRadius(t.radius - Le).startAngle(0).endAngle(0);
+  const i = n * 2 * Math.PI, s = L.interpolate(0, i), a = L.arc().cornerRadius(5).innerRadius(t.radius - Ne * 2).outerRadius(t.radius - Ne).startAngle(0).endAngle(0);
   return (r) => (a.endAngle(s(r)), a(t) || "");
 }, Dt = (t) => {
-  M.selectAll(".bubble").call(vt(t));
-}, Ne = (t, n, i) => Math.min(Math.max(t, n), i), Et = (t, n, i) => {
+  L.selectAll(".bubble").call(vt(t));
+}, ke = (t, n, i) => Math.min(Math.max(t, n), i), Et = (t, n, i) => {
   t.alpha(1).restart().force(
     "x",
-    M.forceX().x(i / 2).strength(0.01)
+    L.forceX().x(i / 2).strength(0.01)
   ).force(
     "y",
-    M.forceY().y(n / 2).strength(0.02)
+    L.forceY().y(n / 2).strength(0.02)
   ).on("tick", () => {
     const s = t.nodes();
     s.forEach((a) => {
-      const r = a.radius ?? ce;
-      a.x = Ne(a.x ?? 0, r, i - r), a.y = Ne(a.y ?? 0, r, n - r);
-    }), M.selectAll(".bubble").data(s).attr("transform", (a) => `translate(${a.x},${a.y})`);
+      const r = a.radius ?? de;
+      a.x = ke(a.x ?? 0, r, i - r), a.y = ke(a.y ?? 0, r, n - r);
+    }), L.selectAll(".bubble").data(s).attr("transform", (a) => `translate(${a.x},${a.y})`);
   });
-}, Xe = (t, n) => M.scaleLinear().domain([t, n]).range([ce, Ke]), wt = (t) => {
+}, Ye = (t, n) => L.scaleLinear().domain([t, n]).range([de, Xe]), wt = (t) => {
   const n = t.reduce((r, o) => {
     const c = Math.max(o.transaction_total, o.amount);
     return c > r ? c : r;
   }, 0), i = t.reduce((r, o) => {
     const c = Math.max(o.transaction_total, o.amount);
     return c < r ? c : r;
-  }, n), s = Xe(i, n), a = t.map((r) => {
+  }, n), s = Ye(i, n), a = t.map((r) => {
     const o = s(Math.max(r.transaction_total, r.amount)) || 25;
     return {
       ...r,
       radius: o
     };
   });
-  return M.forceSimulation(a).velocityDecay(0.05).force("collide", M.forceCollide((r) => r.radius + 2).strength(0.7));
+  return L.forceSimulation(a).velocityDecay(0.05).force("collide", L.forceCollide((r) => r.radius + 2).strength(0.7));
 }, It = (t, n, i) => {
-  const a = Math.PI * ce ** 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 m = ce;
+  const a = Math.PI * de ** 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 m = de;
   if (a < d) {
     const h = Math.sqrt(d / (t * Math.PI)), _ = Math.min(c, g) / 4;
-    m = Math.min(Ke, h, _);
+    m = Math.min(Xe, h, _);
   }
   return r && t <= 3 && (m = Math.min(m, 45)), { minRadius: Math.max(20, m * 0.6), maxRadius: m };
 }, Ot = (t, n, i, s, a) => {
   const { maxRadius: r, minRadius: o } = It(t, n, a);
-  return M.scaleLinear().domain([s, i]).range([o, r]);
-}, Rt = (t, n, i = !1, s, a) => {
-  const r = n.map((d) => Math.max(d.transaction_total, d.amount)), o = Math.min(...r), c = Math.max(...r), g = i ? Ot(t.length, s, c, o, a) : Xe(o, c);
+  return L.scaleLinear().domain([s, i]).range([o, r]);
+}, Mt = (t, n, i = !1, s, a) => {
+  const r = n.map((d) => Math.max(d.transaction_total, d.amount)), o = Math.min(...r), c = Math.max(...r), g = i ? Ot(t.length, s, c, o, a) : Ye(o, c);
   return t.map((d) => ({
     ...d,
     radius: g(Math.max(d.transaction_total, d.amount))
   }));
-}, ke = 5, Mt = 2e3, Lt = ({ bubble: t }) => {
-  const n = le(), {
+}, $e = 5, Rt = 2e3, Lt = ({ bubble: t }) => {
+  const n = ue(), {
     amount: i,
     guid: s,
     budgetColors: { mercury: a },
@@ -256,9 +256,9 @@ const St = I(() => {
     transaction_total: o
   } = t, c = `mercury-${s}`;
   l.useEffect(() => {
-    M.select(`.${c}`).selectAll(".status").remove(), M.select(`.${c}`).append("path").transition().duration(Mt).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => Tt(t));
+    L.select(`.${c}`).selectAll(".status").remove(), L.select(`.${c}`).append("path").transition().duration(Rt).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => Tt(t));
   }, [i, r, o]);
-  const g = M.arc().innerRadius((d) => d - 2 * ke).outerRadius((d) => d - ke).startAngle(0).endAngle(2 * Math.PI);
+  const g = L.arc().innerRadius((d) => d - 2 * $e).outerRadius((d) => d - $e).startAngle(0).endAngle(2 * Math.PI);
   return /* @__PURE__ */ e("g", { className: c, children: /* @__PURE__ */ e(
     "path",
     {
@@ -266,10 +266,10 @@ const St = I(() => {
       style: { fill: n.palette.common.white, fillOpacity: 0.35 }
     }
   ) });
-}, Nt = l.memo(Lt), W = 75, Se = 50;
+}, Nt = l.memo(Lt), z = 75, Be = 50;
 function kt({ bubble: t, isDraggable: n, onClick: i = () => {
 } }) {
-  const [s, a] = l.useState(!1), r = ze(), { availableWidth: o } = ue(), c = l.useMemo(() => {
+  const [s, a] = l.useState(!1), r = Ue(), { availableWidth: o } = ge(), c = l.useMemo(() => {
     if (t)
       return {
         amount: t.amount,
@@ -290,21 +290,21 @@ function kt({ bubble: t, isDraggable: n, onClick: i = () => {
     y: v
   } = t, A = o < 400 ? -8 : -12;
   let b = A, y = A;
-  f > W ? (b = -14, y = -45) : f > Se && (y = -32);
+  f > z ? (b = -14, y = -45) : f > Be && (y = -32);
   let B = 32;
-  f <= W && (B = o < 400 ? 16 : 24);
-  const O = `${t.category.name}: ${_}`, L = {
+  f <= z && (B = o < 400 ? 16 : 24);
+  const I = `${t.category.name}: ${_}`, N = {
     modifiers: [
       {
         name: "offset",
         options: { offset: [0, 15] }
       }
     ]
-  }, D = (G) => {
-    (G.key === "Enter" || G.key === " ") && (G.preventDefault(), i(t));
-  }, N = () => {
+  }, R = (k) => {
+    (k.key === "Enter" || k.key === " ") && (k.preventDefault(), i(t));
+  }, O = () => {
     a(!0);
-  }, k = () => {
+  }, j = () => {
     a(!1);
   };
   return /* @__PURE__ */ u(
@@ -313,10 +313,10 @@ function kt({ bubble: t, isDraggable: n, onClick: i = () => {
       "aria-label": `${p} - ${_}`,
       className: "bubble",
       id: `bubble-${h}`,
-      onBlur: k,
+      onBlur: j,
       onClick: () => i(t),
-      onFocus: N,
-      onKeyDown: D,
+      onFocus: O,
+      onKeyDown: R,
       onMouseEnter: () => a(!0),
       onMouseLeave: () => a(!1),
       role: "button",
@@ -338,9 +338,9 @@ function kt({ bubble: t, isDraggable: n, onClick: i = () => {
             stroke-opacity: 0.8;
           }
         ` }),
-        /* @__PURE__ */ e(nt, { open: s, slotProps: { popper: L }, title: O, children: /* @__PURE__ */ e("circle", { fill: g, id: `circle-${h}`, r: f }) }),
-        /* @__PURE__ */ e("svg", { x: b, y, children: /* @__PURE__ */ e(j, { name: m, size: B, sx: { fill: d } }) }),
-        f > W && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(nt, { open: s, slotProps: { popper: N }, title: I, children: /* @__PURE__ */ e("circle", { fill: g, id: `circle-${h}`, r: f }) }),
+        /* @__PURE__ */ e("svg", { x: b, y, children: /* @__PURE__ */ e(G, { name: m, size: B, sx: { fill: d } }) }),
+        f > z && /* @__PURE__ */ e(
           S,
           {
             bold: !0,
@@ -352,7 +352,7 @@ function kt({ bubble: t, isDraggable: n, onClick: i = () => {
             children: p
           }
         ),
-        f > Se && /* @__PURE__ */ e(
+        f > Be && /* @__PURE__ */ e(
           S,
           {
             bold: !0,
@@ -360,11 +360,11 @@ function kt({ bubble: t, isDraggable: n, onClick: i = () => {
             id: `budget-description-${h}-1`,
             sx: { fill: d },
             variant: "Body",
-            y: f <= W ? 12 : 24,
-            children: f <= W ? _.split(" ")[0] : _
+            y: f <= z ? 12 : 24,
+            children: f <= z ? _.split(" ")[0] : _
           }
         ),
-        f <= W && f > Se && /* @__PURE__ */ e(
+        f <= z && f > Be && /* @__PURE__ */ e(
           S,
           {
             component: "text",
@@ -388,7 +388,7 @@ const $t = ({
   onClick: s = () => {
   }
 }) => {
-  const [a, r] = l.useState([]), o = l.useRef(null), c = l.useRef(!1), { detailedBudgets: g } = w(), d = l.useCallback(() => {
+  const [a, r] = l.useState([]), o = l.useRef(null), c = l.useRef(!1), { detailedBudgets: g } = E(), d = l.useCallback(() => {
     const m = o.current, p = wt(g), h = p.nodes();
     if (m) {
       const _ = m.nodes(), f = new Map(_.map((C) => [C.guid, C]));
@@ -411,23 +411,23 @@ const $t = ({
   }, []), l.useEffect(() => {
     const m = o.current;
     if (!m) return;
-    const p = m.nodes(), h = n > 0 && n < 450 || t > 0 && t < 300, _ = Rt(p, g, h, t, n);
+    const p = m.nodes(), h = n > 0 && n < 450 || t > 0 && t < 300, _ = Mt(p, g, h, t, n);
     m.nodes(_), Et(m, t, n), i && setTimeout(() => {
       Dt(m);
     }, 0), r([..._]);
   }, [t, n, i, g]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(n), children: a.map((m) => /* @__PURE__ */ e(kt, { bubble: m, isDraggable: i, onClick: s }, m.guid)) });
-}, Pt = I($t), Gt = ({
+}, Pt = w($t), Gt = ({
   isMiniWidget: t = !1,
   onConnectAccountsClick: n,
   createBudgetOnClick: i
 }) => {
-  const { config: s } = je(), { recalculateBudgets: a } = w(), { spendCategories: r } = q(), { budgets: o } = E(), { availableWidth: c } = ue(), { isMobile: g } = pe(c), d = t && g, [m, p] = l.useState(!1), [h, _] = l.useState(!1), [f, C] = l.useState(!1), v = l.useMemo(() => [...r.filter((b) => b.totalAverageAmount > 0)], [r]), A = async () => {
+  const { config: s } = Fe(), { recalculateBudgets: a } = E(), { spendCategories: r } = q(), { budgets: o } = D(), { availableWidth: c } = ge(), { isMobile: g } = fe(c), d = t && g, [m, p] = l.useState(!1), [h, _] = l.useState(!1), [f, C] = l.useState(!1), v = l.useMemo(() => [...r.filter((b) => b.totalAverageAmount > 0)], [r]), A = async () => {
     C(!0);
     const { data: b, isSuccess: y } = await a(v);
     C(!1), y ? (b.length === 0 && _(!0), p(!1)) : p(!0);
   };
-  return f ? /* @__PURE__ */ e(he, {}) : m ? /* @__PURE__ */ e(
-    Ce,
+  return f ? /* @__PURE__ */ e(be, {}) : m ? /* @__PURE__ */ e(
+    Se,
     {
       header: o.autogenerate_budgets_error_header,
       icon: "error",
@@ -448,7 +448,7 @@ const $t = ({
       }
     }
   ) : /* @__PURE__ */ e(Je, { children: h ? /* @__PURE__ */ e(
-    Ce,
+    Se,
     {
       header: o.zero_state_generate_budgets_header,
       icon: "error",
@@ -473,7 +473,7 @@ const $t = ({
       }
     }
   ) : /* @__PURE__ */ e(
-    Ce,
+    Se,
     {
       header: o.create_budgets_title,
       icon: "bubble_chart",
@@ -498,7 +498,7 @@ const $t = ({
       }
     }
   ) });
-}, Ye = I(
+}, Ze = w(
   ({
     createBudgetOnClick: t = () => {
     },
@@ -508,7 +508,7 @@ const $t = ({
     shouldShowZeroState: a,
     unavailableWidth: r = 24
   }) => {
-    const { onEvent: o } = J(), { setSelectedBudget: c } = w(), { isInitialized: g } = Q(), { accounts: d } = E(), { availableWidth: m } = ue(), { isMobile: p } = pe(), [h, _] = l.useState(!1), f = l.useMemo(() => m - r, [m]), C = (A) => {
+    const { onEvent: o } = J(), { setSelectedBudget: c } = E(), { isInitialized: g } = Q(), { accounts: d } = D(), { availableWidth: m } = ge(), { isMobile: p } = fe(), [h, _] = l.useState(!1), f = l.useMemo(() => m - r, [m]), C = (A) => {
       c(A), o(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
         budget_category: A.category.name,
         click_type: "bubble"
@@ -517,7 +517,7 @@ const $t = ({
       _(!0), o(P.ACCOUNTS_CLICK_CONNECT);
     };
     return /* @__PURE__ */ u(
-      V,
+      W,
       {
         ml: a || p ? 0 : 24,
         sx: { alignSelf: "center", ...s && { height: "100%" } },
@@ -550,7 +550,7 @@ const $t = ({
       }
     );
   }
-), Ze = ({ budget: t }) => {
+), qe = ({ budget: t }) => {
   const {
     amount: n,
     budgetColors: { background: i },
@@ -564,29 +564,29 @@ const $t = ({
       percentage: `${r}%`
     }
   ];
-  return /* @__PURE__ */ e(Ee, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(we, { children: /* @__PURE__ */ u(x, { alignItems: "center", gap: 16, children: [
-    /* @__PURE__ */ e(K, { categoryGuid: a, size: 56 }),
-    /* @__PURE__ */ e(Pe, { variant: "H1", children: `${T(o, "0,0")} / ${T(n, "0,0")}` }),
+  return /* @__PURE__ */ e(we, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(Ie, { children: /* @__PURE__ */ u(x, { alignItems: "center", gap: 16, children: [
+    /* @__PURE__ */ e(H, { categoryGuid: a, size: 56 }),
+    /* @__PURE__ */ e(Ge, { variant: "H1", children: `${T(o, "0,0")} / ${T(n, "0,0")}` }),
     /* @__PURE__ */ e(S, { bold: !0, variant: "XSmall", children: s }),
-    /* @__PURE__ */ e(xe, { data: c, height: 10 })
+    /* @__PURE__ */ e(Ae, { data: c, height: 10 })
   ] }) }) });
-}, jt = I(() => {
-  const { budgets: t } = E();
+}, jt = w(() => {
+  const { budgets: t } = D();
   return /* @__PURE__ */ u(x, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
-    /* @__PURE__ */ e(j, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(G, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
     /* @__PURE__ */ e(S, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
     /* @__PURE__ */ e(S, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
   ] });
-}), Ft = I(({ budget: t }) => {
+}), Ft = w(({ budget: t }) => {
   const {
     amount: n,
     budgetColors: { background: i },
     category: s,
     percentage: a,
     transaction_total: r
-  } = t, { setSelectedSubBudget: o } = w();
+  } = t, { setSelectedSubBudget: o } = E();
   return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ u(oe, { onClick: () => o(t), children: [
-    /* @__PURE__ */ e(ge, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ue, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(K, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(he, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(We, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       ne,
       {
@@ -598,8 +598,8 @@ const $t = ({
       }
     )
   ] }) });
-}), zt = I(({ category: t, parentBudget: n }) => {
-  const { budgets: i, common: s } = E(), { setExpandedGuid: a, setOnSelect: r } = ct(), { addBudget: o } = w(), [c, g] = l.useState(!1), [d, m] = l.useState(!1), [p, h] = l.useState(""), [_, f] = l.useState(void 0);
+}), zt = w(({ category: t, parentBudget: n }) => {
+  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: r } = ct(), { addBudget: o } = E(), [c, g] = l.useState(!1), [d, m] = l.useState(!1), [p, h] = l.useState(""), [_, f] = l.useState(void 0);
   l.useEffect(() => {
     r((A) => {
       const b = t.subCategories.find((y) => y.guid === A);
@@ -611,15 +611,15 @@ const $t = ({
   }, v = async () => {
     _ && Number(p) > 0 && (await o(_, Number(p), n.guid), m(!1), g(!1), f(void 0));
   };
-  return /* @__PURE__ */ u(V, { children: [
+  return /* @__PURE__ */ u(W, { children: [
     /* @__PURE__ */ e(te, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(oe, { onClick: C, children: /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ u(x, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ u(x, { alignItems: "center", direction: "row", gap: 8, children: [
-        /* @__PURE__ */ e(j, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
+        /* @__PURE__ */ e(G, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
         /* @__PURE__ */ e(S, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
       ] }),
-      /* @__PURE__ */ e(j, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
+      /* @__PURE__ */ e(G, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
     ] }) }) }) }),
-    /* @__PURE__ */ e(me, {}),
+    /* @__PURE__ */ e(pe, {}),
     /* @__PURE__ */ e(
       $,
       {
@@ -631,7 +631,7 @@ const $t = ({
       }
     ),
     /* @__PURE__ */ e(
-      H,
+      U,
       {
         copy: { close_aria: s.close_aria, title: i.add_title },
         disablePrimaryButton: Number(p) <= 0,
@@ -640,7 +640,7 @@ const $t = ({
         onPrimaryAction: v,
         primaryText: i.add_save_button,
         children: /* @__PURE__ */ e(
-          fe,
+          _e,
           {
             amount: p,
             categoryName: _?.name || "",
@@ -650,8 +650,8 @@ const $t = ({
       }
     )
   ] });
-}), Ut = I(({ budget: t }) => {
-  const { category: n, subBudgets: i } = t, { budgets: s, common: a } = E(), { deleteBudget: r, selectedSubBudget: o, setSelectedSubBudget: c, updateBudget: g } = w(), { filter: d, setFilter: m } = ee(), [p, h] = l.useState(!1), [_, f] = l.useState(!1), [C, v] = l.useState("");
+}), Ut = 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: m } = ee(), [p, h] = l.useState(!1), [_, f] = l.useState(!1), [C, v] = l.useState("");
   l.useEffect(() => {
     o && (v(`${o.amount}`), m({
       ...d,
@@ -675,7 +675,7 @@ const $t = ({
     /* @__PURE__ */ u(Z, { sx: { bgcolor: "background.paper" }, children: [
       i.length === 0 ? /* @__PURE__ */ e(jt, {}) : i.map((B) => /* @__PURE__ */ u(l.Fragment, { children: [
         /* @__PURE__ */ e(Ft, { budget: B }),
-        /* @__PURE__ */ e(me, {})
+        /* @__PURE__ */ e(pe, {})
       ] }, B.guid)),
       /* @__PURE__ */ e(zt, { category: n, parentBudget: t })
     ] }),
@@ -691,14 +691,14 @@ const $t = ({
         secondaryText: s.details_delete_button,
         title: s.details_title,
         children: o && /* @__PURE__ */ u(x, { gap: 24, children: [
-          /* @__PURE__ */ e(Ze, { budget: o }),
-          /* @__PURE__ */ e(De, { height: "100%" })
+          /* @__PURE__ */ e(qe, { budget: o }),
+          /* @__PURE__ */ e(Ee, { height: "100%" })
         ] })
       }
     ),
     o && /* @__PURE__ */ u(l.Fragment, { children: [
       /* @__PURE__ */ e(
-        H,
+        U,
         {
           copy: { close_aria: a.close_aria, title: s.details_edit_title },
           disablePrimaryButton: Number(C) <= 0,
@@ -707,7 +707,7 @@ const $t = ({
           onPrimaryAction: A,
           primaryText: s.edit_save_button,
           children: /* @__PURE__ */ e(
-            fe,
+            _e,
             {
               amount: C,
               categoryName: o.category.name,
@@ -717,7 +717,7 @@ const $t = ({
         }
       ),
       /* @__PURE__ */ e(
-        H,
+        U,
         {
           copy: { close_aria: a.close_aria, title: s.delete_title },
           isOpen: _,
@@ -726,26 +726,26 @@ const $t = ({
           primaryColor: "error",
           primaryText: "Delete",
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(S, { variant: "Paragraph", children: R(s.delete_description, o.category.name) })
+          children: /* @__PURE__ */ e(S, { variant: "Paragraph", children: M(s.delete_description, o.category.name) })
         }
       )
     ] })
   ] });
-}), Wt = I(({ budget: t }) => {
-  const { is_mobile_webview: n } = je(), { setAlert: i } = w(), { budgets: s, common: a, transactions: r } = E(), { isDesktop: o, isSmallTablet: c, isTablet: g } = pe(), {
+}), Wt = w(({ budget: t }) => {
+  const { is_mobile_webview: n } = Fe(), { setAlert: i } = E(), { budgets: s, common: a, transactions: r } = D(), { isDesktop: o, isSmallTablet: c, isTablet: g } = fe(), {
     sortedTransactions: d,
     sortedTransactionsWithSplits: m,
     tags: p
   } = ee(), [h, _] = l.useState(0), [f, C] = l.useState(""), v = l.useMemo(
     () => d.find((B) => B.guid === f),
     [f, d]
-  ), A = (B, O) => {
-    _(O);
+  ), A = (B, I) => {
+    _(I);
   }, b = () => {
     st(m, p), i(s.alert_csv_downloaded);
   }, y = d.length > 0 && !n && (o || g && !c);
   return /* @__PURE__ */ u(x, { gap: 24, children: [
-    /* @__PURE__ */ e(Ze, { budget: t }),
+    /* @__PURE__ */ e(qe, { budget: t }),
     /* @__PURE__ */ u(x, { children: [
       /* @__PURE__ */ u(
         rt,
@@ -763,15 +763,15 @@ const $t = ({
       ),
       h === 0 && /* @__PURE__ */ u(x, { children: [
         y && /* @__PURE__ */ e(x, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
-          Te,
+          De,
           {
             onClick: b,
-            startIcon: /* @__PURE__ */ e(j, { name: "ios_share" }),
+            startIcon: /* @__PURE__ */ e(G, { name: "ios_share" }),
             variant: "text",
             children: r.export_csv_btn
           }
         ) }),
-        /* @__PURE__ */ e(De, { height: "100%", onClick: C })
+        /* @__PURE__ */ e(Ee, { height: "100%", onClick: C })
       ] }),
       h === 1 && /* @__PURE__ */ e(Ut, { budget: t }),
       /* @__PURE__ */ e(
@@ -786,8 +786,8 @@ const $t = ({
       )
     ] })
   ] });
-}), Ht = I(() => {
-  const { selectedAccountGuids: t } = Q(), { budgets: n, common: i } = E(), {
+}), Ht = w(() => {
+  const { selectedAccountGuids: t } = Q(), { budgets: n, common: i } = D(), {
     alert: s,
     dateRange: a,
     deleteBudget: r,
@@ -796,12 +796,12 @@ const $t = ({
     setAlert: g,
     setSelectedBudget: d,
     updateBudget: m
-  } = w(), { setFilter: p } = ee(), [h, _] = l.useState(!1), [f, C] = l.useState(!1), [v, A] = l.useState(!1), [b, y] = l.useState("");
+  } = E(), { setFilter: p } = ee(), [h, _] = l.useState(!1), [f, C] = l.useState(!1), [v, A] = l.useState(!1), [b, y] = l.useState("");
   l.useEffect(() => {
     o && !c && (y(`${o.amount}`), _(!0), p({
       accounts: t,
       dateRange: a,
-      custom: (N) => N.category_guid === o.category_guid || N.top_level_category_guid === o.category_guid,
+      custom: (O) => O.category_guid === o.category_guid || O.top_level_category_guid === o.category_guid,
       showSplits: !0
     }));
   }, [o]);
@@ -810,14 +810,14 @@ const $t = ({
       ...o,
       amount: Number(b),
       percentage: o.category.totalAmount / Number(b) * 100
-    }), C(!1), g(R(n.alert_budget_updated, o.category.name)));
-  }, O = async () => {
-    o && (await r(o.guid), g(R(n.alert_budget_deleted, o.category.name))), L();
-  }, L = () => {
+    }), C(!1), g(M(n.alert_budget_updated, o.category.name)));
+  }, I = async () => {
+    o && (await r(o.guid), g(M(n.alert_budget_deleted, o.category.name))), N();
+  }, N = () => {
     _(!1), setTimeout(() => {
       d(void 0);
     }, 250);
-  }, D = () => {
+  }, R = () => {
     C(!1), y(`${o?.amount}`);
   };
   if (o)
@@ -827,7 +827,7 @@ const $t = ({
         {
           ariaLabelClose: i.close_aria,
           isOpen: h,
-          onClose: L,
+          onClose: N,
           onPrimaryAction: () => C(!0),
           onSecondaryAction: () => A(!0),
           primaryText: n.details_edit_button,
@@ -837,30 +837,30 @@ const $t = ({
           children: [
             /* @__PURE__ */ e(Wt, { budget: o }),
             /* @__PURE__ */ e(
-              ve,
+              Te,
               {
                 anchorOrigin: { vertical: "bottom", horizontal: "right" },
                 autoHideDuration: 3500,
                 onClose: () => g(""),
                 open: !!s,
-                children: /* @__PURE__ */ e(Ae, { closeText: "", onClose: () => g(""), severity: "success", variant: "filled", children: s })
+                children: /* @__PURE__ */ e(ve, { closeText: "", onClose: () => g(""), severity: "success", variant: "filled", children: s })
               }
             )
           ]
         }
       ),
       /* @__PURE__ */ e(
-        H,
+        U,
         {
           copy: { close_aria: i.close_aria, title: n.details_edit_title },
           disablePrimaryButton: Number(b) <= 0,
           isOpen: f,
-          onClose: D,
+          onClose: R,
           onPrimaryAction: B,
-          onSecondaryAction: D,
+          onSecondaryAction: R,
           primaryText: n.edit_save_button,
           children: /* @__PURE__ */ e(
-            fe,
+            _e,
             {
               amount: b,
               categoryName: o.category.name,
@@ -870,16 +870,16 @@ const $t = ({
         }
       ),
       /* @__PURE__ */ e(
-        H,
+        U,
         {
           copy: { close_aria: i.close_aria, title: n.delete_title },
           isOpen: v,
           onClose: () => A(!1),
-          onPrimaryAction: O,
+          onPrimaryAction: I,
           primaryColor: "error",
           primaryText: n.details_delete_button,
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(S, { variant: "Paragraph", children: R(n.delete_description, o.category.name) })
+          children: /* @__PURE__ */ e(S, { variant: "Paragraph", children: M(n.delete_description, o.category.name) })
         }
       )
     ] });
@@ -894,7 +894,7 @@ const $t = ({
     transaction_total: d
   } = t;
   return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ u(oe, { onClick: () => n?.(t), children: [
-    /* @__PURE__ */ e(ge, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ue, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(K, { categoryGuid: r, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(he, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(We, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: r, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       ne,
       {
@@ -912,47 +912,47 @@ const $t = ({
       }
     )
   ] }) });
-}, Kt = I(() => {
-  const { onEvent: t } = J(), { budgets: n } = E(), { detailedBudgets: i, setSelectedBudget: s } = w(), a = (r) => {
+}, Kt = w(() => {
+  const { onEvent: t } = J(), { budgets: n } = D(), { detailedBudgets: i, setSelectedBudget: s } = E(), a = (r) => {
     s(r), t(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
       budget_category: r.category.name,
       click_type: "list"
     });
   };
-  return /* @__PURE__ */ u(Ee, { elevation: 2, children: [
-    /* @__PURE__ */ e(We, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Ge, { children: n.budget_categories_title }) }),
-    /* @__PURE__ */ e(we, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(Z, { children: i.map((r) => /* @__PURE__ */ u(l.Fragment, { children: [
+  return /* @__PURE__ */ u(we, { elevation: 2, children: [
+    /* @__PURE__ */ e(He, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(je, { children: n.budget_categories_title }) }),
+    /* @__PURE__ */ e(Ie, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(Z, { children: i.map((r) => /* @__PURE__ */ u(l.Fragment, { children: [
       /* @__PURE__ */ e(Vt, { budget: r, onClick: a }),
-      /* @__PURE__ */ e(me, {})
+      /* @__PURE__ */ e(pe, {})
     ] }, r.guid)) }) })
   ] });
-}), Xt = I(() => {
-  const t = le(), { onEvent: n } = J(), { visibleAccounts: i } = Fe(), { budgets: s, common: a, recurring: r } = E(), { incomeCategories: o, spendCategories: c } = q(), { detailedBudgets: g, totalBudgeted: d } = w(), { incomeTotal: m } = de(), { setFilter: p } = ee(), [h, _] = l.useState(!1), [f, C] = l.useMemo(() => {
-    const y = c.reduce((D, N) => D + N.totalAmount, 0);
+}), Xt = w(() => {
+  const t = ue(), { onEvent: n } = J(), { visibleAccounts: i } = ze(), { budgets: s, common: a, recurring: r } = D(), { incomeCategories: o, spendCategories: c } = q(), { detailedBudgets: g, totalBudgeted: d } = E(), { incomeTotal: m } = me(), { setFilter: p } = ee(), [h, _] = l.useState(!1), [f, C] = l.useMemo(() => {
+    const y = c.reduce((R, O) => R + O.totalAmount, 0);
     let B = y / d;
     B > 1 && (B = 1);
-    let O = t.palette.success.main;
-    B > 0.8 && B < 1 ? O = t.palette.warning.main : B >= 1 && (O = t.palette.error.main);
-    const L = [
+    let I = t.palette.success.main;
+    B > 0.8 && B < 1 ? I = t.palette.warning.main : B >= 1 && (I = t.palette.error.main);
+    const N = [
       {
-        color: O,
+        color: I,
         percentage: `${B}`
       }
     ];
-    return [y, L];
+    return [y, N];
   }, [g, c]), [v, A] = l.useMemo(() => {
     const y = Math.abs(
-      o.reduce((L, D) => L + D.totalAmount, 0)
+      o.reduce((N, R) => N + R.totalAmount, 0)
     );
     let B = y / m;
     B > 1 && (B = 1);
-    const O = [
+    const I = [
       {
         color: t.palette.secondary.main,
         percentage: `${B}`
       }
     ];
-    return [y, O];
+    return [y, I];
   }, [o, m]), b = () => {
     p({
       accounts: i.map((y) => y.guid),
@@ -962,13 +962,13 @@ const $t = ({
       }
     }), _(!0), n(P.BUDGETS_CLICK_EDIT_INCOME);
   };
-  return /* @__PURE__ */ u(Ee, { elevation: 2, sx: { overflow: "visible" }, children: [
-    /* @__PURE__ */ e(We, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Ge, { children: s.overview_title }) }),
-    /* @__PURE__ */ e(we, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ u(x, { gap: 24, children: [
+  return /* @__PURE__ */ u(we, { elevation: 2, sx: { overflow: "visible" }, children: [
+    /* @__PURE__ */ e(He, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(je, { children: s.overview_title }) }),
+    /* @__PURE__ */ e(Ie, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ u(x, { gap: 24, children: [
       /* @__PURE__ */ u(x, { gap: 8, children: [
         /* @__PURE__ */ e(S, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
-        /* @__PURE__ */ e(xe, { data: C, height: 16 }),
-        /* @__PURE__ */ e(S, { variant: "Small", children: R(
+        /* @__PURE__ */ e(Ae, { data: C, height: 16 }),
+        /* @__PURE__ */ e(S, { variant: "Small", children: M(
           s.spending_description,
           T(f, "0,0"),
           T(d, "0,0")
@@ -983,12 +983,12 @@ const $t = ({
               "aria-label": r.manage_income,
               onClick: b,
               sx: { p: 0 },
-              children: /* @__PURE__ */ e(j, { color: "primary", name: "edit" })
+              children: /* @__PURE__ */ e(G, { color: "primary", name: "edit" })
             }
           )
         ] }),
-        /* @__PURE__ */ e(xe, { data: A, height: 16 }),
-        /* @__PURE__ */ e(S, { variant: "Small", children: R(
+        /* @__PURE__ */ e(Ae, { data: A, height: 16 }),
+        /* @__PURE__ */ e(S, { variant: "Small", children: M(
           s.income_description,
           T(v, "0,0"),
           T(m, "0,0")
@@ -1006,8 +1006,8 @@ const $t = ({
       }
     )
   ] });
-}), $e = 480, nn = I(({ onBackClick: t, sx: n }) => {
-  const i = le(), { onEvent: s } = J(), { visibleAccounts: a } = Fe(), { budgets: r, common: o } = E(), { isInitialized: c, selectedAccounts: g, setDisplayedDate: d } = Q(), {
+}), Pe = 480, nn = w(({ onBackClick: t, sx: n }) => {
+  const i = ue(), { onEvent: s } = J(), { visibleAccounts: a } = ze(), { budgets: r, common: o } = D(), { isInitialized: c, selectedAccounts: g, setDisplayedDate: d } = Q(), {
     alert: m,
     dateRange: p,
     isDataLoaded: h,
@@ -1016,46 +1016,46 @@ const $t = ({
     setAlert: C,
     setTheme: v,
     detailedBudgets: A
-  } = w(), { setDateRange: b } = de(), { loadDateRangeCategoryTotals: y } = q(), { isSmallTablet: B, isMobile: O, isSmallMobile: L } = pe(), D = B || O || L, [N, k] = l.useState(!1);
-  He({
+  } = E(), { setDateRange: b } = me(), { loadDateRangeCategoryTotals: y, loadMonthlyCategoryTotals: B } = q(), { isSmallTablet: I, isMobile: N, isSmallMobile: R } = fe(), O = I || N || R, [j, k] = l.useState(!1);
+  Ve({
     widgetName: "BubbleBudgetsWidget",
     isLoaded: h
   }), l.useEffect(() => {
     v(i), h || _().finally(() => {
       s(P.BUDGETS_VIEW);
     });
-  }, []), l.useEffect(() => (f({ start: ie(re()), end: Be(re()) }), () => {
-    f({ start: ie(re()), end: Be(re()) });
+  }, []), l.useEffect(() => (f({ start: le(ie()), end: xe(ie()) }), () => {
+    f({ start: le(ie()), end: xe(ie()) });
   }), [a]), l.useEffect(() => {
-    c && (d(p.start, p.end), y(g, p.start, p.end).finally(), b(p));
+    c && (d(p.start, p.end), y(g, p.start, p.end).finally(), B(g).finally(), b(p));
   }, [c, g, p]);
-  const G = (U) => {
-    f({ start: U[0] || /* @__PURE__ */ new Date(), end: U[1] || /* @__PURE__ */ new Date() });
-  }, ae = () => {
+  const ae = (se) => {
+    f({ start: se[0] || /* @__PURE__ */ new Date(), end: se[1] || /* @__PURE__ */ new Date() });
+  }, V = () => {
     s(P.BUDGETS_CLICK_FILTER);
-  }, F = () => {
+  }, re = () => {
     k(!0), s(P.BUDGETS_CLICK_ADD);
-  }, be = () => {
+  }, F = () => {
     k(!1);
-  }, z = () => {
+  }, K = () => {
     k(!1);
-  }, X = Qe(p.end, ie(/* @__PURE__ */ new Date()));
-  return !c || !h ? /* @__PURE__ */ e(he, {}) : /* @__PURE__ */ u(
+  }, X = Qe(p.end, le(/* @__PURE__ */ new Date()));
+  return !c || !h ? /* @__PURE__ */ e(be, {}) : /* @__PURE__ */ u(
     gt,
     {
       actions: [
         {
           iconName: "add",
           label: r.add_title,
-          onClick: F
+          onClick: re
         }
       ],
       calendarActions: {
-        onRangeChanged: G,
+        onRangeChanged: ae,
         shouldDisableNext: X,
         shouldDisablePicker: !0
       },
-      onAccountsFilterClick: ae,
+      onAccountsFilterClick: V,
       onBackClick: t,
       sx: n,
       title: r.budgets_title,
@@ -1063,19 +1063,19 @@ const $t = ({
         /* @__PURE__ */ u(
           x,
           {
-            direction: D ? "column" : "row",
+            direction: O ? "column" : "row",
             height: "100%",
             sx: { justifyContent: "center" },
             width: "100%",
             children: [
-              /* @__PURE__ */ e(x, { height: D ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
-                Ye,
+              /* @__PURE__ */ e(x, { height: O ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+                Ze,
                 {
-                  createBudgetOnClick: F,
-                  height: D ? 450 : 800,
+                  createBudgetOnClick: re,
+                  height: O ? 450 : 800,
                   isDraggable: !0,
                   shouldShowZeroState: A.length === 0,
-                  unavailableWidth: D ? 0 : $e
+                  unavailableWidth: O ? 0 : Pe
                 }
               ) }),
               A.length !== 0 && /* @__PURE__ */ u(
@@ -1084,7 +1084,7 @@ const $t = ({
                   gap: 24,
                   height: "100%",
                   sx: { mr: 24, mt: 48 },
-                  width: D ? "100%" : $e,
+                  width: O ? "100%" : Pe,
                   children: [
                     /* @__PURE__ */ e(Xt, {}),
                     /* @__PURE__ */ e(Kt, {})
@@ -1099,20 +1099,20 @@ const $t = ({
           $,
           {
             ariaLabelClose: o.close_aria,
-            isOpen: N,
+            isOpen: j,
             onClose: () => k(!1),
             title: r.add_new_title,
             children: /* @__PURE__ */ e(
-              Ve,
+              Ke,
               {
-                onAddBudget: be,
-                onRecalculateBudgets: z
+                onAddBudget: F,
+                onRecalculateBudgets: K
               }
             )
           }
         ),
         /* @__PURE__ */ e(
-          ve,
+          Te,
           {
             anchorOrigin: { vertical: "bottom", horizontal: "right" },
             autoHideDuration: 3500,
@@ -1121,7 +1121,7 @@ const $t = ({
             },
             open: !!m,
             children: /* @__PURE__ */ e(
-              Ae,
+              ve,
               {
                 closeText: "",
                 onClose: () => {
@@ -1143,7 +1143,7 @@ const $t = ({
   handleAddClick: i,
   shouldShowZeroState: s
 }) => {
-  const { availableHeight: a = 0 } = ue(), r = l.useRef(null);
+  const { availableHeight: a = 0 } = ge(), r = l.useRef(null);
   l.useEffect(() => {
     a > 0 && r.current === null && (r.current = a);
   }, [a]);
@@ -1153,7 +1153,7 @@ const $t = ({
   }, [a]);
   return /* @__PURE__ */ u(x, { sx: { height: "100%", justifyContent: "space-between" }, children: [
     /* @__PURE__ */ e(
-      Ye,
+      Ze,
       {
         createBudgetOnClick: i,
         height: o,
@@ -1161,13 +1161,13 @@ const $t = ({
         shouldShowZeroState: s
       }
     ),
-    !s && /* @__PURE__ */ u(V, { ml: 16, children: [
+    !s && /* @__PURE__ */ u(W, { ml: 16, children: [
       /* @__PURE__ */ e(S, { bold: !0, color: n < 0 ? "error.main" : "success.main", children: T(Math.abs(n), "0,0") }),
       /* @__PURE__ */ e(S, { children: n < 0 ? t.overspent_in_budgets : t.left_in_budgets })
     ] })
   ] });
 }, Zt = (t) => {
-  const n = le(), { onEvent: i } = J(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: r, setTheme: o } = w(), { budgets: c, common: g } = E(), { isInitialized: d, selectedAccounts: m } = Q(), { loadDateRangeCategoryTotals: p } = q(), h = pt(), [_, f] = l.useState(!1);
+  const n = ue(), { onEvent: i } = J(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: r, setTheme: o } = E(), { budgets: c, common: g } = D(), { isInitialized: d, selectedAccounts: m } = Q(), { loadDateRangeCategoryTotals: p } = q(), h = pt(), [_, f] = l.useState(!1);
   l.useEffect(() => {
     a || r().finally();
   }, []), l.useEffect(() => {
@@ -1175,8 +1175,8 @@ const $t = ({
   }, [n]), l.useEffect(() => {
     d && !a && p(
       m,
-      ie(/* @__PURE__ */ new Date()),
-      Be(/* @__PURE__ */ new Date())
+      le(/* @__PURE__ */ new Date()),
+      xe(/* @__PURE__ */ new Date())
     ).finally();
   }, [d, m, a]);
   const C = () => {
@@ -1184,10 +1184,10 @@ const $t = ({
   }, v = () => {
     f(!1);
   }, A = () => f(!1);
-  if (He({
+  if (Ve({
     widgetName: "BubbleBudgetsMiniWidget",
     isLoaded: a
-  }), !d || !a) return /* @__PURE__ */ e(he, {});
+  }), !d || !a) return /* @__PURE__ */ e(be, {});
   const b = s.length === 0;
   return /* @__PURE__ */ u(
     ht,
@@ -1215,7 +1215,7 @@ const $t = ({
             onClose: () => f(!1),
             title: c.add_new_title,
             children: /* @__PURE__ */ e(
-              Ve,
+              Ke,
               {
                 onAddBudget: v,
                 onRecalculateBudgets: A
@@ -1226,7 +1226,7 @@ const $t = ({
       ]
     }
   );
-}, an = I(Zt), se = {
+}, an = w(Zt), ce = {
   CANCEL_DELETE: "Cancel - Delete",
   END_SAVE: "End - Save",
   END_DELETE: "End - Delete",
@@ -1241,37 +1241,37 @@ const $t = ({
     setAlert: g,
     setSelectedBudget: d,
     updateBudget: m
-  } = w(), { budgets: p, common: h } = E(), { isCopyLoaded: _, selectedAccountGuids: f } = Q(), C = ze(), { setFilter: v } = ee(), [A, b] = l.useState(""), [y, B] = l.useState(null), [O, L] = l.useState(!1), D = l.useRef(!1);
+  } = E(), { budgets: p, common: h } = D(), { isCopyLoaded: _, selectedAccountGuids: f } = Q(), C = Ue(), { setFilter: v } = ee(), [A, b] = l.useState(""), [y, B] = l.useState(null), [I, N] = l.useState(!1), R = l.useRef(!1);
   if (l.useEffect(() => {
     !o || c || (b(`${o.amount}`), v({
       accounts: f,
       dateRange: a,
-      custom: ({ category_guid: Y, top_level_category_guid: _e }) => {
-        const { category_guid: Oe } = o;
-        return Y === Oe || _e === Oe;
+      custom: ({ category_guid: Y, top_level_category_guid: ye }) => {
+        const { category_guid: Me } = o;
+        return Y === Me || ye === Me;
       },
       showSplits: !0
-    }), L(!0));
-  }, [o]), !_) return /* @__PURE__ */ e(he, {});
+    }), N(!0));
+  }, [o]), !_) return /* @__PURE__ */ e(be, {});
   if (!o) return null;
-  const N = () => {
-    b(""), B(null), L(!1), setTimeout(() => {
+  const O = () => {
+    b(""), B(null), N(!1), setTimeout(() => {
       d(void 0), t?.();
     }, 250);
-  }, k = () => {
-    y === "delete" && n?.(se.CANCEL_DELETE, A), b(o.amount ? `${o.amount}` : ""), B(null);
-  }, G = async () => {
+  }, j = () => {
+    y === "delete" && n?.(ce.CANCEL_DELETE, A), b(o.amount ? `${o.amount}` : ""), B(null);
+  }, k = async () => {
     if (y === "edit") {
-      if (D.current) return;
-      D.current = !0, await m({
+      if (R.current) return;
+      R.current = !0, await m({
         ...o,
         amount: Number(A)
-      }), n?.(se.END_SAVE, A), g(
-        R(p.alert_budget_updated, o.category.name)
-      ), B(null), D.current = !1;
+      }), n?.(ce.END_SAVE, A), g(
+        M(p.alert_budget_updated, o.category.name)
+      ), B(null), R.current = !1;
     }
-    y === "delete" && (await r(o.guid), n?.(se.END_DELETE, A), N());
-  }, ae = o.transaction_total ?? 0, F = o.amount ?? 0, be = Math.max(0, F - ae), z = F > 0 ? Math.min(100, ae / F * 100) : 0, X = {
+    y === "delete" && (await r(o.guid), n?.(ce.END_DELETE, A), O());
+  }, ae = o.transaction_total ?? 0, V = o.amount ?? 0, re = Math.max(0, V - ae), F = V > 0 ? Math.min(100, ae / V * 100) : 0, K = {
     off: {
       iconColor: "error"
     },
@@ -1282,9 +1282,9 @@ const $t = ({
       iconColor: "warning"
     }
   };
-  let U = X.on;
-  z >= 100 ? U = X.off : z >= 50 && (U = X.near);
-  const { iconColor: qe } = U, Ie = (Y, _e) => R(Y, /* @__PURE__ */ e("b", { children: _e }));
+  let X = K.on;
+  F >= 100 ? X = K.off : F >= 50 && (X = K.near);
+  const { iconColor: se } = X, Oe = (Y, ye) => M(Y, /* @__PURE__ */ e("b", { children: ye }));
   return /* @__PURE__ */ u(l.Fragment, { children: [
     /* @__PURE__ */ u(
       $,
@@ -1294,14 +1294,14 @@ const $t = ({
           px: 24,
           py: 16
         },
-        isOpen: O,
-        onClose: N,
+        isOpen: I,
+        onClose: O,
         onPrimaryAction: () => B(
           "edit"
           /* EDIT */
         ),
         onSecondaryAction: () => {
-          n?.(se.START_DELETE, A), B(
+          n?.(ce.START_DELETE, A), B(
             "delete"
             /* DELETE */
           );
@@ -1314,10 +1314,10 @@ const $t = ({
             pr: 24
           }
         },
-        title: R(p.details_type_title, o.category.name),
+        title: M(p.details_type_title, o.category.name),
         children: [
           /* @__PURE__ */ u(
-            V,
+            W,
             {
               sx: {
                 bgcolor: "background.paper",
@@ -1338,8 +1338,8 @@ const $t = ({
                       px: 24
                     },
                     children: [
-                      /* @__PURE__ */ e(ye, { bold: !0, variant: "subtitle1", children: yt(o.start_date) }),
-                      i && /* @__PURE__ */ e(Te, { endIcon: /* @__PURE__ */ e(ft, {}), onClick: i, sx: { height: 28 }, children: /* @__PURE__ */ e(S, { bold: !0, variant: "body2", children: "Spending History" }) })
+                      /* @__PURE__ */ e(Ce, { bold: !0, variant: "subtitle1", children: yt(o.start_date) }),
+                      i && /* @__PURE__ */ e(De, { endIcon: /* @__PURE__ */ e(ft, {}), onClick: i, sx: { height: 28 }, children: /* @__PURE__ */ e(S, { bold: !0, variant: "body2", children: "Spending History" }) })
                     ]
                   }
                 ),
@@ -1347,32 +1347,32 @@ const $t = ({
                   bt,
                   {
                     amount: /* @__PURE__ */ u(x, { sx: { alignItems: "baseline", flexDirection: "row", gap: 4 }, children: [
-                      /* @__PURE__ */ e(Pe, { children: T(o.transaction_total, "0,0.00") }),
-                      /* @__PURE__ */ e(ye, { color: "text.secondary", variant: "body2", children: "/" }),
-                      /* @__PURE__ */ e(ye, { color: "text.secondary", variant: "body2", children: T(o.amount, "0,0.00") })
+                      /* @__PURE__ */ e(Ge, { children: T(o.transaction_total, "0,0.00") }),
+                      /* @__PURE__ */ e(Ce, { color: "text.secondary", variant: "body2", children: "/" }),
+                      /* @__PURE__ */ e(Ce, { color: "text.secondary", variant: "body2", children: T(o.amount, "0,0.00") })
                     ] }),
-                    completeColor: `${qe}.main`,
+                    completeColor: `${se}.main`,
                     icon: /* @__PURE__ */ e(
-                      K,
+                      H,
                       {
                         categoryGuid: o.category.guid,
                         size: 44,
                         sx: {
-                          bgcolor: at(Me(o.category.guid, C), 0.15),
-                          border: `1px solid ${Me(o.category.guid, C)}`,
+                          bgcolor: at(Le(o.category.guid, C), 0.15),
+                          border: `1px solid ${Le(o.category.guid, C)}`,
                           color: "text.primary"
                         }
                       }
                     ),
-                    label: Ie(
+                    label: Oe(
                       p.spent_label,
                       Ct(new Date(o.start_date * 1e3), { month: "short" })
                     ),
-                    leftLabel: R(p.percent_spent, z.toFixed()),
-                    percentComplete: z,
-                    rightLabel: R(
+                    leftLabel: M(p.percent_spent, F.toFixed()),
+                    percentComplete: F,
+                    rightLabel: M(
                       p.balance_left,
-                      T(be, "0,0.00")
+                      T(re, "0,0.00")
                     ),
                     sx: {
                       pb: 24,
@@ -1384,15 +1384,15 @@ const $t = ({
               ]
             }
           ),
-          /* @__PURE__ */ e(De, {}),
+          /* @__PURE__ */ e(Ee, {}),
           s && /* @__PURE__ */ e(
-            ve,
+            Te,
             {
               anchorOrigin: { horizontal: "right", vertical: "bottom" },
               autoHideDuration: 3500,
               onClose: () => g(""),
               open: !!s,
-              children: /* @__PURE__ */ e(Ae, { closeText: "", onClose: () => g(""), severity: "success", variant: "filled", children: s })
+              children: /* @__PURE__ */ e(ve, { closeText: "", onClose: () => g(""), severity: "success", variant: "filled", children: s })
             }
           )
         ]
@@ -1402,14 +1402,14 @@ const $t = ({
       _t,
       {
         closeAriaLabel: h.close_aria,
-        content: Ie(
+        content: Oe(
           p[y === "edit" ? "edit_budget_content" : "delete_description"],
           o.category.name
         ),
         handleInputChange: (Y) => b(Y.toString()),
-        handleModalClose: k,
-        handlePrimaryAction: G,
-        handleSecondaryAction: k,
+        handleModalClose: j,
+        handlePrimaryAction: k,
+        handleSecondaryAction: j,
         inputLabel: y === "edit" ? p.details_edit_title : "",
         inputValue: A,
         isOpen: !0,
@@ -1421,7 +1421,7 @@ const $t = ({
       }
     )
   ] });
-}, rn = I(qt);
+}, rn = w(qt);
 export {
   an as BubbleBudgetsMiniWidget,
   nn as BubbleBudgetsWidget,